/* ===================================
   CSS Variables - Design System
   Facilement modifiable pour changer le thème
   =================================== */

:root {
    /* ========== COULEURS ========== */
    /* Palette zen et féminine - Tons doux et apaisants */
    --color-primary: #E8B4B8;        /* Rose poudré doux */
    --color-primary-light: #F5D5D8;  
    --color-primary-dark: #D49499;
    
    --color-secondary: #B8A9C9;      /* Lavande douce */
    --color-secondary-light: #D4C5E8;
    --color-secondary-dark: #9B87B8;
    
    --color-accent: #F7E4D4;         /* Pêche clair */
    --color-accent-light: #FFF5ED;
    --color-accent-dark: #E6C9B3;
    
    /* Neutres */
    --color-white: #FFFFFF;
    --color-off-white: #FFFBF7;      /* Blanc crème très doux */
    --color-light-gray: #FAF5F0;
    --color-gray: #C2B7B7;
    --color-dark-gray: #7D6E6E;
    --color-black: #3A3333;
    
    /* Couleurs fonctionnelles */
    --color-success: #7B9E87;
    --color-warning: #E4B363;
    --color-error: #DC6B6B;
    --color-info: #6B9BD1;
    
    /* ========== TYPOGRAPHIE ========== */
    /* Familles de polices */
    --font-primary: 'Playfair Display', serif;     /* Titres élégants */
    --font-secondary: 'Lato', sans-serif;          /* Corps de texte */
    --font-accent: 'Dancing Script', cursive;      /* Accents féminins */
    
    /* Tailles de police - système fluide */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --fs-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --fs-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
    --fs-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
    
    /* Poids de police */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    
    /* Hauteur de ligne */
    --lh-tight: 1.2;
    --lh-base: 1.6;
    --lh-relaxed: 1.8;
    
    /* ========== ESPACEMENTS ========== */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    
    /* ========== BORDURES ========== */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;
    
    --border-width: 1px;
    --border-color: rgba(168, 162, 158, 0.2);
    
    /* ========== OMBRES ========== */
    --shadow-sm: 0 1px 2px 0 rgba(28, 25, 23, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.1), 0 2px 4px -1px rgba(28, 25, 23, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.1), 0 4px 6px -2px rgba(28, 25, 23, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.1), 0 10px 10px -5px rgba(28, 25, 23, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(28, 25, 23, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(28, 25, 23, 0.06);
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    --transition-slower: 500ms ease-in-out;
    
    /* Timing functions */
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* ========== Z-INDEX ========== */
    --z-base: 0;
    --z-above: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    --z-top: 900;
    
    /* ========== LAYOUT ========== */
    --container-max: 1200px;
    --container-padding: var(--space-lg);
    
    /* Header */
    --header-height: 80px;
    --header-height-mobile: 70px;
    
    /* ========== COMPOSANTS ========== */
    /* Boutons */
    --btn-padding-x: var(--space-xl);
    --btn-padding-y: var(--space-md);
    --btn-font-size: var(--fs-base);
    --btn-font-weight: var(--fw-medium);
    --btn-radius: var(--radius-full);
    --btn-transition: all var(--transition-base);
    
    /* Cards */
    --card-padding: var(--space-xl);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-md);
    --card-bg: var(--color-white);
    
    /* Forms */
    --input-padding-x: var(--space-lg);
    --input-padding-y: var(--space-md);
    --input-radius: var(--radius-md);
    --input-border: var(--border-width) solid var(--border-color);
    --input-focus-color: var(--color-primary);
    
    /* ========== BREAKPOINTS ========== */
    --bp-mobile: 480px;
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    --bp-wide: 1280px;
}

/* ========== MODE SOMBRE (optionnel) ========== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Ajustements pour le mode sombre si nécessaire */
    }
}

/* ========== UTILITAIRES CSS CUSTOM PROPERTIES ========== */
/* Permet de modifier facilement les variables via JavaScript */
[data-theme="zen"] {
    /* Thème par défaut (défini ci-dessus) */
}

[data-theme="nature"] {
    --color-primary: #7B9E87;
    --color-secondary: #C17E72;
    /* Autres ajustements... */
}

[data-theme="luxe"] {
    --color-primary: #B8860B;
    --color-secondary: #4B0082;
    --color-accent: #FFD700;
    /* Autres ajustements... */
}