/* ============================================================================
   cab-fondations — les grandeurs, avant les pièces.

   Les feuilles de thème donnaient les couleurs et les familles de police, mais
   ni échelle typographique, ni échelle d'espacement, ni traitement d'image.
   Chaque composant posait donc ses propres 13px, ses propres 14px, ses propres
   marges : la bibliothèque était cohérente par accident, jamais par contrat.

   Ce fichier ne dessine rien. Il déclare les grandeurs, et les nomme.

   ============================================================================
   TYPOGRAPHIE

   Trois familles, trois rôles, jamais interchangeables :
     --cab-font-display   les titres et les chiffres qui portent une conclusion
     --cab-font-sans      tout le texte de lecture
     --cab-font-mono      ce qui s'aligne en colonnes, et rien d'autre

   Le chiffre unique d'une carte va en police de TITRE, pas en chasse fixe : le
   mono sert à aligner une colonne de nombres, pas à faire « technique ».

   L'ÉCHELLE suit un rapport d'environ 1,2, resserré dans les petites tailles où
   l'œil distingue mal deux pas voisins. Elle s'arrête à 34px : au-delà, on est
   dans une page de communication, pas dans un outil.

   L'APPROCHE dépend de la taille, et c'est contre-intuitif : plus le corps est
   grand, plus les lettres paraissent écartées, donc plus il faut resserrer. En
   petit c'est l'inverse. Une valeur unique d'approche est fausse quelque part.

   L'INTERLIGNAGE varie en sens inverse du corps : serré sur un titre, ample sur
   du texte courant.
   ============================================================================ */

:where(:root),
:where([data-cab-theme]) {
  /* corps */
  --cab-t-micro:    10px;   /* étiquette en capitales, compteur */
  --cab-t-mini:     11px;   /* légende, note de pied */
  --cab-t-petit:  12.5px;   /* texte dense d'un tableau */
  --cab-t-base:     15px;   /* lecture courante */
  --cab-t-moyen:    19px;   /* titre de bloc */
  --cab-t-grand:    25px;   /* titre de page */
  --cab-t-fort:     34px;   /* le chiffre qui porte la conclusion */

  /* interlignage, en sens inverse du corps */
  --cab-i-serre:   1.15;
  --cab-i-titre:   1.25;
  --cab-i-base:    1.55;
  --cab-i-ample:   1.65;

  /* approche, spécifique à la taille */
  --cab-a-fort:  -.035em;
  --cab-a-grand: -.025em;
  --cab-a-moyen:  -.02em;
  --cab-a-base:      0em;
  --cab-a-petit:   .01em;
  --cab-a-etiq:     .1em;   /* capitales : sans approche, elles se collent */

  /* graisses : trois, et pas une de plus. 400 lit, 500 distingue, 600 affirme. */
  --cab-g-normal:   400;
  --cab-g-demi:     500;
  --cab-g-gras:     600;

  /* ==========================================================================
     ESPACEMENT — une échelle de 4px, parce que toutes les hauteurs de contrôle
     en sont des multiples. Nommée par usage et non par taille : « --cab-e-3 »
     n'apprend rien, « l'écart entre deux champs d'un même groupe » si.
     ========================================================================== */
  --cab-e-cheveu:    2px;   /* entre un libellé et sa valeur */
  --cab-e-serre:     4px;
  --cab-e-court:     8px;   /* entre deux boutons d'une même barre */
  --cab-e-normal:   12px;   /* entre deux champs d'un même groupe */
  --cab-e-bloc:     20px;   /* entre deux groupes */
  --cab-e-section:  32px;   /* entre deux sections d'une page */
  --cab-e-chapitre: 52px;

  /* ==========================================================================
     CONTRÔLES — trois hauteurs, alignées sur cab-bouton. 44px est la cible
     tactile d'Apple : on ne l'atteint pas avec la hauteur, on l'atteint avec la
     zone cliquable, qui peut déborder du dessin.
     ========================================================================== */
  --cab-h-compact:  26px;
  --cab-h-normal:   32px;
  --cab-h-large:    40px;
  --cab-h-tactile:  44px;   /* zone de toucher minimale, pas hauteur visible */

  /* ==========================================================================
     IMAGES — trois rapports, et un seul mode de cadrage.

     `cover` recadre et remplit : c'est ce qu'on veut pour une vignette, jamais
     pour un plan ou un schéma, où l'on couperait précisément l'information.
     Une pièce de dossier se montre en `contain`, quitte à laisser du vide.
     ========================================================================== */
  --cab-r-carre:      1;
  --cab-r-photo:  4 / 3;
  --cab-r-large:  16 / 9;
  --cab-r-plan:  297 / 210;   /* A4 paysage, le format d'un plan d'exécution */
}

