:root{
  /* Source spacing is a loose 4px-ish scale with real off-grid values
     (9px header gap, 18px description margin) — kept verbatim. */
  --sp-1:2px;
  --sp-2:4px;
  --sp-3:6px;
  --sp-4:8px;
  --sp-5:9px;
  --sp-6:12px;
  --sp-7:14px;
  --sp-8:16px;
  --sp-9:18px;
  --sp-10:20px;
  --sp-11:24px;
  --sp-12:28px;
  --sp-13:32px;
  --sp-14:36px;
  --sp-15:48px;

  /* ── Semantic ──────────────────────────────────────── */
  --gap-inline:6px; /* @kind spacing */          /* icon ↔ label inside a button */
  --gap-cluster:12px; /* @kind spacing */        /* buttons in a row */
  --gap-grid:24px; /* @kind spacing */           /* cards in a grid */
  --pad-card:20px; /* @kind spacing */
  --pad-card-header:16px 20px; /* @kind spacing */
  --pad-btn:8px 16px; /* @kind spacing */
  --pad-page:36px 24px; /* @kind spacing */
  --pad-page-mobile:24px 16px; /* @kind spacing */
  --header-height:58px; /* @kind spacing */
  --container-max:1200px; /* @kind spacing */
  --card-min:320px; /* @kind spacing */
}