/* ── LAYOUT & SPACING SYSTEM ───────────────────────────
   Single source of truth for container widths, side padding,
   and spacing scale. Load AFTER style.css so these rules win.
   ───────────────────────────────────────────────────── */

:root {
  /* Spacing scale */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   12px;
  --sp-lg:   16px;
  --sp-xl:   24px;
  --sp-2xl:  32px;
  --sp-3xl:  48px;
  --sp-4xl:  72px;

  /* Container side padding — desktop default.
     Overridden at breakpoints below.
     All .container rules derive from this. */
  --container-px:       24px;
  --container-px-narrow: 24px;

  /* Max widths */
  --container-max:        1100px;
  --container-max-narrow:  720px;

  /* Canonical breakpoints (for reference in JS/documentation):
       --bp-mobile:  600px
       --bp-tablet:  768px
       --bp-desktop: 1024px
     Use these 3 in new CSS. Existing component-level breakpoints
     (400, 500, 540, 700, 900, 960…) are legacy — do not add new ones. */
  --bp-mobile:  600px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
}

/* ── CANONICAL CONTAINER RULES ────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left:  var(--container-px);
  padding-right: var(--container-px);
}
.container--narrow {
  max-width: var(--container-max-narrow);
  margin: 0 auto;
  padding-left:  var(--container-px-narrow);
  padding-right: var(--container-px-narrow);
}

/* Nav inner uses the same side padding as containers */
.nav__inner {
  padding-left:  var(--container-px);
  padding-right: var(--container-px);
}

/* ── RESPONSIVE CONTAINER PADDING ─────────────────────── */

/* Tablet: tighten the gutters slightly */
@media (max-width: 768px) {
  :root {
    --container-px:        16px;
    --container-px-narrow: 16px;
  }
}

/* Mobile: minimal gutters to maximise content width */
@media (max-width: 600px) {
  :root {
    --container-px:        12px;
    --container-px-narrow: 12px;
  }
}