/* ═══════════════════════════════════════════════════════════════
   TOKENS — variables de design (source unique de vérité)
   ───────────────────────────────────────────────────────────────
   Change une valeur ici → répercutée sur TOUTE la page.
   Les couleurs sont définies en triplets RGB : on peut donc
   composer n'importe quelle transparence via rgba(var(--rgb), a).
   ═══════════════════════════════════════════════════════════════ */
:root {

  /* ── Couleurs de base (triplets RGB modifiables) ── */
  --ink-rgb:    1, 62, 55;      /* vert profond   #013E37 */
  --cream-rgb:  254, 248, 212;  /* crème          #FEF8D4 */
  --accent-rgb: 255, 91, 77;    /* rouge « REC »  #FF5B4D */

  /* ── Couleurs prêtes à l'emploi ── */
  --ink:    rgb(var(--ink-rgb));
  --cream:  rgb(var(--cream-rgb));
  --accent: rgb(var(--accent-rgb));

  /* Fonds / textes sémantiques */
  --bg:        var(--cream);
  --fg:        var(--ink);
  --bg-invert: var(--ink);
  --fg-invert: var(--cream);

  /* Variantes d'encre translucide (les plus répétées) */
  --ink-06: rgba(var(--ink-rgb), .06);
  --ink-07: rgba(var(--ink-rgb), .07);
  --ink-08: rgba(var(--ink-rgb), .08);
  --ink-10: rgba(var(--ink-rgb), .10);
  --ink-12: rgba(var(--ink-rgb), .12);
  --ink-14: rgba(var(--ink-rgb), .14);
  --ink-18: rgba(var(--ink-rgb), .18);
  --ink-20: rgba(var(--ink-rgb), .20);
  --ink-22: rgba(var(--ink-rgb), .22);
  --ink-25: rgba(var(--ink-rgb), .25);
  --ink-28: rgba(var(--ink-rgb), .28);
  --ink-30: rgba(var(--ink-rgb), .30);
  --ink-32: rgba(var(--ink-rgb), .32);
  --ink-35: rgba(var(--ink-rgb), .35);
  --ink-40: rgba(var(--ink-rgb), .40);
  --ink-45: rgba(var(--ink-rgb), .45);

  /* Variantes de crème translucide */
  --cream-08: rgba(var(--cream-rgb), .08);
  --cream-09: rgba(var(--cream-rgb), .09);
  --cream-12: rgba(var(--cream-rgb), .12);
  --cream-14: rgba(var(--cream-rgb), .14);
  --cream-18: rgba(var(--cream-rgb), .18);
  --cream-25: rgba(var(--cream-rgb), .25);
  --cream-30: rgba(var(--cream-rgb), .30);
  --cream-35: rgba(var(--cream-rgb), .35);
  --cream-40: rgba(var(--cream-rgb), .40);
  --cream-50: rgba(var(--cream-rgb), .50);
  --cream-55: rgba(var(--cream-rgb), .55);

  /* ── Typographie ── */
  --font-display: 'Fredoka', sans-serif;   /* titres arcade (arrondi, via Google Fonts) */
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Épaisseurs de trait / rayons ── */
  --bw:      2px;      /* trait standard */
  --bw-card: 2.5px;    /* cartes */
  --bw-modal: 3px;     /* modale */

  --border:       var(--bw) solid var(--ink);
  --border-card:  var(--bw-card) solid var(--ink);
  --border-modal: var(--bw-modal) solid var(--ink);

  /* ── Ombres dures (offset, sans flou = peu coûteuses) ── */
  --sh-card:        6px 6px 0 var(--ink-20);
  --sh-card-hover:  10px 12px 0 var(--ink-32);
  --sh-log:         8px 8px 0 var(--ink-18);
  --sh-log-hover:   11px 11px 0 var(--ink-28);
  --sh-mail-hover:  12px 12px 0 var(--ink-35);

  /* ── Grille de fond ── */
  --tile: 56px;

  /* ── Empilement (z-index) ── */
  --z-lvl:    290;
  --z-hud:    300;
  --z-drawer: 450;
  --z-modal:  460;
  --z-wgl:    470;

  /* ── Transitions ── */
  --t-fast:  .15s;
  --t-med:   .18s;
  --t-slow:  .22s;
  --ease:    cubic-bezier(.2, .8, .2, 1);

  /* ── Rythme vertical des sections ── */
  --pad-x: 5vw;
}