/* ═══════════════════════════════════════════════════════════════════════════
   DEVINE LE PARTI — DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────
   Variables canoniques du design system. Tout le reste du système consomme
   ces tokens. Si tu veux changer une couleur, une intensité de rotation, ou
   l'offset de shadow → c'est ici, nulle part ailleurs.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── PALETTE PRINCIPALE — couleurs néo-brut douces
       Extensible : ajoute des nuances dans la même DNA (saturation modérée,
       jamais fluo, support sur ink). Sert pour blocs, boutons, stat cards,
       et — surtout — l'assignation aux mouvements/groupes politiques où il
       faut beaucoup de couleurs distinctes. */
  /* --paper, --ink, --yellow, --red, --blue, --green, --orange : définis dans
     tokens.css (chargé APRÈS, via @import de style.css → il gagne la cascade).
     Ne PLUS les redéclarer ici : ces valeurs V3 ne s'appliquaient jamais (conflit
     silencieux). Source de vérité unique = tokens.css. (Dédup audit 2026-06-05.) */
  --purple:  #B8A9FA;
  /* Set v2 — extension pour mouvements politiques + sous-groupes */
  --teal:    #5BCABA;   /* turquoise pastel — distinct du blue et du green */
  --amber:   #E8B547;   /* jaune ambré — distinct du yellow */
  --coral:   #FF8C7A;   /* corail — entre red et orange */
  --indigo:  #7B86E0;   /* indigo — entre blue et purple */
  --olive:   #9CB872;   /* vert olive — distinct du green */
  --wine:    #C8506E;   /* bordeaux — rouge profond */
  --slate:   #6E8A9C;   /* bleu-gris — neutre froid */
  --plum:    #A06EB8;   /* prune — distinct du purple */

  /* ─── PALETTE CARTES — pastels TRÈS CLAIRS, proches du paper ──────────
       Utilisés UNIQUEMENT comme fond de carte (le rôle dicte la couleur).
       Volontairement très désaturés pour que les photos ressortent et que
       l'identité néo-brut reste portée par le ring noir + le shadow.
       Étendable comme la palette principale. */
  --card-beige:    #F2E6C5;  /* député — crème jaune */
  --card-lavender: #DFD3F2;  /* sénateur — mauve doux */
  --card-peach:    #F2D8B8;  /* maire — pêche */
  --card-sky:      #C9DEF2;  /* eurodéputé — bleu poudre */
  --card-rose:     #F0CACA;  /* ministre — rose pâle */
  --card-mint:     #C9E3CB;  /* président — vert d'eau */
  /* Couleurs spéciales rares */
  --card-gold:     #F5DC8A;  /* shiny — jaune doré pâle */
  --card-holo-bg:  #ECE0F5;  /* holo — base lavandée pour le barbershop */

  /* Dérivés pour états ponctuels. --paper-2 vient de tokens.css (source unique). */
  --grid-blue: rgba(116, 185, 255, 0.35);  /* couleur du quadrillage */

  /* ─── ARC-EN-CIEL — barbershop pole holo + indicateurs multi-couleurs ── */
  --hue-1: #FF5D8F;  /* rose */
  --hue-2: #FF9A3C;  /* orange */
  --hue-3: #FFD23F;  /* jaune */
  --hue-4: #2DA567;  /* vert */
  --hue-5: #5CC8F0;  /* bleu */
  --hue-6: #8B3FCF;  /* violet */

  /* ─── TYPOGRAPHIE ───────────────────────────────────────────────────────
     --font-display ('Archivo Black') et --font-body ('Space Grotesk') viennent
     de tokens.css (source unique, gagne la cascade). Syne N'est PAS piloté par
     une variable : il est appliqué en direct (font-family:'Syne') sur le titre de
     page (chrome-v3.css) et les chiffres statcards/rangs (achievements-v3.css,
     collection-v3.css). --font-heading reste ici, propre au V3 (game-v3.css). */
  --font-heading: 'Archivo Black', sans-serif; /* labels Stat Card, headings game-v3 */

  /* ─── BLOC PRIMITIVE : règles ─────────────────────────────────────── */
  /* 4px = MÊME épaisseur que --bw-thick (stat-cards, post-its, cartes, hémicycle).
     Tous les consommateurs de var(--stroke) — CTA « Nouvelle partie », bouton
     « Modes », blocs de la navbar, encart reveal, modale Options — héritent donc
     du même contour 4px → cohérence totale des contours (retour user). */
  --stroke-w: 4px;
  --stroke: var(--stroke-w) solid var(--ink);
  --pad: 12px;             /* padding intérieur par défaut */
  --pad-tight: 8px;        /* pour pills compactes */
  --pad-loose: 20px;       /* pour blocs hero */

  /* Shadow : offset 7×7, croissant au hover, écrasé au press */
  --sh-off: 7px;
  --sh:        var(--sh-off) var(--sh-off) 0 var(--ink);
  --sh-hover:  10px 10px 0 var(--ink);
  --sh-press:  0 0 0 var(--ink);

  /* ─── ROTATIONS — Intensité 7/10 (≈ 2–3°) ───────────────────────────── */
  --rot-1: -2.2deg;
  --rot-2:  1.8deg;
  --rot-3: -1.5deg;
  --rot-4:  2.5deg;
  --rot-5: -2.8deg;
  --rot-6:  1.2deg;

  /* ─── EASING + DURÉES ─────────────────────────────────────────────────────
     --ease-out / --dur-fast / --dur-base / --dur-slow viennent de tokens.css
     (source unique, gagne la cascade). On ne garde ici que --ease-press (V3). */
  --ease-press: cubic-bezier(0.7, 0, 0.85, 0.4);

  /* ─── Z-AXIS — hiérarchie de superposition ──────────────────────────── */
  /* Plus le chiffre est haut, plus l'élément est au-dessus dans la pile. */
  --z-bg:        0;   /* quadrillage de fond */
  --z-base:     10;   /* cadre / hémicycle / éléments structurels */
  --z-card:     20;   /* cartes député */
  --z-stat:     30;   /* stat cards */
  --z-postit:   40;   /* stickers / post-its (indice, vies, daily) */
  --z-title:    50;   /* titre de page */
  --z-overlay: 100;   /* reveal, game over, modals */
  --z-toast:   200;   /* toasts succès */

  /* ─── BACKGROUND GRID ───────────────────────────────────────────────────
     V3 R3 #8 : retour à la taille d'origine (32px) — seule la vitesse devait
     changer. Défilement rapide conservé. */
  --grid-size: 32px;
  --grid-speed: 5s;   /* défilement net vers le haut-gauche */
}