/* ============================================================
   SPACING & LAYOUT — Cherry Noir
   4px base grid. Editorial layouts breathe — section rhythm is
   large (space-9 / space-10) with tight component internals.
   ============================================================ */

:root {
  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96  — section padding */
  --space-10: 8rem;      /* 128 — major section rhythm */
  --space-11: 11rem;     /* 176 — hero breathing room */

  /* Containers */
  --container-max:    1280px;   /* full editorial width */
  --container-wide:   1120px;
  --container-narrow: 760px;    /* reading measure */
  --container-text:   640px;    /* prose measure */

  /* Gutters */
  --gutter-page:  clamp(1.5rem, 5vw, 5rem);  /* @kind spacing */
  --gutter-grid:  2rem;                      /* @kind spacing */

  /* Fixed chrome */
  --nav-height:   76px;
  --z-nav:        100;   /* @kind other */
  --z-dropdown:   200;   /* @kind other */
  --z-overlay:    900;   /* @kind other */
  --z-modal:      1000;  /* @kind other */
  --z-toast:      1100;  /* @kind other */
}