/* =========================================================================
   THEMES — 6 estéticas alternáveis via [data-theme]
   Todas mantêm as mesmas variáveis-base; cada tema sobrescreve o necessário
   e adiciona efeitos visuais específicos via classes utilitárias / pseudos.
   ========================================================================= */

/* ---------- 1. REFINED  (Linear/Vercel: limpo, micro-anim sutil) ---------- */
:root[data-theme="refined"] {
  --bg:           oklch(0.16 0.006 260);
  --bg-panel:    oklch(0.20 0.007 260);
  --bg-inset:    oklch(0.24 0.008 260);
  --border:      oklch(0.28 0.009 260);
  --border-strong: oklch(0.38 0.011 260);
  --fg:          oklch(0.98 0.003 260);
  --fg-dim:      oklch(0.72 0.007 260);
  --fg-mute:     oklch(0.54 0.008 260);
  --shadow:      0 1px 0 oklch(1 0 0 / 0.05) inset, 0 12px 32px oklch(0 0 0 / 0.32);
  --glow-strength: 0.18;
}
:root[data-theme="refined"] body {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 65%),
    radial-gradient(ellipse 50% 30% at 90% 100%, color-mix(in oklch, var(--accent) 6%, transparent), transparent 70%),
    var(--bg);
}
:root[data-theme="refined"] .card {
  background: linear-gradient(180deg, color-mix(in oklch, var(--bg-panel) 100%, transparent) 0%, color-mix(in oklch, var(--bg-panel) 92%, var(--bg)) 100%);
  border: 1px solid var(--border);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
:root[data-theme="refined"] .card:hover {
  border-color: color-mix(in oklch, var(--accent) 25%, var(--border));
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in oklch, var(--accent) 12%, transparent);
}

/* ---------- 2. TERMINAL  (Bloomberg-ish: denso, mono dominante) ---------- */
:root[data-theme="terminal"] {
  --bg:           oklch(0.12 0.005 250);
  --bg-panel:    oklch(0.14 0.006 250);
  --bg-inset:    oklch(0.18 0.007 250);
  --border:      oklch(0.26 0.008 250);
  --border-strong: oklch(0.36 0.010 250);
  --fg:          oklch(0.94 0.012 90);
  --fg-dim:      oklch(0.74 0.040 95);
  --fg-mute:     oklch(0.55 0.030 95);
  --accent:      oklch(0.86 0.20 95);   /* amber Bloomberg */
  --up:          oklch(0.86 0.18 145);
  --down:        oklch(0.72 0.22 25);
  --radius:      2px;
  --radius-sm:   2px;
  --shadow:      none;
  --font-sans:   "Geist Mono", ui-monospace, monospace;
  --font-mono:   "Geist Mono", ui-monospace, monospace;
  --glow-strength: 0.4;
}
:root[data-theme="terminal"] body {
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, oklch(1 0 0 / 0.012) 2px 3px),
    var(--bg);
  font-feature-settings: "tnum", "ss01";
}
:root[data-theme="terminal"] .card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 2px;
}
:root[data-theme="terminal"] .card-title {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: calc(var(--fs-card-title) - 2px);
  font-weight: 500;
}
:root[data-theme="terminal"] .card-value {
  font-family: var(--font-mono);
  color: var(--accent);
  text-shadow: 0 0 18px color-mix(in oklch, var(--accent) 35%, transparent);
}
:root[data-theme="terminal"] .brand-title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
:root[data-theme="terminal"] .tab { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
:root[data-theme="terminal"] .topbar { border-bottom: 1px solid var(--border-strong); }
:root[data-theme="terminal"] .topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  opacity: 0.4;
}
:root[data-theme="terminal"] .topbar { position: relative; }

/* ---------- 3. AURORA  (gradientes vivos, glass, profundidade) ---------- */
/* Accent é controlado pelo dataset ativo (BR=verde, US=azul). Os gradientes
   do fundo derivam do accent para acompanhar a aba. */
