/* ==========================================================================
   SPACING + LAYOUT METRICS
   4px base rhythm. Generous section gaps — the reference breathes (mt-20 → mt-36).
   ========================================================================== */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  .25rem;   /*  4px */
  --space-2:  .5rem;    /*  8px */
  --space-3:  .75rem;   /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-28: 7rem;     /* 112px */
  --space-32: 8rem;     /* 128px */
  --space-36: 9rem;     /* 144px */
  --space-44: 11rem;    /* 176px */

  /* ---- Section rhythm (vertical spacing between page sections) ---- */
  --section-gap:    var(--space-20);  /* mobile */
  --section-gap-lg: var(--space-28);  /* desktop */

  /* ---- Container + grid ---- */
  --container-max:  80rem;   /* 1280px outer bound */
  --container-prose: 42rem;  /* ~672px reading measure (max-w-2xl) */
  --container-narrow: 36rem; /* 576px (max-w-xl) */
  --container-pad:  1.5rem;  /* gutter, mobile */
  --container-pad-lg: 2rem;  /* gutter, desktop */
  --grid-cols: 12;           /* @kind other */
  --grid-gutter: 1rem;       /* gap-x-1 … up to gap-4; 1rem is the workhorse */

  /* ---- Control sizing ---- */
  --control-h-sm: 2.25rem;   /* 36px */
  --control-h:    3rem;      /* 48px — default button / input height */
  --control-h-lg: 3.5rem;    /* 56px */
  --tap-min: 2.75rem;        /* 44px minimum hit target */
}