:root {
  /* ─── Spacing Scale (4px base) ────────────────────────────── */
  --space-px:  1px;
  --space-0:   0;
  --space-1:   0.25rem;   /*  4px — tight inline spacing */
  --space-2:   0.5rem;    /*  8px — compact groups */
  --space-3:   0.75rem;   /* 12px — inline elements (buttons, badges, icons) */
  --space-4:   1rem;      /* 16px — card padding, related form fields */
  --space-5:   1.25rem;   /* 20px — generous card padding */
  --space-6:   1.5rem;    /* 24px — major sections, page padding */
  --space-8:   2rem;      /* 32px — large section separation */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* ─── Border Radii ────────────────────────────────────────── */
  --radius-sm:   0.25rem;   /*  4px — small inner elements */
  --radius-md:   0.5rem;    /*  8px — buttons, inputs */
  --radius-lg:   0.75rem;   /* 12px — cards, dropdowns */
  --radius-xl:   1rem;      /* 16px — modals, panels */
  --radius-2xl:  1.5rem;    /* 24px — hero cards, landing sections */
  --radius-3xl:  2rem;      /* 32px — very large surfaces */
  --radius-full: 9999px;    /* pills, avatar rings */

  /* ─── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* ─── Layout ──────────────────────────────────────────────── */
  --sidebar-collapsed: 4rem;    /* 64px  — icon-only sidebar */
  --sidebar-expanded:  16rem;   /* 256px — full sidebar */

  --content-sm:  40rem;   /* 640px */
  --content-md:  48rem;   /* 768px */
  --content-lg:  64rem;   /* 1024px */
  --content-xl:  80rem;   /* 1280px */
  --content-2xl: 96rem;   /* 1536px */

  /* ─── Transitions ─────────────────────────────────────────── */
  --transition-fast: 150ms ease; /* @kind other */
  --transition-base: 200ms ease; /* @kind other */
  --transition-slow: 300ms ease; /* @kind other */
}