/* ============================================================
   SITM — SPACING & LAYOUT TOKENS
   Grille 4 / 8 px. Sobre, robuste, aéré.
   ============================================================ */
:root {
  /* Spacing scale (4/8 base) */
  --sp-0:   0;      /* @kind spacing */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* Section rhythm */
  --section-y:      var(--sp-24);   /* padding vertical section desktop */
  --section-y-m:    var(--sp-16);   /* mobile */
  --block-gap:      var(--sp-8);

  /* Containers */
  --container-max:  1200px;         /* largeur utile max */
  --container-wide: 1360px;
  --form-max:       560px;          /* largeur formulaire lisible */
  --measure:        68ch;           /* largeur de lecture confort */

  /* Gutters */
  --gutter-desktop: var(--sp-8);    /* 32 */
  --gutter-tablet:  var(--sp-6);    /* 24 */
  --gutter-mobile:  var(--sp-5);    /* 20 */

  /* Grid */
  --grid-cols-desktop: 12;  /* @kind other */
  --grid-cols-tablet:  8;   /* @kind other */
  --grid-cols-mobile:  4;   /* @kind other */
}