/**
 * Header CSS Variables
 *
 * Centralized design tokens for the header system.
 * All header components should use these variables for consistency.
 */

:root {
    /* ===========================================
       Z-INDEX SCALE - Normalized hierarchy
       =========================================== */
    --z-dropdown: 100;
    --z-dropdown-submenu: 102;
    --z-homepage-transparent: 199;
    --z-sticky-header: 200;
    --z-mobile-overlay: 300;
    --z-mobile-drawer: 301;
    --z-drawer-close: 302;
    --z-search-overlay: 400;
    --z-cart-drawer: 500;
    --z-cart-backdrop: 499;
    --z-modal: 600;
    --z-toast: 700;

    /* ===========================================
       COLORS
       =========================================== */
    /* Header backgrounds */
    --header-bg: #1A1A1A;
    --header-bg-transparent: rgba(0, 0, 0, 0.2);
    --header-border: #1A1A1A;

    /* Text colors */
    --header-text: #fff;
    --header-text-muted: rgba(255, 255, 255, 0.8);
    --header-text-hover: rgba(255, 255, 255, 0.7);

    /* Dropdown colors */
    --dropdown-bg: #fff;
    --dropdown-text: #2D1F1F;
    --dropdown-text-hover: #000;
    --dropdown-hover-bg: #f8f8f8;
    --dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

    /* Mobile drawer colors */
    --drawer-bg: #fff;
    --drawer-text: #2d1f1f;
    --drawer-text-muted: #666;
    --drawer-text-inactive: #999;
    --drawer-border: #e5e5e5;
    --drawer-submenu-bg: #f5f5f5;
    --drawer-submenu-nested-bg: #eee;
    --drawer-hover-bg: #f9f9f9;

    /* Accent colors */
    --color-sale: #e53935;

    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.5);

    /* ===========================================
       TYPOGRAPHY
       =========================================== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-primary-medium: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ===========================================
       TRANSITIONS
       =========================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slide: 0.3s ease;

    /* ===========================================
       SPACING & SIZING
       =========================================== */
    /* Mobile drawer */
    --drawer-width: 85%;
    --drawer-max-width: 320px;

    /* ===========================================
       DESKTOP NAV - Responsive spacing & typography
       Single source of truth for sticky + transparent headers
       Uses clamp() for fluid scaling from 1024px to 1600px+
       =========================================== */

    /* Nav container padding - fluid horizontal padding */
    --nav-padding-y: 10px;
    --nav-padding-x: clamp(10px, 1.5vw, 40px);

    /* Nav container gap - space between menu and search */
    --nav-container-gap: clamp(6px, 0.8vw, 20px);

    /* Nav menu item gap - balanced scaling */
    --nav-menu-gap: clamp(8px, 1vw, 24px);

    /* Nav link font size - readable at all sizes */
    --nav-link-font-size: clamp(10px, 0.7vw, 13px);
    --nav-link-letter-spacing: clamp(0.2px, 0.02vw, 0.5px);

    /* Nav right section gap */
    --nav-right-gap: clamp(6px, 0.6vw, 20px);

    /* Search bar sizing - fluid, smaller at narrow widths */
    --nav-search-min-width: clamp(60px, 6vw, 160px);
    --nav-search-padding-y: clamp(4px, 0.35vw, 8px);
    --nav-search-padding-x: clamp(6px, 0.6vw, 16px);
    --nav-search-font-size: clamp(9px, 0.65vw, 13px);
    --nav-search-icon-size: clamp(11px, 0.8vw, 16px);

    /* Header heights (for reference) */
    --header-height-mobile: auto;
    --header-padding-mobile: 12px 16px;

    /* Logo */
    --logo-height-mobile: 25px;
    --logo-height-desktop: 32px;

    /* Icon buttons */
    --icon-size: 22px;
    --icon-btn-padding: 8px;

    /* ===========================================
       BREAKPOINTS (for reference in media queries)
       =========================================== */
    /*
     * Mobile: < 1024px
     * Desktop Compact: 1024px - 1199px
     * Desktop Medium: 1200px - 1399px
     * Desktop Full: 1400px - 1599px
     * Desktop XL: 1600px+
     */

    /* ===========================================
       GLASS EFFECT (for homepage floating elements)
       =========================================== */
    --glass-bg: rgba(153, 153, 153, 0.2);
    --glass-blur: 17.5px;
    --glass-border: rgba(255, 255, 255, 0.3);
}