/* 8px base scale (brief): 8 16 24 32 40 56 64 80 96 128 */
:root {
  --space-base: 8px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 56px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 96px;
  --space-10: 128px;
  /* half step, for icon gaps and tight label stacks */
  --space-half: 4px;

  --gutter-card: var(--space-3);
  --gutter-grid: var(--space-3);

  /* Section rhythm. Sections are separated by space, never by a background
     fill: every section is white. Desktop 120-160, mobile 72-96. */
  --section-y: 140px;
  --section-y-loose: 160px;
  --section-y-tight: 120px;
  --section-y-mobile: 84px;
  --page-max: 1200px;
  --content-max: 65ch;
  --tap-min: 44px;

  /* Breakpoints (brief) — reference values, for use in media queries */
  --bp-xs: 430px;
  --bp-sm: 475px;
  --bp-md: 640px;
  --bp-lg: 768px;
  --bp-xl: 992px;
  --bp-2xl: 1024px;
  --bp-3xl: 1280px;
  --bp-4xl: 1536px;
  --bp-5xl: 1920px;
}