/* ============================================================================
   PALETTE GRAPHIQUE CENTRALISÉE - WINNER CHINESE
   Mode Clair & Sombre - Conversion Optimisée (CRO)
   ============================================================================ */

:root {
    /* Couleurs de Marque */
    --primary: #00147a;              /* Bleu institutionnel profond */
    --primary-light: #1a2d9e;
    --primary-lighter: #3347c6;
    --titre-module: #ffffff;
    
    /* Couleurs d'Action */
    --secondary: #ff7a00;            /* Orange dynamique */
    --secondary-light: #ffb366;
    --accent: #ff6b35;               /* Rouge-Orange pour urgence */
    
    /* Couleur de Conversion (VERT) */
    --cta-green: #28a745;
    --cta-green-hover: #218838;
    --cta-green-light: #d4edda;
    
    /* Fond & Surfaces */
    --bg: #fafbfc;
    --bg-secondary: #f0f4f9;
    --bg-tertiary: #e8ecf1;
    
    /* Texte & Contraste */
    --text: #1a1a2e;
    --text-light: #555555;
    --text-muted: #888888;
    
    /* Éléments */
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    
    /* Effets */
    --glass: rgba(255, 255, 255, 0.7);
    --glass-dark: rgba(255, 255, 255, 0.4);
    --shadow-sm: 0 4px 12px rgba(0, 20, 122, 0.05);
    --shadow-md: 0 10px 30px rgba(0, 20, 122, 0.08);
    --shadow-lg: 0 20px 50px rgba(0, 20, 122, 0.12);
    
    /* Animation */
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s ease;
    --transition-slow: 0.6s ease;
}

body.dark {
    /* Couleurs de Marque - Mode Sombre */
    --primary: #1a2d9e;
    --primary-light: #2b3fc7;
    --primary-lighter: #3c51e8;
    
    /* Couleurs d'Action - Mode Sombre */
    --secondary: #ff7a00;
    --secondary-light: #ffb366;
    --accent: #ff6b35;
    
    /* Couleur de Conversion - Mode Sombre */
    --cta-green: #2ebd59;
    --cta-green-hover: #25a24b;
    --cta-green-light: #1f4d2e;
    
    /* Fond & Surfaces - Mode Sombre */
    --bg: #0b1120;
    --bg-secondary: #152238;
    --bg-tertiary: #1f3550;
    
    /* Texte & Contraste - Mode Sombre */
    --text: #ffffff;
    --text-light: #cbd5e1;
    --text-muted: #94a3b8;
    
    /* Éléments - Mode Sombre */
    --border-light: #1e293b;
    --border-medium: #334155;
    
    /* Effets - Mode Sombre */
    --glass: rgba(15, 23, 42, 0.6);
    --glass-dark: rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Contraste et Accessibilité */
@media (prefers-contrast: more) {
    :root {
        --text: #000000;
        --text-light: #333333;
        --border-light: #cccccc;
    }
    
    body.dark {
        --text: #ffffff;
        --text-light: #f0f0f0;
        --border-light: #505050;
    }
}

/* Respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition: 0s;
        --transition-fast: 0s;
        --transition-slow: 0s;
    }
}