/* ============================================================
   Frame & Field — Spacing, radii & layout tokens
   Generous vertical rhythm; whitespace is the divider.
   ============================================================ */
:root {
  /* --- Spacing scale --- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;
  --space-xxl: 96px;
  --space-section: 128px;  /* between-section vertical rhythm (72px mobile) */
  --space-gutter: 32px;    /* container side padding (20px mobile) */

  /* --- Containers --- */
  --container-max: 1200px;
  --container-tight: 960px;

  /* --- Radii --- */
  --radius-none: 0px;
  --radius-sm: 6px;    /* checkbox */
  --radius-md: 12px;   /* small inline tiles, logo wells */
  --radius-lg: 18px;   /* image card frames, inset stat tiles */
  --radius-xl: 24px;   /* dark plate hero & CTA banner */
  --radius-full: 999px; /* every interactive pill */

  /* --- Borders --- */
  --border-hairline: 1px solid var(--color-hairline);
  --border-ink: 1px solid var(--color-ink);
}

@media (max-width: 720px) {
  :root {
    --space-section: 72px;
    --space-gutter: 20px;
  }
}