:root {
  /* 4px base step. The kit's own layouts use 6 / 10 / 14 as well, so the ramp
     is not a strict 8-grid — use the value that matches the source, not the
     nearest multiple of 8. */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 32px;
  --space-14: 40px;
  --space-16: 48px;
  --space-20: 64px;
  --space-24: 80px;
  --space-28: 96px;
  --space-32: 120px;

  /* Semantic */
  --gutter-card: 20px;         /* card interior padding, small cards */
  --gutter-card-lg: 28px;      /* card interior padding, feature cards */
  --gutter-section: 96px;      /* marketing section rhythm */
  --gutter-section-tight: 64px;
  --grid-gap: 20px;
  --page-max: 1180px;          /* marketing content column */
  --page-pad: 32px;
  --app-sidebar: 232px;
  --app-topbar: 56px;
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --icon-size: 24px;           /* published icon grid */
  --icon-stroke: 2px;          /* published icon stroke */
}