/* tokens.css — Design System - SOURCE UNIQUE DE VÉRITÉ VISUELLE
   Ce fichier ne doit contenir QUE des variables (:root).
   Aucun composant ici : le CSS du quiz a été déplacé dans quiz.css.

🧠 Ce que tu dois retenir (simplement)
   - tokens.css contient TOUTES les valeurs (couleurs, tailles, ombres…)
   - Tu veux changer le rouge ? → --c-danger
   - Grossir les titres ? → --fs-26
   - Durcir le style ? → --b-strong / --sh-xl
   👉 Un seul fichier à modifier pour la valeur = zéro dérive

📐 Échelle de breakpoints du site (à utiliser partout, ne pas en inventer d'autres) :
   - 480px  → mobile étroit
   - 600px  → mobile / bascule colonne unique
   - 768px  → tablette / bascule desktop
   - 900px  → petit desktop / grilles 3→1 colonnes
*/

@import "tokens-colors.css";  /*MIAMI VICE — palette globale (pages body.neo)*/


:root{

/* ================= TYPO ================= */
--font-mono:
  ui-monospace,
  SFMono-Regular,
  Menlo,
  Monaco,
  Consolas,
  "Liberation Mono",
  "Courier New",
  monospace;

--font-sans:
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  Helvetica,
  Arial,
  sans-serif;  

/* ================= STYLES width ================= */
  --width-10: 10px;
  --width-20: 20px;
  --width-30: 30px;
  --width-40: 40px;
  --width-50: 50px;
  --width-60: 60px;
  --width-70: 70px;
  --width-80: 80px;

  /* ================= FONT SIZES ================= */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-26: 26px;

  /* ================= FONT WEIGHTS ================= */
  --fw-bold:bold;
  --fww-500:500;
  --fw-lighter:lighter;

  /* ================= BORDURES ================= */
  --b-strong: 4px solid var(--c-black);
  --b-mid:    3px solid var(--c-black);
  --b-light:  2px dotted var(--c-black);

  /* ================= RADIUS ================= */
  --r-0: 0;

  /* ================= WIDTHS ================= */
  --w-auto: auto;

  /* ================= SHADOWS ================= */
  --sh-xl: 12px 12px 0 var(--c-black);
  --sh-l:  10px 10px 0 var(--c-black);
  --sh-m:   8px  8px 0 var(--c-black);
  --sh-s:   6px  6px 0 var(--c-black);
  --sh-xs:  2px  2px 0 var(--c-black);

  /* ================= SPACING ================= */
  --sp-0:   0px;
  --sp-5:   5px;
  --sp-6:   6px;
  --sp-8:   8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-40: 40px;

  /* ================= MARGIN ================= */
  --mg-0: 0px;
  --mg-5: 5px;
  --mg-6: 6px;
  --mg-8: 8px;
  --mg-10: 10px;
  --mg-12: 12px;
  --mg-14: 14px;
  --mg-30: 30px;

  /* ================= POSITION ================= */
  --pos-r: relative;
  --pos-a: absolute;
  --pos-f: fixed;
  --pos-s: static;
  --pos-st: sticky;




  /* rayons arrondis (le style Miami Vice est arrondi, pas brutaliste) */
  --mv-r-s:   10px;
  --mv-r-m:   14px;
  --mv-r-l:   20px;
  --mv-r-pill: 999px;
}