:root {
    color-scheme: light;

    /* Core palette - light mode */
    --bg-primary: #F7F9FC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #EEF3F2;
    --surface: #FFFFFF;
    --surface-hover: #F3F7F8;
    --surface-active: #EEF3F2;
    --surface-border: #C6D1CF;

    --text-primary: #2A3036;
    --text-secondary: #5B6470;
    --text-tertiary: #6B7280;
    --text-muted: #94A3B8;
    --text-disabled: #94A3B8;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #0C1A1C;
    --link-visited: #4B6E6A;

    --primary: #0F766E;
    --primary-hover: #115E59;
    --primary-active: #134E4A;
    --primary-dark: #134E4A;
    --primary-light: #2DD4BF;

    --link-color: var(--primary);
    --link-hover: var(--primary-hover);
    --link-active: var(--primary-active);

    --button-primary: #0F766E;
    --button-primary-hover: #115E59;
    --button-primary-active: #134E4A;

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(15, 118, 110, 0.14);
    --accent-gold: #946B0C;
    --accent-gold-hover: #7A590A;
    --accent-pink: var(--accent-gold);
    --accent-pink-hover: var(--accent-gold-hover);

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

    --border: #C6D1CF;
    --border-light: #D8E1DF;
    --divider: #C6D1CF;
    --disabled-bg: #EEF3F2;
    --focus-ring: #0F766E;

    --overlay-soft: rgba(255, 255, 255, 0.78);
    --overlay-muted: rgba(238, 243, 242, 0.88);
    --overlay-strong: rgba(255, 255, 255, 0.94);
    --overlay-accent: rgba(15, 118, 110, 0.06);
    --grid-line: rgba(198, 209, 207, 0.36);
    --hero-glow: rgba(15, 118, 110, 0.14);
    --spotlight: rgba(15, 118, 110, 0.08);

    --shadow-color: #0F172A;
    --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(15, 118, 110, 0.32);

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

    --gradient-primary: linear-gradient(180deg, #0F766E 0%, #115E59 100%);
    --gradient-cyan: linear-gradient(180deg, #0F766E 0%, #134E4A 100%);
    --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 248, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(243, 247, 248, 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;

    --space-section-block: clamp(4rem, 7vw, 6rem);
    --space-section-block-mobile: 3.5rem;
    --space-section-header-margin: var(--space-2xl);
    --space-stack-xs: var(--space-xs);
    --space-stack-sm: var(--space-sm);
    --space-stack-md: var(--space-md);
    --space-stack-lg: var(--space-lg);
    --space-stack-xl: var(--space-xl);
    --space-inline-sm: var(--space-sm);
    --space-inline-md: var(--space-md);
    --space-inline-lg: var(--space-lg);
    --space-surface-padding: var(--space-lg);
    --space-surface-padding-lg: var(--space-xl);
    --space-surface-padding-compact: var(--space-md);
    --space-container-inline: var(--space-lg);
    --space-container-inline-mobile: var(--space-md);

    --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-dropdown: 250;
    --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: #0C1A1C;
    --bg-secondary: #152A2D;
    --bg-tertiary: #132427;
    --surface: #152A2D;
    --surface-hover: #1B3134;
    --surface-active: #20373A;
    --surface-border: #263D3F;

    --text-primary: #E2E8F0;
    --text-secondary: #8DA09D;
    --text-tertiary: #7F9390;
    --text-muted: #4F6664;
    --text-disabled: #4F6664;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #0C1A1C;
    --link-visited: #73AAA4;

    --primary: #2DD4BF;
    --primary-hover: #5EEAD4;
    --primary-active: #14B8A6;
    --primary-dark: #134E4A;
    --primary-light: #5EEAD4;

    --link-color: var(--primary);
    --link-hover: var(--primary-hover);
    --link-active: var(--primary-active);

    --button-primary: #0F766E;
    --button-primary-hover: #115E59;
    --button-primary-active: #134E4A;

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(45, 212, 191, 0.18);
    --accent-gold: #E8B931;
    --accent-gold-hover: #F0C75A;
    --accent-pink: var(--accent-gold);
    --accent-pink-hover: var(--accent-gold-hover);

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

    --border: #263D3F;
    --border-light: #345154;
    --divider: #263D3F;
    --disabled-bg: #132427;
    --focus-ring: #2DD4BF;

    --overlay-soft: rgba(21, 42, 45, 0.82);
    --overlay-muted: rgba(19, 36, 39, 0.88);
    --overlay-strong: rgba(12, 26, 28, 0.92);
    --overlay-accent: rgba(45, 212, 191, 0.12);
    --grid-line: rgba(141, 160, 157, 0.18);
    --hero-glow: rgba(45, 212, 191, 0.18);
    --spotlight: rgba(45, 212, 191, 0.12);

    --shadow-color: #020814;
    --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(15, 118, 110, 0.34);

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

    --gradient-primary: linear-gradient(180deg, #0F766E 0%, #115E59 100%);
    --gradient-cyan: linear-gradient(180deg, #2DD4BF 0%, #14B8A6 100%);
    --gradient-surface: linear-gradient(145deg, rgba(21, 42, 45, 0.94) 0%, rgba(12, 26, 28, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(38, 61, 63, 0.38) 0%, rgba(12, 26, 28, 0.2) 100%);
    --gradient-text: linear-gradient(180deg, #E2E8F0 0%, #C7D7D4 100%);
    --gradient-section-title: linear-gradient(180deg, #E2E8F0 0%, #C7D7D4 100%);
    --gradient-display-heading: linear-gradient(180deg, #F4F7FA 0%, #CFDDD9 100%);
}

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

        --bg-primary: #0C1A1C;
        --bg-secondary: #152A2D;
        --bg-tertiary: #132427;
        --surface: #152A2D;
        --surface-hover: #1B3134;
        --surface-active: #20373A;
        --surface-border: #263D3F;

        --text-primary: #E2E8F0;
        --text-secondary: #8DA09D;
        --text-tertiary: #7F9390;
        --text-muted: #4F6664;
        --text-disabled: #4F6664;
        --text-on-accent: #FFFFFF;
        --text-on-bright-accent: #0C1A1C;
        --link-visited: #73AAA4;

        --primary: #2DD4BF;
        --primary-hover: #5EEAD4;
        --primary-active: #14B8A6;
        --primary-dark: #134E4A;
        --primary-light: #5EEAD4;

        --link-color: var(--primary);
        --link-hover: var(--primary-hover);
        --link-active: var(--primary-active);

        --button-primary: #0F766E;
        --button-primary-hover: #115E59;
        --button-primary-active: #134E4A;

        --accent-cyan: var(--primary);
        --accent-cyan-hover: var(--primary-hover);
        --accent-cyan-glow: rgba(45, 212, 191, 0.18);
        --accent-gold: #E8B931;
        --accent-gold-hover: #F0C75A;
        --accent-pink: var(--accent-gold);
        --accent-pink-hover: var(--accent-gold-hover);

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

        --border: #263D3F;
        --border-light: #345154;
        --divider: #263D3F;
        --disabled-bg: #132427;
        --focus-ring: #2DD4BF;

        --overlay-soft: rgba(21, 42, 45, 0.82);
        --overlay-muted: rgba(19, 36, 39, 0.88);
        --overlay-strong: rgba(12, 26, 28, 0.92);
        --overlay-accent: rgba(45, 212, 191, 0.12);
        --grid-line: rgba(141, 160, 157, 0.18);
        --hero-glow: rgba(45, 212, 191, 0.18);
        --spotlight: rgba(45, 212, 191, 0.12);

        --shadow-color: #020814;
        --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(15, 118, 110, 0.34);

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

        --gradient-primary: linear-gradient(180deg, #0F766E 0%, #115E59 100%);
        --gradient-cyan: linear-gradient(180deg, #2DD4BF 0%, #14B8A6 100%);
        --gradient-surface: linear-gradient(145deg, rgba(21, 42, 45, 0.94) 0%, rgba(12, 26, 28, 0.98) 100%);
        --gradient-glass: linear-gradient(180deg, rgba(38, 61, 63, 0.38) 0%, rgba(12, 26, 28, 0.2) 100%);
        --gradient-text: linear-gradient(180deg, #E2E8F0 0%, #C7D7D4 100%);
        --gradient-section-title: linear-gradient(180deg, #E2E8F0 0%, #C7D7D4 100%);
        --gradient-display-heading: linear-gradient(180deg, #F4F7FA 0%, #CFDDD9 100%);
    }
}