/* =========================================================================== TOKENS — a única fonte de cor, tipo, espaço e movimento da landing page. POR QUE ESTE ARQUIVO EXISTE SOZINHO: a landing é estática e não passa por build, então não há Tailwind nem `@theme` para colapsar valor repetido. Sem um lugar único, "trocar o âmbar" viraria busca-e-substitui em cinco arquivos — que é exatamente como um site perde a identidade em duas semanas. REGRA DURA: todo `#` do site vive AQUI, dentro do primeiro `:root`. O resto do CSS só consome `var(--p-*)`. Se você precisou escrever um hex em `landing/css/site.css`, falta um token aqui. Os nomes dos papéis (`--p-bg`, `--p-ink`, `--p-signal`, `--p-lamp`...) e os da camada de marca (`--brand-primary`, `--brand-accent`...) são OS MESMOS de `src/app/globals.css` de propósito: landing e dashboard são o mesmo produto, e um dia alguém vai comparar os dois arquivos lado a lado. DUAS CORREÇÕES VÊM IMPORTADAS DO DASHBOARD, e valem aqui pelo mesmo motivo que valem lá: - `--p-focus` existe separado de `--p-lamp`. O âmbar de lâmpada mede 1.47–1.79:1 sobre as superfícies claras: como anel de foco ele é praticamente invisível para quem navega por teclado — o pior lugar possível para uma cor fraca. O anel usa o âmbar profundo (3.56:1 no pior par), que é o mesmo hue um degrau mais fundo. - `--p-faint` no escuro é `#909e97` e não `#82908a`: o valor antigo media 4.10:1 sobre `--p-elevated` e reprovava o piso AA de 4.5:1. =========================================================================== */ :root { /* ------------------------------------------------------------------------- 1. PALETA CRUA — os valores literais, e o único lugar deles. Vem inteira de `docs/identidade-visual.md` (direção "PLACAR"). Não é paleta nova: é a mesma do dashboard, transcrita. Inventar hue aqui seria quebrar a única coisa que a landing tem obrigação de provar — que é o mesmo produto. ------------------------------------------------------------------------- */ /* Claro: papel quase neutro, esverdeado o suficiente para não ser cinza de escritório. Nunca creme. */ --cru-papel-bg: #ecefe9; --cru-papel-sunken: #e1e6de; --cru-papel-surface: #ffffff; --cru-papel-surface-2: #f6f8f4; --cru-papel-elevated: #e6eae3; --cru-papel-border: #d3dad2; --cru-papel-border-strong: #b1bcaf; --cru-papel-ink: #14201b; --cru-papel-muted: #48554f; --cru-papel-faint: #586560; /* Escuro: grafite-esverdeado. Nunca preto puro — preto puro sob número mono vira terminal, e o produto é um placar, não um console. */ --cru-grafite-bg: #131a17; --cru-grafite-sunken: #0d1310; --cru-grafite-surface: #1a221e; --cru-grafite-surface-2: #202924; --cru-grafite-elevated: #263029; --cru-grafite-border: #2c362f; --cru-grafite-border-strong: #3d4840; --cru-grafite-ink: #e8ede9; --cru-grafite-muted: #a2b0a8; /* #909e97 e não #82908a: o valor antigo media 4.10:1 sobre `--p-elevated` e reprovava o piso AA que este arquivo promete. Correção importada do dashboard, onde o par que reprovava era o cabeçalho de tabela a 10px. */ --cru-grafite-faint: #909e97; /* --- CAMADA 0 · MARCA ------------------------------------------------- Quatro papéis de comunicação, não gosto: a primária carrega o que é positivo e é a cor da marca, a secundária o que é risco, a terciária o lado neutro (visitante, informação), e o acento é lâmpada, não tinta. O ORÇAMENTO DE COR NÃO CRESCE. Antes de acrescentar um hue aqui, a pergunta é qual dos quatro sai. Cada um tem par claro/escuro porque no escuro a cor tem que EMITIR, e verde-garrafa #1f5233 sobre grafite não emite nada. Não é outra paleta, é a mesma paleta do outro lado. */ --brand-primary-claro: #1f5233; /* verde-garrafa — positivo */ --brand-primary-escuro: #79cc92; --brand-primary-dim-claro: #dcebdf; --brand-primary-dim-escuro: #16281d; --brand-secondary-claro: #9e2b1c; /* tijolo — risco */ --brand-secondary-escuro: #ec7b66; --brand-secondary-dim-claro: #f6e1dd; --brand-secondary-dim-escuro: #2e1712; --brand-tertiary-claro: #3f5563; /* grafite-ardósia — neutro / visitante */ --brand-tertiary-escuro: #8fa8b8; --brand-support-claro: #7d5307; /* ocre — o território do Cartola */ --brand-support-escuro: #e3b45c; /* O ÚNICO acento de marca. Regra da casa: âmbar nunca é texto, é sempre lâmpada acesa — preenchimento com tinta escura em cima, nos dois temas. Por isso `--cru-sobre-lamp` é escuro nas duas pontas. */ --brand-accent-claro: #f6b73c; --brand-accent-escuro: #ffc24b; /* O mesmo âmbar em versão LEGÍVEL, e o único lugar do sistema em que ele pode encostar em texto e em anel de foco. O âmbar de lâmpada mede 1.47–1.79:1 sobre as superfícies claras — invisível como anel para quem navega por teclado. No escuro o âmbar já é legível (8.9:1) e o token aponta para o mesmo valor: existe para o contrato não ter buraco. */ --brand-accent-deep-claro: #a56a02; --brand-accent-deep-escuro: #ffc24b; --cru-sobre-lamp-claro: #14201b; --cru-sobre-lamp-escuro: #0d1310; --cru-sobre-acento-claro: #ffffff; --cru-sobre-acento-escuro: #0d1310; /* Fio interno de recorte de imagem. Neutro puro de propósito: tingido com a paleta viraria moldura colorida. Herdado do dashboard. */ --cru-fio-claro: rgb(0 0 0 / 0.09); --cru-fio-escuro: rgb(255 255 255 / 0.09); /* ------------------------------------------------------------------------- 2. PAPÉIS — o que o resto do CSS de fato consome. Claro é o padrão e vive no `:root` puro (igual ao dashboard): vale antes de qualquer media query e sem JS nenhum. ------------------------------------------------------------------------- */ color-scheme: light; --p-bg: var(--cru-papel-bg); --p-sunken: var(--cru-papel-sunken); --p-surface: var(--cru-papel-surface); --p-surface-2: var(--cru-papel-surface-2); --p-elevated: var(--cru-papel-elevated); --p-border: var(--cru-papel-border); --p-border-strong: var(--cru-papel-border-strong); --p-ink: var(--cru-papel-ink); --p-muted: var(--cru-papel-muted); --p-faint: var(--cru-papel-faint); --p-signal: var(--brand-primary-claro); --p-signal-dim: var(--brand-primary-dim-claro); --p-risk: var(--brand-secondary-claro); --p-risk-dim: var(--brand-secondary-dim-claro); --p-info: var(--brand-tertiary-claro); --p-cartola: var(--brand-support-claro); --p-lamp: var(--brand-accent-claro); --p-on-accent: var(--cru-sobre-acento-claro); --p-on-lamp: var(--cru-sobre-lamp-claro); --p-fio: var(--cru-fio-claro); --p-focus: var(--brand-accent-deep-claro); /* Metade secundária do wordmark. Tom, não apagamento: `SCOUT` é secundário por tonalidade, e não pode depender de `--p-faint`, que é o token de "menos importante do site" e muda de valor por motivo de tabela. */ --p-brand-2: var(--cru-papel-muted); /* ------------------------------------------------------------------------- 3. TIPOGRAFIA Três famílias, cada uma com um trabalho: Archivo Black é display, Archivo é corpo, IBM Plex Mono é NÚMERO. O algarismo tabular é a voz da marca, não um detalhe de tabela. ------------------------------------------------------------------------- */ --font-display: "Archivo Black", "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; /* Escala de 10 degraus, nomeada por PAPEL e não por tamanho — é o que impede o décimo primeiro degrau de nascer. Em `rem`, então acompanha o ajuste de tamanho de fonte do navegador. A raiz da landing é 100% (16px), NÃO os 112.5% do dashboard: ali a raiz grande serve a densidade de painel; aqui o texto é de leitura corrida e 18px de base empurra a primeira linha de conteúdo abaixo da dobra. Os px abaixo são com raiz 16. */ --text-tick: 0.5625rem; /* 9.0px — marca de escala, sufixo de unidade */ --text-label: 0.625rem; /* 10.0px — rótulo em CAIXA ALTA, eyebrow */ --text-meta: 0.6875rem; /* 11.0px — pastilha, selo, nota de card */ --text-cell: 0.8125rem; /* 13.0px — dado denso, célula */ --text-body: 0.9375rem; /* 15.0px — corpo */ --text-lead: 1.125rem; /* 18.0px — parágrafo de abertura */ --text-figure-sm: 1.5rem; /* 24.0px — cifra secundária */ --text-figure: 2.25rem; /* 36.0px — a cifra */ --text-title: 1.875rem; /* 30.0px — título de seção */ --text-display: 2.5rem; /* 40.0px — H1 */ --text-hero: 3.5rem; /* 56.0px — o H1 no desktop, um uso só */ /* Tracking: TRÊS valores, não oito. Num rótulo de 10px, 0.12em e 0.14em diferem em 0.2px por letra — diferença que existe no arquivo e não na tela. A regra óptica: quanto MAIOR o corpo, mais FECHADO o tracking. */ --track-caps: 0.14em; --track-tnum: -0.03em; --track-display: -0.045em; --track-display-sm: -0.025em; --leading-figure: 0.92; --leading-dense: 1.25; --leading-read: 1.55; /* ------------------------------------------------------------------------- 4. ESPAÇO E FORMA ------------------------------------------------------------------------- */ --gutter-page: 1.25rem; --measure-page: 72rem; /* a largura do painel */ --measure-read: 36rem; /* medida de parágrafo, ~72 caracteres */ /* Raio por PAPEL do elemento, não um valor global: card e tabela são peça impressa (quase reto); só o que de fato flutua ganha raio grande. */ --radius-card: 4px; --radius-control: 3px; --radius-float: 12px; /* Elevação segue a mesma lógica do raio — três degraus, os mesmos três papéis. Card NÃO flutua: `none` é escolha nomeada, não esquecimento. */ --shadow-card: none; --shadow-raise: 0 1px 2px rgb(0 0 0 / 0.08); --shadow-float: 0 1px 2px rgb(0 0 0 / 0.08), 0 12px 28px rgb(0 0 0 / 0.14); /* ------------------------------------------------------------------------- 5. MOVIMENTO — escala fixa de três degraus. Duração escolhida a olho por componente é o que faz uma interface parecer feita por várias mãos. `snap` é retorno de toque (o dedo já saiu; animar mais que isso é atraso percebido), `base` é hover e troca de estado, `enter` é o que entra em cena. NADA acima de 260ms. `--dur-reveal` é o único valor maior, e ele não é duração de UI: é a entrada de seção por rolagem, que acontece uma vez por seção e cuja leitura depende de ser perceptível. Ainda assim fica em 320ms. ------------------------------------------------------------------------- */ --dur-snap: 90ms; --dur-base: 160ms; --dur-enter: 260ms; --dur-reveal: 320ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* --------------------------------------------------------------------------- TEMA ESCURO — só REMAPEIA papel para a paleta crua. Nenhum hex novo. A landing segue a preferência do sistema e não oferece botão: marketing não é lugar de guardar estado de tema, e o dashboard (que é onde a pessoa passa tempo) já tem o seletor dele. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --p-bg: var(--cru-grafite-bg); --p-sunken: var(--cru-grafite-sunken); --p-surface: var(--cru-grafite-surface); --p-surface-2: var(--cru-grafite-surface-2); --p-elevated: var(--cru-grafite-elevated); --p-border: var(--cru-grafite-border); --p-border-strong: var(--cru-grafite-border-strong); --p-ink: var(--cru-grafite-ink); --p-muted: var(--cru-grafite-muted); --p-faint: var(--cru-grafite-faint); --p-signal: var(--brand-primary-escuro); --p-signal-dim: var(--brand-primary-dim-escuro); --p-risk: var(--brand-secondary-escuro); --p-risk-dim: var(--brand-secondary-dim-escuro); --p-info: var(--brand-tertiary-escuro); --p-cartola: var(--brand-support-escuro); --p-lamp: var(--brand-accent-escuro); --p-on-accent: var(--cru-sobre-acento-escuro); --p-on-lamp: var(--cru-sobre-lamp-escuro); --p-fio: var(--cru-fio-escuro); --p-focus: var(--brand-accent-deep-escuro); --p-brand-2: var(--cru-grafite-muted); /* Sombra quase não funciona no escuro (preto sobre preto): quem separa o flutuante ali é o fio, então a sombra encolhe em vez de crescer. */ --shadow-raise: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-float: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 28px rgb(0 0 0 / 0.45); } } /* --------------------------------------------------------------------------- `.inverso` — a FAIXA INVERTIDA, e o único recurso "de marketing" da paleta. POR QUE EXISTE: a landing precisa de mais expressão que o dashboard sem inventar cor. A saída é ritmo de claro/escuro entre seções — a faixa inverte, o âmbar acende mais forte contra ela, e nenhum hue novo entra. É o que faz a seção do selo de confiança e o rodapé pesarem sem gradiente. Ela inverte em RELAÇÃO AO TEMA: no claro vira grafite, no escuro vira papel. Assim a faixa contrasta com a página nos dois casos, em vez de desaparecer. `.escuro` É A IRMÃ QUE NÃO INVERTE — sempre grafite, nos dois temas. Existe por um motivo concreto e medido (08/set/2026): o herói tem uma foto de estádio À NOITE, tratada para ser escura, e o cabeçalho flutua sobre ela. Com `.inverso` ali, no tema escuro os dois viravam PAPEL: a foto noturna aparecia lavada atrás de um véu claro e o cabeçalho branco cortava a imagem. Faixa que carrega foto não pode inverter junto com o tema — ela é escura porque a FOTO é escura, não porque a página é clara. Regra prática: `.inverso` para faixa de ritmo (o selo, o rodapé); `.escuro` para faixa que tem imagem escura dentro. --------------------------------------------------------------------------- */ .inverso, .escuro { color-scheme: dark; --p-bg: var(--cru-grafite-bg); --p-sunken: var(--cru-grafite-sunken); --p-surface: var(--cru-grafite-surface); --p-surface-2: var(--cru-grafite-surface-2); --p-elevated: var(--cru-grafite-elevated); --p-border: var(--cru-grafite-border); --p-border-strong: var(--cru-grafite-border-strong); --p-ink: var(--cru-grafite-ink); --p-muted: var(--cru-grafite-muted); --p-faint: var(--cru-grafite-faint); --p-signal: var(--brand-primary-escuro); --p-signal-dim: var(--brand-primary-dim-escuro); --p-risk: var(--brand-secondary-escuro); --p-risk-dim: var(--brand-secondary-dim-escuro); --p-info: var(--brand-tertiary-escuro); --p-cartola: var(--brand-support-escuro); --p-lamp: var(--brand-accent-escuro); --p-on-accent: var(--cru-sobre-acento-escuro); --p-on-lamp: var(--cru-sobre-lamp-escuro); --p-fio: var(--cru-fio-escuro); --p-focus: var(--brand-accent-deep-escuro); --p-brand-2: var(--cru-grafite-muted); background: var(--p-bg); color: var(--p-ink); } @media (prefers-color-scheme: dark) { .inverso { color-scheme: light; --p-bg: var(--cru-papel-bg); --p-sunken: var(--cru-papel-sunken); --p-surface: var(--cru-papel-surface); --p-surface-2: var(--cru-papel-surface-2); --p-elevated: var(--cru-papel-elevated); --p-border: var(--cru-papel-border); --p-border-strong: var(--cru-papel-border-strong); --p-ink: var(--cru-papel-ink); --p-muted: var(--cru-papel-muted); --p-faint: var(--cru-papel-faint); --p-signal: var(--brand-primary-claro); --p-signal-dim: var(--brand-primary-dim-claro); --p-risk: var(--brand-secondary-claro); --p-risk-dim: var(--brand-secondary-dim-claro); --p-info: var(--brand-tertiary-claro); --p-cartola: var(--brand-support-claro); --p-lamp: var(--brand-accent-claro); --p-on-accent: var(--cru-sobre-acento-claro); --p-on-lamp: var(--cru-sobre-lamp-claro); --p-fio: var(--cru-fio-claro); --p-focus: var(--brand-accent-deep-claro); --p-brand-2: var(--cru-papel-muted); --shadow-raise: var(--shadow-raise); } }