/* ==========================================================================
   tokens.css — as decisões que não se discutem em nenhum outro arquivo
   Linguagem: "duas cores no papel". Impressão offset de 2 tintas sobre
   papel barato. Ver DESIGN.md.
   ========================================================================== */

/* --- Fontes ---------------------------------------------------------------
   Todas auto-hospedadas e subsetadas. Archivo carrega variável (wght 400..700,
   wdth 75..125): um arquivo só cobre corpo, títulos longos e os expandidos.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

/* Marca e títulos de 2 a 4 palavras. Só maiúsculas, dígitos e acentos PT-BR
   estão no arquivo — escrever minúscula aqui cai no fallback e aparece. */
@font-face {
  font-family: 'Microgramma';
  src: url('../fonts/microgramma-ext-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Exclusivamente números: o 70333, estatísticas e índices de lista.
   O arquivo tem só 0-9 , . / % — 3kb. */
@font-face {
  font-family: 'Benzin';
  src: url('../fonts/benzin-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- As três cores da campanha ---------------------------------------- */
  --papel: #fffdf9;   /* oklch(99.3% 0.008 85)  — o fundo de tudo */
  --tinta: #182c4d;   /* oklch(28.5% 0.062 264) — tipografia, blocos, duotone */
  --laranja: #ff7011; /* oklch(70.5% 0.196 45)  — fios, cruzes, barras. NUNCA texto sobre papel */

  /* Derivadas. Sempre com matiz da marca dentro, nunca cinza puro. */
  --tinta-80: color-mix(in oklch, var(--tinta) 80%, var(--papel));
  --tinta-55: color-mix(in oklch, var(--tinta) 55%, var(--papel));
  --tinta-22: color-mix(in oklch, var(--tinta) 22%, var(--papel));
  --papel-75: color-mix(in oklch, var(--papel) 75%, var(--tinta));
  --papel-45: color-mix(in oklch, var(--papel) 45%, var(--tinta));

  /* Cor de fundo da seção corrente. Serve para elementos que precisam de uma
     chapa sólida por cima de uma retícula (rótulos, por exemplo) sem saber em
     que tipo de seção estão. Blocos de tinta cheia redefinem para --tinta. */
  --fundo-secao: var(--papel);

  /* --- Tipografia -------------------------------------------------------- */
  --ff-marca: 'Microgramma', 'Arial Black', 'Helvetica Neue', sans-serif;
  --ff-numero: 'Benzin', 'Archivo', 'Helvetica Neue', sans-serif;
  --ff-texto: 'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-display: clamp(2.75rem, 12vw, 8rem);        /* Microgramma */
  --fs-numero: clamp(4rem, 22vw, 12rem);           /* Benzin */
  --fs-h1: clamp(2rem, 7vw, 4rem);                 /* Archivo expandida 700 */
  --fs-h2: clamp(1.5rem, 5vw, 2.5rem);
  --fs-h3: clamp(1.1875rem, 3.4vw, 1.5rem);
  --fs-lead: clamp(1.1875rem, 4.6vw, 1.5rem);      /* linha de apoio do hero */
  --fs-body: clamp(1.0625rem, 4vw, 1.1875rem);     /* 17→19px. NÃO reduzir. */
  --fs-eyebrow: 0.75rem;
  --fs-meta: 0.875rem;

  --lh-display: 0.92;
  --lh-titulo: 1.06;
  --lh-body: 1.6;

  /* --- Espaço ------------------------------------------------------------ */
  --pad-pagina: clamp(1.25rem, 5vw, 4rem);
  /* Reduzido de 10rem: com 160px em cima e embaixo o desktop abria 320px entre
     seções e a página lia como post arejado em vez de material impresso. */
  --gap-secao: clamp(3.25rem, 11vw, 7.5rem);
  --gap-bloco: clamp(2rem, 7vw, 4rem);
  --medida: 65ch;                                   /* teto de linha de texto corrido */

  /* --- Traço ------------------------------------------------------------- */
  --fio: 3px;              /* fio laranja padrão, sob eyebrow e sob número */
  --hairline: 1.5px;       /* separador navy */
  --barra-btn: 4px;        /* barra laranja na base do botão */

  /* --- Motion ------------------------------------------------------------
     Assinatura: tinta entrando no papel. Wipe de clip-path, não fade.
     ---------------------------------------------------------------------- */
  --ease-tinta: cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out */
  --dur-wipe: 0.9s;
  --dur-curta: 0.35s;

  /* Folga da máscara de revelação. Benzin e Microgramma são compostas com
     line-height abaixo de 1 (0,8 no 70333, 0,92 no display), então a mancha do
     glifo sobe acima da caixa do elemento: 0,092em no Benzin a 0,8 e 0,122em na
     Microgramma a 0,92, medidos no navegador. Um `clip-path: inset(0)` fecha
     exatamente na caixa e decepa o topo dos números e dos títulos — era o
     "corte em cima" que parecia defeito de fonte. A máscara passa a fechar
     fora da caixa nos três lados que não são o lado do wipe. A borda esquerda
     continua em 0: é de onde a tinta entra.

     Em porcentagem, não em em: o GSAP interpola o `inset()` número a número e
     não sabe ir de `100%` a `-0.35em`. O pior caso medido é a Microgramma a
     0,92 de entrelinha, que estoura 13,3% da altura da caixa; 25% cobre com
     folga e, como o estado final é "tudo visível", folga a mais não custa
     nada. */
  --folga-mascara: 25%;

  /* --- Camadas ----------------------------------------------------------- */
  --z-progresso: 90;
  --z-nav: 80;
  --z-overlay: 100;
  --z-barra-cta: 70;
}