/**
 * Variables CSS - Eau Naora
 * Palette graphique et configuration
 */

:root {
    /* ============================================
       PALETTE GRAPHIQUE
       ============================================ */
    
    --color-creme-ivoire: #FAF5EE;
    --color-sable-dore: #F5C98A;
    --color-terra-cotta: #D4A574;
    --color-bordeaux-brun: #6B2D2D;
    --color-bleu-eau: #A8C8CC;
    
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-light-gray: #F0F0F0;
    --color-dark-gray: #333333;
    --color-error: #E74C3C;
    --color-success: #27AE60;
    --color-warning: #F39C12;
    --color-info: #3498DB;
   /* Alias pour page réservation */ 
    --bordeaux: var(--color-bordeaux-brun);
    --terra-cotta: var(--color-terra-cotta);
    --bleu-eau: var(--color-bleu-eau);
    --creme: var(--color-creme-ivoire);
    --sable: var(--color-sable-dore);
    --bordeaux-dark: #522222;
    --bordeaux-light: #8B3D3D;
    --terra-cotta-light: #E4B584;
    --bleu-eau-light: #B8D8DC;
    --bleu-eau-dark: #88A8AC;
    --text-primary: var(--color-dark-gray);
    --text-secondary: #666666;
    --text-light: #999999;
    --text-on-dark: var(--color-creme-ivoire);
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-creme-ivoire);
    --bg-tertiary: #F9F9F9;
    --border-color: rgba(107, 45, 45, 0.15);
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-error);
    --info: var(--color-info);
    
    /* ============================================
       TYPOGRAPHIES
       ============================================ */
    
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans-light: 'Raleway', sans-serif;
    --font-sans-regular: 'DM Sans', sans-serif;
    --font-calligraphie: 'Classical Callygraphie', cursive;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    /* ============================================
       ESPACEMENTS
       ============================================ */
    
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;
    
    /* ============================================
       OMBRES
       ============================================ */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* ============================================
       RAYONS DE BORDURE
       ============================================ */
    
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    
    /* ============================================
       TRANSITIONS
       ============================================ */
    
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
    --transition-slower: 500ms ease-in-out;
    
    /* ============================================
       LARGEUR DU CONTENEUR
       ============================================ */
    
    --container-width: 1200px;
    --container-padding: 1.5rem;
}


/* MODE SOMBRE DÉSACTIVÉ - Le site garde toujours ses couleurs claires */