:root {
  /* Spacing — 4px base */
  --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;

  --section-y: clamp(64px, 9vw, 128px);   /* vertical rhythm between page sections */
  --gutter: clamp(20px, 4vw, 48px);
  --container: 1280px;
  --container-narrow: 760px;              /* rich text / article measure */

  /* Radii — deliberately tight; editorial, not bubbly */
  --radius-0: 0;
  --radius-sm: 4px;    /* buttons, inputs, tags */
  --radius-md: 8px;    /* images, menus */
  --radius-pill: 999px;/* avatars, status dots only */

  /* Elevation — only for floating layers (menus, dialogs). Content never floats. */
  --shadow-0: none;
  --shadow-menu: 0 12px 32px -8px rgba(12,17,56,.22), 0 2px 6px rgba(12,17,56,.08);
  --shadow-dialog: 0 24px 64px -12px rgba(12,17,56,.35);

  --border-w: 1px;
  --border-w-strong: 2px;

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms;
}