/* ============================================================================
 * tokens.css — FONTE DA VERDADE de design do Arbitron Scanner
 * ----------------------------------------------------------------------------
 * Extraído 1:1 do brand book (arbitron_brand_identity.html, :root).
 * Direção: PURISTA — superfícies sólidas, um único vermelho de acento,
 * tipografia Barlow Condensed + Space Mono. SEM glow, SEM gradiente decorativo.
 *
 * NÃO-DESTRUTIVO POR DESENHO (Etapa 0 do REDESIGN_PLAN):
 *   Este arquivo é carregado no <head> ANTES do <style> inline de cada tela.
 *   Enquanto o :root inline existir, ELE vence na cascata e o visual NÃO muda.
 *   As etapas seguintes removem os overrides locais um a um, deixando estes
 *   tokens canônicos assumirem progressivamente. Assim a migração é gradual e
 *   reversível, sem big-bang.
 *
 * Expomos DUAS convenções de nomes para servir de ponte:
 *   - Nomes do brand book:  --surface-0..4, --border-0..3, --text-0..4
 *   - Aliases curtos do HUD: --s0..s4, --b0..b3, --t0..t4, --fd/--fm/--fb
 * Ambas apontam para os MESMOS valores canônicos.
 * ========================================================================== */

:root {
  /* ── FORGE PALETTE (herdada) ── */
  --red:        #E24B4A;
  --amber:      #EF9F27;
  --obsidian:   #0A0A0A;
  --charcoal:   #1C1C1C;
  --near-black: #111111;

  /* ── SURFACES (brand) ── */
  --surface-0: #080808;
  --surface-1: #0E0E0E;
  --surface-2: #141414;
  --surface-3: #1A1A1A;
  --surface-4: #222222;

  /* ── BORDERS (brand) ── */
  --border-0: rgba(255,255,255,0.04);
  --border-1: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --border-3: rgba(255,255,255,0.24);

  /* ── TEXT (brand) ── */
  --text-0: #FFFFFF;
  --text-1: rgba(255,255,255,0.82);
  --text-2: rgba(255,255,255,0.52);
  --text-3: rgba(255,255,255,0.28);
  --text-4: rgba(255,255,255,0.14);

  /* ── SEMÂNTICAS (brand) ── */
  --green:     #2ECC71;
  --green-dim: rgba(46,204,113,0.12);
  --red-dim:   rgba(226,75,74,0.12);
  --amber-dim: rgba(239,159,39,0.12);

  /* ── TIPOGRAFIA (brand) ── */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-body:    'Barlow', sans-serif;

  /* ── RAIO CANÔNICO ──
   * Brand usa apenas: badges 2px · inputs/botões 3px · cards 8px · hero/cover 28px.
   * Proibido: 999px (pills) e radii arbitrários (7/10/12/14...). */
  --radius-badge:  2px;
  --radius-input:  3px;
  --radius-card:   8px;
  --radius-hero:  28px;

  /* ── ESCALA 4PT (espaçamento) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── ELEVAÇÃO PERMITIDA ──
   * O brand PROÍBE glow colorido e text-shadow decorativo.
   * Só é permitido: focus-ring (acessibilidade) e, para overlays realmente
   * elevados (modais/popups), uma sombra neutra discreta — nunca colorida. */
  --focus-ring: 0 0 0 2px rgba(226,75,74,0.40);
  --shadow-overlay: 0 8px 32px rgba(0,0,0,0.55);

  /* ──────────────────────────────────────────────────────────────────────
   * ALIASES CURTOS (compat com o HUD atual — public/index.html).
   * Mesmos valores canônicos acima. Existem para a migração gradual:
   * quando o :root inline do index for removido, estes assumem sem quebrar.
   * ────────────────────────────────────────────────────────────────────── */
  --s0: var(--surface-0);
  --s1: var(--surface-1);
  --s2: var(--surface-2);
  --s3: var(--surface-3);
  --s4: var(--surface-4);

  --b0: var(--border-0);
  --b1: var(--border-1);
  --b2: var(--border-2);
  --b3: var(--border-3);

  --t0: var(--text-0);
  --t1: var(--text-1);
  --t2: var(--text-2);
  --t3: var(--text-3);
  --t4: var(--text-4);

  --fd: var(--font-display);
  --fm: var(--font-mono);
  --fb: var(--font-body);
}
