/* ════════════════════════════════════════════════════════════════════
   CyberLiveMonitor — Theme palettes
   Each theme overrides only the palette tokens (RGB triplets + text);
   every surface, border, glow and accent derives from them in base.css,
   so the whole monitor recolours from these few lines.
   :root in base.css IS the default "Cyber Dark" theme.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────── DARK colour variants — dark surfaces, new primary accent ─────────── */

/* Nebula — violet */
html[data-theme="nebula"]{
  --cyan-rgb:181,99,246;
  --bg0-rgb:9,6,20;--bg1-rgb:18,12,38;--bg2-rgb:26,18,52;--bg3-rgb:40,27,74;
  --t1:#f1ecfb;--t2:#b9a8d8;--t3:#6b5a8c;
}
/* Matrix — emerald */
html[data-theme="matrix"]{
  --cyan-rgb:0,230,118;
  --bg0-rgb:3,15,10;--bg1-rgb:6,26,18;--bg2-rgb:10,40,27;--bg3-rgb:15,56,38;
  --t1:#e3fbef;--t2:#84c9a6;--t3:#3f7a5e;
}
/* Inferno — crimson */
html[data-theme="inferno"]{
  --cyan-rgb:255,77,90;
  --bg0-rgb:20,7,9;--bg1-rgb:36,12,16;--bg2-rgb:52,18,24;--bg3-rgb:74,26,34;
  --t1:#ffecee;--t2:#d8a0a6;--t3:#8c5a60;
}
/* Solar — amber/gold */
html[data-theme="solar"]{
  --cyan-rgb:255,176,32;
  --bg0-rgb:20,14,4;--bg1-rgb:34,24,8;--bg2-rgb:50,36,12;--bg3-rgb:70,52,18;
  --t1:#fff4e0;--t2:#d8bd88;--t3:#8c7440;
}
/* Abyss — deep azure */
html[data-theme="abyss"]{
  --cyan-rgb:64,156,255;
  --bg0-rgb:4,10,24;--bg1-rgb:8,18,44;--bg2-rgb:12,28,64;--bg3-rgb:18,40,90;
  --t1:#e6efff;--t2:#90add8;--t3:#46618c;
}

/* ─────────── LIGHT themes — flip surfaces + text, deepen accents ─────────── */

/* Daylight — clean light, cyan accent. White panels on a soft page, crisp ink
   borders + a subtle lift so cards read clearly (no washout). */
html[data-theme="light"]{
  --bg0-rgb:219,227,238;   /* page */
  --bg1-rgb:255,255,255;   /* header / top surfaces */
  --bg2-rgb:255,255,255;   /* panels — pure white */
  --bg3-rgb:236,242,249;   /* insets / sub-cards */
  --t1:#0c1f33;--t2:#3b576d;--t3:#6e889f;
  --cyan-rgb:0,140,190;
  --green-rgb:0,158,84;--red-rgb:221,28,66;--orange-rgb:204,116,0;--purple-rgb:140,64,200;
  --bd1:rgba(12,31,51,.14);--bd2:rgba(12,31,51,.22);--bd3:rgba(var(--cyan-rgb),.5);
  --hi-rgb:12,31,51;
  --glow-c:0 1px 3px rgba(12,31,51,.10);--glow-r:0 1px 4px rgba(var(--red-rgb),.18);
}
/* Paper — warm light, amber accent */
html[data-theme="paper"]{
  --bg0-rgb:235,228,216;   /* warm page */
  --bg1-rgb:255,251,245;
  --bg2-rgb:255,252,247;   /* warm white panels */
  --bg3-rgb:243,236,224;
  --t1:#2a2014;--t2:#665638;--t3:#9a8560;
  --cyan-rgb:196,120,0;
  --green-rgb:22,140,74;--red-rgb:196,46,52;--orange-rgb:204,116,0;--purple-rgb:140,64,200;
  --bd1:rgba(60,42,16,.16);--bd2:rgba(60,42,16,.24);--bd3:rgba(var(--cyan-rgb),.5);
  --hi-rgb:60,42,16;
  --glow-c:0 1px 3px rgba(60,42,16,.12);--glow-r:0 1px 4px rgba(var(--red-rgb),.18);
}
/* Light themes: give every panel/card a crisp ring + subtle lift (kills the washout) */
html[data-theme="light"] .panel,html[data-theme="light"] .stat-card,html[data-theme="light"] #threat-level-card,html[data-theme="light"] #ai-panel,html[data-theme="light"] #chart-wrap,html[data-theme="light"] #log-section,html[data-theme="light"] .lu-inline-panel,
html[data-theme="paper"] .panel,html[data-theme="paper"] .stat-card,html[data-theme="paper"] #threat-level-card,html[data-theme="paper"] #ai-panel,html[data-theme="paper"] #chart-wrap,html[data-theme="paper"] #log-section,html[data-theme="paper"] .lu-inline-panel{box-shadow:0 1px 4px rgba(var(--hi-rgb),.08),0 0 0 1px rgba(var(--hi-rgb),.05)}

/* ─────────── Theme picker (Settings → Appearance) ─────────── */
.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:6px}
.theme-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer;border:1px solid var(--bd1);background:var(--bg2);color:var(--t1);font-family:var(--fb);font-size:13px;font-weight:500;text-align:start;transition:transform .12s,border-color .15s,box-shadow .2s}
.theme-card:hover{border-color:var(--cyan);transform:translateY(-1px)}
.theme-card.active{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),var(--glow-c)}
.theme-card-swatch{position:relative;width:40px;height:40px;border-radius:9px;flex-shrink:0;border:1px solid rgba(var(--hi-rgb),.18);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.theme-card-dot{position:absolute;inset-inline-end:5px;bottom:5px;width:15px;height:15px;border-radius:50%;box-shadow:0 0 8px currentColor,inset 0 0 0 1px rgba(var(--hi-rgb),.3)}
.theme-card-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-card.active .theme-card-name{color:var(--cyan)}

/* Tooltips stay legible on every theme (their surface is fixed dark) */
html[data-theme="light"] .st-help:hover::after,
html[data-theme="paper"] .st-help:hover::after,
html[data-theme="light"] .st-help.show-tip::after,
html[data-theme="paper"] .st-help.show-tip::after{color:#cfe3f2}