/* Design system Mystigrille — TOKENS.
   Étage 1 : les primitives (la palette brute, reprise de « Qui a mangé la tarte ? »).
   Étage 2 : les tokens sémantiques (le rôle de chaque valeur).
   Les composants n'utilisent QUE l'étage 2 : pour changer tout le design, on ne modifie que ce fichier. */
:root {
  /* ── Étage 1 : primitives ── */
  --cream: #FFF6E8;
  --cream-blob: #F9EBD3;
  --cream-sunk: #FBF3E4;
  --blanc: #FFFFFF;
  --ink: #1F2544;
  --ink-muted: #6B6F8A;
  --framboise: #E5486B;
  --framboise-tint: #FFE1E7;
  --soleil: #FFD25E;
  --soleil-pale: #FFE8A3;
  --soleil-rays: #FDE7B3;
  --menthe: #5DBB7A;

  /* ── Étage 2 : couleurs par rôle ── */
  --couleur-fond: var(--cream);
  --couleur-fond-decor: var(--cream-blob);
  --couleur-surface: var(--blanc);
  --couleur-surface-creuse: var(--cream-sunk);
  --couleur-texte: var(--ink);
  --couleur-texte-doux: var(--ink-muted);
  --couleur-trait: var(--ink);
  --couleur-trait-fin: rgba(31, 37, 68, 0.12);
  --couleur-marque: rgba(31, 37, 68, 0.28);
  --couleur-action: var(--framboise);
  --couleur-action-texte: var(--blanc);
  --couleur-selection: var(--framboise);
  --couleur-selection-fond: var(--framboise-tint);
  --couleur-aide: var(--soleil);
  --couleur-aide-pale: var(--soleil-pale);
  --couleur-surlignage: var(--soleil);
  --couleur-fete: var(--soleil-rays);
  --couleur-succes: var(--menthe);
  --couleur-lettre-muette: #8E93B5;
  --couleur-arc-syllabe: var(--framboise);

  /* Fonds des jetons, par personnage */
  --jeton-lili: #FFE1E7;
  --jeton-tom: #DDE9FB;
  --jeton-mila: #E6F5DC;
  --jeton-rudy: #FFF1C9;
  --jeton-sami: #ECE4FB;
  --jeton-nono: #FFE8A3;
  --jeton-mystere: var(--blanc);

  /* Sols des pièces */
  --sol-chambre: repeating-linear-gradient(90deg, transparent 0 13px, rgba(160, 105, 60, 0.35) 13px 14px), #EDCFA6;
  --sol-cuisine: conic-gradient(#FFF6D8 25%, #F7DF97 0 50%, #FFF6D8 0 75%, #F7DF97 0) 0 0 / 28px 28px;
  --sol-salon: repeating-linear-gradient(0deg, transparent 0 13px, rgba(80, 130, 160, 0.3) 13px 14px), #CFE3EE;
  --sol-jardin: radial-gradient(circle at 30% 40%, #8FC66E 1.6px, transparent 2.2px) 0 0 / 11px 11px, #BFE3A0;
  --sol-bain: linear-gradient(rgba(90, 150, 160, 0.3) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(90, 150, 160, 0.3) 1px, transparent 1px) 0 0 / 14px 14px, #D7EEF0;
  --sol-garage: radial-gradient(circle at 60% 30%, rgba(31, 37, 68, 0.14) 1.2px, transparent 1.8px) 0 0 / 9px 9px, #D9D2C7;

  /* ── Typographie ── */
  --police-interface: Fredoka, "Trebuchet MS", system-ui, sans-serif;
  --police-lecture: Andika, "Trebuchet MS", system-ui, sans-serif;
  --texte-affiche: 700 46px/1.02 var(--police-interface);
  --texte-titre: 700 28px/1.1 var(--police-interface);
  --texte-intertitre: 700 21px/1.15 var(--police-interface);
  --texte-bouton: 700 20px/1.1 var(--police-interface);
  --texte-etiquette: 700 15px/1.2 var(--police-interface);
  --texte-legende: 600 13px/1.3 var(--police-interface);
  /* Corps des phrases à lire, par niveau de lecture (jamais sous 18 px) */
  --lecture-cp1: 28px;
  --lecture-cp2: 25px;
  --lecture-cp3: 23px;
  --lecture-ce1: 22px;
  --lecture-ce2: 20px;

  /* ── Traits, rayons, espaces, relief ── */
  --trait: 2.5px;
  --trait-plateau: 3px;
  --rayon-s: 8px;
  --rayon-m: 14px;
  --rayon-l: 18px;
  --rayon-xl: 24px;
  --rayon-rond: 999px;
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 20px;
  --espace-6: 24px;
  /* Pas d'ombre floue : le relief est une « lèvre » pleine sous l'élément. */
  --levre-s: 0 3px 0 var(--couleur-trait);
  --levre-m: 0 4px 0 var(--couleur-trait);
  --levre-l: 0 5px 0 var(--couleur-trait);
  --levre-selection: 0 4px 0 var(--couleur-selection);
  --cible-tactile: 52px;
}