/* CSS Variables */
:root {
    /* Colors */
    --color-bg: #FDF8F3;
    --color-text: #4A3728;
    --color-accent: #A07856;
    --color-secondary: #F5EBE0;
    --color-border: #E0D5C9;
    --color-text-muted: #8B7355;
    
    /* Breakpoints (Mobile First) */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 375px;
    --breakpoint-md: 480px;
    --breakpoint-lg: 640px;
    --breakpoint-xl: 768px;
    --breakpoint-2xl: 1024px;
    --breakpoint-3xl: 1280px;
    --breakpoint-4xl: 1536px;
    
    /* Safe Area Insets (for devices with notches) */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    
    /* Viewport Height Fix (100vh bug on mobile) */
    --viewport-height: 100dvh;
    --viewport-height-fallback: 100vh;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Font sizes */
    --font-size-xs: 0.875rem;
    --font-size-sm: 1rem;
    --font-size-base: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3.5rem;
    --font-size-5xl: 4.5rem;
    --font-size-6xl: 6rem;
    
    /* Responsive Font Sizes (Mobile First with clamp()) */
    --font-size-responsive-h1: clamp(2rem, 5vw + 1rem, 6rem);
    --font-size-responsive-h2: clamp(1.5rem, 4vw + 0.5rem, 3.5rem);
    --font-size-responsive-h3: clamp(1.25rem, 2vw + 0.25rem, 2rem);
    --font-size-responsive-body: clamp(1rem, 1vw + 0.5rem, 1.125rem);
    --font-size-responsive-sm: clamp(0.875rem, 0.8vw + 0.4rem, 1rem);
    --font-size-responsive-lg: clamp(1.125rem, 1.2vw + 0.6rem, 1.5rem);
    --font-size-responsive-xl: clamp(1.25rem, 1.5vw + 0.75rem, 2rem);
    
    /* Font weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line heights */
    --line-height-tight: 1.1;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;
    
    /* Responsive Spacing (Mobile First with clamp()) */
    --space-responsive-xs: clamp(0.5rem, 1.5vw, 1rem);
    --space-responsive-sm: clamp(0.75rem, 2vw, 1.5rem);
    --space-responsive-md: clamp(1rem, 2.5vw, 2rem);
    --space-responsive-lg: clamp(1.5rem, 3vw, 2.5rem);
    --space-responsive-xl: clamp(2rem, 4vw, 3rem);
    --space-responsive-2xl: clamp(3rem, 5vw, 4rem);
    
    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-fixed: 200;
    --z-modal: 300;
    --z-popover: 400;
    --z-tooltip: 500;
    --z-cursor: 9999;
    
    /* Container */
    --container-max-width: 1400px;
    --container-padding: 2rem;
    --container-padding-mobile: 1rem;
    
    /* Section */
    --section-padding: 6rem 0;
    --section-padding-mobile: 4rem 0;
    
    /* Touch Target Size (minimum 44px for iOS) */
    --touch-target-min: 44px;
    
    /* Cursor */
    --cursor-size: 20px;
    --cursor-size-hover: 60px;
}