/* ============================================
   GRAPHISCANN - VARIABLES CSS CENTRALISÉES
   
   Version : 1.0.0
   Date : 29 Décembre 2025
   
   Ce fichier contient TOUTES les variables CSS du site.
   Il doit être chargé AVANT tous les autres fichiers CSS.
   
   TABLE DES MATIÈRES :
   1. Couleurs principales
   2. Couleurs de texte
   3. Couleurs de fond
   4. Couleurs spéciales (environnement, alertes)
   5. Bordures
   6. Espacements
   7. Rayons de bordure
   8. Ombres
   9. Transitions
   10. Z-Index hiérarchie
   ============================================ */

:root {
    /* ========================================
       1. COULEURS PRINCIPALES
       ======================================== */
    --gs-primary: #c41e3a;
    --gs-primary-dark: #a01829;
    --gs-primary-light: #e85670;
    --gs-secondary: #2c3e50;
    --gs-secondary-dark: #1a252f;
    --gs-secondary-light: #34495e;
    
    /* Couleur d'accent (pour CTA, liens hover) */
    --gs-accent: #3498db;
    --gs-accent-dark: #2980b9;
    
    /* ========================================
       2. COULEURS DE TEXTE
       ======================================== */
    --gs-text: #333333;
    --gs-text-dark: #1a1a2e;
    --gs-text-light: #666666;
    --gs-text-muted: #888888;
    --gs-text-inverse: #ffffff;
    
    /* ========================================
       3. COULEURS DE FOND
       ======================================== */
    --gs-bg-white: #ffffff;
    --gs-bg-light: #f8f9fa;
    --gs-bg-section: #fafafa;
    --gs-bg-alt: #f5f5f5;
    --gs-bg-dark: #2c2c2c;
    --gs-bg-darker: #1a1a1a;
    --gs-bg-overlay: rgba(0, 0, 0, 0.5);
    --gs-bg-overlay-light: rgba(255, 255, 255, 0.9);
    
    /* ========================================
       4. COULEURS SPÉCIALES
       ======================================== */
    
    /* Environnement / Écologie */
    --gs-eco-green: #4caf50;
    --gs-eco-green-dark: #2e7d32;
    --gs-eco-green-light: #81c784;
    --gs-eco-bg: #e8f5e9;
    
    /* Alertes et états */
    --gs-success: #28a745;
    --gs-success-bg: #d4edda;
    --gs-warning: #ffc107;
    --gs-warning-bg: #fff3cd;
    --gs-danger: #dc3545;
    --gs-danger-bg: #f8d7da;
    --gs-info: #17a2b8;
    --gs-info-bg: #d1ecf1;
    
    /* ========================================
       5. BORDURES
       ======================================== */
    --gs-border: #e0e0e0;
    --gs-border-light: #f0f0f0;
    --gs-border-dark: #cccccc;
    --gs-border-primary: var(--gs-primary);
    
    /* ========================================
       6. ESPACEMENTS
       ======================================== */
    --gs-spacing-xs: 4px;
    --gs-spacing-sm: 8px;
    --gs-spacing-md: 15px;
    --gs-spacing-lg: 30px;
    --gs-spacing-xl: 60px;
    --gs-spacing-xxl: 100px;
    
    /* Espacements de section */
    --gs-section-padding: 60px;
    --gs-section-padding-mobile: 40px;
    
    /* ========================================
       7. RAYONS DE BORDURE
       ======================================== */
    --gs-radius-xs: 2px;
    --gs-radius-sm: 4px;
    --gs-radius-md: 8px;
    --gs-radius-lg: 12px;
    --gs-radius-xl: 20px;
    --gs-radius-full: 50px;
    --gs-radius-circle: 50%;
    
    /* ========================================
       8. OMBRES
       ======================================== */
    --gs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --gs-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --gs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --gs-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.2);
    --gs-shadow-xl: 0 15px 50px rgba(0, 0, 0, 0.25);
    --gs-shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.15);
    --gs-shadow-card: 0 2px 15px rgba(0, 0, 0, 0.1);
    
    /* Ombre pour les éléments surélevés (header sticky, modals) */
    --gs-shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.15);
    
    /* ========================================
       9. TRANSITIONS
       ======================================== */
    --gs-transition-fast: all 0.15s ease;
    --gs-transition: all 0.3s ease;
    --gs-transition-slow: all 0.5s ease;
    --gs-transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ========================================
       10. Z-INDEX HIÉRARCHIE
       ======================================== */
    --z-content: 1;
    --z-sticky: 100;
    --z-footer: 10;
    --z-nav: 200;
    --z-header: 300;
    --z-search-results: 400;
    --z-dropdown: 600;
    --z-overlay: 800;
    --z-menu-mobile: 9000;
    --z-hamburger: 9500;
    --z-modal: 10000;
    --z-toast: 11000;
    
    /* ========================================
       DIMENSIONS FIXES
       ======================================== */
    
    /* Containers */
    --gs-container-max: 1320px;
    --gs-container-narrow: 900px;
    --gs-container-wide: 1400px;
    
    /* Header */
    --gs-header-height: 80px;
    --gs-header-height-mobile: 60px;
    --gs-topbar-height: 40px;
    
    /* ========================================
       BREAKPOINTS (pour référence)
       Ces valeurs sont utilisées dans les media queries
       ======================================== */
    /* 
    --bp-xs: 0;
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;
    */
}

/* ============================================
   DARK MODE (préparation future)
   ============================================ */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --gs-text: #e0e0e0;
        --gs-text-dark: #ffffff;
        --gs-text-light: #b0b0b0;
        --gs-bg-white: #1a1a1a;
        --gs-bg-light: #2c2c2c;
        --gs-bg-section: #242424;
    }
}
*/