/* ===================================================================
   Kitchen Eyes - Design Tokens / CSS Variables
   Luxury executive color palette, typography, and spacing system
   =================================================================== */

:root {
    /* -- Primary Palette: Deep Executive Navy -- */
    --navy-deepest:    #050C18;
    --navy-deep:       #07111F;
    --navy:            #0D1B2A;
    --navy-mid:        #111C2A;
    --navy-light:      #162435;
    --charcoal:        #0F1720;
    --graphite:        #1A2332;

    /* -- Surface / Card Tones: Richer Layering -- */
    --surface-dark:    #0A1522;
    --surface-card:    #111E2E;
    --surface-card-alt:#0E1926;
    --surface-elevated:#162A3C;
    --surface-hover:   #1C3248;

    /* -- Accent: Deep Petroleum Teal -- */
    --teal:            #1E7F7A;
    --teal-light:      #5FC7C0;
    --teal-bright:     #7EDDD7;
    --teal-muted:      #175E5A;
    --teal-glow:       rgba(30, 127, 122, 0.12);
    --teal-glow-strong:rgba(30, 127, 122, 0.24);
    --teal-glow-ultra: rgba(30, 127, 122, 0.35);

    /* -- Accent: Muted Champagne Gold -- */
    --gold:            #B8955E;
    --gold-light:      #D2B27A;
    --gold-bright:     #E5CFA0;
    --gold-subtle:     #917548;
    --gold-glow:       rgba(184, 149, 94, 0.10);
    --gold-glow-strong:rgba(184, 149, 94, 0.22);

    /* -- Text: Warmer Neutrals -- */
    --text-primary:    #F5F3EE;
    --text-secondary:  #C8D0D9;
    --text-muted:      #8FA0B2;
    --text-dim:        #607588;
    --text-white:      #FFFFFF;

    /* -- Status -- */
    --status-green:    #34A86C;
    --status-amber:    #D49A3C;
    --status-red:      #C44E4E;

    /* -- Borders / Lines: Deeper -- */
    --border-subtle:   rgba(255, 255, 255, 0.04);
    --border-card:     rgba(255, 255, 255, 0.06);
    --border-accent:   rgba(30, 127, 122, 0.22);
    --border-gold:     rgba(184, 149, 94, 0.18);
    --border-line:     #223247;

    /* -- Gradients: Smoother, Richer -- */
    --grad-hero:       linear-gradient(145deg, #050C18 0%, #0A1828 35%, #07111F 70%, #0D1B2A 100%);
    --grad-section:    linear-gradient(180deg, #07111F 0%, #0D1B2A 100%);
    --grad-section-alt:linear-gradient(180deg, #0D1B2A 0%, #111C2A 100%);
    --grad-card:       linear-gradient(160deg, #111E2E 0%, #0E1926 100%);
    --grad-card-hover:  linear-gradient(160deg, #152535 0%, #111E2E 100%);
    --grad-teal:       linear-gradient(135deg, #175E5A, #1E7F7A, #5FC7C0);
    --grad-gold:       linear-gradient(135deg, #917548, #B8955E, #D2B27A);
    --grad-cta:        linear-gradient(135deg, #1E7F7A 0%, #175E5A 100%);
    --grad-overlay:    linear-gradient(180deg, rgba(5,12,24,0.97) 0%, rgba(7,17,31,0.75) 50%, rgba(5,12,24,0.97) 100%);
    --grad-image-veil: linear-gradient(180deg, rgba(5,12,24,0.90) 0%, rgba(7,17,31,0.55) 40%, rgba(5,12,24,0.85) 100%);
    --grad-hero-radial:radial-gradient(ellipse at 70% 40%, rgba(30,127,122,0.06) 0%, transparent 60%);

    /* -- Premium Effect Gradients -- */
    --grad-glass:      linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    --grad-glass-edge:  linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%);
    --grad-shimmer:    linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.03) 50%, transparent 75%);
    --grad-depth:      linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 100%);
    --grad-spotlight:  radial-gradient(ellipse at 50% 0%, rgba(30,127,122,0.08) 0%, transparent 60%);
    --grad-warmth:     radial-gradient(ellipse at 50% 100%, rgba(184,149,94,0.04) 0%, transparent 50%);

    /* -- Shadows: Deeper, More Refined -- */
    --shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-md:       0 4px 24px rgba(0, 0, 0, 0.40);
    --shadow-lg:       0 12px 48px rgba(0, 0, 0, 0.50);
    --shadow-xl:       0 20px 60px rgba(0, 0, 0, 0.55);
    --shadow-2xl:      0 32px 80px rgba(0, 0, 0, 0.60);
    --shadow-glow-teal:0 0 40px rgba(30, 127, 122, 0.12);
    --shadow-glow-gold:0 0 40px rgba(184, 149, 94, 0.08);
    --shadow-glow-teal-lg:0 0 80px rgba(30, 127, 122, 0.15), 0 0 160px rgba(30, 127, 122, 0.06);
    --shadow-glow-gold-lg:0 0 80px rgba(184, 149, 94, 0.10), 0 0 160px rgba(184, 149, 94, 0.04);
    --shadow-card:     0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-card-hover:0 16px 48px rgba(0, 0, 0, 0.45), 0 0 24px rgba(30, 127, 122, 0.06);
    --shadow-inset:    inset 0 1px 0 rgba(255,255,255,0.03);
    --shadow-inset-strong:inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.2);
    --shadow-edge:     0 -1px 0 rgba(255,255,255,0.04);

    /* -- Typography -- */
    --font-primary:    'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-heading:    'Segoe UI Semibold', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-light:      'Segoe UI Light', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:       'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    /* -- Spacing Scale -- */
    --sp-xs:    0.25rem;
    --sp-sm:    0.5rem;
    --sp-md:    1rem;
    --sp-lg:    1.5rem;
    --sp-xl:    2rem;
    --sp-2xl:   3rem;
    --sp-3xl:   4rem;
    --sp-4xl:   6rem;
    --sp-5xl:   8rem;
    --sp-6xl:   10rem;
    --sp-hero:  12rem;

    /* -- Border Radius -- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* -- Transitions -- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:   0.15s;
    --duration-normal: 0.3s;
    --duration-slow:   0.5s;

    /* -- Layout -- */
    --max-width:       1280px;
    --max-width-wide:  1440px;
    --nav-height:      72px;
    --section-padding: clamp(4rem, 9vw, 8.5rem);
    --hero-padding:    clamp(5rem, 12vw, 10rem);
}