/* Jetons de design — Arthur Mosaka Ministries
   Réf. docs/claude design/docs/handoff-design.md §1 et §2.

   Back-office : figé. Il ne suit jamais l'ambiance d'un événement — un
   organisateur travaille sur plusieurs événements dans la même journée.

   Espace famille : les variables --ef-* portent les valeurs par défaut du thème
   « Registre ». L'ambiance d'un événement les surcharge en style inline sur
   <html> (apps/evenements/ambiance.py). Aucun <style> généré, aucune classe par
   événement, aucune couleur en dur dans un gabarit. */

:root {
  /* ---- Back-office (figé, jamais thémé) ---- */
  --bo-encre:          #0F1C28;
  --bo-accent:         #16324F;
  --bo-gris:           #5B6B7A;
  /* FD1 — un gris se vérifie sur **quatre fonds** : surface blanche, fond
     gris, canevas de revue, encre sombre. Aucun n'est « assez clair » dans
     l'absolu. D'où deux jetons et non un :

       --bo-gris-clair    sur les fonds clairs — 5,05:1 sur blanc
       --bo-gris-sur-encre  sur fond sombre **uniquement** — 6,67:1 sur encre

     Un seul jeton servait les deux rôles (#8894A0) et tombait à 3,09:1 sur
     blanc : le texte tertiaire du back-office était sous le seuil AA. Ce
     défaut est réapparu cinq fois dans ce projet, chaque fois parce qu'un
     nouveau fond avait été introduit sans être porté à cette liste. */
  --bo-gris-clair:     #65707C;
  --bo-gris-sur-encre: #93A3B2;
  --bo-fond:           #F4F6F8;
  --bo-surface:        #FFFFFF;
  --bo-bordure:        #DDE3E8;
  --bo-bordure-fine:   #EEF2F5;
  /* Fond des planches de revue. `--bo-gris-clair` n'y passe pas (4,29:1) :
     ce fond ne porte pas de texte tertiaire. */
  --bo-canevas:        #E9EDF0;
  /* FD1 — la bordure d'un élément inactif. Jamais une couleur de texte :
     1,63:1 sur blanc. Le libellé, lui, reste à --bo-gris-clair. */
  --bo-bordure-inactif: #C3CCD4;

  /* ---- Statuts : jamais thémables, back-office ET espace famille ----
     Code à trois valeurs, strict : brique = une règle est violée ;
     ambre = un manque à traiter, pas une violation ; vert = conforme.
     Aucune autre couleur de statut n'est autorisée. Un dossier incomplet a
     la même couleur sur tous les événements. */
  --statut-bloquant:       #9A3412;
  --statut-bloquant-fond:  #FDF6F2;
  --statut-bloquant-bord:  #F0CFAE;
  --statut-attention:      #B45309;
  --statut-attention-fond: #FDF1E7;
  --statut-ok:             #15803D;
  --statut-ok-fond:        #ECF6EF;
  --statut-ok-bord:        #C3E2CD;

  /* ---- Espace famille : valeurs par défaut = thème Registre ----
     Un événement sans ambiance rend exactement ceci. C'est un cas normal
     (événements ponctuels), pas une erreur. */
  --ef-encre:        #0F1C28;
  --ef-encre-doux:   #5B6B7A;
  --ef-accent:       #16324F;
  --ef-accent-texte: #FFFFFF;
  --ef-fond:         #FFFFFF;
  --ef-surface:      #FFFFFF;
  --ef-bordure:      #DDE3E8;
  --ef-titre:        "IBM Plex Sans";
  --ef-texte:        "IBM Plex Sans";

  /* ---- Marque ----
     L'or du trait et l'encre de la marque. Comme les couleurs de statut, ils
     ne sont **jamais** thémables : la marque identifie l'association, pas
     l'événement (docs/claude design/marque/README.md). */
  --marque-or:    #C09A55;
  --marque-encre: #0F1C28;
  --marque-gris:  #5B6B7A;

  /* ---- Chiffres : identiques partout, dans toutes les ambiances ----
     Montants, dates, rangs d'attente, références. Ne changent jamais de typo :
     c'est ce qui rend les colonnes alignables et les erreurs repérables. */
  --chiffres: "IBM Plex Mono", ui-monospace, monospace;

  /* La colonne de l'espace famille. Assez large pour deux montants alignés,
     assez étroite pour qu'une ligne se lise d'un seul regard. Ce n'est pas un
     jeton d'ambiance : la structure ne se thème jamais. */
  --ef-largeur: 40rem;

  /* ---- Échelle. Non thémable : un événement ne peut pas casser la mise en
     page ni l'ergonomie mobile (ENF-7.6). ---- */
  --t-meta: 11px;  --t-libelle: 12px; --t-secondaire: 13px;
  --t-corps: 14px; --t-titre-s: 16px; --t-titre-m: 19px; --t-compteur: 26px;
  --r-s: 3px; --r-m: 5px; --r-l: 8px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 28px;

  /* Cible tactile minimale (ENF-7.6) */
  --touche-min: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Racines */
body.bo {
  margin: 0;
  background: var(--bo-fond);
  color: var(--bo-encre);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: var(--t-corps);
  line-height: 1.5;
}
body.ef {
  margin: 0;
  background: var(--ef-fond);
  color: var(--ef-encre);
  font-family: var(--ef-texte), "IBM Plex Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
body.ef h1, body.ef h2, body.ef h3 {
  font-family: var(--ef-titre), "IBM Plex Sans", sans-serif;
}

/* Tout chiffre, date, référence, statut technique. Règle absolue (§1). */
.chiffre, time, .reference, .montant {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
}

a { color: var(--bo-accent); }
a:hover { color: var(--bo-encre); }
body.ef a { color: var(--ef-accent); }
body.ef a:hover { color: var(--ef-encre); }

/* Le focus reste visible partout : il ne dépend d'aucune ambiance. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}