:root {
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 40px;
  --space-2xl: 48px;
  --space-3xl: 54px;
  --space-4xl: 64px;
  --space-5xl: 72px;
  --space-6xl: 80px;

  /* Responsive step-pairs: --space-{mobile}-{desktop}. Mobile value here;
     desktop value overridden in the media query below. */
  --space-s-5xl: 16px;
  --space-l-5xl: 32px;
  --space-xl-6xl: 40px;
  --space-2xl-5xl: 48px;
  --space-4xl-6xl: 64px;

  /* Height of the filled controls — the .primary and .secondary buttons, and
     the text inputs and selects. Borders count inside it, since the reset sets
     box-sizing: border-box. One token for both because they are the same height
     by design, and a single source keeps them from drifting.

     Changing the value is not enough on its own to re-scale them: the buttons
     sit in column flex groups that can shrink them back, so a different control
     size needs those groups checked too. */
  --control-height: 50px;

  /* Text buttons (.btn-text) are shorter than the filled controls — they carry
     no fill or border, so the box exists only as a click target. Still clears
     the 24px SC 2.5.8 minimum, though not the 44px SC 2.5.5 enhancement the
     50px controls meet. */
  --text-button-height: 28px;
}

@media (min-width: 48rem) {
  :root {
    --space-s-5xl: 72px;
    --space-l-5xl: 72px;
    --space-2xl-5xl: 72px;
    --space-xl-6xl: 80px;
    --space-4xl-6xl: 80px;
  }
}