/*
 * theme.css — single source of truth for all CSS custom properties.
 *
 * Three layers, applied in order:
 *
 *   Layer 1  :root {}                        dark defaults
 *             ↳ covers dark OS preference and browsers without prefers-color-scheme
 *
 *   Layer 2  @media (prefers-color-scheme: light)
 *             ↳ system light preference overrides layer 1
 *
 *   Layer 3  html[data-theme="dark|light"]   explicit user pick
 *             ↳ set by nav.js only when user actively chooses; beats media query
 *
 * Page-specific vars (--add/--del, --day/--night/--work, --map-tiles)
 * are intentionally left in their respective page <style> blocks.
 */

/* ── Layer 1: Dark defaults ─────────────────────────────────────────────── */
:root {
  --bg:         #0a0e14;
  --panel:      #111722;
  --panel-2:    #0d1219;
  --line:       #1e2733;
  --txt:        #e6edf3;
  --muted:      #7d8da3;
  --dim:        #3d4d5e;
  --accent:     #3ddc97;
  --accent-r:   61; --accent-g: 220; --accent-b: 151;
  --accent-dim: rgba(61, 220, 151, .25);
  --nav-bg:     rgba(10, 14, 20, .88);
  --good:       #3ddc97;
  --warn:       #e6a817;
  --danger:     #ff6b6b;
  --info:       #58a6ff;
  --acc-hover:  #151d2a;
  --mono:       'JetBrains Mono', monospace;
  --sans:       'Sora', sans-serif;
  color-scheme: dark;
}

/* ── Layer 2: System light preference ──────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:         #f3f5f8;
    --panel:      #ffffff;
    --panel-2:    #f0f2f5;
    --line:       #dde2ea;
    --txt:        #18202e;
    --muted:      #566270;
    --dim:        #b0b8c4;
    --accent:     #16a060;
    --accent-r:   22; --accent-g: 160; --accent-b: 96;
    --accent-dim: rgba(22, 160, 96, .2);
    --nav-bg:     rgba(243, 245, 248, .92);
    --good:       #16a060;
    --warn:       #b96a00;
    --danger:     #cc2200;
    --info:       #0969da;
    --acc-hover:  #ebeef3;
    color-scheme: light;
  }
}

/* ── Layer 3: Explicit user override (set via nav.js theme picker) ───────── */
html[data-theme="dark"] {
  --bg:         #0a0e14;
  --panel:      #111722;
  --panel-2:    #0d1219;
  --line:       #1e2733;
  --txt:        #e6edf3;
  --muted:      #7d8da3;
  --dim:        #3d4d5e;
  --accent:     #3ddc97;
  --accent-r:   61; --accent-g: 220; --accent-b: 151;
  --accent-dim: rgba(61, 220, 151, .25);
  --nav-bg:     rgba(10, 14, 20, .88);
  --good:       #3ddc97;
  --warn:       #e6a817;
  --danger:     #ff6b6b;
  --info:       #58a6ff;
  --acc-hover:  #151d2a;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg:         #f3f5f8;
  --panel:      #ffffff;
  --panel-2:    #f0f2f5;
  --line:       #dde2ea;
  --txt:        #18202e;
  --muted:      #566270;
  --dim:        #b0b8c4;
  --accent:     #16a060;
  --accent-r:   22; --accent-g: 160; --accent-b: 96;
  --accent-dim: rgba(22, 160, 96, .2);
  --nav-bg:     rgba(243, 245, 248, .92);
  --good:       #16a060;
  --warn:       #b96a00;
  --danger:     #cc2200;
  --info:       #0969da;
  --acc-hover:  #ebeef3;
  color-scheme: light;
}