:root {
    --color-bg-primary: #07120f;
    --color-bg-secondary: #0c1916;
    --color-surface: rgba(15, 32, 29, 0.78);
    --color-surface-strong: rgba(20, 39, 35, 0.94);
    --color-card: rgba(15, 30, 27, 0.84);
    --color-card-strong: rgba(19, 40, 35, 0.95);
    --color-sidebar-bg: rgba(8, 19, 17, 0.96);
    --color-sidebar-active: linear-gradient(135deg, rgba(37, 211, 151, 0.35), rgba(16, 185, 129, 0.2));
    --color-sidebar-hover: rgba(37, 211, 151, 0.12);
    --color-accent: #25d397;
    --color-accent-strong: #10b981;
    --color-accent-secondary: #8ff0c8;
    --color-emerald-soft: #1f9d74;
    --color-success: #34d399;
    --color-warning: #f5b84f;
    --color-danger: #ff6b6b;
    --color-info: #6ee7ff;
    --color-text-primary: #f5fff9;
    --color-text-secondary: #d7efe4;
    --color-text-muted: #7ea89a;
    --color-border: rgba(127, 212, 178, 0.18);
    --color-border-strong: rgba(127, 212, 178, 0.36);
    --color-shadow: rgba(0, 0, 0, 0.28);
    --color-shadow-strong: rgba(0, 0, 0, 0.45);
    --color-glow: rgba(37, 211, 151, 0.24);
    --color-overlay: rgba(255, 255, 255, 0.05);
    --color-overlay-strong: rgba(255, 255, 255, 0.08);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --shadow-sm: 0 8px 24px var(--color-shadow);
    --shadow-md: 0 16px 36px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.36);
    --shadow-accent: 0 0 0 1px rgba(37, 211, 151, 0.12), 0 18px 40px rgba(16, 185, 129, 0.2);
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 20px;
    --font-xl: 28px;
    --font-title: 36px;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --transition-fast: 180ms ease;
    --transition-normal: 280ms ease;
    --transition-slow: 480ms ease;
}

/* ── Light theme token overrides ────────────────────────────────────────────
   Applied when script.js sets document.body.dataset.theme = "light".
   JS also sets these via setProperty() so either mechanism covers it.
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
    color-scheme: light;

    --color-bg-primary:       #f4f7f5;
    --color-bg-secondary:     #eaf2ed;
    --color-surface:          rgba(255, 255, 255, 0.90);
    --color-surface-strong:   rgba(255, 255, 255, 0.97);
    --color-card:             rgba(255, 255, 255, 0.88);
    --color-card-strong:      rgba(255, 255, 255, 0.98);
    --color-sidebar-bg:       rgba(240, 248, 244, 0.98);
    --color-sidebar-active:   linear-gradient(135deg, rgba(37,211,151,0.18), rgba(16,185,129,0.10));
    --color-sidebar-hover:    rgba(37, 211, 151, 0.10);

    --color-text-primary:     #0f2318;
    --color-text-secondary:   #2d5040;
    --color-text-muted:       #5c8a72;

    --color-border:           rgba(37, 150, 100, 0.20);
    --color-border-strong:    rgba(37, 150, 100, 0.38);

    --color-shadow:           rgba(0, 0, 0, 0.10);
    --color-shadow-strong:    rgba(0, 0, 0, 0.18);
    --shadow-sm:              0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-md:              0 4px 20px rgba(0, 0, 0, 0.10);
    --shadow-lg:              0 8px 32px rgba(0, 0, 0, 0.14);

    --color-glow:             rgba(37, 211, 151, 0.14);
    --color-overlay:          rgba(0, 0, 0, 0.04);
    --color-overlay-strong:   rgba(0, 0, 0, 0.07);

    /* semantic colours stay the same (accent, success, warning, danger) */
}