:root {

  /* ═══════════════════════════════════════
     SPACING SCALE (4px grid)
  ═══════════════════════════════════════ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* ═══════════════════════════════════════
     BORDER RADIUS
  ═══════════════════════════════════════ */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* ═══════════════════════════════════════
     CONTAINER WIDTHS
  ═══════════════════════════════════════ */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;

  /* ═══════════════════════════════════════
     Z-INDEX SCALE
  ═══════════════════════════════════════ */
  --z-base:     0;
  --z-raised:   10;
  --z-floating: 50;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
}