/* ═══════════════════════════════════════════════════════════════════════════
   Design Tokens — Layout
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Container ──────────────────────────────────────────────────────── */

  --container-max: 75rem;         /* 1200px */
  --container-narrow: 60rem;      /* 960px */
  --container-wide: 90rem;        /* 1440px */
  --container-edge: var(--space-lg);  /* Edge padding */

  /* ── Reading Width ──────────────────────────────────────────────────── */

  --reading-width: 40rem;         /* 640px */

  /* ── Grid ───────────────────────────────────────────────────────────── */

  --grid-columns: 12;
  --grid-gap: var(--space-xl);

  /* ── Breakpoints ────────────────────────────────────────────────────── */

  /* (Documented reference — actual media queries write the values) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;
}