/*
 * variables.css
 * Palette et échelle du mouvement 4C, dérivées du logo officiel :
 * cercle bleu, rouge et or (couleurs RDC) + feuille de palmier verte.
 * Modifier ces variables suffit à retheming tout le site.
 */

:root {
    /* Couleurs de marque */
    --color-primary: #0033A0;
    --color-primary-dark: #001F63;
    --color-primary-light: #EEF2FA;
    --color-secondary: #CE1126;
    --color-secondary-dark: #A50D1F;
    --color-accent: #FFD100;
    --color-accent-dark: #D9B100;
    --color-green: #1E7A34;

    /*
     * Vert de la barre de navigation.
     *
     * Volontairement plus sombre que --color-green : sur #1E7A34, le
     * jaune du bouton « Devenir membre » n'atteint que 3,70:1 de
     * contraste, soit en dessous du seuil AA pour du texte de taille
     * normale. À #176128, il passe à 5,18:1 et le blanc à 7,56:1.
     * Trois dixièmes de luminosité en moins, et la barre devient
     * lisible pour tout le monde.
     */
    --color-green-dark: #176128;
    --color-green-darker: #114B1F;

    /* Neutres */
    --color-bg: #FBFAF7;
    --color-bg-alt: #F1F0EA;
    --color-surface: #FFFFFF;
    --color-text: #14141F;
    --color-text-muted: #55566B;
    --color-border: #E4E2D9;

    /* États */
    --color-success: #1E7A34;
    --color-danger: #CE1126;

    /* Typographie */
    --font-heading: 'Fraunces', 'Georgia', serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --fs-hero: clamp(2.4rem, 5vw, 4rem);
    --fs-h1: clamp(2rem, 3.6vw, 2.75rem);
    --fs-h2: clamp(1.5rem, 2.6vw, 2rem);
    --fs-h3: 1.25rem;
    --fs-body: 1.0625rem;
    --fs-small: 0.9rem;

    /* Rayons / ombres */
    --radius-sm: 4px;
    --radius-md: 10px;
    --shadow-card: 0 1px 2px rgba(20, 20, 31, 0.06);

    /* Structure */
    --container-width: 1160px;
    --spacing-section: clamp(3.5rem, 7vw, 6rem);
    --ribbon-height: 4px;
}

/*
 * Devise du mouvement : « Congo = Congolais, Congolais = Congo »
 * Congo en vert · le signe = en or · Congolais en rouge.
 *
 * DEUX JEUX DE TONS, et ce n'est pas un caprice de designer.
 * Mesuré sur le bleu du hero (#0033A0) :
 *   vert de marque  #1E7A34 → 1,96:1   illisible
 *   rouge de marque #CE1126 → 1,88:1   illisible
 * Et sur le fond clair des pages (#FBFAF7) :
 *   or de marque    #FFD100 → 1,40:1   illisible
 *
 * Aucune couleur de la marque n'est donc lisible partout. On garde
 * l'IDENTITÉ — vert, or, rouge, dans cet ordre — et on adapte le ton
 * au fond, ce qui est la pratique normale d'une charte utilisée sur
 * clair comme sur foncé. Les valeurs ci-dessous passent toutes le
 * seuil AA (4,5:1) sur leur fond respectif.
 */
:root {
    /* Sur fond clair */
    --devise-vert: #1E7A34;      /* 5,17:1 */
    --devise-or: #8A6200;        /* 5,26:1 */
    --devise-rouge: #CE1126;     /* 5,39:1 */
}

/* Sur les aplats sombres — hero et pied de page */
.hero,
.site-footer,
/*
 * Le bandeau du manifeste (#001F63 → #0B1533) est encore plus sombre
 * que le hero. Sans cette ligne, il héritait des tons prévus pour fond
 * clair : mesuré à 2,71:1 pour le rouge et 2,83:1 pour le vert, donc
 * sous le seuil de 3:1 applicable même à un très grand titre. La devise
 * du mouvement y était affichée dans ses couleurs officielles… et
 * presque illisible.
 */
.manifeste-hero {
    --devise-vert: #4ED17A;      /* 5,41:1 sur #0033A0 */
    --devise-or: #FFD100;        /* 7,25:1 */
    --devise-rouge: #FF8A8A;     /* 4,67:1 */
}

.devise-congo     { color: var(--devise-vert); }
.devise-egal      { color: var(--devise-or); }
.devise-congolais { color: var(--devise-rouge); }