:root {
  --space-3xs: 0.125rem;   /* 2px */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1.0rem;   /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2.0rem;   /* 32px */
  --space-2xl: 3.0rem;   /* 48px */
  --space-3xl: 4.0rem;   /* 64px */
  --space-4xl: 6.0rem;   /* 96px */
  --space-5xl: 8.0rem;   /* 128px */

  /* Roles: use these in components, not raw steps. */
  --space-gap-tight: var(--space-xs);
  --space-gap: var(--space-md);
  --space-gap-loose: var(--space-lg);
  --space-inset-tight: var(--space-xs);
  --space-inset: var(--space-md);
  --space-inset-loose: var(--space-lg);
  --space-section: var(--space-3xl);
}