/* ============================================================
   HOUSE OF CHICORY — SPACING & LAYOUT
   ------------------------------------------------------------
   Base unit = 4px. Whitespace philosophy: generous, editorial,
   "luxury through restraint." Sections breathe; one idea per
   band of space. Never crowd — air is a premium signal.
   ============================================================ */

:root {
  /* ---- 4px spacing scale ---- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4  */
  --space-2:   0.5rem;    /* 8  */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 */
  --space-40:  10rem;     /* 160 */
  --space-48:  12rem;     /* 192 */

  /* ---- Semantic spacing roles ---- */
  --pad-control:    var(--space-3) var(--space-5);  /* buttons / inputs */
  --pad-card:       var(--space-8);
  --pad-card-lg:    var(--space-12);
  --gap-stack-sm:   var(--space-3);
  --gap-stack:      var(--space-6);
  --gap-grid:       var(--space-8);

  /* ---- Section rhythm (vertical) ---- */
  --section-y:      var(--space-32);   /* desktop section padding */
  --section-y-lg:   var(--space-40);
  --section-y-sm:   var(--space-20);   /* mobile */

  /* ---- Containers / grid ---- */
  --container-xs:   40rem;    /* 640  — prose / forms */
  --container-sm:   60rem;    /* 960  */
  --container-md:   75rem;    /* 1200 — default content */
  --container-lg:   85.5rem;  /* 1368 — wide / hero */
  --container-xl:   96rem;    /* 1536 — full editorial */

  --gutter:         var(--space-6);   /* between columns (desktop) */
  --gutter-mobile:  var(--space-4);
  --margin-page:    var(--space-10);  /* page edge → content (desktop) */
  --margin-page-mobile: var(--space-5);

  --grid-columns:   12; /* @kind other */

  /* ---- Layout primitives ---- */
  --maxw-prose: 68ch;        /* optimal reading measure */
  --header-h:   76px;        /* sticky nav height */
}

/* Breakpoints (reference — used in product code, not tokens):
   Mobile   : 0    – 639
   Tablet   : 640  – 1023   → 8-col grid, 24px gutters
   Laptop   : 1024 – 1439   → 12-col grid
   Desktop  : 1440+         → 12-col grid, max 1200–1368 content
*/