/* ========================================================================== Hitmo Soluções Digitais — tokens (PONTE para o design system externo) -------------------------------------------------------------------------- A identidade vem do DS HITMO (assets/css/ds-hitmo.css, variáveis --hm-* e --bs-*). Este arquivo NÃO define cores próprias: a Camada 1 é a do DS e a Camada 2 abaixo aponta os papéis semânticos usados por base.css/site.css para as variáveis do DS. Ver agente/conhecimento/09-design-system-externo.md. Os papéis são declarados também em [data-bs-theme] para que um bloco claro (
) recalcule os valores a partir do DS. ========================================================================== */ /* ---------- CAMADA 1 — PRIMITIVOS ---------- Vêm do DS (--hm-brand-neon, --hm-brand-black, --hm-brand-white, --hm-brand-gray). */ /* ---------- TIPOGRAFIA, FORMA, MOVIMENTO E LAYOUT (valores do DS) ---------- */ :root { --hero-video-fundo: #0b0a1f; /* cor de base do vídeo do hero (aparece antes do poster carregar) */ /* v5 (pedido do cliente): Inter Tight nos títulos + Poppins no texto. A ponte troca a família sans do DS (--hm-font-sans) para que botões, formulários e corpo usem Poppins. */ --hm-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Inter Tight", "Poppins", system-ui, sans-serif; --font-body: var(--hm-font-sans); --font-mono: var(--hm-font-mono); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 600; --fw-black: 600; /* o DS não usa pesos acima de 600 */ --fw-heading: 600; --fs-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem); /* display-1 do DS */ --fs-h1: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); --fs-h2: clamp(1.875rem, 1.65rem + .8vw, 2.25rem); --fs-h3: clamp(1.5rem, 1.35rem + .5vw, 1.75rem); --fs-h4: clamp(1.25rem, 1.2rem + .2vw, 1.375rem); --fs-h5: 1.125rem; --fs-lead: 1.25rem; --fs-body: 1rem; --fs-small: .875rem; --fs-label: .75rem; --lh-tight: 1.05; --lh-heading: 1.17; --lh-body: 1.625; --tracking-display: -0.04em; --tracking-heading: -0.025em; --tracking-label: 0.08em; --radius-xs: var(--hm-radius-xs); /* 2px badges */ --radius-sm: var(--hm-radius-sm); /* 4px botões, inputs */ --radius-md: var(--hm-radius-md); /* 6px cards */ --radius-lg: var(--hm-radius-lg); /* 8px painéis, mídia */ --radius-xl: var(--hm-radius-lg); /* nada acima de 8px no DS */ --radius-pill: var(--hm-radius-pill); --radius-btn: var(--hm-radius-pill); /* v3: botões em pílula (estilo Framer, pedido do cliente) */ /* Sem sombras em repouso (DS). */ --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-brand: none; --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.2, .8, .2, 1); --dur-fast: 150ms; --dur: 200ms; --dur-slow: 400ms; --container-max: var(--hm-container-max); --nav-height: 88px; --section-y: clamp(4rem, 2rem + 6vw, 8rem); /* 64 → 128px, como .hm-section */ --section-y-sm: clamp(3rem, 2rem + 3vw, 4.5rem); --gap: var(--hm-grid-gutter); /* Assinatura: grid de engenharia + ficha técnica em mono (ver _projeto/direcao.md). */ --sig-cell: var(--hm-grid-cell); --sig-marker: 6px; } /* ---------- CAMADA 2 — PAPÉIS SEMÂNTICOS (apontam para o DS) ---------- */ :root, [data-bs-theme="dark"], [data-bs-theme="light"] { --bg-page: var(--hm-bg); --bg-soft: var(--hm-surface-1); --bg-tint: var(--hm-surface-2); --bg-card: var(--hm-surface-1); --bg-card-hover: var(--hm-surface-2); --bg-inverse: var(--hm-bg); --bg-brand: var(--hm-primary); --text-strong: var(--hm-text); --text-body: var(--hm-text-secondary); --text-muted: var(--hm-text-tertiary); --text-on-brand: var(--hm-on-primary); --text-on-inverse: var(--hm-text); --text-on-inverse-muted: var(--hm-text-secondary); --border-subtle: var(--hm-line); --border-faint: var(--hm-line-subtle); --border-strong: var(--hm-line-strong); --border-on-inverse: var(--hm-line); --nav-bg: color-mix(in srgb, var(--hm-bg) 85%, transparent); --nav-border: var(--hm-line-subtle); --accent: var(--hm-primary); --accent-hover: var(--hm-primary-hover); --accent-text: var(--hm-primary-ink); --accent-soft: var(--hm-primary-subtle); --accent-on-inverse: var(--hm-primary-ink); --focus-ring: var(--hm-focus-ring); /* Gradientes de texto e borda (v3) — derivados do DS, funcionam nos dois temas. */ --grad-metal: linear-gradient(180deg, var(--hm-text) 35%, color-mix(in srgb, var(--hm-text) 58%, var(--hm-bg)) 100%); --grad-verde: linear-gradient(180deg, color-mix(in srgb, var(--hm-primary-ink) 30%, var(--hm-text)) 0%, var(--hm-primary-ink) 75%); --grad-borda: linear-gradient(90deg, var(--hm-primary-ink), var(--hm-primary-hover), var(--hm-primary-active), var(--hm-primary-ink)); --grad-hero: linear-gradient(45deg, color-mix(in srgb, var(--hm-primary) 35%, var(--hm-bg)), var(--hm-primary), var(--hm-primary-hover), color-mix(in srgb, var(--hm-primary-active) 60%, var(--hm-bg))); --linha-fina: color-mix(in srgb, var(--hm-text) 7%, transparent); --brilho-btn: color-mix(in srgb, var(--hm-primary) 22%, transparent); --glass: var(--hm-glass); --glass-line: var(--hm-glass-line); /* Status (sempre com ícone + texto) */ --status-success: var(--hm-success); --status-warning: var(--hm-warning); --status-danger: var(--hm-danger); --status-info: var(--hm-info); --status-verified: var(--hm-info); /* WhatsApp segue o primário do DS (neon + texto preto, 17,2:1) — a marca manda. */ --whatsapp: var(--hm-primary); --whatsapp-hover: var(--hm-primary-hover); --text-on-whatsapp: var(--hm-on-primary); /* Paleta de ícones: o DS não usa ícones coloridos — todos em contorno, mesma superfície. */ --icon-1-bg: var(--hm-surface-2); --icon-1-fg: var(--hm-primary-ink); --icon-2-bg: var(--hm-surface-2); --icon-2-fg: var(--hm-text); --icon-3-bg: var(--hm-surface-2); --icon-3-fg: var(--hm-text); --icon-4-bg: var(--hm-surface-2); --icon-4-fg: var(--hm-text); --icon-5-bg: var(--hm-surface-2); --icon-5-fg: var(--hm-text); } /* ---------- v9: paleta viva de ícones e badges (estilo "pastel + ícone vivo") ---------- Cada categoria tem uma cor viva; o fundo é a mesma cor bem diluída. No escuro o fundo diluído vai para o preto e o ícone clareia (percentuais por tema, abaixo). */ :root { --viva-verde: #65A30D; --viva-azul: #2563EB; --viva-roxo: #7C3AED; --viva-rosa: #E11D74; --viva-laranja: #EA7317; --viva-ciano: #0E9AA7; --viva-cinza: #64748B; } :root, [data-bs-theme="dark"] { --viva-fundo: 22%; --viva-tinta: 72%; } [data-bs-theme="light"] { --viva-fundo: 12%; --viva-tinta: 100%; } /* ---------- v7: notificação e sombra de card (iguais nos dois temas) ---------- */ :root { --notificacao: #DC2626; /* badge do WhatsApp (branco sobre ele: 4,8:1) */ --texto-notificacao: #FFFFFF; --sombra-card: 0 18px 40px -22px rgba(20, 18, 43, .45); --sombra-card-hover: 0 26px 50px -24px rgba(20, 18, 43, .5); } /* ---------- VERDE NO TEMA CLARO (v5, pedido do cliente) ---------- O DS usa #467000 como verde de texto no claro. O cliente pediu #75bb00, que mede 2,37:1 no branco (reprova AA). Solução: #75bb00 nos elementos decorativos (--verde-destaque) e #4f8000 (4,75:1, mais vivo que o original) no texto. */ :root, [data-bs-theme="dark"] { --verde-destaque: var(--hm-primary); } [data-bs-theme="light"] { /* v6: o cliente escolheu #71b307 também para o texto verde (2,58:1 no branco — abaixo do AA; decisão registrada). */ --hm-primary-ink: #71b307; --hm-focus-ring: #71b307; --hm-success: #71b307; --verde-destaque: #75bb00; /* Seções claras (v6): fundo cinza-claro, cards brancos, borda fina e cantos arredondados. */ --bg-secao-clara: #F5F5F5; --card-claro: #FFFFFF; --bg-secao-branca: #FFFFFF; /* seções com logos coloridas de clientes (home, sobre, clientes) */ --borda-clara: rgba(0, 0, 0, .08); --raio-card: 16px; } /* Ponte com o Bootstrap: o ds-hitmo.css já reescreve todas as --bs-* nos dois temas. */