/* Variables CSS globales - Design System Salon Privé */
:root {
    /* Palette sophistiquée taupe/beige */
    --cream: #FAF8F3;
    --ivory: #F5F2ED;
    --taupe: #8B7355;
    --taupe-dark: #6B5745;
    --taupe-light: #C4B5A0;
    --charcoal: #2C2825;
    --gray-warm: #7D756C;
    --gray-light: #E8E4DD;
    --success-green: #4A7C59;
    --error-red: #B85450;
    --gold: #c9a961;
    --white-pure: #FFFFFF;
    
    /* Shadows */
    --shadow-soft: 0 2px 20px rgba(44, 40, 37, 0.06);
    --shadow-medium: 0 4px 30px rgba(44, 40, 37, 0.08);
    --shadow-strong: 0 10px 60px rgba(44, 40, 37, 0.12);
    
    /* Typographie */
    --font-display: 'Crimson Text', serif;
    --font-body: 'EB Garamond', serif;
    --font-ui: 'Inter', sans-serif;
    
    /* Espacements */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-very-slow: 1s ease;
    
    /* Dimensions */
    --header-height: 80px;
    --sidebar-width: 420px;
    --max-width-admin: 980px;
    --max-width-content: 600px;
    
    /* Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1200px;
}