:root {
  /* 4px base grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 180px;
  --space-12: 240px;

  /* Section rhythm — generous by default; this is where the brand lives. */
  --section-pad-y: clamp(96px, 12vw, 200px);
  --section-pad-y-tight: clamp(64px, 7vw, 112px);
  --gutter: clamp(20px, 5vw, 64px); /* @kind spacing */
  --container: 1280px; /* @kind spacing */
  --container-narrow: 880px; /* @kind spacing */
  --container-wide: 1600px; /* @kind spacing */

  /* Radii — restrained. Nothing is a pill except the status dot & switch. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-5: 18px;
  --radius-app: 10px;   /* desktop app window / mockup chrome */
  --radius-full: 999px;

  --border-hairline: 1px; /* @kind spacing */
  --control-h-sm: 32px; /* @kind spacing */
  --control-h-md: 40px; /* @kind spacing */
  --control-h-lg: 52px; /* @kind spacing */
}