:root {
    /* ========================================= */
    /* 1. NOUVELLES COULEURS (Landing Page)      */
    /* ========================================= */
    --color-bg: #f4f5f9;
    --color-bg-alt: #dddfe6;
    --color-text: #252c41;

    /* Primary (Rouge) */
    --color-primary: #e63946;
    --color-primary-lighter: #f95f6a;
    --color-primary-lightest: #fb8991;
    --color-primary-darker: #c91421;
    --color-primary-darkest: #9f0510;

    /* Secondary (Vert) */
    --color-secondary: #44c330;
    --color-secondary-lighter: #63d451;
    --color-secondary-lightest: #8ae37c;
    --color-secondary-darker: #26ab11;
    --color-secondary-darkest: #178705;

    /* Aliases sémantiques */
    --color-accent: var(--color-primary);
    --color-link: var(--color-primary);
    --color-success: var(--color-secondary);

    /* ========================================= */
    /* 2. ADAPTATION DU BLOG (Rétrocompatibilité)*/
    /* ========================================= */
    color-scheme: light dark;

    /* On mappe les vieux noms sur les nouvelles couleurs */
    --bg: var(--color-bg);
    --text: var(--color-text);
    --accent: var(--color-primary);

    /* Variables spécifiques au blog qui n'existaient pas dans la landing page */
    --muted: #6b7280; /* Un gris doux pour les dates et textes secondaires */
    --border: var(
        --color-bg-alt
    ); /* On utilise ton fond alternatif comme couleur de bordure */

    /* Traces de Bootstrap au cas où certaines classes les utilisent encore */
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-primary: var(--accent);
    --bs-border-color: var(--border);
}

/* ========================================= */
/* 3. MODE SOMBRE (Optionnel mais recommandé)*/
/* ========================================= */
@media (prefers-color-scheme: dark) {
    :root {
        /* On inverse simplement les variables fondamentales */
        --color-bg: #222222;
        --color-bg-alt: #444444;
        --color-text: #ffffff;

        /* Variables du blog mises à jour pour le fond noir */
        --bg: var(--color-bg);
        --text: var(--color-text);
        --accent: var(
            --color-primary-lighter
        ); /* Un rouge légèrement plus clair pour rester lisible sur fond noir */
        --muted: #999999;
        --border: var(--color-bg-alt);

        /* Bootstrap */
        --bs-body-color: var(--text);
        --bs-body-bg: var(--bg);
        --bs-primary: var(--accent);
        --bs-border-color: var(--border);
    }
}