/**
 * Variables CSS Globales
 * Fichier centralisé pour toutes les variables CSS du site
 */

:root {
    /* ========================================
       Couleurs de la marque (constantes)
       ======================================== */

    /* Couleur principale (orange utilisé dans le logo et éléments importants) */
    --primary-color: #D37A39;
    --primary-hover: #B86830;
    --primary-light: rgba(211, 122, 57, 0.1);

    /* Couleurs identitaires */
    --brand-dark-blue: #1E293B;
    --brand-darker-blue: #0F172A;
    --brand-beige: #F1F1E6;
    --brand-light-blue: #B9C4DC;
    --copyright-color: #04526C;

    /* ========================================
       Variables de th\u00e8me (changent selon le mode)
       ======================================== */

    /* Couleur secondaire */
    --secondary-color: var(--brand-dark-blue);
    --secondary-hover: var(--brand-darker-blue);
    --secondary-light: rgba(30, 41, 59, 0.1);

    /* Couleur tertiaire */
    --tertiary-color: var(--brand-beige);
    --quaternary-color: var(--brand-light-blue);

    /* Couleurs de texte */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-light: var(--brand-beige);
    --text-white: #FFFFFF;
    --text-on-dark: rgba(255, 255, 255, 0.9);
    --text-on-dark-muted: rgba(255, 255, 255, 0.7);

    /* Couleurs de fond */
    --bg-white: #FFFFFF;
    --bg-light: var(--brand-beige);
    --bg-light-gray: #F5F5F5;
    --bg-dark: var(--brand-dark-blue);
    --bg-dark-gradient: linear-gradient(135deg, var(--brand-dark-blue) 0%, var(--brand-darker-blue) 100%);

    /* ========================================
       Couleurs d'\u00e9tat (constantes)
       ======================================== */
    --success-color: #48BB78;
    --success-hover: #38A169;
    --success-light: rgba(72, 187, 120, 0.1);

    --error-color: #F44336;
    --error-hover: #D32F2F;
    --error-light: rgba(244, 67, 54, 0.1);

    --warning-color: #FF9800;
    --warning-hover: #F57C00;
    --warning-light: rgba(255, 152, 0, 0.1);

    --info-color: #667EEA;
    --info-hover: #5A67D8;
    --info-light: rgba(102, 126, 234, 0.1);

    /* Bordures */
    --border-color: #E0E0E0;
    --border-light: #F0F0F0;
    --border-white: #FFFFFF;
    --border-on-dark: rgba(255, 255, 255, 0.2);

    /* ========================================
       Ombres
       ======================================== */
    --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.25);
    
    /* ========================================
       Variables de layout
       ======================================== */
    --header-height: 70px;
    --container-width: 1600px;
    --section-padding: 50px 0;
    --hero-height: 100vh;
    --hero-margin: 40px;
    

    /* ========================================
       Z-index
       ======================================== */
    --z-header: 1000;
    --z-floating: 1001;
    --z-menu-fullscreen: 9999;
    --z-menu-content: 10000;
    
    /* ========================================
       Transitions
       ======================================== */
    --transition-fast: all 0.2s ease;
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    --menu-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========================================
       Rayons de bordure
       ======================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 50px;
    --radius-circle: 50%;
    
    /* ========================================
       Variables spécifiques au menu
       ======================================== */
    --header-bg: rgba(255, 255, 255, 0.0);
    --menu-color: var(--tertiary-color);
    --menu-hover-color: var(--primary-color);
    --burger-menu-color: var(--secondary-color);
    --burger-size: 24px;

    /* ========================================
       Polices personnalisées
       ======================================== */
    /* Police personnalisée trouvée : Seravek (avec fallbacks) */
    /* IMPORTANT : Seravek est une police système macOS/iOS.
       Si elle n'apparaît pas sur Windows/Linux, c'est normal.
       Les fallbacks (Helvetica, Arial) seront utilisés. */
    --custom-font: Seravek, Helvetica, Arial, sans-serif;
}

/* ========================================
   Th\u00e8me sombre (par d\u00e9faut)
   ======================================== */
[data-theme="dark"] {
    /* Couleur secondaire */
    --secondary-color: var(--brand-dark-blue);
    --secondary-hover: var(--brand-darker-blue);
    --secondary-light: rgba(30, 41, 59, 0.1);

    /* Couleur tertiaire */
    --tertiary-color: var(--brand-beige);
    --quaternary-color: var(--brand-light-blue);

    /* Couleurs de texte */
    --text-primary: var(--brand-beige);
    --text-secondary: rgba(241, 241, 230, 0.8);
    --text-muted: rgba(241, 241, 230, 0.6);
    --text-light: #fff;

    /* Couleurs de fond */
    --bg-white: var(--brand-beige);
    --bg-light: var(--brand-darker-blue);
    --bg-light-gray: var(--brand-light-blue);
    --bg-dark: var(--brand-dark-blue);
    --bg-dark-gradient: linear-gradient(135deg, var(--brand-dark-blue) 0%, var(--brand-darker-blue) 100%);

    /* Bordures */
    --border-color: rgba(255, 255, 255, 0.2);
    --border-light: rgba(255, 255, 255, 0.1);
    --border-on-dark: rgba(255, 255, 255, 0.2);
}

/* ========================================
   Th\u00e8me clair
   ======================================== */
[data-theme="light"] {
    /* Couleur secondaire */
    --secondary-color: var(--brand-light-blue);
    --secondary-hover: var(--brand-darker-blue);
    --secondary-light: rgba(30, 41, 59, 0.1);

    /* Couleur tertiaire */
    --tertiary-color: var(--brand-dark-blue);
    --quaternary-color: var(--copyright-color);

    /* Couleurs de texte */
    --text-primary: #1A1A1A;
    --text-secondary: #4A4A4A;
    --text-muted: #888888;
    --text-on-dark: rgba(0, 0, 0, 0.9);
    --text-on-dark-muted: rgba(0, 0, 0, 0.6);
    --text-light: var(--brand-darker-blue);

    /* Couleurs de fond */
    --bg-white: #fff;
    --bg-light: #fff;
    --bg-light-gray: var(--brand-light-blue);
    --bg-dark: var(--brand-beige);
    --bg-dark-gradient: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);

    /* Bordures */
    --border-color: #D0D0D0;
    --border-light: #E8E8E8;
    --border-on-dark: rgba(0, 0, 0, 0.15);
}