/* Spacing, radii and layout. Base step is 4px so the conventional scale keeps its
 * meaning; the USAGE RULE (inherited from the source repo) is an 8px grid — use
 * even steps only. Documented exception: control height 44px, the WCAG 2.2 (2.5.8)
 * minimum touch target, which German accessibility law (BFSG) makes non-optional. */
:root {
  --space-1: 0.25rem;   /* 4  — icon nudges only */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 — odd step, inline gaps */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 — card padding */
  --space-8: 2rem;      /* 32 — block gap */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 — section gap */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 — marketing section */
  --space-28: 7rem;     /* 112 — hero */

  --control-height-sm: 36px;
  --control-height: 44px;  /* WCAG 2.2 minimum — do not shrink */
  --control-height-lg: 52px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;   /* controls, inputs, badges-on-cards */
  --radius-lg: 20px;   /* cards */
  --radius-xl: 28px;   /* panels, hero media */
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 1.5px;

  --container-prose: 68ch;
  --container-app: 1200px;
  --container-site: 100%;
  --sidebar-width: 264px;
  --header-height: 92px;

  /* Breakpoints from the source repo (tokens.css): 320 base, no `sm` tier. */
  --bp-md: 48rem;   /* 768  tablet */
  --bp-lg: 64rem;   /* 1024 desktop */
  --bp-xl: 90rem;   /* 1440 large */
}