/* Tokens de la refonte graphique — voir `refonte-graphique.md`, §3.
 *
 * Chargé AVANT `style.css` par les deux jeux et par l'écran commun. Il ne
 * contient aucun sélecteur de composant : uniquement des valeurs.
 *
 * Deux blocs :
 *   1. les rôles de la direction « Matière » (feutre, ivoire, laiton) ;
 *   2. les anciens noms (--bg, --surface, --accent…), remappés sur les
 *      nouveaux.
 *
 * Le bloc 2 n'est pas une dette : c'est ce qui permet de reteindre les deux
 * jeux, l'écran commun et /admin d'un seul coup, sans toucher aux ~400
 * déclarations qui les emploient. Les lots suivants remplacent les usages un
 * par un ; le jour où plus rien ne s'en sert, le bloc disparaît.
 */

:root {
  /* ─── Feutre : le fond. Vert désaturé, pas un gris (DA-03). ───────────── */
  --felt-900: #101b18; /* fond de page, feuille de sélection */
  --felt-800: #14211d; /* fond d'écran */
  /* Le plateau doit se DÉTACHER du fond, sinon les dés flottent dans le vide au
     lieu d'être posés sur un tapis (DA-12). D'où un écart franc avec
     --felt-800, vérifié en capture plutôt que supposé. */
  --felt-700: #23392f; /* plateau, sous les dés */
  --felt-600: #1c2c27; /* panneau, puce, champ */
  --felt-550: #24382f; /* panneau en relief (ancien --surface-hi) */
  --felt-500: #2a3f38; /* filet 1 px */

  /* ─── Ivoire : le dé. Trois valeurs — chanfrein, corps, tranche. ──────── */
  /* DA-05 : ces quatre valeurs sont les mêmes dans les deux jeux. C'est
     l'invariant qui fait reconnaître le même objet d'un jeu à l'autre. */
  --ivory-100: #fbf5e8;
  --ivory-200: #f0e6d2;
  --ivory-300: #ddd0b5;
  --ivory-edge: rgba(150, 132, 98, 0.4);

  /* Encre gravée dans le dé. Jamais du noir pur. */
  --ink-900: #2a251d;
  /* Voyelle : assez sombre pour tenir 3:1 sur l'ivoire (DA-13, DA-32). Le
     laiton clair, lisible sur le feutre, serait illisible sur un dé. */
  --ink-vowel: #8a6a26;
  /* Verdict porté PAR un dé (L'Usurpateur, marques de case) : --valid et
     --invalid sont calés sur le feutre et disparaîtraient sur l'ivoire. */
  --ink-valid: #3d6b38;
  --ink-invalid: #8f2f1c;

  /* ─── Laiton : l'accent, unique (DA-04). ──────────────────────────────── */
  --brass-400: #e8c06a;
  --brass-500: #d8ab4e;
  --brass-600: #b98d34;
  --brass-700: #8f6f2c; /* tranche de bouton */
  --brass-soft: #35301c; /* fond d'état sélectionné, sur feutre */

  /* ─── Texte ───────────────────────────────────────────────────────────── */
  --text: #f1ece1;
  --muted: #93a49c;

  /* ─── Sémantique — séparée de l'accent (DA-06). ───────────────────────── */
  --valid: #7eb06a;
  --invalid: #c4573f;
  --known: #e8c06a; /* mot déjà trouvé */

  /* Voiles. Valeurs explicites plutôt qu'un color-mix : c'est un fond posé
     par-dessus la grille, il ne doit dépendre de rien. */
  --scrim: rgba(16, 27, 24, 0.74); /* derrière une feuille remontée */
  /* Décompte, par-dessus le plateau. À 0,84 il masquait complètement le
     brassage des dés qu'il est censé laisser voir (retour de playtest) : le
     décompte EST le temps de l'animation, un voile opaque la rendait donc
     invisible dans les deux jeux. Assez sombre pour que le chiffre reste
     lisible, assez clair pour que les dés tournent derrière. */
  --scrim-board: rgba(20, 33, 29, 0.32);

  /* ─── Espace : échelle de 4 (DA §3.4). ────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Côté du plateau de jeu. Le voile du décompte doit s'aligner dessus au
     pixel près : le laisser recalculer `min(94vw, 440px)` de son côté le
     décalait de 8 px, parce que son conteneur et celui du plateau n'ont pas la
     même largeur. Une seule source, pas deux calculs d'accord. */
  --board-side: min(94vw, 440px);

  /* ─── Rayons. Le dé se dérive de sa taille, le reste est fixe. ────────── */
  --r-die: calc(var(--cell, 80px) * 0.11);
  --r-panel: 10px;
  --r-btn: 12px;
  --r-chip: 8px;

  /* ─── Ombres. Une seule lumière, venant du haut (DA-10). ──────────────── */
  --sh-die: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -3px 0 var(--ivory-edge),
    0 2px 4px rgba(0, 0, 0, 0.4);
  --sh-board: inset 0 2px 12px rgba(0, 0, 0, 0.55);
  --sh-btn: 0 2px 0 var(--brass-700);

  /* ─── Durées ──────────────────────────────────────────────────────────── */
  --t-state: 90ms; /* changement d'état d'une case */
  --t-move: 180ms; /* déplacement d'un élément */
  --t-enter: 260ms; /* entrée d'un mot dans la liste */
  --t-shake: 420ms;
  --t-edge: 620ms;
  --t-count: 900ms; /* montée d'un nombre */

  /* ─── Courbes ─────────────────────────────────────────────────────────── */
  --ease-settle: cubic-bezier(0.2, 0.9, 0.25, 1); /* un objet qui se pose */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* un rebond */
  --ease-shake: cubic-bezier(0.36, 0.07, 0.19, 0.97);

  /* ═══ Anciens noms, remappés (voir l'en-tête) ═════════════════════════ */
  --bg: var(--felt-800);
  --surface: var(--felt-600);
  --surface-hi: var(--felt-550);
  --line: var(--felt-500);
  --accent: var(--brass-500);
  --accent-soft: var(--brass-soft);
  --vowel: var(--brass-400);
}

