/* Design System Variables - Inside Out IV Hydration & Wellness */

:root {
    /* Brand Colors */
    --color-primary-blue: #0066CC;
    --color-primary-blue-light: #3385D6;
    --color-primary-blue-dark: #004C99;

    --color-accent-gold: #D4AF37;
    --color-accent-gold-light: #E6C968;
    --color-accent-gold-dark: #B8941F;

    --color-black: #000000;
    --color-white: #FFFFFF;

    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #E5E5E5;
    --color-gray-300: #D4D4D4;
    --color-gray-400: #A3A3A3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;

    /* Semantic Colors */
    --color-background: var(--color-white);
    --color-background-alt: var(--color-gray-50);
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-light: var(--color-gray-500);

    /* Typography - Fluid Scale */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* clamp(min, preferred, max) - Slightly reduced max sizes to prevent "amontonado" feel */
    --font-size-xs: clamp(0.7rem, 0.6vw + 0.5rem, 0.8rem);
    --font-size-sm: clamp(0.8rem, 0.7vw + 0.6rem, 0.95rem);
    --font-size-base: clamp(1rem, 0.8vw + 0.8rem, 1.1rem);
    --font-size-lg: clamp(1.1rem, 1vw + 0.9rem, 1.25rem);
    --font-size-xl: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 2vw + 1.2rem, 2rem);
    --font-size-3xl: clamp(1.75rem, 3vw + 1.5rem, 2.5rem);
    --font-size-4xl: clamp(2rem, 4vw + 2rem, 3.5rem);
    --font-size-5xl: clamp(2.5rem, 6vw + 2.5rem, 4.5rem);
    --font-size-6xl: clamp(3rem, 8vw + 3rem, 5.5rem);

    /* Logo Scale - Increased for 4K */
    --logo-height-desktop: clamp(90px, 12vh, 140px);
    --logo-height-scrolled: clamp(75px, 9vh, 100px);

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.1;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* Brand Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Spacing Scale - Fluid */
    --space-1: clamp(0.2rem, 0.2vw, 0.3rem);
    --space-2: clamp(0.4rem, 0.4vw, 0.6rem);
    --space-3: clamp(0.6rem, 0.6vw, 0.9rem);
    --space-4: clamp(0.8rem, 1vw, 1.2rem);
    --space-5: clamp(1rem, 1.2vw, 1.5rem);
    --space-6: clamp(1.2rem, 1.5vw, 2rem);
    --space-8: clamp(1.5rem, 2vw, 3rem);
    --space-10: clamp(2rem, 3vw, 4rem);
    --space-12: clamp(2.5rem, 4vw, 5rem);
    --space-16: clamp(4rem, 6vw, 8rem);

    /* Section Spacing */
    --section-padding-y: var(--space-16);
    --section-padding-y-mobile: var(--space-12);

    /* Layout */
    --container-max-width: 1600px;
    --container-padding: clamp(1rem, 4vw, 3rem);
    --header-height: clamp(100px, 15vh, 120px);
    /* Slightly reduced for better balance */

    /* Border Radius - Consistenty */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-2xl: 48px;
    --radius-full: 9999px;

    /* Shadows - Layered Premium */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 12px 24px -6px rgba(0, 0, 0, 0.06), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 32px 64px -12px rgba(0, 0, 0, 0.08), 0 16px 32px -8px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 50px 100px -20px rgba(0, 0, 0, 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.12);

    /* Glassmorphism Accents */
    --glass-background: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: 20px;

    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    :root {
        --font-size-3xl: 1.5rem;
        /* 24px */
        --font-size-4xl: 1.75rem;
        /* 28px */
        --font-size-5xl: 2rem;
        /* 32px */
        --font-size-6xl: 2.5rem;
        /* 40px */

        --container-padding: var(--space-4);
        --header-height: 80px;
    }
}