/* ══════════════════════════════════════════════════════════
   PRINTATU — Tokens

   Direção: técnico-editorial. O vocabulário da impressão FDM é o
   sistema visual: linha de camada, etiqueta de especificação,
   monoespaçada nos dados. Uma cor de sinal só.

   Antes existiam três cores de destaque (laranja, azul, teal) usadas
   sem regra, e 120 cores cruas espalhadas pelo CSS. Aqui tudo vem de
   uma escala, então trocar um valor troca o site inteiro.
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Superfícies ──
     Neutro puxado para o quente, na direção do laranja. Cinza neutro
     de fábrica lê como não escolhido. */
  --paper:      #FBFAF8;   /* fundo da página */
  --surface:    #FFFFFF;   /* cartão, campo, painel */
  --surface-2:  #F4F1EB;   /* área rebaixada, thumb, skeleton */
  --surface-3:  #EAE5DC;   /* borda de área rebaixada, divisor forte */

  /* ── Tinta ──
     Azul-preto, não preto puro: casa com o laranja e não vibra. */
  --ink:        #16191E;
  --ink-2:      #545C68;   /* texto secundário */
  --ink-3:      #858D98;   /* legenda, placeholder */
  --ink-rgb:    22 25 30;

  /* ── Sinal ──
     Uma cor. O 500 é o laranja da marca e serve para superfície grande
     e elemento decorativo. O 700 é o que carrega texto branco e passa
     em AA, então é ele que preenche botão e vira cor de link. */
  --accent-50:   #FFF4EE;
  --accent-100:  #FFE3D3;
  --accent-200:  #FFC5A5;
  --accent-300:  #FF9E6B;
  --accent-500:  #FF6B2B;
  --accent-600:  #E24E12;   /* superfície grande, nunca sob texto branco */
  --accent-700:  #B8430A;   /* preenchimento com texto branco, e cor de link */
  --accent-800:  #9C3808;   /* hover: mais escuro, não mais claro */
  --accent-900:  #6B2705;
  --accent:      var(--accent-700);
  --accent-rgb:  184 67 10;
  --brand-rgb:   255 107 43;

  /* ── Estado ──
     Semântica é separada do sinal: erro não é "laranja mais forte". */
  --ok:      #1A7F4B;
  --ok-bg:   #E8F5ED;
  --warn:    #9A6206;
  --warn-bg: #FDF3E0;
  --danger:  #B4231A;
  --danger-bg: #FCEBEA;

  /* ── Linhas ── */
  --line:        rgb(var(--ink-rgb) / .11);
  --line-strong: rgb(var(--ink-rgb) / .22);

  /* ── Tipografia ──
     Archivo é variável: um arquivo cobre 400 a 700 e tem eixo de
     largura, que é o que dá personalidade ao título sem precisar de
     uma condensada de academia. */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-md:   0.9375rem;
  --t-base: 1.0625rem;
  --t-lg:   1.1875rem;
  --t-xl:   1.375rem;
  --t-2xl:  clamp(1.5rem,  2.4vw, 1.875rem);
  --t-3xl:  clamp(2rem,    4vw,   2.875rem);
  --t-4xl:  clamp(2.5rem,  6.5vw, 4.25rem);

  --lh-tight: 1.06;
  --lh-snug:  1.28;
  --lh-body:  1.6;

  /* Etiqueta técnica: monoespaçada, caixa alta, espaçada. */
  --track-label: .13em;

  /* ── Espaço ── escala de 4, sem valores soltos ── */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-8:  32px;  --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;  --s-20: 80px;  --s-24: 96px;
  --s-32: 128px;

  --gutter: clamp(20px, 4vw, 72px);

  /* ── Largura ──
     Casca larga, texto estreito. São duas coisas diferentes e antes
     estavam confundidas num limite único de 1180px, que num monitor de
     32" ocupava menos da metade da tela e deixava o site parecendo uma
     tira no meio.
     --page  é a casca: grade, foto, tabela, cabeçalho. Usa a tela.
     --measure é o texto corrido: passa de ~75 caracteres por linha e o
     olho perde onde estava ao voltar. Esse limite não é estético. */
  --page:    min(92vw, 1920px);
  --measure: 68ch;

  /* ── Raio ──
     Pequeno de propósito. O raio de 16px em tudo era metade do motivo
     de o site parecer template. */
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;

  /* ── Elevação ── discreta, o contorno é que separa ── */
  --sh-1: 0 1px 2px rgb(var(--ink-rgb) / .05);
  --sh-2: 0 2px 6px rgb(var(--ink-rgb) / .06), 0 1px 2px rgb(var(--ink-rgb) / .04);
  --sh-3: 0 14px 34px rgb(var(--ink-rgb) / .10);
  --sh-accent: 0 4px 14px rgb(var(--accent-rgb) / .28);

  /* ── Movimento ── estado, não acrobacia ── */
  --ease: cubic-bezier(.2, .6, .3, 1);
  --dur-1: .14s;
  --dur-2: .22s;

  /* ── Motivo de camada ──
     A linha de impressão FDM, usada como divisor e como textura.
     É o único ornamento do sistema, e diz o que a empresa faz. */
  --layers: repeating-linear-gradient(
    to bottom,
    var(--line) 0 1px,
    transparent 1px 4px
  );

  /* ── Compatibilidade ──
     Os nomes antigos continuam existindo e apontam para a escala nova,
     então as ~500 regras que já usavam var(--orange) e var(--border)
     mudam de aparência sem precisar ser reescritas uma a uma. */
  --orange: var(--accent);
  --blue:   var(--ink-2);
  --teal:   var(--ok);
  --dark:   var(--paper);
  --dark2:  var(--surface-2);
  --dark3:  var(--surface-2);
  --card:   var(--surface);
  --text:   var(--ink);
  --muted:  var(--ink-2);
  --border: var(--line);
  --radius: var(--r-md);
}