:root {
    color-scheme: light;

    /* Core palette - light mode */
    --bg-primary: #F7F9FC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --surface: #FFFFFF;
    --surface-hover: #F8FAFC;
    --surface-active: #F1F5F9;
    --surface-border: #E2E8F0;

    --text-primary: #2A3036;
    --text-secondary: #5B6470;
    --text-tertiary: #64748B;
    --text-muted: #94A3B8;
    --text-disabled: #94A3B8;
    --text-on-accent: #FFFFFF;

    --primary: #285E9E;
    --primary-hover: #234F85;
    --primary-active: #1D426F;
    --primary-dark: #1E3A5F;
    --primary-light: #93C5FD;

    --accent-cyan: #0369A1;
    --accent-cyan-hover: #075985;
    --accent-cyan-glow: rgba(3, 105, 161, 0.14);
    --accent-pink: #4F8BCF;
    --accent-pink-hover: #3F74AF;

    --success: #166534;
    --warning: #92400E;
    --error: #B91C1C;
    --info: #0369A1;

    --border: #E2E8F0;
    --border-light: #CBD5E1;
    --divider: #E2E8F0;
    --disabled-bg: #F1F5F9;
    --focus-ring: #93C5FD;

    --overlay-soft: rgba(255, 255, 255, 0.78);
    --overlay-muted: rgba(241, 245, 249, 0.88);
    --overlay-strong: rgba(255, 255, 255, 0.94);
    --overlay-accent: rgba(40, 94, 158, 0.05);
    --grid-line: rgba(148, 163, 184, 0.18);
    --hero-glow: rgba(147, 197, 253, 0.12);
    --spotlight: rgba(40, 94, 158, 0.04);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 30px 70px rgba(15, 23, 42, 0.14);
    --shadow-2xl: 0 36px 96px rgba(15, 23, 42, 0.18);
    --shadow-primary: 0 14px 30px -20px rgba(40, 94, 158, 0.22);

    --glow-primary: 0 0 0 0 transparent;
    --glow-cyan: 0 0 0 0 transparent;
    --glow-text: none;

    --gradient-primary: linear-gradient(180deg, #285E9E 0%, #234F85 100%);
    --gradient-cyan: linear-gradient(180deg, #0369A1 0%, #075985 100%);
    --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.92) 100%);
    --gradient-text: linear-gradient(180deg, #2A3036 0%, #3C4652 100%);
    --gradient-section-title: linear-gradient(180deg, #2A3036 0%, #404854 100%);
    --gradient-display-heading: linear-gradient(180deg, #2A3036 0%, #3C4652 100%);

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;

    --font-heading: 'Outfit', 'Segoe UI', sans-serif;
    --font-sans: 'Source Sans 3', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;

    --z-negative: -1;
    --z-base: 0;
    --z-elevate: 1;
    --z-sticky: 100;
    --z-drawer: 200;
    --z-modal: 300;
    --z-popover: 400;
    --z-toast: 500;

    /* Compatibility aliases used by existing page styles */
    --primary-color: var(--primary);
    --accent-color: var(--accent-cyan);
    --darker-bg: var(--bg-primary);
    --card-bg: var(--bg-secondary);
    --surface-color: var(--surface);
    --border-color: var(--border);
    --card-shadow: var(--shadow-xl);
    --text-on-dark: var(--text-primary);
    --text-on-light: var(--bg-primary);
    --navbar-text: var(--text-primary);
    --transition-speed: var(--transition-base);
    --white: #FFFFFF;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-primary: #111827;
    --bg-secondary: #1F2937;
    --bg-tertiary: #1E293B;
    --surface: #1F2937;
    --surface-hover: #253244;
    --surface-active: #334155;
    --surface-border: #334155;

    --text-primary: #E2E8F0;
    --text-secondary: #94A3B8;
    --text-tertiary: #94A3B8;
    --text-muted: #64748B;
    --text-disabled: #475569;

    --primary: #60A5FA;
    --primary-hover: #93C5FD;
    --primary-active: #3B82F6;
    --primary-dark: #1D4ED8;
    --primary-light: #BFDBFE;

    --accent-cyan: #38BDF8;
    --accent-cyan-hover: #7DD3FC;
    --accent-cyan-glow: rgba(56, 189, 248, 0.16);
    --accent-pink: #93C5FD;
    --accent-pink-hover: #BFDBFE;

    --success: #4ADE80;
    --warning: #FBBF24;
    --error: #F87171;
    --info: #38BDF8;

    --border: #334155;
    --border-light: #475569;
    --divider: #334155;
    --disabled-bg: #1E293B;
    --focus-ring: #3B82F6;

    --overlay-soft: rgba(31, 41, 55, 0.78);
    --overlay-muted: rgba(30, 41, 59, 0.84);
    --overlay-strong: rgba(17, 24, 39, 0.92);
    --overlay-accent: rgba(96, 165, 250, 0.08);
    --grid-line: rgba(148, 163, 184, 0.12);
    --hero-glow: rgba(59, 130, 246, 0.14);
    --spotlight: rgba(96, 165, 250, 0.06);

    --shadow-sm: 0 1px 2px rgba(2, 8, 23, 0.26);
    --shadow-md: 0 14px 32px rgba(2, 8, 23, 0.28);
    --shadow-lg: 0 24px 52px rgba(2, 8, 23, 0.36);
    --shadow-xl: 0 32px 74px rgba(2, 8, 23, 0.42);
    --shadow-2xl: 0 40px 104px rgba(2, 8, 23, 0.48);
    --shadow-primary: 0 16px 34px -20px rgba(96, 165, 250, 0.24);

    --glow-primary: 0 0 0 0 transparent;
    --glow-cyan: 0 0 0 0 transparent;

    --gradient-primary: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%);
    --gradient-cyan: linear-gradient(180deg, #38BDF8 0%, #0EA5E9 100%);
    --gradient-surface: linear-gradient(145deg, rgba(31, 41, 55, 0.92) 0%, rgba(17, 24, 39, 0.96) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(51, 65, 85, 0.38) 0%, rgba(17, 24, 39, 0.2) 100%);
    --gradient-text: linear-gradient(180deg, #E2E8F0 0%, #CBD5E1 100%);
    --gradient-section-title: linear-gradient(180deg, #E2E8F0 0%, #CBD5E1 100%);
    --gradient-display-heading: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --bg-primary: #111827;
        --bg-secondary: #1F2937;
        --bg-tertiary: #1E293B;
        --surface: #1F2937;
        --surface-hover: #253244;
        --surface-active: #334155;
        --surface-border: #334155;

        --text-primary: #E2E8F0;
        --text-secondary: #94A3B8;
        --text-tertiary: #94A3B8;
        --text-muted: #64748B;
        --text-disabled: #475569;

        --primary: #60A5FA;
        --primary-hover: #93C5FD;
        --primary-active: #3B82F6;
        --primary-dark: #1D4ED8;
        --primary-light: #BFDBFE;

        --accent-cyan: #38BDF8;
        --accent-cyan-hover: #7DD3FC;
        --accent-cyan-glow: rgba(56, 189, 248, 0.16);
        --accent-pink: #93C5FD;
        --accent-pink-hover: #BFDBFE;

        --success: #4ADE80;
        --warning: #FBBF24;
        --error: #F87171;
        --info: #38BDF8;

        --border: #334155;
        --border-light: #475569;
        --divider: #334155;
        --disabled-bg: #1E293B;
        --focus-ring: #3B82F6;

        --overlay-soft: rgba(31, 41, 55, 0.78);
        --overlay-muted: rgba(30, 41, 59, 0.84);
        --overlay-strong: rgba(17, 24, 39, 0.92);
        --overlay-accent: rgba(96, 165, 250, 0.08);
        --grid-line: rgba(148, 163, 184, 0.12);
        --hero-glow: rgba(59, 130, 246, 0.14);
        --spotlight: rgba(96, 165, 250, 0.06);

        --shadow-sm: 0 1px 2px rgba(2, 8, 23, 0.26);
        --shadow-md: 0 14px 32px rgba(2, 8, 23, 0.28);
        --shadow-lg: 0 24px 52px rgba(2, 8, 23, 0.36);
        --shadow-xl: 0 32px 74px rgba(2, 8, 23, 0.42);
        --shadow-2xl: 0 40px 104px rgba(2, 8, 23, 0.48);
        --shadow-primary: 0 16px 34px -20px rgba(96, 165, 250, 0.24);

        --glow-primary: 0 0 0 0 transparent;
        --glow-cyan: 0 0 0 0 transparent;

        --gradient-primary: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%);
        --gradient-cyan: linear-gradient(180deg, #38BDF8 0%, #0EA5E9 100%);
        --gradient-surface: linear-gradient(145deg, rgba(31, 41, 55, 0.92) 0%, rgba(17, 24, 39, 0.96) 100%);
        --gradient-glass: linear-gradient(180deg, rgba(51, 65, 85, 0.38) 0%, rgba(17, 24, 39, 0.2) 100%);
        --gradient-text: linear-gradient(180deg, #E2E8F0 0%, #CBD5E1 100%);
        --gradient-section-title: linear-gradient(180deg, #E2E8F0 0%, #CBD5E1 100%);
        --gradient-display-heading: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
    }
}