/* La Table — tokens.css
   ============================================================================
   SOURCE UNIQUE des design tokens (spec : docs/design-refonte-interface.md §5).
   Chargé AVANT style.css et theme.css. Ces deux fichiers ne déclarent plus de
   `:root` : ils consomment, ils ne définissent plus.

   Référence de la palette : Firewatch — noirs **chauds**, un seul accent
   lumineux à la fois (ambre/braise), violet rétrogradé en `--arcane` réservé
   aux éléments IA/MJ (jamais en dégradé de fond).
   ========================================================================= */

/* Les couleurs d'ambiance sont des propriétés ENREGISTRÉES : sans cela, changer
   une variable ne fait pas interpoler les dégradés (le fond basculerait d'un
   coup). Avec `@property`, le fondu de 400 ms de la spec §5.1 est réel. */
@property --bg-0 {
  syntax: "<color>";
  inherits: true;
  initial-value: #14100b;
}
@property --bg-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --bg-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #e8a33d;
}
@property --accent-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --border-strong {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(232, 163, 61, 0.34);
}
@property --grain-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.1;
}

:root {
  /* ---------- plans (z-index) ---------- */
  --z-bg: 0;
  --z-veil: 5;
  --z-content: 10;
  --z-curtain: 30;
  --z-drawer: 40;
  --z-overlay: 60;
  --z-toast: 80;

  /* ---------- ambiances : jour (défaut) ----------
     Redéfinies par `body[data-mood="..."]` plus bas ; `--bg-0/1/2` pilotent le
     fond et le voile, `--accent*` l'accent lumineux, `--grain-opacity` le grain. */
  --bg-0: #14100b;
  --bg-1: rgba(240, 180, 90, 0.05);
  --bg-2: rgba(10, 6, 3, 0.26);
  --accent: var(--amber);
  --accent-glow: rgba(232, 163, 61, 0.18);
  --grain-opacity: 0.1;

  /* ---------- surfaces : chaudes (teinte ambre ~6 %), plus de gris-bleu ---------- */
  --base: var(--bg-0);
  --base-2: #1b1510;
  --surface: rgba(24, 20, 16, 0.62);
  --surface-1: var(--surface);
  --surface-2: rgba(32, 26, 20, 0.78);
  --border: rgba(210, 180, 140, 0.16);
  --border-strong: rgba(232, 163, 61, 0.34);

  /* ---------- textes ---------- */
  --text: #f4eee4;
  --muted: #b0a695;
  /* 5.3:1 mesuré sur le panneau (mesure du 10/09) : au-dessus du seuil AA de
     4.5:1 avec marge, alors que #857c6d frôlait le seuil à 4.52:1. */
  --text-dim: #918877;

  /* ---------- accents ---------- */
  --amber: #e8a33d;
  --amber-soft: rgba(232, 163, 61, 0.14);
  --gold: #f6c96a;
  --ember: #ff7a3d;
  --ember-glow: rgba(255, 122, 61, 0.32);

  /* ---------- arcanique : IA / MJ uniquement (jamais un fond) ---------- */
  --arcane: #b39dff;
  --arcane-soft: rgba(179, 157, 255, 0.12);
  --arcane-glow: rgba(179, 157, 255, 0.24);
  /* Anciens noms conservés en alias le temps que le lot 2 remplace les usages. */
  --violet: var(--arcane);
  --violet-soft: var(--arcane-soft);
  --violet-glow: var(--arcane-glow);

  /* ---------- vitalité ---------- */
  --hp: #e0574a;
  --fp: #7e9ec7;
  --ok: #4fbf7f;

  /* ---------- typographie ----------
     Deux familles, deux rôles : Science Gothic (variable, par axes) pour l'UI et
     les titres, Literata (serif de lecture) pour LA PROSE — la voix du MJ.
     `--serif` est un alias historique de l'UI : ne pas le confondre avec `--prose`,
     qui est la seule vraie serif du système. */
  --display: "Science Gothic", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: var(--display);
  --sans: var(--display);
  --prose: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fv-display: "wght" 700, "wdth" 112;
  --fv-ui: "wght" 500, "wdth" 100;
  /* Literata n'a pas d'axes `wdth`/`CTRS` : la prose se règle par la graisse,
     l'axe `opsz` suivant automatiquement la taille de corps (font-optical-sizing). */
  --fv-prose: "wght" 400;
  /* Mesure de la prose : `68ch` était calibré pour Science Gothic ; la serif a un
     « 0 » plus large que sa moyenne, donc `ch` mentait (73 caractères mesurés au
     lieu de 68). En `em`, la mesure suit la taille de corps : 32em ≈ 68 caractères
     réels, vérifié au navigateur. */
  --fv-data: "wght" 600, "wdth" 92;
  --fv-label: "wght" 600, "wdth" 118;
  --measure-prose: 32em;

  /* ---------- espacement, rayons, élévation ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-lg: var(--r-lg);
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-lg: var(--shadow-2), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  --ring: 0 0 0 3px rgba(232, 163, 61, 0.26);
  --glow-amber: 0 0 24px rgba(232, 163, 61, 0.25);
  /* --frame (coins en équerre du cadre de jeu) supprimé : demande design utilisateur. */

  /* ---------- motion ---------- */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 900ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Valeur combinée historique (lot 5 la reprendra) : transition: x var(--ease). */
  --ease: var(--dur-2) cubic-bezier(0.4, 0, 0.2, 1);
  /* Le ressort existe aussi SEUL (sans durée) : le lancer du dé (700 ms, spec §8)
     a sa propre durée et ne peut pas hériter d'une durée dans le jeton. */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: 360ms var(--spring);

  /* ---------- textures ---------- */
  /* Grain « pellicule » : --film-grain porte déjà son opacité (usage sur les
     visuels), --grain-tex est opaque et piloté par --grain-opacity (voile). */
  --film-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  --grain-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  /* Icône d20 (réutilisable). */
  --d20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8a33d' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 2 L20.4 7 L16.8 21.2 L7.2 21.2 L3.6 7 Z'/%3E%3Cpath d='M12 2 L7.2 21.2'/%3E%3Cpath d='M12 2 L16.8 21.2'/%3E%3Cpath d='M3.6 7 L16.8 21.2'/%3E%3Cpath d='M20.4 7 L7.2 21.2'/%3E%3C/svg%3E");
}