:root[data-theme="aurora"] {
  --bg:           oklch(0.14 0.020 280);
  --bg-panel:    oklch(0.20 0.025 280);
  --bg-inset:    oklch(0.24 0.028 285);
  --border:      oklch(0.34 0.030 285);
  --border-strong: oklch(0.46 0.040 285);
  --fg:          oklch(0.98 0.005 280);
  --fg-dim:      oklch(0.78 0.020 280);
  --fg-mute:     oklch(0.58 0.025 280);
  --shadow:      0 1px 0 oklch(1 0 0 / 0.08) inset, 0 20px 60px oklch(0 0 0 / 0.5);
  --glow-strength: 0.5;
}
:root[data-theme="aurora"] body {
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%,  color-mix(in oklch, var(--accent) 55%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 20%, color-mix(in oklch, var(--accent) 38%, oklch(0.5 0.18 220)), transparent 65%),
    radial-gradient(ellipse 55% 45% at 70% 100%, color-mix(in oklch, var(--accent) 30%, oklch(0.5 0.16 320)), transparent 60%),
    radial-gradient(ellipse 40% 35% at 10% 90%, color-mix(in oklch, var(--accent) 25%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="aurora"] .card {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--bg-panel) 80%, transparent) 0%,
    color-mix(in oklch, var(--bg-panel) 60%, transparent) 100%);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid color-mix(in oklch, var(--fg) 12%, transparent);
  position: relative;
  overflow: hidden;
}
:root[data-theme="aurora"] .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 18%, transparent), transparent 40%);
  pointer-events: none;
  opacity: 0.5;
}
:root[data-theme="aurora"] .card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--accent) 60%, transparent), transparent);
}
:root[data-theme="aurora"] .card-value {
  background: linear-gradient(135deg, var(--fg) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px color-mix(in oklch, var(--accent) 30%, transparent));
}
:root[data-theme="aurora"] .topbar { border-bottom-color: color-mix(in oklch, var(--fg) 10%, transparent); }

/* ---------- 4. NEON HUD  (neon real, glow agressivo, scanlines) ---------- */
:root[data-theme="neon"] {
  --bg:           oklch(0.10 0.012 230);
  --bg-panel:    oklch(0.13 0.015 230);
  --bg-inset:    oklch(0.16 0.016 230);
  --border:      oklch(0.30 0.030 220);
  --border-strong: oklch(0.45 0.060 200);
  --fg:          oklch(0.98 0.020 200);
  --fg-dim:      oklch(0.78 0.040 200);
  --fg-mute:     oklch(0.55 0.040 220);
  --accent:      oklch(0.85 0.20 195);
  --up:          oklch(0.85 0.22 145);
  --down:        oklch(0.72 0.25 15);
  --shadow:      0 0 0 1px color-mix(in oklch, var(--accent) 18%, transparent), 0 0 24px color-mix(in oklch, var(--accent) 10%, transparent);
  --glow-strength: 1;
}
:root[data-theme="neon"] body {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, oklch(1 0 0 / 0.018) 3px 4px),
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in oklch, var(--accent) 15%, transparent), transparent 60%),
    radial-gradient(ellipse 90% 50% at 50% 100%, oklch(0.55 0.20 320 / 0.10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="neon"] .card {
  background: var(--bg-panel);
  border: 1px solid color-mix(in oklch, var(--accent) 20%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--accent) 25%, transparent),
    0 0 0 1px color-mix(in oklch, var(--accent) 6%, transparent),
    0 0 32px color-mix(in oklch, var(--accent) 12%, transparent);
  position: relative;
}
:root[data-theme="neon"] .card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), transparent 30%, transparent 70%, color-mix(in oklch, var(--accent) 60%, var(--down)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.45;
  pointer-events: none;
}
:root[data-theme="neon"] .card-value {
  color: var(--accent);
  text-shadow:
    0 0 12px color-mix(in oklch, var(--accent) 60%, transparent),
    0 0 32px color-mix(in oklch, var(--accent) 25%, transparent);
}
:root[data-theme="neon"] .card-unit {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 30%, transparent);
}
:root[data-theme="neon"] .brand-mark {
  border-color: var(--accent);
  box-shadow: 0 0 24px color-mix(in oklch, var(--accent) 30%, transparent), inset 0 0 12px color-mix(in oklch, var(--accent) 15%, transparent);
}
:root[data-theme="neon"] .tab.is-on {
  background: color-mix(in oklch, var(--accent) 14%, var(--bg-inset));
  box-shadow: 0 0 0 1px var(--accent), 0 0 16px color-mix(in oklch, var(--accent) 30%, transparent);
}
:root[data-theme="neon"] .ctrl-btn.is-on,
:root[data-theme="neon"] .seg-btn.is-on,
:root[data-theme="neon"] .year-seg-btn.is-on {
  box-shadow: 0 0 16px color-mix(in oklch, var(--accent) 60%, transparent), 0 0 32px color-mix(in oklch, var(--accent) 30%, transparent);
}

