/* ==========================================================================
   UTILITIES
   Loaded after styles.css so a utility wins its ties. Every rule here is
   referenced by a template and anything that stops being comes out, with one
   exception: the spacing ladder below is complete on purpose.
   ========================================================================== */

/* ==========================================================================
   SPACING
   Vertical rhythm normally comes from .stack; these are the one-offs that
   break it. Complete by design rather than by demand: a ladder with rungs
   missing sends the next template to edit a component rule instead.
   The number is the pixel value, as --space-* already is.
   ========================================================================== */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-48 { margin-top: var(--space-48); }
.mt-64 { margin-top: var(--space-64); }
.mt-96 { margin-top: var(--space-96); }

.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: var(--space-8); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-48 { margin-bottom: var(--space-48); }

/* The same ladder for a flex or grid container's own rhythm. */
.gap-4  { gap: var(--space-4); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }
.gap-48 { gap: var(--space-48); }
.gap-64 { gap: var(--space-64); }

.py-16 { padding-block: var(--space-16); }
.py-24 { padding-block: var(--space-24); }
.py-32 { padding-block: var(--space-32); }
.py-48 { padding-block: var(--space-48); }
.py-64 { padding-block: var(--space-64); }
.py-96 { padding-block: var(--space-96); }