/* ============================================================
   HRmaps Design System — SPACING
   4px base grid. Use these tokens for padding, gap, margins.
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* common semantic gaps */
  --gap-inline:   var(--space-2);   /* icon ↔ label inside a control */
  --gap-control:  var(--space-3);   /* between buttons / form fields */
  --gap-section:  var(--space-6);   /* between cards / blocks */
  --pad-card:     var(--space-5);   /* card inner padding */
  --pad-control:  var(--space-3);   /* button / input vertical padding base */
  --page-gutter:  var(--space-6);   /* page edge padding */
}

/* ---- hauteur des contrôles ---------------------------------------------
   La hauteur standard d'un contrôle interactif — bouton, bouton-icône,
   champ, select, segment. Une valeur, un seul endroit, pour que tout ce qui
   est posé côte à côte s'aligne.

   Mesuré avant l'introduction de ce token, dans le pied d'une seule modale :
   Annuler et Sauvegarder à 40px parce qu'une longue liste de sélecteurs
   legacy de sitecss.css nomme `.btn-secondary` et lui pose `height: 40px` ;
   Valider — la seule action principale — à 33,6px, parce que cette liste ne
   nomme pas `.btn-primary` et que sa hauteur retombait alors sur son padding.
   Personne n'avait décidé ça.

   S'utilise en `min-height`, jamais en `height` : un contrôle doit pouvoir
   grandir si son libellé passe à la ligne. Et le padding doit laisser le
   contenu SOUS la valeur du token, sinon `min-height` ne s'applique jamais et
   la hauteur repart du padding — donc différente pour chaque contrôle.

   VALEURS : celles du design system, `tokens/spacing.css` du projet Claude
   Design (f77d0ea6-5bd0-419b-a17f-440d48dcee21), relu et comparé. Elles
   étaient à 40 / 34 / 46 ici — reprises de la hauteur legacy `height: 40px`
   que sitecss.css impose à `.btn-secondary`, donc de l'existant plutôt que de
   la référence. Tout le portail sortait ainsi 2px plus haut que la maquette :
   mesuré sur une capture de pied à l'échelle, bouton à 38px côté design,
   40px côté portail. Le token est aliasé par `--field-height`, donc les
   champs et les selects suivent. */
:root {
  --control-h:    38px;   /* défaut : partout */
  --control-h-sm: 32px;   /* zone dense : ligne de tableau, chip */
  --control-h-lg: 44px;   /* action unique et engageante */
}