:root{
  /* 4px base grid */
  --space-0:0px;   --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px;  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  /* rhythm roles */
  --pad-control-y:8px;   --pad-control-x:14px;
  --pad-field-y:9px;     --pad-field-x:12px;
  --pad-card:var(--space-6);
  --pad-panel:var(--space-8);
  --pad-banner:var(--space-12);
  --gap-inline:var(--space-2);
  --gap-stack:var(--space-4);
  --gap-block:var(--space-6);
  --gap-section:var(--space-24);
  --gap-section-mobile:var(--space-16);

  /* content widths */
  --width-content:1240px;
  --width-narrow:720px;
  --width-prose:64ch;
  --gutter:24px;
  --gutter-mobile:20px;

  /* controls */
  --control-h-sm:28px;
  --control-h:34px;
  --control-h-lg:40px;
  --touch-min:44px;
  --nav-h:56px;
  --row-h:40px;
}