/* OctagonSquare spacing + layout — 4px base scale. Use only these steps.
   Generous whitespace; let sections breathe. */
:root {
  --os-space-1: 4px;
  --os-space-2: 8px;
  --os-space-3: 12px;
  --os-space-4: 16px;
  --os-space-5: 24px;
  --os-space-6: 32px;
  --os-space-7: 48px;
  --os-space-8: 64px;
  --os-space-9: 96px;

  /* Section vertical rhythm */
  --os-section-y: 96px;        /* desktop */
  --os-section-y-mobile: 56px; /* mobile */

  /* Layout */
  --os-content-max: 1200px;    /* content max-width, centred on wide screens */
  --os-measure: 68ch;          /* body measure, 60–75 chars */

  /* Radii */
  --os-radius-sm: 8px;         /* buttons, inputs, chips */
  --os-radius-md: 16px;        /* cards, panels */
  --os-radius-lg: 24px;        /* large feature surfaces */
  --os-radius-pill: 999px;     /* pills, avatars */

  /* Semantic aliases */
  --radius-control: var(--os-radius-sm);
  --radius-card: var(--os-radius-md);
}