/* ==========================================================================
   EBIA Design System — Tokens Oficiais (Tokens.css)
   Cores: Petróleo Corporativo + Ciano Faísca + Séries Eleitorais A & B
   Tipografia: Manrope (Sans) + IBM Plex Mono (Tabular Nums)
   ========================================================================== */

:root, [data-theme="light"] {
  --surface: #ffffff;
  --surface-tint: #f0f9fb;
  --surface-card: #ffffff;
  --line: #dcebef;
  --line-strong: #9fc3cd;
  
  --ink: #0a2e3c;
  --ink-body: #2a5a6a;
  --ink-muted: #3b6b7c;
  
  --petroleo: #0e7490;
  --on-petroleo: #ffffff;
  --petroleo-deep: #164e63;
  
  --ciano: #0891b2;
  --ciano-soft: #e0f4f8;
  
  /* Séries Eleitorais: Série A (Flávio Bolsonaro/PL) / Série B (Lula/PT - Vermelho Oficial) */
  --serie-a: #0e7490;
  --serie-a-mid: #5aa9bd;
  --serie-a-soft: #b9e1ea;
  
  --serie-b: #dc2626;
  --serie-b-mid: #f87171;
  --serie-b-soft: #fee2e2;
  
  --serie-neutra: #cbd8dc;
  --map-stroke: #ffffff;
  
  --header-bg: rgba(255, 255, 255, 0.94);
  --foot-bg: transparent;
  --foot-fg: #0a1d25;
  --foot-muted: #4a6470;
  
  --shadow-header: 0 1px 8px rgba(10, 46, 60, 0.05);
  --shadow-button: 0 4px 20px rgba(6, 182, 212, 0.25);
  --shadow-card: 0 6px 24px rgba(10, 46, 60, 0.06);
  --shadow-elevated: 0 12px 36px rgba(10, 46, 60, 0.12);
  
  /* Central de Checagem e Efeitos Visuais */
  --glow: rgba(8, 145, 178, 0.14);
  --glowR: rgba(220, 38, 38, 0.07);
  --mark: rgba(8, 145, 178, 0.18);
  --seal-fato: #047857;
  --seal-contexto: #b45309;
  --seal-exagerado: #c2410c;
  --seal-falso: #dc2626;
  --seal-sem: #6d28d9;

  color-scheme: light;
}

[data-theme="dark"] {
  --surface: #0a1d25;
  --surface-tint: #102a35;
  --surface-card: #0e242e;
  --line: #1e4150;
  --line-strong: #3f6b7b;
  
  --ink: #e6f4f7;
  --ink-body: #a9cbd4;
  --ink-muted: #86aab4;
  
  --petroleo: #38bdd8;
  --on-petroleo: #0a1d25;
  --petroleo-deep: #67c7d9;
  
  --ciano: #22d3ee;
  --ciano-soft: #123844;
  
  --serie-a: #38bdd8;
  --serie-a-mid: #1f7f96;
  --serie-a-soft: #164e63;
  
  --serie-b: #ef4444;
  --serie-b-mid: #dc2626;
  --serie-b-soft: #7f1d1d;
  
  --serie-neutra: #2c4a55;
  --map-stroke: #0a1d25;
  
  --header-bg: rgba(10, 29, 37, 0.92);
  --foot-bg: transparent;
  --foot-fg: #e9f2f5;
  --foot-muted: #9fb6bf;
  
  --shadow-header: 0 1px 8px rgba(0, 0, 0, 0.4);
  --shadow-button: 0 4px 20px rgba(34, 211, 238, 0.18);
  --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 12px 36px rgba(0, 0, 0, 0.45);
  
  /* Central de Checagem e Efeitos Visuais */
  --glow: rgba(34, 211, 238, 0.16);
  --glowR: rgba(220, 38, 38, 0.12);
  --mark: rgba(34, 211, 238, 0.22);
  --seal-fato: #047857;
  --seal-contexto: #b45309;
  --seal-exagerado: #c2410c;
  --seal-falso: #dc2626;
  --seal-sem: #6d28d9;

  color-scheme: dark;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 80px;
  
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 100px;
  
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* Utilitários tipográficos EBIA */
.display { font-family: var(--font-sans); font-size: 60px; line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; }
.h2 { font-family: var(--font-sans); font-size: 36px; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; }
.h3 { font-family: var(--font-sans); font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.lead { font-family: var(--font-sans); font-size: 18px; line-height: 1.7; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.nav-text { font-family: var(--font-sans); font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: 0.01em; }
.badge-text { font-family: var(--font-sans); font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: 0.02em; }
.numero { font-family: var(--font-mono); font-size: 15px; line-height: 1.4; font-weight: 500; font-variant-numeric: tabular-nums; }
.rotulo { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }