/* tokens.css — design system InfoTech JS · Etapa 1, 25/08/2026
   Fonte da verdade: prototipo-home.html (layout aprovado — portar, não redesenhar).
   Três divergências do SITE-SPEC §2 são intencionais; a spec descreve o CSS, não o contrário:
   1. existe um TERCEIRO gradiente (fundo da caixa "como foi feito");
   2. letter-spacing POSITIVO no logo (+.02em) e na faixa (+.08em) — display não é "sempre negativo";
   3. mono de 11,5 px no rótulo da pill e na tag do card — abaixo da escala 12–14 declarada. */

/* ---------- fontes — decisão de 25/08/2026, medida em woff2 subset latin ----------
   unbounded-700-900.woff2 ......... 35,7 KB  (variável, eixo instanciado em 700–900)
   instrument-sans-400-600.woff2 ... 28,3 KB  (variável, eixo instanciado em 400–600; mantém o 500 da nav)
   jetbrains-mono-400.woff2 ........ 20,7 KB  (estática)
   Total: 84,7 KB ≤ orçamento de 90 KB (SITE-SPEC §7).
   O corte por faces estáticas do prompt media 103,7 KB e estourava; a instanciação resolve.
   Perdas vs protótipo com o corte do mono 600: os números das pills rendem em 400,
   e o destaque do eyebrow fica só pela cor (sem negrito — nada de bold sintético).
   Recuperar o 600 custa +8,8 KB (variável 400–600 no lugar da 400) → 93,5 KB, 3,5 acima.
   Pipeline reprodutível no build: Google Fonts subset latin → fonttools varLib.instancer
   (wght=700:900 e wght=400:600). Preload: Unbounded e Instrument Sans (SITE-SPEC §2).
   size-adjust dos fallbacks: calibrar na Etapa 3, com a página real, para CLS zero. */

@font-face{
  font-family:'Unbounded';
  src:url('../fonts/unbounded-700-900.woff2') format('woff2');
  font-weight:700 900;
  font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('../fonts/instrument-sans-400-600.woff2') format('woff2');
  font-weight:400 600;
  font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}

:root{
  /* ---------- cor ---------- */
  --bg:#0B0A14;        /* fundo */
  --bg-2:#120F22;      /* fundo elevado (faixa) */
  --line:#23203A;      /* borda padrão */
  --line-2:#2F2B4A;    /* borda de controle (pill, toggle) */
  --ink:#F3EFFF;       /* texto — 17,4:1 sobre --bg */
  --mute:#9A93B3;      /* texto secundário — 6,7:1 sobre --bg */
  --primaria:#FF4500;   /* acento primário — 5,7:1: nunca em texto corrido */
  --cy:#19E6FF;        /* acento ciano — 12,9:1: links, foco, tags */
  --gold:#FFC93C;      /* acento dourado — 12,8:1: gema, destaque do eyebrow */

  /* superfícies translúcidas (valores do protótipo) */
  --glass-header:rgba(11,10,20,.72);   /* header sticky, com blur(10px) */
  --glass-pill:rgba(18,15,34,.6);      /* pill de métrica */
  --glass-card:rgba(18,15,34,.55);     /* card de prova */
  --code-bg:#07060E;                   /* fundo do <pre> */

  /* luzes de festival — dois brilhos radiais fixos no body */
  --glow-primaria:rgba(255,69,0,.16);
  --glow-cy:rgba(25,230,255,.12);

  /* onda em canvas — cores das 3 senoides; o canvas inteiro renderiza a 90% */
  --wave-primaria:rgba(255,69,0,.55);
  --wave-cy:rgba(25,230,255,.45);
  --wave-gold:rgba(255,201,60,.35);
  --wave-opacity:.9;

  /* ---------- gradientes — nestes três lugares e em mais nenhum ---------- */
  --grad-h1:linear-gradient(90deg,var(--primaria),var(--gold));                  /* palavra destacada do H1 — laranja e dourado são matizes vizinhas: conferir na tela */
  --grad-num:linear-gradient(120deg,var(--ink) 20%,var(--primaria) 60%,var(--gold)); /* números grandes */
  --grad-how:linear-gradient(180deg,rgba(18,15,34,.7),rgba(11,10,20,.4));   /* caixa "como foi feito" */

  /* ---------- tipografia ---------- */
  --display:'Unbounded',system-ui,-apple-system,sans-serif;      /* 700 e 900 */
  --body:'Instrument Sans',system-ui,-apple-system,sans-serif;   /* 400, 500 e 600 */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* só 400 */

  --fs-h1:clamp(2.35rem,9.2vw,8.6rem);     /* H1 · 900 · lh .92 · ls -.015em · caixa alta */
  --fs-h2:clamp(1.6rem,3.6vw,2.6rem);      /* H2 · 700 · lh 1.05 · ls -.01em */
  --fs-num:clamp(2.6rem,6.4vw,5.4rem);     /* números · 900 · lh 1 · ls -.02em · gradiente */
  --fs-big:clamp(1.6rem,5vw,3.4rem);       /* rodapé grande · 900 · lh 1 · caixa alta */
  --fs-k:clamp(1.4rem,3.6vw,2.4rem);       /* métrica da pill · mono 400 (era 600; ver fontes) */
  --fs-lede:clamp(1.05rem,1.6vw,1.25rem);  /* lede · 400 */

  /* ---------- raio ---------- */
  --r-focus:4px;    /* anel de foco */
  --r-pill:12px;    /* pill de métrica e <pre> */
  --r-card:16px;    /* card de prova */
  --r-how:20px;     /* caixa "como foi feito" */
  /* --r-toggle removido em 25/08: o toggle de som saiu do site */

  /* losango (gema): quadrado rotacionado 45° */
  --gem:10px;

  /* ---------- layout ---------- */
  --max:1180px;
  --pad-wrap:24px;
  --h-header:64px;
  --pad-section:96px;
  /* breakpoints (media query não lê var(); ficam como registro):
     720px — a nav do header colapsa, sobram o link marcado e o toggle;
     900px — a lista "o que faço" vira 2 colunas com gap 48 */

  /* ---------- movimento — tudo em transform/opacity, nada anima layout ---------- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-reveal:.7s;        /* reveal por rolagem: opacity + translateY(18px) */
  --t-hover:.35s;        /* card: translateY(-4px) + borda magenta */
  --t-band:32s;          /* faixa: translateX(-50%) linear infinito */
  --t-count-metric:.9s;  /* contagem das métricas do hero */
  --t-count-num:1.1s;    /* contagem dos números por rolagem */
  --v:0;                 /* vibração do título, 0–8, escrita pelo JS; decai 12%/frame */
}