/* ═══════════════════════════════════════════════════════════════════
   SAPISAPI — THÈME CLAIR / SOMBRE
   Les variables sont nommées par RÔLE (--ink = fond, --bone = texte) :
   la bascule ne réécrit rien, elle re-remplit les rôles.

   Règle de résolution :
     :root                    → sombre (le défaut)
     @media light + :not(.dark) → clair si l'OS le demande (theme = auto)
     html.light               → clair, choix explicite
     html.dark                → sombre, choix explicite (écrase le media)

   ⚠️ Les 8 valeurs claires suivent la charte par rôle (parchemin/encre,
   ocre assombri pour le contraste). Si la charte officielle en publie
   d'autres, c'est ICI — et seulement ici — qu'on les remplace.
   ═══════════════════════════════════════════════════════════════════ */

/* Le jeu de variables claires, défini une fois. */
:root {
  --light-ink:      #F4F0E6;   /* fond — le parchemin                   */
  --light-ink-2:    #FFFFFF;   /* surface levée                          */
  --light-ink-3:    #D8D2C2;   /* bordures                               */
  --light-ink-4:    #B9B2A0;   /* bordure survolée                       */
  --light-bone:     #1C1F33;   /* texte — l'encre                        */
  --light-bone-dim: #6D6880;   /* texte secondaire                       */
  --light-ochre:    #B57A1E;   /* le pigment, assombri pour le contraste */
  --light-ochre-lo: #9C6817;   /* survol (plus sombre sur fond clair)    */
}

/* theme = auto → l'OS décide. Un choix explicite .dark gagne toujours. */
@media (prefers-color-scheme: light) {
  html:not(.dark) {
    --ink:      var(--light-ink);
    --ink-2:    var(--light-ink-2);
    --ink-3:    var(--light-ink-3);
    --ink-4:    var(--light-ink-4);
    --bone:     var(--light-bone);
    --bone-dim: var(--light-bone-dim);
    --ochre:    var(--light-ochre);
    --ochre-lo: var(--light-ochre-lo);
  }
}

/* theme = light → choix explicite, quel que soit l'OS. */
html.light {
  --ink:      var(--light-ink);
  --ink-2:    var(--light-ink-2);
  --ink-3:    var(--light-ink-3);
  --ink-4:    var(--light-ink-4);
  --bone:     var(--light-bone);
  --bone-dim: var(--light-bone-dim);
  --ochre:    var(--light-ochre);
  --ochre-lo: var(--light-ochre-lo);
}

/* En clair, la lueur de torche s'éteint : le parchemin est déjà éclairé. */
@media (prefers-color-scheme: light) {
  html:not(.dark) body::before { background: none; }
}
html.light body::before { background: none; }

/* ── Ce qui reste SOMBRE dans les deux thèmes ─────────────────────────
   La carte du monde et le cadre de l'image héros : un tableau
   s'accroche mieux sur un mur. Ne pas « uniformiser ». */
.map-wrap, .mistake .minimap {
  background: #14172B;
  border-color: #2C3358;
}
.hero {
  background: linear-gradient(135deg, #2a2118, #1e2340);
}