/* ═══════════════════════════════════════════════════════════
   TOKENS — fonte da verdade do design system

   Convenção de nomes: prefixo de categoria + papel semântico.
     --c-*        cor
     --type-*     família tipográfica
     --size-*     tamanho de fonte
     --track-*    letter-spacing
     --leading-*  line-height
     --space-*    espaçamento
     --page-*     métricas de página
     --radius-*   raio
     --motion-*   duração e easing
     --texture-*  textura

   Nenhum valor literal de cor, tamanho, espaço ou raio fora
   deste arquivo — sempre por var().
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Cor ───────────────────────────────────────────────── */

  /* superfícies */
  --c-surface:       #ffffff;
  --c-surface-2:     #f4f4f4;

  /* tinta — neutros quentes. Cinza frio (#888) destoa do acento lime;
     esta família o acompanha. */
  --c-ink:           #0d0d0d;
  --c-ink-2:         #5a5851;
  --c-ink-3:         #767369;

  /* acento — lime.
     ATENÇÃO: --c-accent NÃO serve como cor de texto (1,21:1 sobre branco).
     É cor de preenchimento, com --c-ink por cima (15,6:1).
     Para texto sobre fundo claro, usar --c-accent-ink. */
  --c-accent:        #c6fb50;
  --c-accent-hover:  #b9f434;
  --c-accent-soft:   rgba(198, 251, 80, .22);
  --c-accent-ink:    #4a7a0f;   /* escurecido até ~4,5:1 — este sim serve para texto */

  /* linhas — tinta com alpha, nunca cinza sólido.
     Assim a mesma variável funciona sobre --c-surface e sobre --c-surface-2. */
  --c-rule:          rgba(13, 13, 13, .10);
  --c-rule-soft:     rgba(13, 13, 13, .05);
  --c-rule-strong:   rgba(13, 13, 13, .22);

  /* ── Tipografia ────────────────────────────────────────── */

  --type-sans:       'Onest', system-ui, -apple-system, sans-serif;
  --type-serif:      'Instrument Serif', Georgia, serif;
  --type-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* escala fluida — nenhum tamanho fixo na tela.
     O CV é a exceção e usa pt, porque a viewport do PDF não é a da tela. */
  --size-display:    clamp(38px, 7.4vw, 92px);
  --size-1:          clamp(30px, 4.4vw, 56px);
  --size-2:          clamp(24px, 3vw, 40px);
  --size-3:          clamp(20px, 2vw, 27px);
  --size-lead:       clamp(17px, 1.35vw, 21px);
  --size-body:       clamp(15px, 1.25vw, 18px);
  --size-sm:         clamp(13px, 1vw, 14px);
  --size-mono:       clamp(11px, .85vw, 13px);

  /* tracking — negativo em toda a escala, e mais negativo quanto maior o
     texto: é o ajuste ótico que os tamanhos grandes exigem. */
  --track-display:   -.045em;
  --track-1:         -.035em;
  --track-2:         -.03em;
  --track-3:         -.02em;
  --track-body:      -.008em;
  /* exceção: label mono em caixa alta precisa de tracking POSITIVO,
     senão as maiúsculas colam. É o único valor positivo do sistema. */
  --track-label:     .09em;

  --leading-tight:   1.02;
  --leading-heading: 1.12;
  --leading-body:    1.6;

  /* ── Espaço ────────────────────────────────────────────── */

  --space-1:         6px;
  --space-2:         10px;
  --space-3:         14px;
  --space-4:         20px;
  --space-5:         28px;
  --space-6:         40px;
  --space-7:         56px;
  --space-8:         80px;

  --page-gutter:     clamp(20px, 5vw, 72px);   /* respiro lateral da página */
  --page-rhythm:     clamp(64px, 11vw, 160px); /* ritmo vertical entre seções */
  --page-max:        1320px;

  /* ── Forma ─────────────────────────────────────────────── */

  --radius-card:     20px;
  --radius-input:    12px;
  --radius-chip:     10px;
  --radius-pill:     999px;

  /* ── Movimento ─────────────────────────────────────────── */

  /* um easing só em todo o site — acelera rápido, chega suave */
  --motion-ease:     cubic-bezier(.2, .9, .2, 1);
  --motion-dur:      320ms;
  --motion-dur-fast: 180ms;

  /* ── Textura ───────────────────────────────────────────── */

  /* ruído SVG em data URI — zero requisição.
     stitchTiles faz o ladrilho de 160px repetir sem emenda. */
  --texture-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/></svg>");
}