:root {
    /* === Primary Colors === */
    --color-navy-950: oklch(12% 0.05 250);
    --color-navy-900: oklch(18% 0.06 250);
    --color-navy-800: oklch(23% 0.06 250);
    --color-navy-700: oklch(30% 0.05 250);
    --color-navy-600: oklch(38% 0.05 250);

    --color-orange-500: oklch(65% 0.2 45);
    --color-orange-400: oklch(72% 0.18 45);
    --color-orange-300: oklch(80% 0.12 45);
    --color-orange-200: oklch(88% 0.08 45);

    --color-teal-600: oklch(55% 0.12 195);
    --color-teal-500: oklch(62% 0.12 195);
    --color-teal-400: oklch(70% 0.1 195);
    --color-teal-300: oklch(80% 0.07 195);

    /* === Neutrals === */
    --color-white: oklch(99% 0 0);
    --color-gray-50: oklch(97% 0.003 250);
    --color-gray-100: oklch(95% 0.005 250);
    --color-gray-200: oklch(90% 0.01 250);
    --color-gray-300: oklch(82% 0.01 250);
    --color-gray-400: oklch(68% 0.01 250);
    --color-gray-600: oklch(50% 0.02 250);
    --color-gray-800: oklch(25% 0.02 250);

    /* === Semantic Colors === */
    --color-bg-primary: var(--color-white);
    --color-bg-dark: var(--color-navy-900);
    --color-bg-darker: var(--color-navy-950);
    --color-bg-surface: var(--color-gray-50);
    --color-bg-surface-hover: var(--color-gray-100);

    --color-text-primary: var(--color-gray-800);
    --color-text-secondary: var(--color-gray-600);
    --color-text-muted: var(--color-gray-400);
    --color-text-on-dark: var(--color-white);
    --color-text-on-dark-muted: oklch(75% 0.01 250);

    --color-accent: var(--color-orange-500);
    --color-accent-hover: var(--color-orange-400);
    --color-accent-subtle: var(--color-orange-300);
    --color-accent-faint: var(--color-orange-200);

    --color-border: var(--color-gray-200);
    --color-border-subtle: var(--color-gray-100);
    --color-border-on-dark: oklch(30% 0.03 250);

    /* === Gradients === */
    --gradient-hero: linear-gradient(
        160deg,
        var(--color-navy-950) 0%,
        var(--color-navy-900) 40%,
        oklch(22% 0.06 230) 100%
    );
    --gradient-dark: linear-gradient(
        180deg,
        var(--color-navy-900) 0%,
        var(--color-navy-950) 100%
    );
    --gradient-dark-teal: linear-gradient(
        160deg,
        var(--color-navy-950) 0%,
        oklch(18% 0.05 210) 100%
    );
    --gradient-light: linear-gradient(
        180deg,
        var(--color-gray-50) 0%,
        var(--color-white) 100%
    );
    --gradient-accent-glow: radial-gradient(
        ellipse at 50% 0%,
        oklch(65% 0.15 45 / 0.08) 0%,
        transparent 70%
    );
    --gradient-teal-glow: radial-gradient(
        ellipse at 80% 50%,
        oklch(55% 0.1 195 / 0.06) 0%,
        transparent 60%
    );
    --gradient-text: linear-gradient(
        135deg,
        var(--color-white) 0%,
        var(--color-teal-300) 50%,
        var(--color-orange-400) 100%
    );

    /* === Typography Scale === */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --text-base: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
    --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
    --text-hero: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);

    /* === Spacing Scale === */
    --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);
    --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    --space-xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);
    --space-3xl: clamp(4rem, 3rem + 5vw, 8rem);

    /* === Layout === */
    --container-max: 1280px;
    --header-height: 4rem;

    /* === Motion === */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 600ms;
    --duration-slower: 1000ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* === Shadows === */
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08);
    --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.12);
    --shadow-lg: 0 8px 30px oklch(0% 0 0 / 0.16);
    --shadow-glow-orange: 0 0 40px oklch(65% 0.2 45 / 0.15);
    --shadow-glow-teal: 0 0 40px oklch(55% 0.12 195 / 0.1);

    /* === Radius === */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
}