/* Les jetons de couleur, clair et sombre (conception § 12.4).

   Toutes les couleurs de l'écran passent par ces variables : aucune couleur écrite ailleurs.
   Le thème suit l'appareil (prefers-color-scheme), sauf si l'utilisateur en a choisi un :
   data-theme="clair" ou "sombre" sur <html>, posé par le script d'après ses préférences, rangées
   côté serveur (il retrouve son choix sur son téléphone).

   La couleur de l'instance (la mise aux couleurs) arrive par --accent-clair et --accent-sombre,
   posées par le script (le CSSOM n'est pas visé par la CSP) après un ajustement qui garde le
   contraste AA dans chaque thème. Les valeurs ci-dessous servent tant qu'elle n'est pas posée.

   Le banc navigateur mesure le contraste de chaque couple utilisé, dans les deux thèmes. */

:root {
  color-scheme: light;
  --fond: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceef2;
  --texte: #15171c;
  --discret: #4b515c;
  --bordure: #d5d9e0;
  --bordure-forte: #6b717c;
  --focus: #0b57d0;
  --accent: var(--accent-clair, #1f5fa8);
  --sur-accent: #ffffff;
  --danger: #a8231b;
  --danger-fond: #fdecea;
  --succes: #1b6b37;
  --succes-fond: #e6f4ea;
  --alerte: #6e4b00;
  --alerte-fond: #fff4d1;
  --info: #174ea6;
  --info-fond: #e8f0fe;
  --ombre: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 6px rgb(0 0 0 / 6%);

  /* Les couleurs des options (liste fermée du moteur : gris, bleu, vert, jaune, orange, rouge,
     violet, rose, turquoise) : un fond et un texte, AA l'un sur l'autre. */
  --c-gris-fond: #e7e9ed; --c-gris-texte: #3b4049;
  --c-bleu-fond: #dbe8fb; --c-bleu-texte: #164a8a;
  --c-vert-fond: #dcf3e2; --c-vert-texte: #1d5e33;
  --c-jaune-fond: #fbf0c9; --c-jaune-texte: #634b00;
  --c-orange-fond: #fde3cf; --c-orange-texte: #853a00;
  --c-rouge-fond: #fadcdc; --c-rouge-texte: #961b1b;
  --c-violet-fond: #ece3fb; --c-violet-texte: #5b2a9e;
  --c-rose-fond: #fbe0ee; --c-rose-texte: #8a1d56;
  --c-turquoise-fond: #d5f2f0; --c-turquoise-texte: #0f5a56;
}

/* Le thème sombre : celui de l'appareil, sauf choix contraire de l'utilisateur… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --fond: #111317;
    --surface: #1a1d23;
    --surface-2: #242830;
    --texte: #eceef2;
    --discret: #b4bac4;
    --bordure: #353a44;
    --bordure-forte: #8d94a0;
    --focus: #8ab4f8;
    --accent: var(--accent-sombre, #8fb6ef);
    --sur-accent: #0e1116;
    --danger: #ffb4ab;
    --danger-fond: #3b1714;
    --succes: #9fdcb1;
    --succes-fond: #12301c;
    --alerte: #f5d27a;
    --alerte-fond: #3a2e0c;
    --info: #a8c7fa;
    --info-fond: #1c2a40;
    --ombre: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 30%);
    --c-gris-fond: #33373f; --c-gris-texte: #dfe2e8;
    --c-bleu-fond: #1d3557; --c-bleu-texte: #b9d3fa;
    --c-vert-fond: #1d3b27; --c-vert-texte: #b5e6c3;
    --c-jaune-fond: #423814; --c-jaune-texte: #f3df94;
    --c-orange-fond: #4a2c15; --c-orange-texte: #f8c9a2;
    --c-rouge-fond: #4a1f1f; --c-rouge-texte: #f6b9b9;
    --c-violet-fond: #352650; --c-violet-texte: #d9c6fa;
    --c-rose-fond: #4a1f36; --c-rose-texte: #f6bfdc;
    --c-turquoise-fond: #163d3b; --c-turquoise-texte: #a9e6e1;
  }
}

/* … ou le sombre choisi par l'utilisateur, quel que soit l'appareil. */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #111317;
  --surface: #1a1d23;
  --surface-2: #242830;
  --texte: #eceef2;
  --discret: #b4bac4;
  --bordure: #353a44;
  --bordure-forte: #8d94a0;
  --focus: #8ab4f8;
  --accent: var(--accent-sombre, #8fb6ef);
  --sur-accent: #0e1116;
  --danger: #ffb4ab;
  --danger-fond: #3b1714;
  --succes: #9fdcb1;
  --succes-fond: #12301c;
  --alerte: #f5d27a;
  --alerte-fond: #3a2e0c;
  --info: #a8c7fa;
  --info-fond: #1c2a40;
  --ombre: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 30%);
  --c-gris-fond: #33373f; --c-gris-texte: #dfe2e8;
  --c-bleu-fond: #1d3557; --c-bleu-texte: #b9d3fa;
  --c-vert-fond: #1d3b27; --c-vert-texte: #b5e6c3;
  --c-jaune-fond: #423814; --c-jaune-texte: #f3df94;
  --c-orange-fond: #4a2c15; --c-orange-texte: #f8c9a2;
  --c-rouge-fond: #4a1f1f; --c-rouge-texte: #f6b9b9;
  --c-violet-fond: #352650; --c-violet-texte: #d9c6fa;
  --c-rose-fond: #4a1f36; --c-rose-texte: #f6bfdc;
  --c-turquoise-fond: #163d3b; --c-turquoise-texte: #a9e6e1;
}