/*
 * Design tokens — ASA (Association Sportive les Anges).
 * Source unique des couleurs et tailles de police du site public + admin.
 * Toute regle CSS nouvelle ou corrigee doit consommer ces variables
 * plutot que des valeurs en dur.
 *
 * IMPORTANT : pas de pipeline de build ici (CSS brut, pas de Sass/PostCSS
 * actif sur ces fichiers). Les variables ci-dessous sont donc utilisables
 * dans n'importe quelle declaration CSS, MAIS PAS dans une condition
 * @media (ex. @media (max-width: var(--bp-md)) ne fonctionne pas sans
 * build step). Les points de rupture restent des valeurs en dur ; la
 * convention a respecter est documentee en bas de ce fichier.
 */
:root {
    /* Palette — identique au bloc existant dans style.css (~ligne 26533),
       repris ici comme source canonique pour tout nouveau CSS. */
    --asa-primary:    #0D5C2E;
    --asa-secondary:  #1B8A4A;
    --asa-accent:     #F5C518;
    --asa-dark:       #080E0B;
    --asa-dark-2:     #111A14;
    --asa-light:      #F4F7F5;
    --asa-text-muted: #8A9E90;
    --asa-white:      #FFFFFF;

    /* Echelle typographique mobile-first — a utiliser a la place de
       font-size en dur. Bornes alignees sur l'existant (corps de texte
       = 14px deja dans style.css body, h1 desktop ~60px) pour ne pas
       creer de rupture visuelle en migrant les regles une par une. */
    --fs-xs:   0.75rem;   /* 12px — mentions legeres, labels, badges   */
    --fs-sm:   0.875rem;  /* 14px — corps de texte (= body actuel)    */
    --fs-base: 1rem;      /* 16px                                      */
    --fs-md:   1.125rem;  /* 18px — lead text, sous-titres            */
    --fs-lg:   1.375rem;  /* 22px — h3/h4, valeurs de stats moyennes  */
    --fs-xl:   1.75rem;   /* 28px — h2                                 */
    --fs-2xl:  2.25rem;   /* 36px — h1 mobile / gros chiffres          */
    --fs-3xl:  3rem;      /* 48px — h1 desktop, plafond volontaire     */

    --lh-tight:  1.15;
    --lh-normal: 1.5;
    --lh-loose:  1.7;
}

/* ── Convention de points de rupture (documentation, pas de var() possible) ──
   992px  : bascule tablette / desktop pour le CONTENU (grilles, colonnes)
   768px  : bascule mobile / tablette pour le CONTENU
   480px  : palier "petit telephone", a n'ajouter que si un composant en
            a reellement besoin
   1199px : bascule du menu RD Navbar mobile <-> desktop — NE PAS CHANGER,
            valeur exploitee par du JS inline (footer.blade.php) et des
            regles !important qui en dependent deja.
   Pour tout nouveau CSS ou toute regle retouchee dans le cadre de cette
   phase : utiliser uniquement 992 / 768 / 480. Ne pas renommer les
   points de rupture deja fonctionnels dans des fichiers non touches par
   ailleurs (900px, 680px, 600px, etc.). */