// ─────────────────────────────────────────────────────────────────────────────
// Component: Spacing
// File:      src/scss/theme/_spacing.scss
//
// Variants:  n/a — token definitions only
// Tokens:    --space-1 through --space-12, --radius-*, --z-*
// Usage:     padding: var(--space-4);
//
// Notes:     8pt grid. --radius-full is 9999px for pill shapes.
// ─────────────────────────────────────────────────────────────────────────────

:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  --radius-sm:   3px;
  --radius-base: 6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-tooltip: 400;
}