/**
 * Variables CSS centralisées
 * À placer dans /assets/css/variables.css
 * À charger en PREMIER dans tous les fichiers HTML
 */

:root {
    /* ===== COULEURS PRINCIPALES ===== */
    --primary-color: #5A3D2B;
    --primary-dark: #4A2D1B;
    --primary-darker: #3A1D0B;
    
    --secondary-color: #D4A574;
    --secondary-light: #E5B685;
    --secondary-dark: #C4956D;
    --secondary-darker: #B38560;
    
    --accent-color: #8B9F6B;
    --accent-dark: #7A8E5A;
    --accent-darker: #6A7E4A;
    
    /* ===== COULEURS DE FOND ===== */
    --background-color: #F8F6F0;
    --background-white: #ffffff;
    --background-light: #fafafa;
    --background-gray: #f5f5f5;
    
    /* ===== COULEURS DE TEXTE ===== */
    --text-color: #333333;
    --text-light: #666666;
    --text-lighter: #999999;
    --text-white: #F8F6F0;
    
    /* ===== COULEURS D'ÉTAT ===== */
    --success-color: #4CAF50;
    --success-dark: #45a049;
    --success-bg: #e8f5e9;
    
    --error-color: #e74c3c;
    --error-dark: #c0392b;
    --error-darker: #a93226;
    --error-bg: #ffebee;
    
    --warning-color: #ff9800;
    --warning-bg: #fff3e0;
    
    --info-color: #2196F3;
    --info-dark: #1976D2;
    --info-bg: #e3f2fd;

    /* ===== COULEURS DES BOUTONS D'ACTION (admin, site-wide) ===== */
    --btn-add-color: #28A745;
    --btn-add-hover: #218838;

    --btn-edit-color: #FD7E14;
    --btn-edit-hover: #D76B11;

    --btn-delete-color: #DC3545;
    --btn-delete-hover: #C82333;

    --btn-save-color: #0D6EFD;
    --btn-save-hover: #0B5ED7;

    /* Assombri depuis #0DCAF0 (~1.96:1 avec le texte blanc de .btn-add,
       échouait WCAG AA) — #0E7490 donne ~5.36:1, conserve la teinte cyan. */
    --btn-search-color: #0E7490;
    --btn-search-hover: #0B5D73;

    --btn-cancel-color: #6C757D;
    --btn-cancel-hover: #5C636A;

    /* ===== TYPES DE MENUS ===== */

    /* Menu Classique (C) */
    --menu-classic-bg: #ffebee;
    --menu-classic-color: #c62828;
    --menu-classic-badge: #c62828;
    --menu-classic-border: #ffcdd2;
    --menu-classic-border-hover: #ef9a9a;
    --menu-classic-shadow: rgba(239, 83, 80, 0.15);

    /* Menu Végétarien (V) */
    --menu-vegetarian-bg: #e8f5e9;
    --menu-vegetarian-color: #2e7d32;
    --menu-vegetarian-badge: #2e7d32;
    --menu-vegetarian-border: #c8e6c9;
    --menu-vegetarian-border-hover: #a5d6a7;
    --menu-vegetarian-shadow: rgba(76, 175, 80, 0.15);

    /* Menu Protéiné (P) */
    --menu-protein-bg: #e3f2fd;
    --menu-protein-color: #1565c0;
    --menu-protein-badge: #1565c0;
    --menu-protein-border: #bbdefb;
    --menu-protein-border-hover: #90caf9;
    --menu-protein-shadow: rgba(33, 150, 243, 0.15);

    /* Menu Spécial (S) */
    --menu-special-bg: #fff3e0;
    --menu-special-color: #e65100;
    --menu-special-badge: #e65100;
    --menu-special-border: #ffe0b2;
    --menu-special-border-hover: #ffcc80;
    --menu-special-shadow: rgba(255, 152, 0, 0.15);
        
    /* ===== COULEURS DE BORDURE ===== */
    --border-color: #e0e0e0;
    --border-light: #eee;
    --border-dark: #ddd;
    
    /* ===== TYPOGRAPHIE ===== */
    --font-primary: 'Lora', serif;
    --font-display: 'Playfair Display', serif;
    --font-sans: 'Open Sans', sans-serif;
    
    --font-size-xxs: 11px;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;
    --font-size-5xl: 48px;
    
    /* ===== ESPACEMENTS ===== */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 25px;
    --spacing-2xl: 30px;
    --spacing-3xl: 40px;
    --spacing-4xl: 50px;
    --spacing-5xl: 60px;
    
    /* ===== RAYONS DE BORDURE ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 15px;
    --radius-3xl: 20px;
    --radius-full: 50%;
    
    /* ===== OMBRES ===== */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 15px 50px rgba(0, 0, 0, 0.12);
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ===== LARGEURS MAXIMALES ===== */
    --max-width-sm: 600px;
    --max-width-md: 800px;
    --max-width-lg: 1000px;
    --max-width-xl: 1200px;
    --max-width-2xl: 1400px;
    
    /* ===== Z-INDEX ===== */
    --z-dropdown: 1000;
    --z-modal: 2000;
    --z-alert: 9999;
}

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