/* ================================================================
   Expenditure — Theme Variables  (theme.css)
   Load this FIRST, before Bootstrap and app.css.

   Strategy
   ─────────
   • html            (specificity 0,0,1)  → dark defaults
   • html[data-theme] (specificity 0,1,1)  → always overrides html
   • JS resolves "system" → "dark" | "light" on every load
     (CSS @media block is a no-JS safety net only)
================================================================ */

/* ── Layout / Dimension / Non-colour vars ──────────────────────── */
:root {
    --sidebar-width:    260px;
    --navbar-height:    60px;
    --radius:           10px;
    --radius-sm:        6px;
    --radius-lg:        14px;
    --transition:       .2s ease;

    /* Sidebar stays dark in every colour theme */
    --sidebar-bg:       #1e293b;
    --sidebar-text:     #cbd5e1;
    --sidebar-muted:    #64748b;
    --sidebar-active-bg:rgba(37,99,235,.18);
    --sidebar-active:   #60a5fa;
    --sidebar-hover-bg: rgba(255,255,255,.05);

    /* Chart palette */
    --chart-1: #2563eb;
    --chart-2: #10b981;
    --chart-3: #f59e0b;
    --chart-4: #ef4444;
    --chart-5: #8b5cf6;
    --chart-6: #06b6d4;
}

/* ── Dark defaults (html element, lowest specificity 0,0,1) ─────── */
/* Any html[data-theme] rule (specificity 0,1,1) always overrides.  */
html {
    --bg:               #0f172a;
    --surface:          #1e293b;
    --surface-2:        #243347;
    --surface-hover:    #2a3d55;
    --border:           #334155;
    --border-light:     #3d4f65;

    --primary:          #2563eb;
    --primary-hover:    #1d4ed8;
    --primary-light:    rgba(37,99,235,.15);

    --text:             #f1f5f9;
    --text-muted:       #94a3b8;
    --text-faint:       #64748b;

    --success:          #10b981;
    --success-light:    rgba(16,185,129,.15);
    --danger:           #ef4444;
    --danger-light:     rgba(239,68,68,.15);
    --warning:          #f59e0b;
    --warning-light:    rgba(245,158,11,.15);
    --info:             #0ea5e9;
    --info-light:       rgba(14,165,233,.15);

    --navbar-bg:        #1e293b;
    --shadow:           0 4px 24px rgba(0,0,0,.35);
    --shadow-sm:        0 2px 8px rgba(0,0,0,.25);
}

/* ── Explicit dark (specificity 0,1,1) ─────────────────────────── */
html[data-theme="dark"] {
    --bg:               #0f172a;
    --surface:          #1e293b;
    --surface-2:        #243347;
    --surface-hover:    #2a3d55;
    --border:           #334155;
    --border-light:     #3d4f65;
    --primary:          #2563eb;
    --primary-hover:    #1d4ed8;
    --primary-light:    rgba(37,99,235,.15);
    --text:             #f1f5f9;
    --text-muted:       #94a3b8;
    --text-faint:       #64748b;
    --success:          #10b981;
    --success-light:    rgba(16,185,129,.15);
    --danger:           #ef4444;
    --danger-light:     rgba(239,68,68,.15);
    --warning:          #f59e0b;
    --warning-light:    rgba(245,158,11,.15);
    --info:             #0ea5e9;
    --info-light:       rgba(14,165,233,.15);
    --navbar-bg:        #1e293b;
    --sidebar-hover-bg: rgba(255,255,255,.05);
    --shadow:           0 4px 24px rgba(0,0,0,.35);
    --shadow-sm:        0 2px 8px rgba(0,0,0,.25);
}

/* ── Light (specificity 0,1,1) ──────────────────────────────────── */
html[data-theme="light"] {
    --bg:               #f8fafc;
    --surface:          #ffffff;
    --surface-2:        #f1f5f9;
    --surface-hover:    #e2eaf4;
    --border:           #e2e8f0;
    --border-light:     #cbd5e1;
    --primary:          #2563eb;
    --primary-hover:    #1d4ed8;
    --primary-light:    rgba(37,99,235,.12);
    --text:             #0f172a;
    --text-muted:       #475569;
    --text-faint:       #64748b;
    --success:          #059669;
    --success-light:    rgba(5,150,105,.12);
    --danger:           #dc2626;
    --danger-light:     rgba(220,38,38,.12);
    --warning:          #d97706;
    --warning-light:    rgba(217,119,6,.12);
    --info:             #0284c7;
    --info-light:       rgba(2,132,199,.12);
    --navbar-bg:        #ffffff;
    --sidebar-hover-bg: rgba(255,255,255,.06);
    --shadow:           0 4px 24px rgba(15,23,42,.12);
    --shadow-sm:        0 2px 8px rgba(15,23,42,.08);
}

/* ── System: CSS fallback (dark by default, light when OS is light) ─ */
/* JS always resolves "system" → "dark"|"light" so this rarely fires. */
html[data-theme="system"] {
    /* dark by default — matches the html base; overridden to light below */
    --bg:               #0f172a;
    --surface:          #1e293b;
    --surface-2:        #243347;
    --surface-hover:    #2a3d55;
    --border:           #334155;
    --border-light:     #3d4f65;
    --primary:          #2563eb;
    --primary-hover:    #1d4ed8;
    --primary-light:    rgba(37,99,235,.15);
    --text:             #f1f5f9;
    --text-muted:       #94a3b8;
    --text-faint:       #64748b;
    --success:          #10b981;
    --success-light:    rgba(16,185,129,.15);
    --danger:           #ef4444;
    --danger-light:     rgba(239,68,68,.15);
    --warning:          #f59e0b;
    --warning-light:    rgba(245,158,11,.15);
    --info:             #0ea5e9;
    --info-light:       rgba(14,165,233,.15);
    --navbar-bg:        #1e293b;
    --sidebar-hover-bg: rgba(255,255,255,.05);
    --shadow:           0 4px 24px rgba(0,0,0,.35);
    --shadow-sm:        0 2px 8px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        --bg:               #f8fafc;
        --surface:          #ffffff;
        --surface-2:        #f1f5f9;
        --surface-hover:    #e2eaf4;
        --border:           #e2e8f0;
        --border-light:     #cbd5e1;
        --primary:          #2563eb;
        --primary-hover:    #1d4ed8;
        --primary-light:    rgba(37,99,235,.12);
        --text:             #0f172a;
        --text-muted:       #475569;
        --text-faint:       #64748b;
        --success:          #059669;
        --success-light:    rgba(5,150,105,.12);
        --danger:           #dc2626;
        --danger-light:     rgba(220,38,38,.12);
        --warning:          #d97706;
        --warning-light:    rgba(217,119,6,.12);
        --info:             #0284c7;
        --info-light:       rgba(2,132,199,.12);
        --navbar-bg:        #ffffff;
        --sidebar-hover-bg: rgba(255,255,255,.06);
        --shadow:           0 4px 24px rgba(15,23,42,.12);
        --shadow-sm:        0 2px 8px rgba(15,23,42,.08);
    }
}