/* ============================================================================
   MASC — Design Tokens (fonte única de verdade do design system)
   Carregado DEPOIS do Bootstrap e ANTES de styles.css.
   Conceito: vermelho/preto = arena (marca) · ouro = conquista (1º lugar/campeão).
   ========================================================================== */

:root {
  /* ---- Rampas de marca ---- */
  --red-50:#FBE9EB; --red-100:#F7D0D3;
  --red-500:#D72638;   /* vermelho de marca (vivo) */
  --red-600:#B11226;   /* primária */
  --red-700:#8B0000;   /* hover/pressed (legado vira o tom escuro) */
  --red-900:#4A0A12;
  --gold-400:#E5B84B; --gold-500:#C9A227; --gold-700:#8A6D14;
  --ink-950:#120A0C; --ink-900:#1A0E10; --ink-800:#2A1A1D;

  /* ---- Semânticos (tema claro) ---- */
  --primary:var(--red-600);
  --primary-hover:var(--red-700);
  --accent:var(--gold-500);
  --bg:#F6F4F4;
  --surface:#FFFFFF;
  --surface-sunken:#EFEBEB;
  --text:#211B1C;
  --muted:#5C5455;
  --border:#E4DFDF;
  --success:#1E7A46;
  --warning:#B7791F;
  --danger:#C1121F;      /* distinto da primária */
  --info:#1F6FB2;
  --ring:rgba(215,38,56,.40);

  /* ---- Tipografia ---- */
  --font-display:'Saira Condensed', 'Segoe UI', sans-serif;
  --font-ui:'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* ---- Espaço / raio / sombra (undertone quente) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-10:48px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(33,15,17,.06);
  --shadow-2:0 4px 12px rgba(33,15,17,.10);
  --shadow-3:0 16px 40px rgba(33,15,17,.22);
  --shadow-focus:0 0 0 3px var(--ring);

  /* ---- Override do Bootstrap 5.3 (sem tocar no CDN) ---- */
  --bs-primary:var(--primary);
  --bs-primary-rgb:177,18,38;
  --bs-danger:var(--danger);
  --bs-danger-rgb:193,18,31;
  --bs-link-color:var(--primary);
  --bs-link-color-rgb:177,18,38;
  --bs-link-hover-color:var(--primary-hover);
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-border-color:var(--border);
  --bs-border-radius:var(--radius-md);
  --bs-body-font-family:var(--font-ui);
}

/* ---- Tema escuro (mesmos nomes semânticos) ---- */
[data-theme="dark"] {
  --primary:var(--red-500);
  --accent:var(--gold-400);
  --bg:var(--ink-950);
  --surface:var(--ink-900);
  --surface-sunken:#241416;
  --text:#F2EAEA;
  --muted:#B3A6A7;
  --border:var(--ink-800);
  --red-50:#2A1416;
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-border-color:var(--border);
}

/* ---- Base tipográfica (não sobrescreve regras específicas de componentes) ---- */
h1, h2, h3, h4, .card-title, .modal-title { font-family:var(--font-display); }
.text-mono, .cell-num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }