/* ============================================================
   SPACING & RADIUS — 4px base spacing scale + radius ramp.
   Untitled UI spacing is named by px-multiple of the 4px unit.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --spacing-0:   0;
  --spacing-0-5: 0.125rem; /* 2px */
  --spacing-1:   0.25rem;  /* 4px */
  --spacing-1-5: 0.375rem; /* 6px */
  --spacing-2:   0.5rem;   /* 8px */
  --spacing-3:   0.75rem;  /* 12px */
  --spacing-4:   1rem;     /* 16px */
  --spacing-5:   1.25rem;  /* 20px */
  --spacing-6:   1.5rem;   /* 24px */
  --spacing-8:   2rem;     /* 32px */
  --spacing-10:  2.5rem;   /* 40px */
  --spacing-12:  3rem;     /* 48px */
  --spacing-16:  4rem;     /* 64px */
  --spacing-20:  5rem;     /* 80px */
  --spacing-24:  6rem;     /* 96px */
  --spacing-32:  8rem;     /* 128px */

  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* Radius ramp */
  --radius-none: 0;
  --radius-xs:   0.25rem;  /* 4px */
  --radius-sm:   0.375rem; /* 6px */
  --radius-md:   0.5rem;   /* 8px */
  --radius-lg:   0.625rem; /* 10px */
  --radius-xl:   0.75rem;  /* 12px */
  --radius-2xl:  1rem;     /* 16px */
  --radius-3xl:  1.25rem;  /* 20px */
  --radius-4xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;
}