/* ===================================================================
   Bera · Brand Guide Web · tokens.css
   Sistema de design: variáveis canônicas. Carregado no <head>.
   Tema dark é default; [data-theme="light"] inverte.
   v2.2 (2026-09-06): o teal vira o apoio (coringa) dos dois temas.
   Papéis em --accent/--support: dourado lidera no escuro, terracota
   profunda lidera no claro, teal apoia nos dois (links, estados,
   positivo, segunda série, grade). Terracota deixa de ser apoio no
   escuro; dourado deixa de ser texto no claro (derivados aposentados).
   v2.1 (2026-09-05): terracota no lugar do violeta; Versos no lugar da Inter.
   Ver brand-spec.md e BRAND-HISTORY.md.
   =================================================================== */

:root {
  /* === Surface · dark (default) ============================ */
  --ink: #0A0A0A;
  --paper: #FAFAFA;
  --surface-1: #121212;
  --surface-2: #1A1A1A;
  --rule: #1F1F1F;
  --rule-2: #2A2A2A;

  /* === Text === */
  --paper-strong: #FAFAFA;
  --muted: #8B8B85;
  --muted-2: #808079;     /* era #6B6B68 (3,70:1, reprovava AA); 4,98:1 sobre Ink (cão-guia, 2026-09-03) */

  /* === Paleta de acento (v2.2) === */
  --gold: #E5B748;
  --gold-deep: #886613;   /* aposentado na v2.2 (era texto dourado sobre claro); mantido só para materiais antigos */
  --gold-ui: #AE8219;     /* aposentado na v2.2 (era UI dourada sobre claro) */
  --terra: #D97757;       /* terracota base (filete decorativo no escuro) */
  --terra-soft: #E8977C;  /* terceira série de gráfico no escuro: 8,63:1 */
  --terra-deep: #B4441F;  /* referência no claro: 5,31:1 sobre Paper */
  --terra-ui: #C1502B;    /* UI/texto grande no claro: 4,52:1 */
  --teal: #28BDB1;        /* apoio (coringa) no escuro: 8,49:1 sobre Ink, 8,03:1 sobre superfície */
  --teal-deep: #126861;   /* apoio (coringa) no claro: 6,33:1 sobre Paper, 5,79:1 sobre Paper Warm */

  /* === Papéis por tema (escuro: dourado referência, teal apoio) === */
  --accent: var(--gold);
  --accent-text: var(--gold);          /* 10,56:1 sobre Ink (AAA) */
  --accent-contrast: var(--ink);       /* texto sobre superfície accent */
  --accent-tint: rgba(229, 183, 72, 0.10);
  --accent-tint-strong: rgba(229, 183, 72, 0.16);
  --support: var(--teal);
  --support-text: var(--teal);         /* 8,49:1 sobre Ink (AAA) */
  --support-tint: rgba(40, 189, 177, 0.10);

  /* === Semantic (v2.2: o positivo é o próprio teal) === */
  --good: var(--teal);
  --bad:  #F87171;

  /* === Auto-paired (theme-aware) === */
  --bg: var(--ink);
  --fg: var(--paper);
  --whisper: #161616;
  --sigil-color: var(--paper);

  /* === Glow do sparkle (drop-shadow por tema) === */
  --glow: rgba(229, 183, 72, 0.65);
  --glow-soft: rgba(229, 183, 72, 0.30);

  /* === Type stack (v2.1: Versos em display e corpo, JetBrains Mono na notação) === */
  --font-sans: 'Versos', -apple-system, system-ui, sans-serif;
  --font-display: 'Versos', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --specimen-wght: 400;   /* slider do specimen na cena Tipografia */

  /* === Pesos (decisão por clique, 2026-09-04) === */
  --weight-wordmark: 700;
  --weight-display: 600;
  --weight-title: 600;
  --weight-body: 400;
  --weight-data: 500;

  /* === Type scale (px) === */
  --fs-eyebrow: 13px;
  --fs-label: 11px;
  --fs-mono: 12px;
  --fs-body: 16px;
  --fs-body-l: 19px;
  --fs-card: clamp(20px, 1.6vw, 22px);
  --fs-section: clamp(28px, 3.2vw, 40px);
  --fs-display: clamp(40px, 6.4vw, 80px);

  /* === Tracking (a Versos é mais larga que a Inter: menos negativo que na v2.0) === */
  --tracking-display: -0.02em;
  --tracking-section: -0.02em;
  --tracking-card: -0.01em;
  --tracking-eyebrow: 0.18em;
  --tracking-label: 0.12em;
  --tracking-chrome: 0.10em;

  /* === Spacing scale (4-base) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* === Containers === */
  --container-narrow: 720px;
  --container-text: 880px;
  --container-wide: 1200px;
  --container-max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);

  /* === Motion (canon · herdado da home) === */
  --transition: 600ms cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 200ms cubic-bezier(0.65, 0, 0.35, 1);
  --transition-spring: 700ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Section rhythm === */
  --section-pad: clamp(96px, 12vw, 192px);
  --block-pad: clamp(48px, 6vw, 96px);

  /* === Atelier Técnico · grid overlay + status bar ===
     Grid segue o papel de apoio do tema (estrutura): teal nos dois temas. */
  --grid: rgba(40, 189, 177, 0.05);
  --grid-strong: rgba(40, 189, 177, 0.12);
  --status-bar-h: 32px;
  --status-bar-bg: rgba(10, 10, 10, 0.95);

  /* === Z layers === */
  --z-base: 1;
  --z-overlay: 50;
  --z-nav: 100;
  --z-toast: 200;
}

/* === Light theme override ============================== */
:root[data-theme="light"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --whisper: #EFEFEF;
  --surface-1: #F0F0F0;
  --surface-2: #E8E8E8;
  --rule: #DEDEDE;
  --rule-2: #C8C8C8;
  --muted: #4A4A4A;
  --muted-2: #595959;
  --sigil-color: var(--ink);

  /* Papéis (claro: terracota profunda referência, teal profundo apoio) */
  --accent: var(--terra-deep);
  --accent-text: var(--terra-deep);    /* 5,31:1 sobre Paper (AA) */
  --accent-contrast: var(--paper);
  --accent-tint: rgba(180, 68, 31, 0.10);
  --accent-tint-strong: rgba(180, 68, 31, 0.14);
  --support: var(--teal-deep);
  --support-text: var(--teal-deep);    /* 6,33:1 sobre Paper (AA) */
  --support-tint: rgba(18, 104, 97, 0.10);
  --good: var(--teal-deep);
  --bad: #B42318;                      /* 5,31:1 sobre Paper */

  --glow: rgba(180, 68, 31, 0.65);
  --glow-soft: rgba(180, 68, 31, 0.30);

  /* Estrutura (grid overlay) no apoio do claro: teal profundo */
  --grid: rgba(18, 104, 97, 0.06);
  --grid-strong: rgba(18, 104, 97, 0.14);
}

/* === Reduced motion: zera tokens de motion ============= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
    --transition-fast: 0ms;
    --transition-spring: 0ms;
  }
}