/* 4px base unit. Every captured value is a multiple of 4. */
:root {
  --space-unit: 4px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;
  --space-6xl: 128px;
  --space-section: 192px;

  /* layout */
  --gap-default: 24px;
  --page-width: 1400px;
  --page-width-legacy: 1200px;
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;
  --header-height: 64px;

  /* control heights */
  --control-height-sm: 32px;
  --control-height: 40px;
  --control-height-lg: 48px;
  --control-height-nav: 28px;
}