/* ---------- 5. BRUTALIST TECH  (bordas grossas, contraste máximo) ---------- */
:root[data-theme="brutalist"] {
  --bg:           oklch(0.08 0 0);
  --bg-panel:    oklch(0.12 0 0);
  --bg-inset:    oklch(0.16 0 0);
  --border:      oklch(0.45 0 0);
  --border-strong: oklch(0.85 0 0);
  --fg:          oklch(0.98 0 0);
  --fg-dim:      oklch(0.78 0 0);
  --fg-mute:     oklch(0.58 0 0);
  --accent:      oklch(0.88 0.22 95);
  --radius:      0px;
  --radius-sm:   0px;
  --shadow:      4px 4px 0 var(--border-strong);
  --glow-strength: 0;
}
:root[data-theme="brutalist"] body {
  background:
    linear-gradient(0deg, transparent 95%, oklch(1 0 0 / 0.05) 95%),
    var(--bg);
  background-size: 100% 32px;
}
:root[data-theme="brutalist"] .card {
  background: var(--bg-panel);
  border: 2px solid var(--border-strong);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--accent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
:root[data-theme="brutalist"] .card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--accent);
}
:root[data-theme="brutalist"] .card-title {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
}
:root[data-theme="brutalist"] .card-value {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.04em;
}
:root[data-theme="brutalist"] .card-eyebrow {
  background: var(--accent);
  color: var(--bg);
  display: inline-block;
  padding: 2px 8px;
  font-weight: 600;
}
:root[data-theme="brutalist"] .tabs {
  border: 2px solid var(--border-strong);
  border-radius: 0;
  background: var(--bg);
  padding: 0;
}
:root[data-theme="brutalist"] .tab {
  border-radius: 0;
  border-right: 2px solid var(--border-strong);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
}
:root[data-theme="brutalist"] .tab:last-child { border-right: 0; }
:root[data-theme="brutalist"] .tab.is-on {
  background: var(--accent);
  color: var(--bg);
  box-shadow: none;
}
:root[data-theme="brutalist"] .seg-btn,
:root[data-theme="brutalist"] .year-seg-btn,
:root[data-theme="brutalist"] .ctrl-btn,
:root[data-theme="brutalist"] .preset-btn,
:root[data-theme="brutalist"] .cur-btn { border-radius: 0; text-transform: uppercase; font-weight: 600; }
:root[data-theme="brutalist"] .seg-btn.is-on,
:root[data-theme="brutalist"] .year-seg-btn.is-on,
:root[data-theme="brutalist"] .ctrl-btn.is-on,
:root[data-theme="brutalist"] .cur-btn.is-on { box-shadow: none; }
:root[data-theme="brutalist"] .brand-mark { border-radius: 0; border-width: 2px; }

/* ---------- 6. EDITORIAL TECH  (hierarquia grande + dados densos) ---------- */
:root[data-theme="editorial"] {
  --bg:           oklch(0.15 0.004 280);
  --bg-panel:    oklch(0.19 0.005 280);
  --bg-inset:    oklch(0.23 0.006 280);
  --border:      oklch(0.28 0.008 280);
  --border-strong: oklch(0.40 0.010 280);
  --fg:          oklch(0.98 0.003 280);
  --fg-dim:      oklch(0.72 0.006 280);
  --fg-mute:     oklch(0.52 0.007 280);
  --accent:      oklch(0.78 0.17 30);
  --shadow:      0 1px 0 oklch(1 0 0 / 0.04) inset, 0 14px 36px oklch(0 0 0 / 0.4);
  --glow-strength: 0.25;
}
:root[data-theme="editorial"] {
  --fs-card-value: 38px;
}
:root[data-theme="editorial"] .card-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
:root[data-theme="editorial"] .card-value {
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}
:root[data-theme="editorial"] .card-eyebrow {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
:root[data-theme="editorial"] .card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  position: relative;
}
:root[data-theme="editorial"] .card::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 0;
  width: 3px;
  height: 24px;
  background: var(--accent);
}
:root[data-theme="editorial"] .card-head { padding-left: 12px; }
:root[data-theme="editorial"] .topbar { padding: 32px 0 24px; }
:root[data-theme="editorial"] .brand-title { font-size: 22px; }

/* =========================================================================
   GLOBAL OVERLAYS — apenas para temas que precisam (controlado por var)
   ========================================================================= */

/* Scanline overlay — só aparece no neon */
:root[data-theme="neon"]::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, oklch(0 0 0 / 0.18) 3px 4px);
  z-index: 9999;
  mix-blend-mode: multiply;
  opacity: 0.4;
}