/* ================= ambiances (spec §5.1) ================= */
/* `body[data-mood]` est posé par app.js depuis l'ambiance déclarée par le MJ
   (replis : événements de jeu réels, puis mots-clés). Un seul accent à la fois. */

body[data-mood="day"],
body:not([data-mood]) {
  --bg-0: #14100b;
  --bg-1: rgba(240, 180, 90, 0.05);
  --bg-2: rgba(10, 6, 3, 0.26);
  --accent: #e8a33d;
  --accent-glow: rgba(232, 163, 61, 0.18);
  --grain-opacity: 0.1;
  --border-strong: rgba(232, 163, 61, 0.34);
}

body[data-mood="night"] {
  --bg-0: #070910;
  --bg-1: rgba(22, 32, 64, 0.3);
  --bg-2: rgba(3, 4, 8, 0.62);
  --accent: #f6c96a;
  --accent-glow: rgba(246, 201, 106, 0.22);
  --grain-opacity: 0.14;
  --border-strong: rgba(246, 201, 106, 0.34);
}

body[data-mood="danger"] {
  --bg-0: #120604;
  --bg-1: rgba(120, 26, 16, 0.4);
  --bg-2: rgba(14, 3, 3, 0.62);
  --accent: #ff7a3d;
  --accent-glow: rgba(255, 122, 61, 0.3);
  --grain-opacity: 0.16;
  --border-strong: rgba(255, 122, 61, 0.4);
}

/* Le fond profond suit l'ambiance : fondu de 400 ms sur les tokens enregistrés
   ci-dessus (le `background-color` accompagne le reste). */
body {
  background: var(--bg-0);
  transition:
    --bg-0 var(--dur-3) var(--ease-out),
    --bg-1 var(--dur-3) var(--ease-out),
    --bg-2 var(--dur-3) var(--ease-out),
    --accent var(--dur-3) var(--ease-out),
    --accent-glow var(--dur-3) var(--ease-out),
    --border-strong var(--dur-3) var(--ease-out),
    --grain-opacity var(--dur-3) var(--ease-out),
    background-color var(--dur-3) var(--ease-out);
}

/* ================= accessibilité : mouvement ================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01ms;
    --dur-2: 0.01ms;
    --dur-4: 0.01ms;
  }
  /* Les fondus qui ne déplacent rien (ambiance, --dur-3) sont conservés. */
}