/* =========================================================
   spacing.css
   Purpose: vertical rhythm & layout spacing
   Philosophy:
   - Descriptive over short
   - Composition > Flow > Overrides
   - No colors, no typography, no components
   ========================================================= */


/* =========================================================
   1) Spacing tokens (single source of truth)
   ========================================================= */
:root {
  --space-none: 0;

  /* Ultra-spacious scale (visual / editorial layouts) */
  --space-2xs: clamp(0.75rem,  1vw,   1.25rem);   /* ~12–20px */
  --space-xs:  clamp(1.25rem,  1.8vw, 2.25rem);   /* ~20–36px */
  --space-sm:  clamp(2rem,     3vw,   3.75rem);   /* ~32–60px */
  --space-md:  clamp(3.5rem,   5vw,   6.5rem);    /* ~56–104px */
  --space-lg:  clamp(5.5rem,   8vw,   10rem);     /* ~88–160px */
  --space-xl:  clamp(8rem,     12vw,  15rem);     /* ~128–240px */
  --space-2xl: clamp(12rem,    18vw,  22rem);     /* ~192–352px */

  /* Section rhythm */
  --section-spacing-default: clamp(6rem, 10vw, 14rem);
  --section-spacing-compact: clamp(4rem, 8vw, 10rem);
  --section-spacing-spacious: clamp(9rem, 16vw, 20rem);

  /* Default flow spacing */
  --flow-spacing: var(--space-md);
}

/* =========================================================
   2) Section spacing (macro composition)
   ========================================================= */
.section {
  padding-block: var(--section-spacing-default);
}

.section--compact {
  padding-block: var(--section-spacing-compact);
}

.section--spacious {
  padding-block: var(--section-spacing-spacious);
}

/* Prevent accidental double section spacing */
.section .section {
  padding-block: 0;
}


/* =========================================================
   3) Content flow / stack spacing
   Purpose: vertical spacing between children
   ========================================================= */
.stack > * + * {
  margin-top: var(--flow-spacing);
}

/* Flow density modifiers */
.stack--dense {
  --flow-spacing: var(--space-sm);
}

.stack--comfortable {
  --flow-spacing: var(--space-md);
}

.stack--airy {
  --flow-spacing: var(--space-lg);
}


/* =========================================================
   4) Explicit margin utilities (overrides)
   ========================================================= */

/* Margin top */
.space-top-none { margin-top: var(--space-none) !important; }
.space-top-2xs  { margin-top: var(--space-2xs) !important; }
.space-top-xs   { margin-top: var(--space-xs) !important; }
.space-top-sm   { margin-top: var(--space-sm) !important; }
.space-top-md   { margin-top: var(--space-md) !important; }
.space-top-lg   { margin-top: var(--space-lg) !important; }
.space-top-xl   { margin-top: var(--space-xl) !important; }
.space-top-2xl  { margin-top: var(--space-2xl) !important; }

/* Margin bottom */
.space-bottom-none { margin-bottom: var(--space-none) !important; }
.space-bottom-2xs  { margin-bottom: var(--space-2xs) !important; }
.space-bottom-xs   { margin-bottom: var(--space-xs) !important; }
.space-bottom-sm   { margin-bottom: var(--space-sm) !important; }
.space-bottom-md   { margin-bottom: var(--space-md) !important; }
.space-bottom-lg   { margin-bottom: var(--space-lg) !important; }
.space-bottom-xl   { margin-bottom: var(--space-xl) !important; }
.space-bottom-2xl  { margin-bottom: var(--space-2xl) !important; }

/* Margin block (top + bottom) */
.space-block-none { margin-block: var(--space-none) !important; }
.space-block-xs   { margin-block: var(--space-xs) !important; }
.space-block-sm   { margin-block: var(--space-sm) !important; }
.space-block-md   { margin-block: var(--space-md) !important; }
.space-block-lg   { margin-block: var(--space-lg) !important; }
.space-block-xl   { margin-block: var(--space-xl) !important; }
.space-block-2xl  { margin-block: var(--space-2xl) !important; }


/* =========================================================
   5) Padding utilities (local spacing, not composition)
   ========================================================= */

/* Padding top */
.pad-top-none { padding-top: var(--space-none) !important; }
.pad-top-xs   { padding-top: var(--space-xs) !important; }
.pad-top-sm   { padding-top: var(--space-sm) !important; }
.pad-top-md   { padding-top: var(--space-md) !important; }
.pad-top-lg   { padding-top: var(--space-lg) !important; }
.pad-top-xl   { padding-top: var(--space-xl) !important; }

/* Padding bottom */
.pad-bottom-none { padding-bottom: var(--space-none) !important; }
.pad-bottom-xs   { padding-bottom: var(--space-xs) !important; }
.pad-bottom-sm   { padding-bottom: var(--space-sm) !important; }
.pad-bottom-md   { padding-bottom: var(--space-md) !important; }
.pad-bottom-lg   { padding-bottom: var(--space-lg) !important; }
.pad-bottom-xl   { padding-bottom: var(--space-xl) !important; }

/* Padding block */
.pad-block-none { padding-block: var(--space-none) !important; }
.pad-block-xs   { padding-block: var(--space-xs) !important; }
.pad-block-sm   { padding-block: var(--space-sm) !important; }
.pad-block-md   { padding-block: var(--space-md) !important; }
.pad-block-lg   { padding-block: var(--space-lg) !important; }
.pad-block-xl   { padding-block: var(--space-xl) !important; }


/* =========================================================
   6) Layout gap utilities (flex / grid only)
   ========================================================= */
.layout-gap-none { gap: var(--space-none) !important; }
.layout-gap-xs   { gap: var(--space-xs) !important; }
.layout-gap-sm   { gap: var(--space-sm) !important; }
.layout-gap-md   { gap: var(--space-md) !important; }
.layout-gap-lg   { gap: var(--space-lg) !important; }
.layout-gap-xl   { gap: var(--space-xl) !important; }
.layout-gap-2xl  { gap: var(--space-2xl) !important; }


/* =========================================================
   7) Content trimming helpers (editor hygiene)
   ========================================================= */
.trim-first > :first-child {
  margin-top: 0 !important;
}

.trim-last > :last-child {
  margin-bottom: 0 !important;
}

.trim-both > :first-child {
  margin-top: 0 !important;
}

.trim-both > :last-child {
  margin-bottom: 0 !important;
}