/* Gauge theme palettes.
 *
 * Each view sets its own ":root" + "[data-theme='light']" inline (kept for
 * back-compat / no-FOUC default render); this file ADDS extra themes that
 * override the inline defaults whenever data-theme attribute matches.
 *
 * SPECIFICITY NOTE: selectors below use ":root[data-theme=...]" (specificity
 * 0,2,0) rather than the simpler "[data-theme=...]" (0,1,0). The inline
 * <style> block in each view comes AFTER the <link rel="stylesheet"
 * href="/css/themes.css">, so the inline ":root { --bg: dark... }" (also
 * 0,1,0) would otherwise tiebreak by source order and silently override
 * every external theme. The ":root" prefix bumps us to 0,2,0 and wins.
 *
 * To add a new theme:
 *   1. Add a :root[data-theme="<slug>"] block below that overrides the same
 *      vars the inline :root + [data-theme="light"] blocks set.
 *   2. Add a matching entry in /js/theme-picker.js THEMES[].
 *
 * Variables in play:
 *   --bg, --bg-soft, --surface, --surface-2, --border, --border-strong,
 *   --text, --text-dim, --muted, --accent, --accent-glow, --accent-dim.
 * (--warn, --danger, --info, --font, --mono stay constant across themes.)
 */

/* ============ MIDNIGHT — deep navy with electric blue accent ============ */
:root[data-theme="midnight"]{
  --bg:#070C18; --bg-soft:#0B142A;
  --surface:rgba(120,160,255,0.05); --surface-2:rgba(120,160,255,0.09);
  --border:rgba(120,160,255,0.10); --border-strong:rgba(120,160,255,0.18);
  --text:#E6ECFA; --text-dim:#B0BDDB; --muted:#6D7A99;
  --accent:#7AA2FF; --accent-glow:rgba(122,162,255,0.55); --accent-dim:rgba(122,162,255,0.18);
}

/* ============ FOREST — deep evergreen with lime accent ============ */
:root[data-theme="forest"]{
  --bg:#070E0B; --bg-soft:#0B1614;
  --surface:rgba(180,255,200,0.04); --surface-2:rgba(180,255,200,0.08);
  --border:rgba(180,255,200,0.10); --border-strong:rgba(180,255,200,0.18);
  --text:#E7F5EC; --text-dim:#B4D0BE; --muted:#6E8A77;
  --accent:#86EFAC; --accent-glow:rgba(134,239,172,0.55); --accent-dim:rgba(134,239,172,0.18);
}

/* ============ SUNSET — warm dark with amber accent ============ */
:root[data-theme="sunset"]{
  --bg:#120A07; --bg-soft:#1C1310;
  --surface:rgba(255,200,150,0.04); --surface-2:rgba(255,200,150,0.08);
  --border:rgba(255,200,150,0.10); --border-strong:rgba(255,200,150,0.18);
  --text:#FAEDE0; --text-dim:#D9C0A8; --muted:#8E7563;
  --accent:#FBBF24; --accent-glow:rgba(251,191,36,0.55); --accent-dim:rgba(251,191,36,0.18);
}

/* ============ PLUM — deep violet with magenta accent ============ */
:root[data-theme="plum"]{
  --bg:#0E0716; --bg-soft:#170D24;
  --surface:rgba(220,170,255,0.05); --surface-2:rgba(220,170,255,0.09);
  --border:rgba(220,170,255,0.10); --border-strong:rgba(220,170,255,0.18);
  --text:#F2E8FA; --text-dim:#C9B6DB; --muted:#8A7799;
  --accent:#D8B4FE; --accent-glow:rgba(216,180,254,0.55); --accent-dim:rgba(216,180,254,0.18);
}

/* ============ ROSE — high-contrast light with rose accent ============ */
:root[data-theme="rose"]{
  --bg:#FFF7F5; --bg-soft:#FFFFFF;
  --surface:rgba(190,18,60,0.03); --surface-2:rgba(190,18,60,0.06);
  --border:rgba(190,18,60,0.08); --border-strong:rgba(190,18,60,0.18);
  --text:#1F0911; --text-dim:#5A2937; --muted:#7A5662;
  --accent:#E11D48; --accent-glow:rgba(225,29,72,0.45); --accent-dim:rgba(225,29,72,0.13);
}
:root[data-theme="rose"] .card,
:root[data-theme="rose"] .user-pop{background:#fff}
:root[data-theme="rose"] .btn-primary{color:#fff}

/* ============ Theme picker UI (used by /js/theme-picker.js) ============ */
.theme-pop{
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--bg-soft); border:1px solid var(--border-strong);
  border-radius:12px; padding:8px; min-width:180px; z-index:50;
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
  display:none; flex-direction:column; gap:2px;
}
.theme-pop.open{display:flex}
.theme-pop .opt{
  display:flex; align-items:center; gap:10px;
  padding:7px 9px; border-radius:8px; cursor:pointer;
  background:transparent; border:0; color:var(--text);
  font:500 13px var(--font); text-align:left;
}
.theme-pop .opt:hover{background:var(--surface)}
.theme-pop .opt.active{background:var(--surface-2)}
.theme-pop .opt .sw{
  width:14px; height:14px; border-radius:50%;
  border:1px solid var(--border-strong);
  background:linear-gradient(135deg, var(--swatch-bg, #07090E) 0%, var(--swatch-bg, #07090E) 50%, var(--swatch-accent, #5EEAD4) 50%, var(--swatch-accent, #5EEAD4) 100%);
  flex-shrink:0;
}
.theme-pop .opt .nm{flex:1}
.theme-pop .opt .check{opacity:0; color:var(--accent)}
.theme-pop .opt.active .check{opacity:1}

/* Wrapper class to use on the existing .toggle-theme button so the popover
   anchors to it. Apply class="toggle-theme theme-anchor" in markup if you
   want a popover; the JS auto-handles both single-button toggle (legacy)
   and picker mode based on the data-theme-mode attribute. */
.theme-anchor{position:relative}