:root {
    /* ══════════════════════════════════════════════
       PREMIUM LIGHT PALETTE - "Crystal River"
       Clean, sophisticated, nature-tech fusion
    ══════════════════════════════════════════════ */

    /* Backgrounds - warm whites with subtle warmth */
    --bg-primary: #fefefe;
    --bg-secondary: #f8fafa;
    --bg-tertiary: #f0f5f4;
    --bg-glass: rgba(255, 255, 255, 0.72);
    --bg-glass-strong: rgba(255, 255, 255, 0.88);

    /* Hero gradient - subtle depth */
    --bg-hero: linear-gradient(
        165deg,
        #f0fdf4 0%,
        #ecfeff 25%,
        #f0fdfa 50%,
        #fefce8 75%,
        #fef3c7 100%
    );

    /* Primary brand colors - rich teals & emeralds */
    --brand-50: #f0fdfa;
    --brand-100: #ccfbf1;
    --brand-200: #99f6e4;
    --brand-300: #5eead4;
    --brand-400: #2dd4bf;
    --brand-500: #14b8a6;
    --brand-600: #0d9488;
    --brand-700: #0f766e;
    --brand-800: #115e59;
    --brand-900: #134e4a;

    /* Accent - warm amber for energy/fuel */
    --accent-300: #fcd34d;
    --accent-400: #fbbf24;
    --accent-500: #f59e0b;
    --accent-600: #d97706;

    /* Secondary accent - sky blue for freshness */
    --sky-300: #7dd3fc;
    --sky-400: #38bdf8;
    --sky-500: #0ea5e9;

    /* Text hierarchy - rich, readable */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    /* Borders & Dividers */
    --border-light: rgba(15, 23, 42, 0.06);
    --border-default: rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.15);
    --border-brand: rgba(20, 184, 166, 0.30);

    /* Shadows - layered depth */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.10), 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.12), 0 16px 40px rgba(15, 23, 42, 0.08);
    --shadow-glow-brand: 0 8px 40px rgba(20, 184, 166, 0.25);
    --shadow-glow-accent: 0 8px 40px rgba(251, 191, 36, 0.30);

    /* Premium Gradients */
    --gradient-text-hero: linear-gradient(135deg, #0f766e 0%, #0d9488 40%, #0ea5e9 100%);
    --gradient-text-brand: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-500) 100%);
    --gradient-cta: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-400) 50%, var(--sky-400) 100%);
    --gradient-cta-hover: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-500) 50%, var(--sky-500) 100%);
    --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(240,253,250,0.6) 100%);
    --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%);

    /* Typography */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing Scale */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 10rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Animation */
    --duration-instant: 100ms;
    --duration-fast: 200ms;
    --duration-normal: 350ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);

    /* Z-Index Scale */
    --z-base: 0;
    --z-above: 10;
    --z-header: 100;
    --z-modal: 200;
    --z-toast: 300;
}