/* ============================================================
   Spacing System
   Base unit: 8px — the SAME baseline-grid unit the type system
   uses. Keeping margins & padding on this unit means vertical
   spacing preserves the baseline rhythm across the whole page.

   Naming: tokens are named by their pixel value (--space-16 = 16px),
   so any handy value — like 12 — slots in without renumbering the
   scale. Most steps are multiples of 8; 4 and 12 are deliberate
   sub-grid half-steps for fine adjustments (chips, inline gaps).

   Grid-first, NOT ratio-based: a ×1.25 spacing scale would drift
   off the 8px grid (12.5, 15.6…), and spacing has to stay on it —
   the same reason line-heights are grid-driven, not ratio-driven.

   Expressed in rem (÷16) to match the type system.

   ================================================================
   HOW TO USE — reference these tokens for every margin, padding,
   and gap. Never hard-code a px/rem spacing value elsewhere.
   ================================================================
   ============================================================ */

:root {
  --space-4:   0.25rem;  /* 4px    ½ cell  · fine adjustments   */
  --space-8:   0.5rem;   /* 8px    1 cell  · base unit          */
  --space-12:  0.75rem;  /* 12px   1½ cells · handy in-between  */
  --space-16:  1rem;     /* 16px   2 cells                      */
  --space-24:  1.5rem;   /* 24px   3 cells                      */
  --space-32:  2rem;     /* 32px   4 cells                      */
  --space-48:  3rem;     /* 48px   6 cells                      */
  --space-64:  4rem;     /* 64px   8 cells                      */
  --space-96:  6rem;     /* 96px   12 cells                     */
  --space-128: 8rem;     /* 128px  16 cells                     */

  /* --- Radius — one corner radius, on the 8px unit --------------
     One value for every rounded corner (cards, chips, swatches,
     toggles), keeping shape as consistent as spacing. The lone
     exception is fully-round shapes (avatars), which need a corner
     larger than any box — a percentage, not an 8px-grid value. */
  --radius:       8px;   /* 8px · every rounded corner          */
  --radius-round: 50%;   /* fully round · circular avatars only */
}

/* --- Rhythm — semantic spacing tiers on top of the raw scale ------
   Reference THESE for the gap BETWEEN elements (not raw --space-*).
   The tier says how related two things are; reuse the same few tiers
   everywhere and hierarchy reads consistently.

   Responsive rule: the SMALL tiers encode grouping and never change;
   only the LARGE tiers compress on small screens, where big gaps
   waste scarce vertical space. Every value is a raw --space-* token,
   so both ends stay on the 8px grid (discrete steps, not fluid). */
:root {
  --rhythm-tight:   var(--space-8);    /* within a group: label ↔ value */
  --rhythm-related: var(--space-16);   /* heading ↔ its own body        */
  --rhythm-block:   var(--space-32);   /* block ↔ sibling block         */
  --rhythm-loose:   var(--space-48);   /* loosely-related blocks: > block, < section */
  --rhythm-section: var(--space-96);   /* major section ↔ section       */
}
@media (max-width: 640px) {
  :root {
    --rhythm-block:   var(--space-24);   /* 32 → 24 */
    --rhythm-loose:   var(--space-32);   /* 48 → 32 */
    --rhythm-section: var(--space-48);   /* 96 → 48 */
  }
}

/* Flow — stack children with one rhythm token between them (the "owl"
   pattern). Default is the block tier; set --flow on the container to
   change the gap for that context, e.g. style="--flow: var(--rhythm-related)". */
.flow > * + * { margin-block-start: var(--flow, var(--rhythm-block)); }