/* ============================================================================
   BoxGen design tokens — the single scale every component reads from.
   Colors live in style.css (:root) so the theme switch stays in one place;
   this file owns spacing, radii, type scale, elevation and z-index.
   ==========================================================================*/
:root {
  /* spacing (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* radii */
  --rad-1: 6px; --rad-2: 9px; --rad-3: 12px; --rad-4: 16px; --rad-pill: 999px;

  /* type scale */
  --fs-xs: 10.5px; --fs-sm: 11.5px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 24px;
  --lh-tight: 1.35; --lh-normal: 1.6; --lh-loose: 1.8;

  /* elevation: flat by default, only overlays get a soft shadow */
  --el-0: none;
  --el-1: 0 1px 2px rgba(0, 0, 0, .25);
  --el-2: 0 8px 22px rgba(0, 0, 0, .28);
  --el-3: 0 18px 48px rgba(0, 0, 0, .42);

  /* layering */
  --z-stage: 1; --z-topbar: 40; --z-menu: 50; --z-modal: 80; --z-toast: 90;
}