:root {
  /* Base unit 4px — every value snaps to a 4-multiple. */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* Semantic aliases */
  --band-padding-y: var(--space-section);   /* universal editorial vertical rhythm */
  --container-max: 1280px;
  --container-gutter: var(--space-xxl);
  --grid-gutter: var(--space-lg);            /* 3-up card grids */
  --grid-gutter-tight: var(--space-md);      /* logo strips, footer columns */
  --card-padding-signature: var(--space-xxl);/* coral / forest / dark cards */
  --card-padding-feature: var(--space-xl);   /* tabbed feature + pricing tier cards */
  --card-padding-callout: var(--space-lg);   /* cream callouts, demo-grid cards */
  --card-padding-compact: var(--space-md);   /* article cards, demo cards */
  --nav-height: 64px;
  --rail-width: 240px;
  --input-height: 44px;
  --icon-button-size: 40px;
}