:root {
    /* === Brand Colors — Electric Blue accent === */
    --color-primary: #3B82F6;
    /* Electric Blue */
    --color-primary-dark: #2563EB;
    --color-primary-light: rgba(59, 130, 246, 0.1);
    --color-accent: #3B82F6;
    /* Unified accent */
    --color-accent-dark: #2563EB;
    --color-accent-light: rgba(59, 130, 246, 0.06);

    /* === Extended Palette === */
    --color-lavender: #818cf8;
    /* Soft Indigo */
    --color-lavender-light: rgba(129, 140, 248, 0.08);
    --color-peach: #f97316;
    /* Warm Orange */
    --color-mint: #34d399;
    /* Emerald */
    --color-sky: #38bdf8;
    /* Sky Blue */

    /* === Neutrals — Dark Theme === */
    --color-bg: #121212;
    /* Deep charcoal */
    --color-white: #F5F5F5;
    /* Off-white for text */
    --color-text: #F5F5F5;
    /* Headlines */
    --color-text-light: #94A3B8;
    /* Muted slate */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(255, 255, 255, 0.05);

    /* === Surface Colors === */
    --color-surface: #1E1E1E;
    /* Onyx cards */
    --color-surface-raised: #252525;
    /* Hover / elevated */
    --color-bg-deep: #0a0a0a;
    /* Footer / deep areas */

    /* === Glass / Transparency === */
    --color-header-bg: rgba(18, 18, 18, 0.8);
    --color-glass-bg: rgba(30, 30, 30, 0.6);
    --color-glass-subtle: rgba(255, 255, 255, 0.04);
    --color-glass-border: rgba(255, 255, 255, 0.06);
    --color-glass-border-md: rgba(255, 255, 255, 0.1);

    /* === Status === */
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-info: #38bdf8;

    /* === Typography === */
    --font-family: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3.25rem;
    --font-size-5xl: 4rem;

    /* === Spacing === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;

    /* === Radius === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50px;

    /* === Shadows (dark theme — deeper, blue-tinted) === */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

    /* === Layout === */
    --max-width: 1280px;
    --header-height: 72px;
}

/* ========================================
   LIGHT THEME OVERRIDES
   ======================================== */
[data-theme="light"] {
    --color-primary: #3B82F6;
    --color-primary-dark: #2563EB;
    --color-primary-light: rgba(59, 130, 246, 0.08);
    --color-accent: #3B82F6;
    --color-accent-dark: #2563EB;
    --color-accent-light: rgba(59, 130, 246, 0.04);

    --color-lavender: #818cf8;
    --color-lavender-light: rgba(129, 140, 248, 0.06);

    --color-bg: #FFFFFF;
    --color-white: #FFFFFF;
    --color-text: #1E293B;
    --color-text-light: #64748B;
    --color-border: #E2E8F0;
    --color-border-light: #F1F5F9;

    --color-surface: #F8F9FC;
    --color-surface-raised: #FFFFFF;
    --color-bg-deep: #F0F1F5;

    --color-header-bg: rgba(255, 255, 255, 0.9);
    --color-glass-bg: rgba(255, 255, 255, 0.8);
    --color-glass-subtle: rgba(0, 0, 0, 0.02);
    --color-glass-border: rgba(0, 0, 0, 0.06);
    --color-glass-border-md: rgba(0, 0, 0, 0.1);

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
}