/* GsMgr Theme Variables — applied via html[data-theme] */

/* ── Cosmos (default — deep indigo/purple) ─────────────────────── */
html[data-theme="cosmos"] {
  --bg:#0f1117;--surface:#1a1d2e;--surface2:#252840;--border:#2d3154;
  --accent:#7c5cbf;--accent2:#5c9cf5;--green:#2ecc71;--red:#e74c3c;
  --yellow:#f39c12;--text:#e2e8f0;--text2:#94a3b8;
}

/* ── Ocean (dark navy + cyan/teal) ────────────────────────────────*/
html[data-theme="ocean"] {
  --bg:#070e1a;--surface:#0d1b2e;--surface2:#142540;--border:#1a3a5c;
  --accent:#0ea5e9;--accent2:#06b6d4;--green:#2ecc71;--red:#ef4444;
  --yellow:#f59e0b;--text:#e0f2fe;--text2:#7dd3fc;
}

/* ── Crimson (dark wine + red/orange) ─────────────────────────────*/
html[data-theme="crimson"] {
  --bg:#0f0808;--surface:#1a0f10;--surface2:#2a1518;--border:#3d1f22;
  --accent:#ef4444;--accent2:#f97316;--green:#22c55e;--red:#ff6b6b;
  --yellow:#fbbf24;--text:#fee2e2;--text2:#fca5a5;
}

/* ── Amber (dark charcoal + warm gold) ────────────────────────────*/
html[data-theme="amber"] {
  --bg:#0c0a04;--surface:#1a1508;--surface2:#26200e;--border:#3d3015;
  --accent:#f59e0b;--accent2:#fbbf24;--green:#84cc16;--red:#ef4444;
  --yellow:#f59e0b;--text:#fef3c7;--text2:#a16207;
}

/* ── Neon (synthwave — black + electric pink/violet) ──────────────*/
html[data-theme="neon"] {
  --bg:#08000f;--surface:#110020;--surface2:#1c0035;--border:#36006a;
  --accent:#e040fb;--accent2:#7c4dff;--green:#00e5ff;--red:#ff1744;
  --yellow:#ffea00;--text:#f0e0ff;--text2:#ce93d8;
}

/* ── Sunset (deep plum + coral/rose) ──────────────────────────────*/
html[data-theme="sunset"] {
  --bg:#0f0608;--surface:#1e0d12;--surface2:#2d1520;--border:#4a2030;
  --accent:#f97316;--accent2:#ec4899;--green:#22c55e;--red:#ff6b9d;
  --yellow:#fbbf24;--text:#fff1f5;--text2:#fdba74;
}

/* ── Nord (muted arctic grays + soft blues) ───────────────────────*/
html[data-theme="nord"] {
  --bg:#242933;--surface:#2e3440;--surface2:#3b4252;--border:#4c566a;
  --accent:#88c0d0;--accent2:#81a1c1;--green:#a3be8c;--red:#bf616a;
  --yellow:#ebcb8b;--text:#eceff4;--text2:#d8dee9;
}

/* ── Gruvbox (warm earthy browns + muted gold/green) ──────────────*/
html[data-theme="gruvbox"] {
  --bg:#282828;--surface:#32302f;--surface2:#3c3836;--border:#504945;
  --accent:#fabd2f;--accent2:#8ec07c;--green:#b8bb26;--red:#fb4934;
  --yellow:#fabd2f;--text:#ebdbb2;--text2:#a89984;
}

/* ── Mocha (Catppuccin-inspired soft lavender/blue) ───────────────*/
html[data-theme="mocha"] {
  --bg:#1e1e2e;--surface:#313244;--surface2:#45475a;--border:#585b70;
  --accent:#cba6f7;--accent2:#89b4fa;--green:#a6e3a1;--red:#f38ba8;
  --yellow:#f9e2af;--text:#cdd6f4;--text2:#a6adc8;
}

/* ── Light (clean white/blue) ─────────────────────────────────────*/
html[data-theme="light"] {
  --bg:#f1f5f9;--surface:#ffffff;--surface2:#f8fafc;--border:#e2e8f0;
  --accent:#7c5cbf;--accent2:#3b82f6;--green:#16a34a;--red:#dc2626;
  --yellow:#d97706;--text:#1e293b;--text2:#64748b;
}

/* ── Theme picker overlay ──────────────────────────────────────── */
#theme-picker-overlay {
  position:fixed;inset:0;z-index:999;display:none;
}
#theme-picker-overlay.open { display:block; }
#theme-picker-panel {
  position:fixed;top:56px;right:16px;z-index:1000;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px;width:270px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
#theme-picker-panel h4 {
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--text2);margin:0 0 12px;
}
.theme-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.theme-swatch {
  border-radius:8px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;transition:border-color .15s,transform .1s;
}
.theme-swatch:hover { transform:scale(1.03); }
.theme-swatch.active { border-color:var(--accent); }
.theme-swatch .swatch-preview {
  display:flex;height:36px;
}
.theme-swatch .swatch-preview span {
  flex:1;display:block;
}
.theme-swatch .swatch-label {
  background:var(--surface2);padding:5px 8px;
  font-size:.72rem;color:var(--text);font-weight:500;
}
#theme-btn {
  background:none;border:1px solid var(--border);border-radius:6px;
  color:var(--text2);padding:5px 10px;cursor:pointer;font-size:1rem;
  transition:background .15s,color .15s;line-height:1;
}
#theme-btn:hover { background:var(--surface2);color:var(--text); }