/* ==========================================================================
   JOUSH LUXURY — CSS VARIABLES & DESIGN TOKENS
   ========================================================================== */

:root {
    /* Brand Color System */
    --color-black: #000000;
    --color-gold: #C9A227;
    --color-gold-light: #E0C068;
    --color-gold-dark: #B8962E;
    --color-gold-alt: #D4AF37;
    
    /* Supporting Neutrals */
    --color-white: #FFFFFF;
    --color-light: #F8F7F4;
    --color-border: #E8E8E8;
    --color-border-dark: #262626;
    --color-muted: #777777;
    --color-muted-light: #AAAAAA;
    --color-dark: #1A1A1A;
    --color-dark-surface: #111111;
    --color-dark-card: #161616;

    /* Typography */
    --font-heading: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Layout & Sizing */
    --container-width: 1440px;
    --header-height: 90px;
    --header-height-sticky: 70px;
    --announcement-height: 40px;

    /* Spacing Scale */
    --spacing-2xs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 64px;
    --spacing-2xl: 96px;
    --spacing-3xl: 128px;

    /* Product Image Ratio (4:5 Portrait) */
    --product-aspect-ratio: 4 / 5;

    /* Transitions & Motion (Luxury, calm & controlled) */
    --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-smooth: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-Index Hierarchy */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-drawer: 400;
    --z-modal: 500;
}