// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
:where(:root) {
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem; //  2px
  --space-1: 0.25rem; //  4px
  --space-1-5: 0.375rem; //  6px
  --space-2: 0.5rem; //  8px
  --space-2-5: 0.625rem; // 10px
  --space-3: 0.75rem; // 12px
  --space-3-5: 0.875rem; // 14px
  --space-4: 1rem; // 16px
  --space-5: 1.25rem; // 20px
  --space-6: 1.5rem; // 24px
  --space-7: 1.75rem; // 28px
  --space-8: 2rem; // 32px
  --space-9: 2.25rem; // 36px
  --space-10: 2.5rem; // 40px
  --space-11: 2.75rem; // 44px
  --space-12: 3rem; // 48px
  --space-14: 3.5rem; // 56px
  --space-16: 4rem; // 64px
  --space-20: 5rem; // 80px
  --space-24: 6rem; // 96px
  --space-32: 8rem; // 128px

  // Negative variants mirror the scale (n- infix) so consumers skip
  // `calc(var(--space-2) * -1)` for negative margins.
  --space-n-px: -1px;
  --space-n-0-5: -0.125rem; //  -2px
  --space-n-1: -0.25rem; //  -4px
  --space-n-1-5: -0.375rem; //  -6px
  --space-n-2: -0.5rem; //  -8px
  --space-n-2-5: -0.625rem; // -10px
  --space-n-3: -0.75rem; // -12px
  --space-n-3-5: -0.875rem; // -14px
  --space-n-4: -1rem; // -16px
  --space-n-5: -1.25rem; // -20px
  --space-n-6: -1.5rem; // -24px
  --space-n-7: -1.75rem; // -28px
  --space-n-8: -2rem; // -32px
  --space-n-9: -2.25rem; // -36px
  --space-n-10: -2.5rem; // -40px
  --space-n-11: -2.75rem; // -44px
  --space-n-12: -3rem; // -48px
  --space-n-14: -3.5rem; // -56px
  --space-n-16: -4rem; // -64px
  --space-n-20: -5rem; // -80px
  --space-n-24: -6rem; // -96px
  --space-n-32: -8rem; // -128px

  --inset-xs: var(--space-1) var(--space-2); //  4px  8px
  --inset-sm: var(--space-1-5) var(--space-3); //  6px 12px
  --inset-md: var(--space-2) var(--space-4); //  8px 16px
  --inset-lg: var(--space-3) var(--space-6); // 12px 24px
  --inset-xl: var(--space-4) var(--space-8); // 16px 32px

  // vertical gap
  --stack-2xs: var(--space-1); //  4px
  --stack-xs: var(--space-2); //  8px
  --stack-sm: var(--space-3); // 12px
  --stack-md: var(--space-4); // 16px
  --stack-lg: var(--space-6); // 24px
  --stack-xl: var(--space-8); // 32px
  --stack-2xl: var(--space-12); // 48px

  // horizontal gap
  --inline-2xs: var(--space-1); //  4px
  --inline-xs: var(--space-2); //  8px
  --inline-sm: var(--space-3); // 12px
  --inline-md: var(--space-4); // 16px
  --inline-lg: var(--space-6); // 24px
}