/* Optional themes: set <html data-theme="terminal|fintech|oled|bento|editorial">. Default (no attribute) = the base theme in style.css. Only tokens + a few layout tweaks. */

/* 2 · Exchange terminal — dense, yellow accent, square corners */
:root[data-theme=terminal]{color-scheme:dark;--bg:#0b0e11;--surface:#181a20;--surface-2:#1e2329;--line:#2b3139;--line-soft:#21262d;--text:#eaecef;--muted:#8d97a5;
  --accent:#f0b90b;--accent-ink:#1a1400;--accent-soft:rgba(240,185,11,.12);--good:#0ecb81;--good-soft:rgba(14,203,129,.14);--bad:#f6465d;--bad-soft:rgba(246,70,93,.14);--warn:#f0b90b;--warn-soft:rgba(240,185,11,.14);
  --r:4px;--r-sm:3px;--shadow:none;--font:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
:root[data-theme=terminal] body{font-size:13px}
:root[data-theme=terminal] body::before{display:none}
:root[data-theme=terminal] .logo{background:var(--accent);color:#1a1400;border-radius:4px}
:root[data-theme=terminal] .kpi{padding:10px 12px}:root[data-theme=terminal] .kpi .v{font-size:20px;font-family:var(--mono)}:root[data-theme=terminal] .kpi.hero .v{font-size:26px}
:root[data-theme=terminal] th,:root[data-theme=terminal] td{padding:6px 10px;font-size:12px}
:root[data-theme=terminal] td{font-family:var(--mono)}:root[data-theme=terminal] td.l{font-family:var(--font)}
:root[data-theme=terminal] .card{padding:12px}:root[data-theme=terminal] .badge{border-radius:3px}
:root[data-theme=terminal] .tab[aria-selected=true]{border-bottom-color:var(--accent)}

/* 3 · Fintech light — airy, big numbers, lime accent */
:root[data-theme=fintech]{color-scheme:light;--bg:#f4f5f0;--surface:#fff;--surface-2:#f6f7f2;--line:#e4e7de;--line-soft:#eef0e8;--text:#0e0f0c;--muted:#5f6657;
  --accent:#163300;--accent-ink:#9fe870;--accent-soft:rgba(159,232,112,.35);--good:#2a7d12;--good-soft:rgba(159,232,112,.35);--bad:#c0322b;--bad-soft:rgba(192,50,43,.10);--warn:#8a5a00;--warn-soft:rgba(255,200,80,.25);
  --r:22px;--r-sm:14px;--shadow:0 1px 2px rgba(14,15,12,.04),0 10px 30px rgba(14,15,12,.05)}
:root[data-theme=fintech] body::before{background:radial-gradient(800px 380px at 10% -10%,rgba(159,232,112,.35),transparent 70%)}
:root[data-theme=fintech] .logo{background:#9fe870;color:#163300}
:root[data-theme=fintech] .kpi.hero{background:#163300;border-color:#163300;color:#fff}:root[data-theme=fintech] .kpi.hero .l,:root[data-theme=fintech] .kpi.hero .s{color:#c9dcb8}
:root[data-theme=fintech] .kpi.hero .spark path:last-child{stroke:#9fe870}
:root[data-theme=fintech] .kpi .v{font-weight:800;letter-spacing:-.03em}:root[data-theme=fintech] .kpi.hero .v{font-size:40px}
:root[data-theme=fintech] .tab[aria-selected=true]{border-bottom-color:#163300}
:root[data-theme=fintech] .btn.primary{background:#9fe870;color:#163300;border-color:#9fe870}
:root[data-theme=fintech] .range .now{background:#163300;box-shadow:0 0 0 1px #163300}
:root[data-theme=fintech] .chart path[stroke]{stroke:#2a7d12}

/* 4 · OLED black — pure black, green/red only */
:root[data-theme=oled]{color-scheme:dark;--bg:#000;--surface:#0a0a0a;--surface-2:#111;--line:#1c1c1c;--line-soft:#141414;--text:#f2f2f2;--muted:#8a8a8a;
  --accent:#22c55e;--accent-ink:#00130a;--accent-soft:rgba(34,197,94,.12);--good:#22c55e;--good-soft:rgba(34,197,94,.13);--bad:#ff5a5a;--bad-soft:rgba(255,90,90,.13);--warn:#e5b13a;--warn-soft:rgba(229,177,58,.13);
  --r:12px;--r-sm:8px;--shadow:none}
:root[data-theme=oled] body::before{display:none}
:root[data-theme=oled] .logo{background:#22c55e;color:#00130a}
:root[data-theme=oled] .card,:root[data-theme=oled] .kpi,:root[data-theme=oled] .top{border-color:#1a1a1a}
:root[data-theme=oled] .kpi.hero .v{text-shadow:0 0 18px rgba(34,197,94,.25)}

/* 5 · Bento grid — mixed-size tinted tiles */
:root[data-theme=bento]{color-scheme:dark;--bg:#0a0d1a;--surface:#121728;--surface-2:#192037;--line:#252d47;--line-soft:#1d2540;--text:#eef1fb;--muted:#9aa5c4;
  --accent:#8b7cff;--accent-ink:#0b0720;--accent-soft:rgba(139,124,255,.18);--good:#35e0a1;--good-soft:rgba(53,224,161,.14);--bad:#ff7a90;--bad-soft:rgba(255,122,144,.14);--warn:#ffc15e;--warn-soft:rgba(255,193,94,.14);
  --r:26px;--r-sm:14px;--shadow:none}
:root[data-theme=bento] body::before{background:radial-gradient(700px 400px at 0% 0%,rgba(139,124,255,.22),transparent 70%),radial-gradient(600px 380px at 100% 10%,rgba(53,224,161,.12),transparent 70%)}
:root[data-theme=bento] .kpi{padding:18px 20px}
:root[data-theme=bento] .kpi:nth-child(1){background:linear-gradient(145deg,rgba(139,124,255,.38),var(--surface) 70%)}
:root[data-theme=bento] .kpi:nth-child(2){background:linear-gradient(145deg,rgba(53,224,161,.22),var(--surface) 75%)}
:root[data-theme=bento] .kpi:nth-child(3){background:linear-gradient(145deg,rgba(255,193,94,.18),var(--surface) 75%)}
:root[data-theme=bento] .kpi:nth-child(4){background:linear-gradient(145deg,rgba(255,122,144,.16),var(--surface) 75%)}
:root[data-theme=bento] .card{padding:20px}
@media (min-width:900px){
  :root[data-theme=bento] .kpis{grid-template-columns:1.4fr 1fr 1fr}
  :root[data-theme=bento] .kpi.hero{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end}
  :root[data-theme=bento] .kpi.hero .v{font-size:52px}
  :root[data-theme=bento] .kpi:last-child{grid-column:span 2}
}

/* 6 · Editorial (Linear-like) — quiet, sharp, indigo accent */
:root[data-theme=editorial]{color-scheme:dark;--bg:#08090a;--surface:#0f1011;--surface-2:#151618;--line:#23252a;--line-soft:#1a1b1e;--text:#f7f8f8;--muted:#8a8f98;
  --accent:#7170ff;--accent-ink:#fff;--accent-soft:rgba(113,112,255,.14);--good:#4cb782;--good-soft:rgba(76,183,130,.13);--bad:#eb5757;--bad-soft:rgba(235,87,87,.13);--warn:#f2c94c;--warn-soft:rgba(242,201,76,.12);
  --r:8px;--r-sm:6px;--shadow:none;--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root[data-theme=editorial] body::before{display:none}
:root[data-theme=editorial] .logo{background:var(--accent);border-radius:8px}
:root[data-theme=editorial] .kpi .l,:root[data-theme=editorial] th{text-transform:none;letter-spacing:0;font-size:12.5px}
:root[data-theme=editorial] .kpi .v{font-weight:600;letter-spacing:-.03em}
:root[data-theme=editorial] .card h2{font-weight:600;color:var(--muted);font-size:13px}
:root[data-theme=editorial] .badge{text-transform:none;letter-spacing:0;font-weight:600}