/*
 * Design system Anima — jetons de couleurs, rayons, ombres, espacements.
 * Deux niveaux : primitives (palette brute) → jetons sémantiques.
 * Le thème sombre ne remappe QUE les sémantiques (bloc [data-theme="dark"]).
 * Chargé AVANT anima-front.css / app.css dans index.html.
 */
:root {
  /* ---- Primitives : parchemin (clair) ---- */
  --c-parchment-50:  #f6eed9;
  --c-parchment-100: #efe3c8;
  --c-parchment-200: #e3d3ad;
  --c-parchment-300: #c9b78a;
  --c-ink-900: #2e2216;
  --c-ink-700: #4a3820;
  --c-ink-500: #6b5636;

  /* ---- Primitives : accents & domaines ---- */
  --c-bordeaux:      #7a2e2e;
  --c-bordeaux-600:  #6a2626;
  --c-hp:            #8a2b2b;
  --c-hp-soft:       #e8c9c9;
  --c-zeon:          #2f5c8a;
  --c-zeon-soft:     #cdd6e6;
  --c-psychic:       #6d4a9e;
  --c-success:       #4d6a4d;
  --c-warning:       #8f5416;
  /* Teintes de section de la fiche de personnage. Réparties sur la roue chromatique
     dans l'ordre des onglets, pour qu'en balayant la barre d'onglets on descende le
     spectre. Saturées et sombres : elles se posent sur le parchemin clair. */
  --c-martial:       #a4521f;
  --c-ki:            #8a6a12;
  --c-stats:         #4f6b44;
  --c-inventory:     #2f6b63;
  --c-combat:        #455a6b;
  --c-nemesis:       #7a2a5e;

  /* ---- Primitives : nuit chaude (sombre) ---- */
  --c-night-950: #0f0c07;
  --c-night-900: #14100a;
  --c-night-800: #1d160c;
  --c-copper-500:#c66c40;
  --c-amber-400: #e0a24a;
  --c-parch-dim: #e6d7b0;
  --c-parch-mut: #c9b483;

  /* ================= JETONS SÉMANTIQUES — CLAIR (défaut) ================= */
  --bg:        var(--c-parchment-100);
  --surface:   var(--c-parchment-50);
  --surface-2: var(--c-parchment-200);
  --ink:       var(--c-ink-900);
  --ink-strong:var(--c-ink-900);
  --muted:     var(--c-ink-500);
  --border:    var(--c-parchment-300);

  --accent:       var(--c-bordeaux);
  --accent-hover: var(--c-bordeaux-600);
  --on-accent:    var(--c-parchment-50);
  --link:         var(--c-bordeaux);
  --link-hover:   var(--c-bordeaux-600);

  --hp:        var(--c-hp);
  --hp-soft:   var(--c-hp-soft);
  --danger:    var(--c-hp);
  --zeon:      var(--c-zeon);
  --zeon-soft: var(--c-zeon-soft);
  --psychic:   var(--c-psychic);
  --success:   var(--c-success);
  --warning:   var(--c-warning);

  /* Teintes de section — consommées via --section (voir components.css). */
  --martial:   var(--c-martial);
  --ki:        var(--c-ki);
  --stats:     var(--c-stats);
  --inventory: var(--c-inventory);
  --combat:    var(--c-combat);
  --nemesis:   var(--c-nemesis);

  --scrim: rgba(30, 20, 8, 0.45);

  /* ---- Rayons / ombres / espacements (invariants entre thèmes) ---- */
  /* Hauteur de la bannière supérieure. Plusieurs éléments collants se calent
     dessus (barre d'onglets, sous-onglets, budget de capacités secondaires) :
     toujours passer par ce jeton, jamais réécrire la valeur en dur. */
  --topnav-h: 56px;
  /* Hauteur de la barre de navigation quand elle passe en bas de l'écran (téléphone).
     Même discipline que --topnav-h. Quatre consommateurs, relevés en cherchant
     `var(--bottomnav-h)` dans app/styles/ (la liste se recompte, elle ne se recopie pas) —
     les deux derniers étaient annoncés ici comme à venir, ils sont arrivés depuis :
       — le dégagement bas de .anima-main-content       (layout.css)
       — l'ancrage du menu des combats actifs           (pages/adventures.css)
       — la bannière de notification d'échange          (pages/adventures.css)
       — le panneau des dés                             (dice-roller.css)
     pages/whiteboard.css cite le jeton dans deux commentaires mais ne le consomme pas :
     en mode immersif il EFFACE la barre au lieu de s'y caler. Toujours passer par le jeton.
     50px n'est pas un chiffre rond arbitraire : c'est la hauteur rendue mesurée de la
     barre, 49,84px arrondis au pixel supérieur (2 de bordure + 6 de padding + 17
     d'icône + 3 d'espacement + ~15,8 de libellé + 6 de padding).
     Le jeton a valu 73px, et pour une raison qui n'a plus cours : l'onglet « Combats »
     commandait alors la hauteur à lui seul, parce qu'en `flex-direction: column` son
     badge de compteur devenait une TROISIÈME rangée (+19,8 + 3 d'espacement, soit
     72,64px). Le badge est depuis une pastille superposée, hors flux (bloc mobile de
     .anima-combats-badge, pages/adventures.css) : les cinq onglets font désormais tous
     49,84px, mesurés, et la barre suit.
     Si tu changes le padding, la taille d'icône, celle du libellé, ou la mise en page
     du badge, cette valeur doit suivre — l'assertion 3 du harnais mobile le détectera. */
  --bottomnav-h: 50px;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;
  --shadow-1: 0 1px 3px rgba(0,0,0,.18);
  --shadow-2: 0 6px 22px rgba(0,0,0,.28);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
}

/* ================= JETONS SÉMANTIQUES — SOMBRE (remap) ================= */
:root[data-theme="dark"] {
  --bg:        var(--c-night-900);
  --surface:   var(--c-night-800);
  --surface-2: #241a0e;
  --ink:       var(--c-parch-dim);
  --ink-strong:#f0e4c4;
  --muted:     var(--c-parch-mut);
  --border:    rgba(196,135,58,.24);

  --accent:       var(--c-copper-500);
  --accent-hover: #c96e44;
  --on-accent:    #160f06;
  --link:         var(--c-amber-400);
  --link-hover:   #f0b45c;

  --hp:        #c0453f;
  --hp-soft:   #3a1c1c;
  --danger:    #c0453f;
  --zeon:      #5b93cf;
  --zeon-soft: #1c2840;
  --psychic:   #a98bd6;
  --success:   #6d9a6d;
  --warning:   #d68a2f;

  /* Teintes de section — désaturées et claires : elles se posent sur la nuit chaude.
     Même rôle que les valeurs claires, contraste inversé. */
  --martial:   #e0894f;
  --ki:        #dfb44f;
  --stats:     #93b884;
  --inventory: #5fb3a6;
  --combat:    #8fa9be;
  --nemesis:   #d183b8;

  --scrim: rgba(0, 0, 0, 0.6);
}