/* ─── Ambiance ROGGLE : bois brûlé (DA-02) ──────────────────────────────────
   Mêmes rôles, autres valeurs. L'ivoire, l'encre et le laiton ne bougent
   pas (DA-05) : le dé est le même objet dans les deux jeux.

   La classe est posée sur <body> par roggle.html. */

body.roggle {
  --felt-900: #150f0c;
  --felt-800: #1a1310;
  --felt-700: #2c2018;
  --felt-600: #241a15;
  --felt-550: #2f221b;
  --felt-500: #3d2c22;
  --muted: #a2907f;
  --brass-soft: #3a2c17;
  --scrim: rgba(21, 15, 12, 0.76);
  --scrim-board: rgba(26, 19, 16, 0.34);

  /* ─── Couleur-langage (DA-27) — ROGGLE seulement ─────────────────────────
     Cinq natures de nombre, cinq teintes. Reprises de Balatro, désaturées et
     réchauffées : le bleu pur #009DFF vibre désagréablement sur ce fond. */
  --lang-points: #5aa9e6;
  --lang-mult: #e4664f;
  --lang-money: #e2bb62;
  --lang-perm: #b98ad4;
  --lang-time: #7eb06a;

  /* Les alias DOIVENT être redéclarés ici. Une variable custom est résolue au
     niveau où elle est DÉCLARÉE : `--bg: var(--felt-800)` posé sur `:root`
     garde le feutre vert du classique, même quand `body.roggle` redéfinit
     `--felt-800` juste au-dessus. Sans ces six lignes, ROGGLE affichait un
     plateau de bois brûlé au milieu d'un fond et de panneaux verts. */
  --bg: var(--felt-800);
  --surface: var(--felt-600);
  --surface-hi: var(--felt-550);
  --line: var(--felt-500);
  --accent: var(--brass-500);
  --accent-soft: var(--brass-soft);
}