/* tokens.css — as cores do Site Node num lugar só.
   Stark (agente de IA, coordenação técnica), 17/09/2026.

   COMO FUNCIONA
   O `base/build.py` lê este arquivo e injeta as declarações no `:root` da folha
   de estilo da base, no lugar do marcador TOKENS (a palavra entre dois pares de
   sublinhado, dentro de um comentário CSS, em `base/src/10_style.html`). Não
   existe `<link>` para cá nas páginas: a página continua sendo um arquivo só.

   ESTE ARQUIVO TAMBÉM É CSS VÁLIDO SOZINHO (conserto de 24/09/2026)
   Quem não passa pelo build (Office, widget, peças) pode carregar este arquivo
   direto, com `<link>`. Até 24/09 isso não funcionava: este comentário citava o
   marcador escrito com os símbolos de comentário, e o fim de comentário dele
   fechava ESTE comentário antes da hora. O resto do texto virava o seletor de uma
   regra inválida e o navegador descartava tudo: zero regras, nenhum erro no
   console, página sem cor. Por isso a regra: nunca escrever os símbolos de abrir
   ou de fechar comentário dentro de um comentário daqui, nem para citar o
   marcador. O `base/build.py` confere isso a cada build (`_tokens` lê o arquivo
   como o navegador lê) e PARA se ele deixar de ser CSS válido.

   O QUE ENTRA AQUI
   Cor (17/09), fonte e movimento (25/09: os 72 tokens da proposta da Iris,
   `base/PROPOSTA-tokens-fonte-movimento_v01.md`, aprovados pelo Duds). A escala de
   espaço continua no `:root` de `base/src/10_style.html`. O que depende de @media
   (os títulos no celular, o movimento reduzido) também fica lá: aqui só cabe um
   `:root`, uma declaração por linha — o build confere e para.

   POR QUE TEM HEX E TEM CANAL RGB DA MESMA COR
   Metade do sistema usa a cor cheia (`#0E0E0E`) e metade usa a mesma cor com
   opacidade (`rgba(14,14,14,.44)`). Em CSS não se tira o canal de um hex sem
   `color-mix()`, que muda o resultado. Então cada cor de base aparece duas vezes:
   o hex e os três canais. Quem usa opacidade escreve `rgba(var(--…-rgb),.44)`.
   Assim trocar uma cor de base continua sendo UMA edição, aqui.

   ESTA RODADA NÃO MUDA NADA NA TELA
   Os valores são exatamente os que a página já usava em 17/09/2026, 14h40
   (etiqueta `baseline-confea-v1`). A prova é automática:
   `python base/verify_build.py paginas/confea --resolve-tokens` desfaz os tokens
   e compara byte a byte com o arquivo de antes.

   A FAZER, FORA DESTA RODADA
   1. Preto Carbônico: o oficial do brand guide é `#0E0E00`; a página usa
      `#0E0E0E`. A Iris decidiu (DIRECAO-LUGARES.md §7.7) manter `#0E0E0E` no
      protótipo e alinhar na virada para produção — é trocar a linha do ink e o
      canal dele, aqui.
   2. Branco puro: RESOLVIDO em 17/09 (rodada 2). A Iris decidiu (DIRECAO-LUGARES,
      "Decisões da Iris" §4): as duas exceções — `--gt` da nav escura e da pílula
      escura — passam a `var(--tk-fog)` (#EDEDEB), e NÃO a Branco Porcelana
      (#F7F7F8), que é frio e seria o único ponto frio numa página de base quente
      (`--tk-paper:#F4F3EF`). `--tk-white` continua válido só como opacidade e
      como estêncil: borda, véu e as duas máscaras `linear-gradient(90deg,#000
      88%,transparent)`. Na virada para produção estes dois rótulos seguem a base
      clara da página e nunca voltam para `#fff`.
   3. Os arquivos `paginas/confea/site/src/20_sections.html` (69 literais) e
      `25_confea.html` (22) ainda têm cor escrita à mão. Eles viram base depois
      da V1 aprovada (AUDITORIA.md C.6) e migram para cá na mesma passada.
*/
:root{
  /* cores de base — cheias */
  --tk-ink:#0E0E0E;
  --tk-paper:#F4F3EF;
  --tk-card:#FBFAF7;
  --tk-night:#0B0B0C;
  --tk-fog:#EDEDEB;
  --tk-white:#fff;

  /* acento — um por tela */
  --tk-green:#0FB985;
  --tk-neblina:#7EF0C3;
  --tk-blue:#2E8AD2;
  --tk-red:#D8493F;

  /* cores de base — canais, para as variações de opacidade */
  --tk-ink-rgb:14,14,14;
  --tk-night-rgb:11,11,12;   /* o véu atrás da nav no estágio escuro */
  --tk-paper-rgb:244,243,239;
  --tk-fog-rgb:237,237,235;
  --tk-white-rgb:255,255,255;
  --tk-blue-rgb:46,138,210;
  --tk-neblina-rgb:126,240,195;
  --tk-shadow-rgb:0,0,0;

  /* cores de uso único, que não são da paleta */
  --tk-on-green:#04130d;
  --tk-media:#18181b;
  --tk-kbx:#F1E7D2;

  /* vidro: tinta própria, nem paper nem fog — não derivar da paleta */
  --tk-glass-light:rgba(230,230,230,.5);
  --tk-pill-light:rgba(236,236,234,.24);
  --tk-pill-dark:rgba(20,20,22,.22);
  --tk-panel-light:rgba(238,238,236,.86);
  --tk-panel-dark:rgba(18,18,20,.86);
  --tk-glow-dark:rgba(8,8,10,.9);

  /* FAMÍLIA — Inter, única (Duds, 30/09: a Node não paga fonte; OFL 1.1, servida pelo site em base/assets/fonts/; a Helvetica Neue fica de reserva) */
  --ff-base:Inter,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --ff-cjk:var(--ff-base),'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;

  /* PESO — sem bold, sem light no site */
  --fw-texto:400;
  --fw-destaque:500;

  /* TAMANHO — títulos: UMA escala, a da home V2.1 (decisão 2 do Duds, 25/09).
     Papel na página-case → degrau da home: hero e fecho = display, capítulo = stmt,
     cartela = sub. Os degraus case e destaque só a home usa hoje. No celular (até 900 px)
     os valores fixos entram em base/src/10_style.html, porque aqui não cabe media query. */
  --fs-titulo-hero:clamp(56px,7.4vw,112px);
  --fs-titulo-fecho:clamp(56px,7.4vw,112px);
  --fs-titulo-case:clamp(56px,9.6vw,144px);
  --fs-titulo-destaque:clamp(44px,6.4vw,96px);
  --fs-titulo-capitulo:clamp(34px,4.8vw,72px);
  --fs-titulo-cartela:clamp(20px,2.1vw,30px);
  --fs-titulo-node:clamp(1.5rem,1rem + 1.4vw,2.2rem);
  --fs-apoio:clamp(1.2rem,.98rem + .85vw,1.7rem);
  --fs-corpo:16px;
  --fs-nota:13px;
  --fs-legenda:12.5px;
  --fs-controle:12px;
  --fs-chip:11.5px;
  --fs-rotulo:11px;
  --fs-piso:11px;

  /* ENTRELINHA */
  --lh-titulo-hero:.92;
  --lh-titulo-case:.9;
  --lh-titulo-destaque:.96;
  --lh-titulo-capitulo:1.02;
  --lh-titulo-cartela:1.2;
  --lh-apoio:1.34;
  --lh-corpo:1.62;
  --lh-base:1.55;
  --lh-nota:1.45;
  --lh-legenda:1.4;
  --lh-uma-linha:1;

  /* TRACKING — negativo no título, positivo no rótulo em caixa alta */
  --tr-titulo-hero:-.04em;
  --tr-titulo-case:-.045em;
  --tr-titulo-destaque:-.035em;
  --tr-titulo-capitulo:-.025em;
  --tr-titulo-cartela:-.01em;
  --tr-titulo-node:-.015em;
  --tr-apoio:-.012em;
  --tr-rotulo:.12em;
  --tr-rotulo-barra:.1em;
  --tr-controle:.06em;
  --tr-titulo-arial:-.025em;

  /* MOVIMENTO — curvas CSS */
  --mv-curva-entrada:cubic-bezier(.16,1,.3,1);
  --mv-curva-troca:cubic-bezier(.76,0,.24,1);
  --mv-curva-painel:cubic-bezier(.2,0,.05,1);
  --mv-curva-estado:cubic-bezier(.22,1,.36,1);
  --mv-curva-deriva:cubic-bezier(.45,0,.55,1);

  /* MOVIMENTO — curvas GSAP, lidas por JS com getComputedStyle */
  --mv-gsap-entrada:expo.out;
  --mv-gsap-troca:expo.inOut;
  --mv-gsap-apoio:power2.out;
  --mv-gsap-vai-e-volta:power2.inOut;
  --mv-gsap-elastico:elastic.out(1,.38);

  /* MOVIMENTO — durações */
  --mv-dur-hover:.25s;
  --mv-dur-micro:.3s;
  --mv-dur-estado:.4s;
  --mv-dur-painel:.5s;
  --mv-dur-abre:.6s;
  --mv-dur-pulso:.9s;
  --mv-dur-entrada:1s;
  --mv-dur-linha:1.15s;
  --mv-dur-titulo:1.25s;
  --mv-dur-elastico:1.4s;
  --mv-dur-salto:1.5s;
  --mv-dur-cortina:230ms;
  --mv-dur-reduzido:.3s;

  /* MOVIMENTO — atrasos */
  --mv-atraso-alcas:.75s;
  --mv-atraso-highlight:350ms;

  /* MOVIMENTO — escalonamento (stagger, em segundos) */
  --mv-escala-digita:.018;
  --mv-escala-palavra:.028;
  --mv-escala-letra:.05;
  --mv-escala-bloco:.08;
  --mv-escala-lista:.12;

  /* MOVIMENTO — deslocamentos e scrub */
  --mv-desloc-reveal:34px;
  --mv-desloc-linha:115%;
  --mv-giro-linha:3deg;
  --mv-scrub-trilho:.6;
  --mv-scrub-folha:.3;

  /* MOVIMENTO — ambiente (os valores do campo e do pulso ficam em base/fiocampo.js, a fonte) */
  --mv-flutua:10s;
  --mv-ken-burns:13s;
}