/* ============================================================
   Dark Mode — overrides CSS custom properties
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:          #0f1117;
        --surface:     #1a1d25;
        --surface-2:   #22262f;
        --border:      #2e3340;
        --text:        #e8eaf0;
        --text-muted:  #8b919e;
        --color-primary-light: #1a2e4a;
        --color-accent-light:  #2a2010;
        --shadow-sm:   0 1px 4px rgba(0,0,0,.3);
        --shadow-md:   0 4px 16px rgba(0,0,0,.4);
        --shadow-lg:   0 8px 32px rgba(0,0,0,.5);
        /* Glass dark overrides */
        --glass-bg:           rgba(28, 30, 44, 0.68);
        --glass-bg-strong:    rgba(28, 30, 44, 0.85);
        --glass-bg-subtle:    rgba(28, 30, 44, 0.45);
        --glass-bg-header:    rgba(22, 24, 38, 0.82);
        --glass-border:       rgba(255, 255, 255, 0.10);
        --glass-border-dim:   rgba(255, 255, 255, 0.06);
        --glass-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.08);
        --glass-shadow:       0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25),
                              inset 0 1px 0 rgba(255,255,255,0.06);
        --glass-shadow-heavy: 0 16px 48px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.30),
                              inset 0 1px 0 rgba(255,255,255,0.07);
        /* Dark aurora palette */
        --aurora-base:  #0d0f1c;
        --aurora-1:     rgba(100, 30, 180, 0.35);
        --aurora-2:     rgba(10,  60, 160, 0.28);
        --aurora-3:     rgba(180, 130, 10,  0.18);
        --aurora-4:     rgba(140, 20,  60,  0.18);
    }
}

/* Force dark via data attribute (user toggle) */
[data-theme="dark"] {
    --bg:          #0f1117;
    --surface:     #1a1d25;
    --surface-2:   #22262f;
    --border:      #2e3340;
    --text:        #e8eaf0;
    --text-muted:  #8b919e;
    --color-primary-light: #1a2e4a;
    --color-accent-light:  #2a2010;
    --shadow-sm:   0 1px 4px rgba(0,0,0,.3);
    --shadow-md:   0 4px 16px rgba(0,0,0,.4);
    --shadow-lg:   0 8px 32px rgba(0,0,0,.5);
    --glass-bg:           rgba(28, 30, 44, 0.68);
    --glass-bg-strong:    rgba(28, 30, 44, 0.85);
    --glass-bg-subtle:    rgba(28, 30, 44, 0.45);
    --glass-bg-header:    rgba(22, 24, 38, 0.82);
    --glass-border:       rgba(255, 255, 255, 0.10);
    --glass-border-dim:   rgba(255, 255, 255, 0.06);
    --glass-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --glass-shadow:       0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25),
                          inset 0 1px 0 rgba(255,255,255,0.06);
    --glass-shadow-heavy: 0 16px 48px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.30),
                          inset 0 1px 0 rgba(255,255,255,0.07);
    --aurora-base:  #0d0f1c;
    --aurora-1:     rgba(100, 30, 180, 0.35);
    --aurora-2:     rgba(10,  60, 160, 0.28);
    --aurora-3:     rgba(180, 130, 10,  0.18);
    --aurora-4:     rgba(140, 20,  60,  0.18);
}

/* Force light via data attribute */
[data-theme="light"] {
    --bg:          #f4f6f9;
    --surface:     #ffffff;
    --surface-2:   #f8f9fb;
    --border:      #e2e6ea;
    --text:        #1a1a2e;
    --text-muted:  #6b7280;
    --color-primary-light: #e8f1fb;
    --color-accent-light:  #fff8e1;
}

/* ── Vestment-aware dark mode: lighter primary colours (CSS fallback) ────
   These rules apply only if JS hasn't set inline styles yet.
   Inline styles from the anti-flash script always override these.
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"])[data-vestment="green"]  { --color-primary: #81c784; }
    :root:not([data-theme="light"])[data-vestment="purple"] { --color-primary: #ce93d8; }
    :root:not([data-theme="light"])[data-vestment="white"]  { --color-primary: #ff8a65; }
    :root:not([data-theme="light"])[data-vestment="red"]    { --color-primary: #ef9a9a; }
    :root:not([data-theme="light"])[data-vestment="rose"]   { --color-primary: #f48fb1; }
    :root:not([data-theme="light"])[data-vestment="black"]  { --color-primary: #90a4ae; }
    :root:not([data-theme="light"])[data-vestment="gold"]   { --color-primary: #ffca28; }
}
[data-theme="dark"][data-vestment="green"]  { --color-primary: #81c784; }
[data-theme="dark"][data-vestment="purple"] { --color-primary: #ce93d8; }
[data-theme="dark"][data-vestment="white"]  { --color-primary: #ff8a65; }
[data-theme="dark"][data-vestment="red"]    { --color-primary: #ef9a9a; }
[data-theme="dark"][data-vestment="rose"]   { --color-primary: #f48fb1; }
[data-theme="dark"][data-vestment="black"]  { --color-primary: #90a4ae; }
[data-theme="dark"][data-vestment="gold"]   { --color-primary: #ffca28; }

/* Audio player — already dark glass, just deepen shadow in dark mode */
[data-theme="dark"] .audio-player {
    background: rgba(14, 12, 28, 0.78);
    border-color: rgba(255,255,255,0.10);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .audio-player {
        background: rgba(14, 12, 28, 0.78);
        border-color: rgba(255,255,255,0.10);
    }
}
/* Header in dark mode — glass, no gradient */
[data-theme="dark"] #app-header {
    background: var(--glass-bg-header);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    border-bottom-color: var(--glass-border);
}
/* Date nav in dark mode — glass */
[data-theme="dark"] .gospel-date-nav {
    background: var(--glass-bg-header);
    border-bottom-color: var(--glass-border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
/* Streak bar pill in dark mode */
[data-theme="dark"] .streak-bar {
    background: linear-gradient(135deg, #2a2010, #322510);
    border-color: #7a6000;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
[data-theme="dark"] .streak-bar .streak-num  { color: #fcd34d; }
[data-theme="dark"] .streak-bar .streak-label,
[data-theme="dark"] .streak-bar .streak-score,
[data-theme="dark"] .streak-bar .streak-score-unit { color: #a08040; }
[data-theme="dark"] .streak-progress-track { background: #4a3a10; }
/* Gospel card dark border */
[data-theme="dark"] .gospel-card { border-color: var(--border); }
[data-theme="dark"] .gospel-date-nav .date-main { color: var(--text); }
[data-theme="dark"] .gospel-controls { background: var(--surface-2); }
[data-theme="dark"] .ctrl-btn { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
/* Leaderboard top items */
[data-theme="dark"] .leaderboard-item.top-1 {
    background: linear-gradient(135deg, #2a2010, #2e260e);
    border-color: #7a6000;
}
[data-theme="dark"] .leaderboard-item.top-2 {
    background: linear-gradient(135deg, #252830, #2a2d36);
    border-color: #555;
}
[data-theme="dark"] .leaderboard-item.top-3 {
    background: linear-gradient(135deg, #2a1e10, #2e2212);
    border-color: #7a4019;
}
[data-theme="dark"] .gospel-season-banner { filter: brightness(.85); }
[data-theme="dark"] .news-item            { border: 1px solid var(--border); }
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #22262f 25%, #2e3340 50%, #22262f 75%);
    background-size: 200% 100%;
}