:root {
    color-scheme: light;

    /* Core palette - light mode */
    --bg-primary: #F4F6F4;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #EEF3EF;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-hover: #F2F6F4;
    --surface-active: #EEF3EF;
    --surface-border: #C7D8D1;

    --text-primary: #1E2B29;
    --text-secondary: #536660;
    --text-tertiary: #62736D;
    --text-muted: #8EA19B;
    --text-disabled: #8EA19B;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #071A1B;
    --link-visited: #466C66;

    --primary: #0B6B61;
    --primary-hover: #08564F;
    --primary-active: #063F3B;
    --primary-dark: #063F3B;
    --primary-light: #3FCDB8;

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

    --button-primary: #0B6B61;
    --button-primary-hover: #08564F;
    --button-primary-active: #063F3B;

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(11, 107, 97, 0.14);
    --accent-gold: #9A6412;
    --accent-gold-fill: #C6861F;
    --accent-gold-hover: #7D500E;
    --accent-pink: var(--accent-gold);
    --accent-pink-hover: var(--accent-gold-hover);

    --success: #166534;
    --warning: #92400E;
    --error: #B91C1C;
    --info: #2563A8;

    --border: #C7D8D1;
    --border-light: #D8E4DF;
    --divider: #C7D8D1;
    --disabled-bg: #EEF3EF;
    --focus-ring: #0B6B61;
    --focus-ring-inner: #FFFFFF;

    --overlay-soft: rgba(255, 255, 255, 0.78);
    --overlay-muted: rgba(238, 243, 239, 0.88);
    --overlay-strong: rgba(255, 255, 255, 0.94);
    --overlay-accent: rgba(11, 107, 97, 0.06);
    --grid-line: rgba(199, 216, 209, 0.36);
    --hero-glow: rgba(11, 107, 97, 0.14);
    --spotlight: rgba(11, 107, 97, 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(11, 107, 97, 0.32);

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

    --gradient-primary: linear-gradient(180deg, #0B6B61 0%, #08564F 100%);
    --gradient-cyan: linear-gradient(180deg, #0B6B61 0%, #063F3B 100%);
    --gradient-signature: linear-gradient(135deg, #08564F 0%, #0B6B61 55%, #9A6412 140%);
    --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 246, 244, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(242, 246, 244, 0.92) 100%);
    --gradient-text: linear-gradient(180deg, #1E2B29 0%, #33413E 100%);
    --gradient-section-title: linear-gradient(180deg, #1E2B29 0%, #37433F 100%);
    --gradient-display-heading: linear-gradient(180deg, #1E2B29 0%, #33413E 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: #071A1B;
    --bg-secondary: #0E2426;
    --bg-tertiary: #0D2224;
    --surface: #102A2C;
    --surface-raised: #163134;
    --surface-hover: #173438;
    --surface-active: #1C3B3E;
    --surface-border: #244044;

    --text-primary: #E6ECE9;
    --text-secondary: #9CAEA8;
    --text-tertiary: #829891;
    --text-muted: #58706B;
    --text-disabled: #58706B;
    --text-on-accent: #FFFFFF;
    --text-on-bright-accent: #071A1B;
    --link-visited: #80B8B0;

    --primary: #3FCDB8;
    --primary-hover: #6FE0CF;
    --primary-active: #22B8A9;
    --primary-dark: #063F3B;
    --primary-light: #6FE0CF;

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

    --button-primary: #0B6B61;
    --button-primary-hover: #08564F;
    --button-primary-active: #063F3B;

    --accent-cyan: var(--primary);
    --accent-cyan-hover: var(--primary-hover);
    --accent-cyan-glow: rgba(63, 205, 184, 0.18);
    --accent-gold: #E3B341;
    --accent-gold-fill: #C6861F;
    --accent-gold-hover: #EBC869;
    --accent-pink: var(--accent-gold);
    --accent-pink-hover: var(--accent-gold-hover);

    --success: #4ADE80;
    --warning: #FBBF24;
    --error: #F87171;
    --info: #5DC2E0;

    --border: #244044;
    --border-light: #33575B;
    --divider: #244044;
    --disabled-bg: #0D2224;
    --focus-ring: #3FCDB8;
    --focus-ring-inner: #071A1B;

    --overlay-soft: rgba(16, 42, 44, 0.82);
    --overlay-muted: rgba(13, 34, 36, 0.88);
    --overlay-strong: rgba(7, 26, 27, 0.92);
    --overlay-accent: rgba(63, 205, 184, 0.12);
    --grid-line: rgba(156, 174, 168, 0.18);
    --hero-glow: rgba(63, 205, 184, 0.18);
    --spotlight: rgba(63, 205, 184, 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(11, 107, 97, 0.34);

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

    --gradient-primary: linear-gradient(180deg, #0B6B61 0%, #08564F 100%);
    --gradient-cyan: linear-gradient(180deg, #3FCDB8 0%, #22B8A9 100%);
    --gradient-signature: linear-gradient(135deg, #08564F 0%, #0B6B61 55%, #9A6412 140%);
    --gradient-surface: linear-gradient(145deg, rgba(16, 42, 44, 0.94) 0%, rgba(7, 26, 27, 0.98) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(36, 64, 68, 0.38) 0%, rgba(7, 26, 27, 0.2) 100%);
    --gradient-text: linear-gradient(180deg, #E6ECE9 0%, #CBD9D5 100%);
    --gradient-section-title: linear-gradient(180deg, #E6ECE9 0%, #CBD9D5 100%);
    --gradient-display-heading: linear-gradient(180deg, #F4F8F6 0%, #D2DED9 100%);
}

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

        --bg-primary: #071A1B;
        --bg-secondary: #0E2426;
        --bg-tertiary: #0D2224;
        --surface: #102A2C;
        --surface-raised: #163134;
        --surface-hover: #173438;
        --surface-active: #1C3B3E;
        --surface-border: #244044;

        --text-primary: #E6ECE9;
        --text-secondary: #9CAEA8;
        --text-tertiary: #829891;
        --text-muted: #58706B;
        --text-disabled: #58706B;
        --text-on-accent: #FFFFFF;
        --text-on-bright-accent: #071A1B;
        --link-visited: #80B8B0;

        --primary: #3FCDB8;
        --primary-hover: #6FE0CF;
        --primary-active: #22B8A9;
        --primary-dark: #063F3B;
        --primary-light: #6FE0CF;

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

        --button-primary: #0B6B61;
        --button-primary-hover: #08564F;
        --button-primary-active: #063F3B;

        --accent-cyan: var(--primary);
        --accent-cyan-hover: var(--primary-hover);
        --accent-cyan-glow: rgba(63, 205, 184, 0.18);
        --accent-gold: #E3B341;
        --accent-gold-fill: #C6861F;
        --accent-gold-hover: #EBC869;
        --accent-pink: var(--accent-gold);
        --accent-pink-hover: var(--accent-gold-hover);

        --success: #4ADE80;
        --warning: #FBBF24;
        --error: #F87171;
        --info: #5DC2E0;

        --border: #244044;
        --border-light: #33575B;
        --divider: #244044;
        --disabled-bg: #0D2224;
        --focus-ring: #3FCDB8;
        --focus-ring-inner: #071A1B;

        --overlay-soft: rgba(16, 42, 44, 0.82);
        --overlay-muted: rgba(13, 34, 36, 0.88);
        --overlay-strong: rgba(7, 26, 27, 0.92);
        --overlay-accent: rgba(63, 205, 184, 0.12);
        --grid-line: rgba(156, 174, 168, 0.18);
        --hero-glow: rgba(63, 205, 184, 0.18);
        --spotlight: rgba(63, 205, 184, 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(11, 107, 97, 0.34);

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

        --gradient-primary: linear-gradient(180deg, #0B6B61 0%, #08564F 100%);
        --gradient-cyan: linear-gradient(180deg, #3FCDB8 0%, #22B8A9 100%);
        --gradient-signature: linear-gradient(135deg, #08564F 0%, #0B6B61 55%, #9A6412 140%);
        --gradient-surface: linear-gradient(145deg, rgba(16, 42, 44, 0.94) 0%, rgba(7, 26, 27, 0.98) 100%);
        --gradient-glass: linear-gradient(180deg, rgba(36, 64, 68, 0.38) 0%, rgba(7, 26, 27, 0.2) 100%);
        --gradient-text: linear-gradient(180deg, #E6ECE9 0%, #CBD9D5 100%);
        --gradient-section-title: linear-gradient(180deg, #E6ECE9 0%, #CBD9D5 100%);
        --gradient-display-heading: linear-gradient(180deg, #F4F8F6 0%, #D2DED9 100%);
    }
}