:root {
    /* --- Mode Clair --- */
    
    /* Couleur du texte */
    --color-text: #232d4b;
    
    /* Couleur du texte inversé */
    --color-text-inverse: #ffffff;
    
    /* Couleur de fond */
    --color-bg: #f4f6f8;
    
    /* Couleuur de fond pour les zones secondaires */
    --color-bg-alt: #e3e7eb;
    
    /* Couleur d'action principale (boutons, liens importants) */
    --color-primary: #e06c68;
        
    /* Coleur des éléments secondaires ou de support */
    --color-secondary: #2ba89c;
        
    /* Couleur pour l'accentuation */
    --color-accent: #d64541;

    body.dark {
        /* --- Mode Sombre --- */

        /* Couleur du texte */
        --color-text: #f0f2f5;
        
        /* Couleur du texte inversé */
        --color-text-inverse: #232d4b;
        
        /* Couleur de fond */
        --color-bg: #232d4b;
        
        /* Couleuur de fond pour les zones secondaires */
        --color-bg-alt: #2e3a5e;
        
        /* Couleur d'action principale (boutons, liens importants) */
        --color-primary: #e06c68;
        
        /* Coleur des éléments secondaires ou de support */
        --color-secondary: #2ba89c;
        
        /* Couleur pour l'accentuation */
        --color-accent: #d64541;
    }
}