/* =============================================================
   Peak Body Coach · Spacing & Layout System · tokens-spacing.css
   Locked. Merge with tokens-colours.css and tokens-type.css.
   ============================================================= */

:root {

  /* ---------- 1. Spacing scale ---------- */
  /* 4pt base, 8pt-aligned dominant rhythm.
     Use scale tokens directly. Do not invent values. */

  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;
  --space-13: 128px;
  --space-14: 160px;


  /* ---------- 2. Layout widths ---------- */

  --measure-read:     680px;   /* Long-form body copy */
  --measure-content: 1200px;   /* Hero, marketing, dashboards */


  /* ---------- 3. Grid ---------- */

  --grid-cols:    12;
  --grid-gutter:  var(--space-6);   /* 24 */


  /* ---------- 4. Breakpoints ---------- */
  /* Reference values. Use directly in @media queries. */

  --bp-sm:  640px;    /* tablet up   */
  --bp-md: 1024px;    /* laptop up   */
  --bp-lg: 1440px;    /* desktop up  */


  /* ---------- 5. Edge gutters ---------- */

  --gutter-edge-mobile:  var(--space-6);   /* 24 */
  --gutter-edge-tablet:  var(--space-8);   /* 40 */
  /* Desktop: auto-centred within --measure-content cap */


  /* ---------- 6. Vertical type rhythm ---------- */
  /* Eyebrow → H1 → Subhead → Body → Meta.
     Arc: tight lockup at the top, opens through the reading
     content, closes back down at the foot. */

  --rhythm-eyebrow-h1:    var(--space-3);   /* 12 */
  --rhythm-h1-subhead:    var(--space-7);   /* 32 */
  --rhythm-subhead-body:  var(--space-8);   /* 40 */
  --rhythm-body-meta:     var(--space-7);   /* 32 */
  --rhythm-paragraph:     var(--space-4);   /* 16 — body para spacing */


  /* ---------- 7. Section rhythm ---------- */

  --space-section-mobile:   var(--space-10);   /* 64 */
  --space-section-tablet:   var(--space-11);   /* 80 */
  --space-section-desktop:  var(--space-12);   /* 96 */


  /* ---------- 8. Component padding ---------- */
  /* Pill padding (5/10/4) lives in tokens-colours.css as
     --mark-pill-padding — it belongs to the colour system. */

  --pad-btn:           14px 24px;
  --pad-callout:       20px 24px;       /* paired with 3px side rule */
  --pad-hero-mobile:   var(--space-7);  /* 32 */
  --pad-hero-base:     var(--space-8);  /* 40 */
  --pad-hero-desktop:  var(--space-10); /* 64 */


  /* ---------- 9. Canvas safe areas ---------- */
  /* Percentage-based for fixed-canvas social/content assets.
     Story safe area is pixel-based because IG's UI overlap
     is a fixed pixel size, not a percentage of the canvas. */

  --canvas-safe-square:    6.667%;   /* 1080×1080, 1080×1350 */
  --canvas-safe-featured:  5%;       /* 1200×630 OG / featured */
  --canvas-safe-story:     250px;    /* IG story top/bottom */
}


/* =============================================================
   Layout containers
   ============================================================= */

.container-content {
  width: 100%;
  max-width: var(--measure-content);
  margin: 0 auto;
  padding-left:  var(--gutter-edge-mobile);
  padding-right: var(--gutter-edge-mobile);
}

.container-read {
  width: 100%;
  max-width: var(--measure-read);
  margin: 0 auto;
  padding-left:  var(--gutter-edge-mobile);
  padding-right: var(--gutter-edge-mobile);
}

@media (min-width: 640px) {
  .container-content,
  .container-read {
    padding-left:  var(--gutter-edge-tablet);
    padding-right: var(--gutter-edge-tablet);
  }
}


/* =============================================================
   12-column grid
   ============================================================= */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gutter);
}


/* =============================================================
   Vertical type rhythm
   Apply .rhythm to a parent containing type role classes in the
   canonical order. Adjacent siblings receive the locked gaps.
   ============================================================= */

.rhythm > * { margin-top: 0; margin-bottom: 0; }

/* Eyebrow → headline */
.rhythm > .type-mono-label + .type-hero,
.rhythm > .type-mono-label + .type-h1 {
  margin-top: var(--rhythm-eyebrow-h1);
}

/* Headline → subhead */
.rhythm > .type-hero + .type-subhead,
.rhythm > .type-h1   + .type-subhead {
  margin-top: var(--rhythm-h1-subhead);
}

/* Subhead → body */
.rhythm > .type-subhead + .type-body {
  margin-top: var(--rhythm-subhead-body);
}

/* Body → meta */
.rhythm > .type-body + .type-mono-label {
  margin-top: var(--rhythm-body-meta);
}

/* Body paragraph spacing */
.rhythm > .type-body + .type-body {
  margin-top: var(--rhythm-paragraph);
}


/* =============================================================
   Section rhythm
   ============================================================= */

.section-gap { margin-top: var(--space-section-mobile); }

@media (min-width: 640px) {
  .section-gap { margin-top: var(--space-section-tablet); }
}

@media (min-width: 1024px) {
  .section-gap { margin-top: var(--space-section-desktop); }
}


/* =============================================================
   Component padding utilities
   ============================================================= */

.pad-btn      { padding: var(--pad-btn); }
.pad-callout  { padding: var(--pad-callout); }
.pad-hero     { padding: var(--pad-hero-mobile); }

@media (min-width: 640px) {
  .pad-hero   { padding: var(--pad-hero-base); }
}

@media (min-width: 1024px) {
  .pad-hero   { padding: var(--pad-hero-desktop); }
}


/* =============================================================
   Notes
   =============================================================
   1. 4pt base, 8pt-aligned dominant rhythm. Above 48px the scale
      jumps faster (64, 80, 96, 128, 160) because section-level
      breathing needs noticeably different beats.

   2. Long-form copy uses --measure-read (680). Hero, marketing,
      dashboards, and component-heavy layouts use --measure-content
      (1200). Body copy NEVER uses --measure-content as its width.

   3. The 12-col grid is a safety net, not a cage. Asymmetric and
      full-bleed compositions are valid when deliberate. Breaking
      the grid should be a conscious choice, not a default.

   4. Vertical type rhythm gaps are fixed: 12 / 32 / 40 / 32.
      The rhythm is not negotiable per piece — that's where
      compositional consistency comes from.

   5. Pill padding (5/10/4) and structural mark widths live in
      tokens-colours.css. They pair fill colour with the mark
      itself, so the colour system owns them.

   6. Canvas safe areas apply inside fixed-canvas social/content
      assets. Existing pull-quote and featured-image templates
      need to be retro-fit to these values in a separate pass.

   7. Pair with tokens-colours.css and tokens-type.css. Surface
      and accent decisions live in colours; typographic structure
      lives in type; spatial structure lives here.
*/