/* --- rôles typographiques, prêts à poser -------------------------------- */

.cab-t-fort {
  font-family: var(--cab-font-display, inherit); font-size: var(--cab-t-fort);
  font-weight: var(--cab-g-gras); line-height: var(--cab-i-serre);
  letter-spacing: var(--cab-a-fort); font-variant-numeric: tabular-nums;
}
.cab-t-grand {
  font-family: var(--cab-font-display, inherit); font-size: var(--cab-t-grand);
  font-weight: var(--cab-g-gras); line-height: var(--cab-i-titre);
  letter-spacing: var(--cab-a-grand); text-wrap: balance;
}
.cab-t-moyen {
  font-family: var(--cab-font-display, inherit); font-size: var(--cab-t-moyen);
  font-weight: var(--cab-g-gras); line-height: var(--cab-i-titre);
  letter-spacing: var(--cab-a-moyen); text-wrap: balance;
}
.cab-t-base {
  font-size: var(--cab-t-base); font-weight: var(--cab-g-normal);
  line-height: var(--cab-i-base);
}
/* La mesure : au-delà d'environ 70 caractères, l'œil rate le retour à la ligne
   suivante. C'est la seule contrainte de largeur qui vaille pour du texte. */
.cab-t-base[data-lecture] { max-width: 68ch; }
.cab-t-petit { font-size: var(--cab-t-petit); line-height: var(--cab-i-base); }
.cab-t-mini  { font-size: var(--cab-t-mini);  line-height: var(--cab-i-base); color: var(--cab-ink-3, #8A95A0); }
.cab-t-etiq {
  font-family: var(--cab-font-mono, monospace); font-size: var(--cab-t-micro);
  font-weight: var(--cab-g-demi); letter-spacing: var(--cab-a-etiq);
  text-transform: uppercase; color: var(--cab-ink-3, #8A95A0);
}
/* Les chiffres d'une colonne s'alignent au caractère, sinon l'œil ne peut pas
   comparer deux montants sans les lire. */
.cab-t-nombre {
  font-family: var(--cab-font-mono, monospace); font-variant-numeric: tabular-nums;
  font-size: var(--cab-t-petit);
}

/* --- images -------------------------------------------------------------- */

.cab-image {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--cab-r-photo); object-fit: cover;
  background: var(--cab-band, #F7F8F9);
  border-radius: var(--cab-radius-sm, 8px);
}
.cab-image[data-rapport="carre"] { aspect-ratio: var(--cab-r-carre); }
.cab-image[data-rapport="large"] { aspect-ratio: var(--cab-r-large); }
.cab-image[data-rapport="plan"]  { aspect-ratio: var(--cab-r-plan); }
/* Une pièce de dossier ne se recadre jamais : on couperait l'information même
   qu'on veut montrer. Elle tient dans son cadre, et le vide est assumé. */
.cab-image[data-cadrage="entier"] { object-fit: contain; }

.cab-figure { margin: 0; }
.cab-figure figcaption {
  margin-top: var(--cab-e-court);
  font-size: var(--cab-t-mini); line-height: var(--cab-i-base);
  color: var(--cab-ink-3, #8A95A0);
}
/* La référence de la pièce compte autant que la légende : c'est elle qui permet
   de la retrouver au dossier. */
.cab-figure figcaption b {
  display: block; font-family: var(--cab-font-mono, monospace);
  font-size: var(--cab-t-micro); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cab-ink-2, #4D5B68); font-weight: var(--cab-g-demi);
}