/* SELENTA Eyewear - Design Tokens & Variables */
:root {
    /* Brand Color Palette */
    --color-navy-primary: #0E2A47;
    --color-navy-dark: #081B2D;
    --color-navy-light: #163E66;
    --color-navy-subtle: #1C4D7D;
    
    --color-white: #FFFFFF;
    --color-bg-soft: #F7F9FC;
    --color-light-gray: #E8EDF2;
    --color-border: #E1E7EE;
    --color-border-dark: #2A4360;
    
    --color-text-main: #17212B;
    --color-text-muted: #687786;
    --color-text-light: #8E9CA8;
    
    --color-gold: #C7A86B;
    --color-gold-hover: #B59556;
    --color-gold-light: #F4EEDF;
    --color-gold-border: rgba(199, 168, 107, 0.35);

    --color-success: #1E824C;
    --color-danger: #C0392B;
    --color-warning: #D98824;

    /* Modern Luxury & High-Tech Typography */
    --font-heading: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Outfit', sans-serif;
    --font-accent: 'Cinzel', serif;

    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-md: 1.125rem;    /* 18px */
    --text-lg: 1.25rem;     /* 20px */
    --text-xl: 1.5rem;      /* 24px */
    --text-2xl: 2rem;       /* 32px */
    --text-3xl: 2.5rem;     /* 40px */
    --text-4xl: 3.25rem;    /* 52px */
    --text-5xl: 4.25rem;    /* 68px */

    /* Spacing System */
    --space-2xs: 0.25rem;   /* 4px */
    --space-xs: 0.5rem;     /* 8px */
    --space-sm: 0.75rem;    /* 12px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4.5rem;    /* 72px */
    --space-4xl: 6rem;      /* 96px */

    /* Layout */
    --container-max: 1320px;
    --container-narrow: 1080px;
    --header-height: 84px;
    --header-height-mobile: 68px;

    /* Borders & Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(14, 42, 71, 0.04);
    --shadow-md: 0 6px 20px rgba(14, 42, 71, 0.08);
    --shadow-lg: 0 16px 36px rgba(14, 42, 71, 0.12);
    --shadow-header: 0 4px 24px rgba(8, 27, 45, 0.06);
    --shadow-gold: 0 4px 18px rgba(199, 168, 107, 0.25);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.35s cubic-bezier(0.2, 0, 0.2, 1);
    --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-Index */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-drawer: 900;
    --z-modal: 1000;
    --z-toast: 1100;
}