/* ========================================================================
   TOKENS — direção LUZ E TERRITÓRIO
   GERADO por _qa/extrair-css.mjs a partir de _build/12_DIRECAO_VISUAL_V2.md.
   NÃO EDITE ESTE ARQUIVO À MÃO: edite o documento e rode o extrator de novo.
   ======================================================================== */

@layer tokens {
:root{
  /* ───────── COR — branco, azul e roxo laminar ─────────
     Os nomes (creme, mata, verde, lima) são herança da direção anterior e foram
     MANTIDOS de propósito: os fragmentos e a camada de compatibilidade apontam
     para eles. O que mudou foi o VALOR. Leia o comentário, não o nome. */
  --cor-creme:      #FFFFFF;  /* fundo do site — branco puro */
  --cor-creme-2:    #F1F4FD;  /* faixa alternada e cartão sobre branco — branco azulado */
  --cor-mata:       #0A1338;  /* AZUL PROFUNDO: fundo escuro, rodapé, véu da foto */
  --cor-mata-2:     #141F52;  /* superfície escura elevada */
  --cor-mata-3:     #050B22;  /* poço: vinheta e sombra */
  --cor-verde:      #1D4ED8;  /* AZUL institucional — texto pequeno sobre branco (6,3:1) */
  --cor-verde-vivo: #2563EB;  /* azul vivo — fundo, ícone e selo */
  --cor-verde-tinta:#1D4ED8;  /* azul de TEXTO PEQUENO sobre branco — 6,3:1 medido */
  --cor-verde-claro:#8FB6FF;  /* azul claro sobre escuro — 8,1:1 sobre --cor-mata */
  --cor-lima:       #A78BFA;  /* ROXO LAMINAR: a cor da AÇÃO e do realce. UM por tela */
  --cor-roxo:       #7C3AED;  /* roxo de TEXTO sobre branco — 5,7:1 medido */
  --cor-roxo-claro: #C4B5FD;  /* roxo de texto sobre escuro — 10,4:1 sobre --cor-mata */
  --cor-tinta:      #0B1230;  /* texto sobre branco — 17,4:1 */
  --cor-tinta-2:    #4A5578;  /* apoio sobre branco — 7,3:1 */
  --cor-claro:      #F2F5FF;  /* texto sobre escuro — 16,1:1 */
  --cor-claro-2:    #B9C4E8;  /* apoio sobre escuro — 9,0:1 */
  --cor-linha:      #DDE3F5;  /* filete sobre branco */
  --cor-linha-esc:  #26346F;  /* filete sobre escuro */
  --cor-coral:      #C6402A;  /* socorro e alerta — a ÚNICA cor quente do sistema */
  --cor-coral-claro:#FF8163;
  --cor-branco:     #FFFFFF;

  /* contraste medido pela fórmula WCAG (não estimado):
     tinta/branco 17,4:1 · tinta-2/branco 7,3:1 · claro/azul-profundo 16,1:1
     claro-2/azul-profundo 9,0:1 · azul/branco 6,3:1 · roxo/branco 5,7:1
     lima(roxo laminar)/azul-profundo 6,3:1 · tinta/lima 6,3:1 */

  /* ───────── TIPOGRAFIA ───────── */
  --fam: 'Figtree','Figtree Espelho',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fam-italico: 'Playfair Display','Playfair Espelho',Georgia,'Times New Roman',serif;

  --t-mega:   clamp(2.5rem, 1.5714rem + 3.8095vw, 5rem);      /* 40 → 80 px */
  --t-h1:     clamp(2.25rem, 1.3929rem + 3.5102vw, 4.25rem);  /* 36 →  68 px */
  --t-h2:     clamp(1.75rem, 1.2857rem + 1.9048vw, 2.875rem); /* 28 →  46 px */
  --t-h3:     clamp(1.375rem,1.1607rem + 0.8776vw, 1.875rem); /* 22 →  30 px */
  --t-olho:   clamp(1.125rem,1.0179rem + 0.4388vw, 1.375rem); /* 18 →  22 px */
  --t-corpo:  clamp(1.0625rem,1.0089rem + 0.2194vw,1.1875rem);/* 17 →  19 px */
  --t-nota:   1rem;                                            /* 16 px — piso */
  --t-rotulo: 1rem;                                            /* 16 px — piso da casa */

  --lh-mega: 1.02;  --lh-titulo: 1.12;  --lh-olho: 1.6;   --lh-corpo: 1.68;  --lh-nota: 1.6;
  --ls-mega: -0.035em; --ls-h1: -0.028em; --ls-h2: -0.02em; --ls-rotulo: .14em;
  --p-normal:400; --p-medio:500; --p-forte:600; --p-mega:800;

  /* ───────── ESPAÇO ───────── */
  --esp-1:.25rem; --esp-2:.5rem; --esp-3:.75rem; --esp-4:1rem; --esp-5:1.5rem;
  --esp-6:2rem;   --esp-7:3rem;  --esp-8:4rem;
  --esp-secao: clamp(4.5rem, 2.7857rem + 7.0204vw, 8.5rem);
  --esp-bloco: clamp(2rem, 1.4643rem + 2.1939vw, 3.25rem);
  --esp-margem: clamp(1.25rem, 0.5357rem + 2.9252vw, 2.9375rem);
  --max-pagina: 1200px;
  --max-texto: 62ch;
  --alvo: 48px;

  /* ───────── FORMA ───────── */
  --raio-p: 10px;  --raio: 18px;  --raio-g: 28px;  --raio-pill: 999px;
  --sombra-1: 0 2px 8px rgba(11,18,48,.06), 0 8px 24px rgba(11,18,48,.06);
  --sombra-2: 0 4px 14px rgba(11,18,48,.08), 0 18px 48px rgba(11,18,48,.10);
  --sombra-3: 0 10px 30px rgba(5,11,34,.22), 0 40px 90px rgba(5,11,34,.28);
  --filete: 1px;

  /* ───────── MOVIMENTO ───────── */
  --dur-rapida:.22s; --dur-media:.45s; --dur-lenta:.9s; --dur-cena:1.4s;
  --curva-saida: cubic-bezier(.22,1,.36,1);      /* a chegada: rápido e assenta */
  --curva-estado: cubic-bezier(.4,0,.2,1);
  --z-cena:0; --z-veu:1; --z-conteudo:2; --z-indice:20; --z-cabecalho:30; --z-saida:40;

  --foco-a: var(--cor-verde-tinta); --foco-b: var(--cor-creme);

  /* ───────── APELIDOS DO VOCABULÁRIO ANTERIOR ─────────
     As 21 páginas internas trazem estilos próprios escritos para os nomes da
     direção anterior. Sem estes apelidos, cada var() inválida vira herança — e
     o texto escuro cai sobre superfície escura (medido: 1,08:1). Um apelido
     custa uma linha; reescrever 21 páginas custa uma tarde e erros novos. */
  --cor-papel: var(--cor-creme);      --cor-papel-2: var(--cor-creme-2);
  --cor-papel-3: var(--cor-creme-2);  --cor-tinta-3: var(--cor-tinta-2);
  --cor-filete: var(--cor-linha);     --cor-borda-campo: var(--cor-linha);
  --cor-link: var(--cor-verde-tinta); --cor-link-hover: var(--cor-mata);
  --cor-link-visitado: var(--cor-verde-tinta);
  --cor-placa: var(--cor-mata);       --cor-placa-2: var(--cor-mata-2);
  --cor-placa-linha: var(--cor-linha-esc); --cor-fosso: var(--cor-mata-3);
  /* A gravura do Brasil lia estas duas da paleta ANTIGA (verde e âmbar) porque elas não
     existiam aqui — e o mapa aparecia verde numa página azul. Agora vêm do sistema:
     o contorno no azul claro do texto sobre escuro, e a unidade ACESA na cor da ação. */
  --cor-traco-placa: var(--cor-verde-claro); --cor-sinal-placa: var(--cor-lima);
  --cor-verde-atm: var(--cor-verde-claro);
  --cor-ambar: var(--cor-lima);       --cor-ambar-tinta: #7A4A00;
  --cor-coral-tinta: var(--cor-coral); --cor-coral-escuro: #9B2F1D;
  --cor-coral-sinal: var(--cor-coral-claro);
  --cor-fundo-ambar: #FBF0D6; --cor-fundo-verde: #E3EBFF;
  --cor-fundo-coral: #FBE9E4; --cor-fundo-neutro: var(--cor-creme-2);
  --cor-grade: transparent;   --mapa-vazio: rgba(143,182,255,.08);
  --fam-sans: var(--fam);     --fam-serif: var(--fam);  --fam-corpo: var(--fam);
  --t-manchete: var(--t-h1);  --t-numero: var(--t-h1);
  --medida: var(--max-texto); --medida-sans: 58ch;
  --lh-rotulo: 1.4;
  --ls-rotulo-longo: .1em;    --ls-h1: -0.028em; --ls-h2: -0.02em; --ls-h3: -0.01em;
  --ls-manchete: -0.03em;
  --p-manchete: var(--p-mega); --p-titulo: var(--p-mega); --p-rotulo: var(--p-forte);
  --p-corpo: var(--p-normal);
  --filete-fino: 1px; --filete-medio: 2px; --filete-grosso: 3px; --filete-barra: 4px;
  --raio-0: var(--raio-p);
  --esp-goteira: var(--esp-6); --esp-secao-p: var(--esp-bloco);
  --dur-estado: var(--dur-rapida); --dur-entrada: var(--dur-lenta); --dur-placa: var(--dur-cena);
  --curva-entrada: var(--curva-saida);
  --sombra-0: none; --sombra-1b: var(--sombra-1);
  --z-saida: 40; --z-cabecalho: 30;
  --alvo-p: 44px;
  --h-cabecalho: 93px;
}
}
