/* ── spacing, grid, breakpoints ─────────────────────────────────────────────
   4px base. Steps are non-linear above 32px because the system uses very large
   vertical gaps between sections and very small ones inside blocks; the middle
   of the scale is deliberately thin so nobody reaches for 40px.               */
:root {
  --sp-0: 0; /* @kind spacing */
  --sp-05: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* grid */
  --grid-cols: 12; /* @kind other */
  --grid-gutter: 24px;
  --content-max: 1280px;
  --page-margin: 32px;

  /* section rhythm */
  --section-gap: var(--sp-10);   /* between top-level sections */
  --block-gap: var(--sp-7);      /* between blocks in a section */
  --stack-gap: var(--sp-4);      /* between elements in a block */

  /* breakpoints, as tokens for documentation; media queries repeat the values */
  --bp-sm: 600px; /* @kind other */   /* single column, 16px margins   */
  --bp-md: 900px; /* @kind other */   /* 8 columns, 24px margins       */
  --bp-lg: 1200px; /* @kind other */  /* 12 columns                    */
  --bp-xl: 1440px; /* @kind other */  /* content caps at 1280          */

  /* shape. square by default — this is a system rule, not a default value */
  --radius: 0;
  --radius-inset: 2px;   /* inputs and status chips only */
  --border-w: 1px;
  --border-w-strong: 2px;
  --rule-accent-w: 3px;  /* accent underscore beneath a heading */
}

@media (max-width: 900px) {
  :root {
    --page-margin: 24px;
    --grid-cols: 8; /* @kind other */
    --section-gap: var(--sp-9);
  }
}
@media (max-width: 600px) {
  :root {
    --page-margin: 16px;
    --grid-cols: 4; /* @kind other */
    --grid-gutter: 16px;
    --section-gap: var(--sp-8);
    --block-gap: var(--sp-6);
  }
}