diff --git a/docs/assets/_virtual_cosmos-imports-m6w9TwDV.css b/docs/assets/_virtual_cosmos-imports-CghTF5Lu.css
similarity index 85%
rename from docs/assets/_virtual_cosmos-imports-m6w9TwDV.css
rename to docs/assets/_virtual_cosmos-imports-CghTF5Lu.css
index 6e02604d..f22c0e77 100644
--- a/docs/assets/_virtual_cosmos-imports-m6w9TwDV.css
+++ b/docs/assets/_virtual_cosmos-imports-CghTF5Lu.css
@@ -398,56 +398,52 @@
     inset-block: calc(var(--lsd-spacing) * 0);
   }
 
-  .lsd\:top-0 {
-    top: calc(var(--lsd-spacing) * 0);
-  }
-
-  .lsd\:top-1\.5 {
-    top: calc(var(--lsd-spacing) * 1.5);
+  .lsd\:top-\(--lsd-spacing-base\) {
+    top: var(--lsd-spacing-base);
   }
 
-  .lsd\:top-3\.5 {
-    top: calc(var(--lsd-spacing) * 3.5);
+  .lsd\:top-\(--lsd-spacing-smaller\) {
+    top: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:top-4 {
-    top: calc(var(--lsd-spacing) * 4);
+  .lsd\:top-0 {
+    top: calc(var(--lsd-spacing) * 0);
   }
 
   .lsd\:top-\[50\%\] {
     top: 50%;
   }
 
-  .lsd\:right-0 {
-    right: calc(var(--lsd-spacing) * 0);
+  .lsd\:right-\(--lsd-spacing-base\) {
+    right: var(--lsd-spacing-base);
   }
 
-  .lsd\:right-1 {
-    right: calc(var(--lsd-spacing) * 1);
+  .lsd\:right-\(--lsd-spacing-small\) {
+    right: var(--lsd-spacing-small);
   }
 
-  .lsd\:right-2 {
-    right: calc(var(--lsd-spacing) * 2);
+  .lsd\:right-\(--lsd-spacing-smaller\) {
+    right: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:right-3 {
-    right: calc(var(--lsd-spacing) * 3);
+  .lsd\:right-\(--lsd-spacing-smallest\) {
+    right: var(--lsd-spacing-smallest);
   }
 
-  .lsd\:right-4 {
-    right: calc(var(--lsd-spacing) * 4);
+  .lsd\:right-0 {
+    right: calc(var(--lsd-spacing) * 0);
   }
 
   .lsd\:bottom-0 {
     bottom: calc(var(--lsd-spacing) * 0);
   }
 
-  .lsd\:left-0 {
-    left: calc(var(--lsd-spacing) * 0);
+  .lsd\:left-\(--lsd-spacing-smaller\) {
+    left: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:left-2 {
-    left: calc(var(--lsd-spacing) * 2);
+  .lsd\:left-0 {
+    left: calc(var(--lsd-spacing) * 0);
   }
 
   .lsd\:left-\[50\%\] {
@@ -490,28 +486,28 @@
     margin: calc(var(--lsd-spacing) * 0) !important;
   }
 
-  .lsd\:-mx-1 {
-    margin-inline: calc(var(--lsd-spacing) * -1);
+  .lsd\:-mx-\(--lsd-spacing-smallest\), .lsd\:-mx-\[var\(--lsd-spacing-smallest\)\] {
+    margin-inline: calc(var(--lsd-spacing-smallest) * -1);
   }
 
-  .lsd\:mx-2 {
-    margin-inline: calc(var(--lsd-spacing) * 2);
+  .lsd\:mx-\(--lsd-spacing-base\) {
+    margin-inline: var(--lsd-spacing-base);
   }
 
-  .lsd\:mx-3\.5 {
-    margin-inline: calc(var(--lsd-spacing) * 3.5);
+  .lsd\:mx-\(--lsd-spacing-smaller\) {
+    margin-inline: var(--lsd-spacing-smaller);
   }
 
   .lsd\:mx-auto {
     margin-inline: auto;
   }
 
-  .lsd\:my-1 {
-    margin-block: calc(var(--lsd-spacing) * 1);
+  .lsd\:my-\(--lsd-spacing-smallest\), .lsd\:my-\[var\(--lsd-spacing-smallest\)\] {
+    margin-block: var(--lsd-spacing-smallest);
   }
 
-  .lsd\:mt-0\.5 {
-    margin-top: calc(var(--lsd-spacing) * .5);
+  .lsd\:mt-\(--lsd-spacing-smallest\) {
+    margin-top: var(--lsd-spacing-smallest);
   }
 
   .lsd\:mt-2 {
@@ -526,18 +522,14 @@
     margin-top: auto;
   }
 
-  .lsd\:mb-0\.5 {
-    margin-bottom: calc(var(--lsd-spacing) * .5);
+  .lsd\:mb-\(--lsd-spacing-smallest\) {
+    margin-bottom: var(--lsd-spacing-smallest);
   }
 
   .lsd\:mb-1 {
     margin-bottom: calc(var(--lsd-spacing) * 1);
   }
 
-  .lsd\:mb-1\.5 {
-    margin-bottom: calc(var(--lsd-spacing) * 1.5);
-  }
-
   .lsd\:mb-2 {
     margin-bottom: calc(var(--lsd-spacing) * 2);
   }
@@ -550,20 +542,16 @@
     margin-bottom: calc(var(--lsd-spacing) * 10);
   }
 
-  .lsd\:ml-\[10px\] {
-    margin-left: 10px;
+  .lsd\:mb-\[var\(--lsd-spacing-smaller\)\] {
+    margin-bottom: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:ml-\[12px\] {
-    margin-left: 12px;
+  .lsd\:ml-\[var\(--lsd-spacing-base\)\] {
+    margin-left: var(--lsd-spacing-base);
   }
 
-  .lsd\:ml-\[14px\] {
-    margin-left: 14px;
-  }
-
-  .lsd\:ml-\[16px\] {
-    margin-left: 16px;
+  .lsd\:ml-\[var\(--lsd-spacing-small\)\] {
+    margin-left: var(--lsd-spacing-small);
   }
 
   .lsd\:ml-auto {
@@ -598,9 +586,19 @@
     aspect-ratio: 1;
   }
 
-  .lsd\:size-2 {
-    width: calc(var(--lsd-spacing) * 2);
-    height: calc(var(--lsd-spacing) * 2);
+  .lsd\:size-\(--lsd-spacing-base\) {
+    width: var(--lsd-spacing-base);
+    height: var(--lsd-spacing-base);
+  }
+
+  .lsd\:size-\(--lsd-spacing-large\) {
+    width: var(--lsd-spacing-large);
+    height: var(--lsd-spacing-large);
+  }
+
+  .lsd\:size-\(--lsd-spacing-smaller\) {
+    width: var(--lsd-spacing-smaller);
+    height: var(--lsd-spacing-smaller);
   }
 
   .lsd\:size-2\.5 {
@@ -613,9 +611,9 @@
     height: calc(var(--lsd-spacing) * 3);
   }
 
-  .lsd\:size-3\.5 {
-    width: calc(var(--lsd-spacing) * 3.5);
-    height: calc(var(--lsd-spacing) * 3.5);
+  .lsd\:size-3\/4 {
+    width: 75%;
+    height: 75%;
   }
 
   .lsd\:size-4 {
@@ -628,47 +626,53 @@
     height: calc(var(--lsd-spacing) * 5);
   }
 
-  .lsd\:size-6 {
-    width: calc(var(--lsd-spacing) * 6);
-    height: calc(var(--lsd-spacing) * 6);
-  }
-
   .lsd\:size-8 {
     width: calc(var(--lsd-spacing) * 8);
     height: calc(var(--lsd-spacing) * 8);
   }
 
+  .lsd\:size-\[var\(--lsd-spacing-large\)\] {
+    width: var(--lsd-spacing-large);
+    height: var(--lsd-spacing-large);
+  }
+
+  .lsd\:size-\[var\(--lsd-spacing-larger\)\] {
+    width: var(--lsd-spacing-larger);
+    height: var(--lsd-spacing-larger);
+  }
+
+  .lsd\:size-\[var\(--lsd-spacing-small\)\] {
+    width: var(--lsd-spacing-small);
+    height: var(--lsd-spacing-small);
+  }
+
   .lsd\:size-full {
     width: 100%;
     height: 100%;
   }
 
-  .lsd\:h-2 {
-    height: calc(var(--lsd-spacing) * 2);
+  .lsd\:h-\(--lsd-spacing-base\) {
+    height: var(--lsd-spacing-base);
   }
 
-  .lsd\:h-2\.5 {
-    height: calc(var(--lsd-spacing) * 2.5);
+  .lsd\:h-\(--lsd-spacing-large\) {
+    height: var(--lsd-spacing-large);
   }
 
-  .lsd\:h-3 {
-    height: calc(var(--lsd-spacing) * 3);
-  }
-
-  .lsd\:h-4 {
-    height: calc(var(--lsd-spacing) * 4);
+  .lsd\:h-\(--lsd-spacing-largest\) {
+    height: var(--lsd-spacing-largest);
   }
 
-  .lsd\:h-5 {
-    height: calc(var(--lsd-spacing) * 5);
+  .lsd\:h-\(--lsd-spacing-small\) {
+    height: var(--lsd-spacing-small);
   }
 
-  .lsd\:h-6 {
-    height: calc(var(--lsd-spacing) * 6);
+  .lsd\:h-\(--radix-select-trigger-height\) {
+    height: var(--radix-select-trigger-height);
   }
 
-  .lsd\:h-7 {
-    height: calc(var(--lsd-spacing) * 7);
+  .lsd\:h-4 {
+    height: calc(var(--lsd-spacing) * 4);
   }
 
   .lsd\:h-8 {
@@ -691,10 +695,6 @@
     height: calc(var(--lsd-spacing) * 14);
   }
 
-  .lsd\:h-16 {
-    height: calc(var(--lsd-spacing) * 16);
-  }
-
   .lsd\:h-24 {
     height: calc(var(--lsd-spacing) * 24);
   }
@@ -707,64 +707,28 @@
     height: calc(var(--lsd-spacing) * 64);
   }
 
-  .lsd\:h-\[8px\] {
-    height: 8px;
-  }
-
-  .lsd\:h-\[10px\] {
-    height: 10px;
-  }
-
-  .lsd\:h-\[12px\] {
-    height: 12px;
+  .lsd\:h-\[var\(--lsd-spacing-base\)\] {
+    height: var(--lsd-spacing-base);
   }
 
-  .lsd\:h-\[14px\] {
-    height: 14px;
+  .lsd\:h-\[var\(--lsd-spacing-large\)\] {
+    height: var(--lsd-spacing-large);
   }
 
-  .lsd\:h-\[16px\] {
-    height: 16px;
+  .lsd\:h-\[var\(--lsd-spacing-larger\)\] {
+    height: var(--lsd-spacing-larger);
   }
 
-  .lsd\:h-\[18px\] {
-    height: 18px;
+  .lsd\:h-\[var\(--lsd-spacing-largest\)\] {
+    height: var(--lsd-spacing-largest);
   }
 
-  .lsd\:h-\[20px\] {
-    height: 20px;
+  .lsd\:h-\[var\(--lsd-spacing-small\)\] {
+    height: var(--lsd-spacing-small);
   }
 
-  .lsd\:h-\[24px\] {
-    height: 24px;
-  }
-
-  .lsd\:h-\[28px\] {
-    height: 28px;
-  }
-
-  .lsd\:h-\[32px\] {
-    height: 32px;
-  }
-
-  .lsd\:h-\[34px\] {
-    height: 34px;
-  }
-
-  .lsd\:h-\[36px\] {
-    height: 36px;
-  }
-
-  .lsd\:h-\[40px\] {
-    height: 40px;
-  }
-
-  .lsd\:h-\[48px\] {
-    height: 48px;
-  }
-
-  .lsd\:h-\[var\(--radix-select-trigger-height\)\] {
-    height: var(--radix-select-trigger-height);
+  .lsd\:h-\[var\(--lsd-spacing-smaller\)\] {
+    height: var(--lsd-spacing-smaller);
   }
 
   .lsd\:h-auto {
@@ -803,20 +767,24 @@
     min-height: 100svh;
   }
 
-  .lsd\:w-\(--sidebar-width\) {
-    width: var(--sidebar-width);
+  .lsd\:w-\(--lsd-spacing-base\) {
+    width: var(--lsd-spacing-base);
   }
 
-  .lsd\:w-1\/3 {
-    width: 33.3333%;
+  .lsd\:w-\(--lsd-spacing-large\) {
+    width: var(--lsd-spacing-large);
   }
 
-  .lsd\:w-2\.5 {
-    width: calc(var(--lsd-spacing) * 2.5);
+  .lsd\:w-\(--lsd-spacing-small\) {
+    width: var(--lsd-spacing-small);
   }
 
-  .lsd\:w-3 {
-    width: calc(var(--lsd-spacing) * 3);
+  .lsd\:w-\(--sidebar-width\) {
+    width: var(--sidebar-width);
+  }
+
+  .lsd\:w-1\/3 {
+    width: 33.3333%;
   }
 
   .lsd\:w-3\/4 {
@@ -827,18 +795,6 @@
     width: calc(var(--lsd-spacing) * 4);
   }
 
-  .lsd\:w-5 {
-    width: calc(var(--lsd-spacing) * 5);
-  }
-
-  .lsd\:w-6 {
-    width: calc(var(--lsd-spacing) * 6);
-  }
-
-  .lsd\:w-7 {
-    width: calc(var(--lsd-spacing) * 7);
-  }
-
   .lsd\:w-8 {
     width: calc(var(--lsd-spacing) * 8);
   }
@@ -855,10 +811,6 @@
     width: calc(var(--lsd-spacing) * 12);
   }
 
-  .lsd\:w-16 {
-    width: calc(var(--lsd-spacing) * 16);
-  }
-
   .lsd\:w-72 {
     width: calc(var(--lsd-spacing) * 72);
   }
@@ -867,26 +819,6 @@
     width: calc(var(--lsd-spacing) * 80);
   }
 
-  .lsd\:w-\[8px\] {
-    width: 8px;
-  }
-
-  .lsd\:w-\[10px\] {
-    width: 10px;
-  }
-
-  .lsd\:w-\[12px\] {
-    width: 12px;
-  }
-
-  .lsd\:w-\[14px\] {
-    width: 14px;
-  }
-
-  .lsd\:w-\[16px\] {
-    width: 16px;
-  }
-
   .lsd\:w-\[140px\] {
     width: 140px;
   }
@@ -919,6 +851,30 @@
     width: 400px;
   }
 
+  .lsd\:w-\[var\(--lsd-spacing-base\)\] {
+    width: var(--lsd-spacing-base);
+  }
+
+  .lsd\:w-\[var\(--lsd-spacing-large\)\] {
+    width: var(--lsd-spacing-large);
+  }
+
+  .lsd\:w-\[var\(--lsd-spacing-larger\)\] {
+    width: var(--lsd-spacing-larger);
+  }
+
+  .lsd\:w-\[var\(--lsd-spacing-largest\)\] {
+    width: var(--lsd-spacing-largest);
+  }
+
+  .lsd\:w-\[var\(--lsd-spacing-small\)\] {
+    width: var(--lsd-spacing-small);
+  }
+
+  .lsd\:w-\[var\(--lsd-spacing-smaller\)\] {
+    width: var(--lsd-spacing-smaller);
+  }
+
   .lsd\:w-auto {
     width: auto;
   }
@@ -939,12 +895,16 @@
     max-width: calc(100% - 2rem);
   }
 
-  .lsd\:min-w-0 {
-    min-width: calc(var(--lsd-spacing) * 0);
+  .lsd\:min-w-\(--lsd-spacing-large\) {
+    min-width: var(--lsd-spacing-large);
   }
 
-  .lsd\:min-w-5 {
-    min-width: calc(var(--lsd-spacing) * 5);
+  .lsd\:min-w-\(--radix-select-trigger-width\) {
+    min-width: var(--radix-select-trigger-width);
+  }
+
+  .lsd\:min-w-0 {
+    min-width: calc(var(--lsd-spacing) * 0);
   }
 
   .lsd\:min-w-8 {
@@ -975,10 +935,6 @@
     min-width: 100px;
   }
 
-  .lsd\:min-w-\[var\(--radix-select-trigger-width\)\] {
-    min-width: var(--radix-select-trigger-width);
-  }
-
   .lsd\:flex-1 {
     flex: 1;
   }
@@ -1066,12 +1022,12 @@
     touch-action: none;
   }
 
-  .lsd\:scroll-my-1 {
-    scroll-margin-block: calc(var(--lsd-spacing) * 1);
+  .lsd\:scroll-my-\(--lsd-spacing-smallest\) {
+    scroll-margin-block: var(--lsd-spacing-smallest);
   }
 
-  .lsd\:scroll-py-1 {
-    scroll-padding-block: calc(var(--lsd-spacing) * 1);
+  .lsd\:scroll-py-\(--lsd-spacing-smallest\) {
+    scroll-padding-block: var(--lsd-spacing-smallest);
   }
 
   .lsd\:list-disc {
@@ -1146,16 +1102,20 @@
     justify-content: flex-end;
   }
 
-  .lsd\:gap-0\.5 {
-    gap: calc(var(--lsd-spacing) * .5);
+  .lsd\:gap-\(--lsd-spacing-base\) {
+    gap: var(--lsd-spacing-base);
   }
 
-  .lsd\:gap-1 {
-    gap: calc(var(--lsd-spacing) * 1);
+  .lsd\:gap-\(--lsd-spacing-smaller\) {
+    gap: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:gap-1\.5 {
-    gap: calc(var(--lsd-spacing) * 1.5);
+  .lsd\:gap-\(--lsd-spacing-smallest\) {
+    gap: var(--lsd-spacing-smallest);
+  }
+
+  .lsd\:gap-0\.5 {
+    gap: calc(var(--lsd-spacing) * .5);
   }
 
   .lsd\:gap-2 {
@@ -1174,20 +1134,18 @@
     gap: calc(var(--lsd-spacing) * 8);
   }
 
-  .lsd\:gap-\[4px\] {
-    gap: 4px;
-  }
-
-  .lsd\:gap-\[6px\] {
-    gap: 6px;
+  .lsd\:gap-\[var\(--lsd-spacing-smaller\)\] {
+    gap: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:gap-\[8px\] {
-    gap: 8px;
+  .lsd\:gap-\[var\(--lsd-spacing-smallest\)\] {
+    gap: var(--lsd-spacing-smallest);
   }
 
-  .lsd\:gap-\[10px\] {
-    gap: 10px;
+  :where(.lsd\:space-y-\(--lsd-spacing-base\) > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--lsd-spacing-base) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--lsd-spacing-base) * calc(1 - var(--tw-space-y-reverse)));
   }
 
   :where(.lsd\:space-y-1 > :not(:last-child)) {
@@ -1226,6 +1184,12 @@
     margin-block-end: calc(calc(var(--lsd-spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.lsd\:space-x-\(--lsd-spacing-smaller\) > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(var(--lsd-spacing-smaller) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(var(--lsd-spacing-smaller) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   :where(.lsd\:space-x-2 > :not(:last-child)) {
     --tw-space-x-reverse: 0;
     margin-inline-start: calc(calc(var(--lsd-spacing) * 2) * var(--tw-space-x-reverse));
@@ -1483,6 +1447,22 @@
     fill: currentColor;
   }
 
+  .lsd\:p-\(--lsd-spacing-base\) {
+    padding: var(--lsd-spacing-base);
+  }
+
+  .lsd\:p-\(--lsd-spacing-larger\) {
+    padding: var(--lsd-spacing-larger);
+  }
+
+  .lsd\:p-\(--lsd-spacing-smaller\) {
+    padding: var(--lsd-spacing-smaller);
+  }
+
+  .lsd\:p-\(--lsd-spacing-smallest\) {
+    padding: var(--lsd-spacing-smallest);
+  }
+
   .lsd\:p-0 {
     padding: calc(var(--lsd-spacing) * 0);
   }
@@ -1507,32 +1487,36 @@
     padding: calc(var(--lsd-spacing) * 8);
   }
 
+  .lsd\:p-\[var\(--lsd-spacing-smallest\)\] {
+    padding: var(--lsd-spacing-smallest);
+  }
+
   .lsd\:p-px {
     padding: 1px;
   }
 
-  .lsd\:px-1 {
-    padding-inline: calc(var(--lsd-spacing) * 1);
+  .lsd\:px-\(--lsd-spacing-base\) {
+    padding-inline: var(--lsd-spacing-base);
   }
 
-  .lsd\:px-2 {
-    padding-inline: calc(var(--lsd-spacing) * 2);
+  .lsd\:px-\(--lsd-spacing-larger\) {
+    padding-inline: var(--lsd-spacing-larger);
   }
 
-  .lsd\:px-2\.5 {
-    padding-inline: calc(var(--lsd-spacing) * 2.5);
+  .lsd\:px-\(--lsd-spacing-small\) {
+    padding-inline: var(--lsd-spacing-small);
   }
 
-  .lsd\:px-3 {
-    padding-inline: calc(var(--lsd-spacing) * 3);
+  .lsd\:px-\(--lsd-spacing-smaller\) {
+    padding-inline: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:px-4 {
-    padding-inline: calc(var(--lsd-spacing) * 4);
+  .lsd\:px-\(--lsd-spacing-smallest\) {
+    padding-inline: var(--lsd-spacing-smallest);
   }
 
-  .lsd\:px-5 {
-    padding-inline: calc(var(--lsd-spacing) * 5);
+  .lsd\:px-3 {
+    padding-inline: calc(var(--lsd-spacing) * 3);
   }
 
   .lsd\:px-6 {
@@ -1543,48 +1527,40 @@
     padding-inline: calc(var(--lsd-spacing) * 8);
   }
 
-  .lsd\:px-10 {
-    padding-inline: calc(var(--lsd-spacing) * 10);
-  }
-
-  .lsd\:px-\[5px\] {
-    padding-inline: 5px;
-  }
-
-  .lsd\:px-\[7px\] {
-    padding-inline: 7px;
+  .lsd\:px-\[var\(--lsd-spacing-base\)\] {
+    padding-inline: var(--lsd-spacing-base);
   }
 
-  .lsd\:px-\[9px\] {
-    padding-inline: 9px;
+  .lsd\:px-\[var\(--lsd-spacing-large\)\] {
+    padding-inline: var(--lsd-spacing-large);
   }
 
-  .lsd\:px-\[11px\] {
-    padding-inline: 11px;
+  .lsd\:px-\[var\(--lsd-spacing-larger\)\] {
+    padding-inline: var(--lsd-spacing-larger);
   }
 
-  .lsd\:px-\[13px\] {
-    padding-inline: 13px;
+  .lsd\:px-\[var\(--lsd-spacing-small\)\] {
+    padding-inline: var(--lsd-spacing-small);
   }
 
-  .lsd\:px-\[15px\] {
-    padding-inline: 15px;
+  .lsd\:px-\[var\(--lsd-spacing-smaller\)\] {
+    padding-inline: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:px-\[17px\] {
-    padding-inline: 17px;
+  .lsd\:py-\(--lsd-spacing-larger\) {
+    padding-block: var(--lsd-spacing-larger);
   }
 
-  .lsd\:px-\[20px\] {
-    padding-inline: 20px;
+  .lsd\:py-\(--lsd-spacing-small\) {
+    padding-block: var(--lsd-spacing-small);
   }
 
-  .lsd\:py-0\.5 {
-    padding-block: calc(var(--lsd-spacing) * .5);
+  .lsd\:py-\(--lsd-spacing-smaller\) {
+    padding-block: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:py-1 {
-    padding-block: calc(var(--lsd-spacing) * 1);
+  .lsd\:py-\(--lsd-spacing-smallest\) {
+    padding-block: var(--lsd-spacing-smallest);
   }
 
   .lsd\:py-1\.5 {
@@ -1595,92 +1571,80 @@
     padding-block: calc(var(--lsd-spacing) * 2);
   }
 
-  .lsd\:py-2\.5 {
-    padding-block: calc(var(--lsd-spacing) * 2.5);
-  }
-
-  .lsd\:py-3 {
-    padding-block: calc(var(--lsd-spacing) * 3);
-  }
-
   .lsd\:py-4 {
     padding-block: calc(var(--lsd-spacing) * 4);
   }
 
-  .lsd\:py-5 {
-    padding-block: calc(var(--lsd-spacing) * 5);
-  }
-
   .lsd\:py-6 {
     padding-block: calc(var(--lsd-spacing) * 6);
   }
 
-  .lsd\:py-\[3px\] {
-    padding-block: 3px;
-  }
-
-  .lsd\:py-\[4px\] {
-    padding-block: 4px;
-  }
-
-  .lsd\:py-\[5px\] {
-    padding-block: 5px;
+  .lsd\:py-\[var\(--lsd-spacing-base\)\] {
+    padding-block: var(--lsd-spacing-base);
   }
 
-  .lsd\:py-\[6px\] {
-    padding-block: 6px;
+  .lsd\:py-\[var\(--lsd-spacing-large\)\] {
+    padding-block: var(--lsd-spacing-large);
   }
 
-  .lsd\:py-\[8px\] {
-    padding-block: 8px;
+  .lsd\:py-\[var\(--lsd-spacing-small\)\] {
+    padding-block: var(--lsd-spacing-small);
   }
 
-  .lsd\:py-\[9px\] {
-    padding-block: 9px;
+  .lsd\:py-\[var\(--lsd-spacing-smaller\)\] {
+    padding-block: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:py-\[10px\] {
-    padding-block: 10px;
+  .lsd\:py-\[var\(--lsd-spacing-smallest\)\] {
+    padding-block: var(--lsd-spacing-smallest);
   }
 
-  .lsd\:py-\[12px\] {
-    padding-block: 12px;
+  .lsd\:pt-\(--lsd-spacing-larger\) {
+    padding-top: var(--lsd-spacing-larger);
   }
 
-  .lsd\:py-\[14px\] {
-    padding-block: 14px;
+  .lsd\:pt-\(--lsd-spacing-smaller\) {
+    padding-top: var(--lsd-spacing-smaller);
   }
 
   .lsd\:pt-0 {
     padding-top: calc(var(--lsd-spacing) * 0);
   }
 
-  .lsd\:pt-1\.5 {
-    padding-top: calc(var(--lsd-spacing) * 1.5);
-  }
-
   .lsd\:pt-6 {
     padding-top: calc(var(--lsd-spacing) * 6);
   }
 
-  .lsd\:pr-2 {
-    padding-right: calc(var(--lsd-spacing) * 2);
-  }
-
   .lsd\:pr-8 {
     padding-right: calc(var(--lsd-spacing) * 8);
   }
 
+  .lsd\:pr-\[var\(--lsd-spacing-smaller\)\] {
+    padding-right: var(--lsd-spacing-smaller);
+  }
+
+  .lsd\:pb-\(--lsd-spacing-larger\) {
+    padding-bottom: var(--lsd-spacing-larger);
+  }
+
   .lsd\:pb-2 {
     padding-bottom: calc(var(--lsd-spacing) * 2);
   }
 
-  .lsd\:pb-4 {
-    padding-bottom: calc(var(--lsd-spacing) * 4);
+  .lsd\:pb-\[var\(--lsd-spacing-base\)\] {
+    padding-bottom: var(--lsd-spacing-base);
+  }
+
+  .lsd\:pb-\[var\(--lsd-spacing-larger\)\] {
+    padding-bottom: var(--lsd-spacing-larger);
+  }
+
+  .lsd\:pb-\[var\(--lsd-spacing-smaller\)\] {
+    padding-bottom: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:pb-6 {
-    padding-bottom: calc(var(--lsd-spacing) * 6);
+  .lsd\:pl-\(--lsd-spacing-smaller\) {
+    padding-left: var(--lsd-spacing-smaller);
   }
 
   .lsd\:pl-2 {
@@ -1745,10 +1709,6 @@
     font-size: .75rem;
   }
 
-  .lsd\:text-\[0\.625rem\] {
-    font-size: .625rem;
-  }
-
   .lsd\:text-\[0\.875rem\] {
     font-size: .875rem;
   }
@@ -2200,12 +2160,12 @@
     overflow: hidden;
   }
 
-  .lsd\:group-data-\[collapsible\=icon\]\:p-0\!:is(:where(.lsd\:group)[data-collapsible="icon"] *) {
-    padding: calc(var(--lsd-spacing) * 0) !important;
+  .lsd\:group-data-\[collapsible\=icon\]\:p-\(--lsd-spacing-smaller\)\!:is(:where(.lsd\:group)[data-collapsible="icon"] *) {
+    padding: var(--lsd-spacing-smaller) !important;
   }
 
-  .lsd\:group-data-\[collapsible\=icon\]\:p-2\!:is(:where(.lsd\:group)[data-collapsible="icon"] *) {
-    padding: calc(var(--lsd-spacing) * 2) !important;
+  .lsd\:group-data-\[collapsible\=icon\]\:p-0\!:is(:where(.lsd\:group)[data-collapsible="icon"] *) {
+    padding: calc(var(--lsd-spacing) * 0) !important;
   }
 
   .lsd\:group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.lsd\:group)[data-collapsible="icon"] *) {
@@ -2237,8 +2197,8 @@
     opacity: .5;
   }
 
-  .lsd\:group-data-\[side\=left\]\:-right-4:is(:where(.lsd\:group)[data-side="left"] *) {
-    right: calc(var(--lsd-spacing) * -4);
+  .lsd\:group-data-\[side\=left\]\:-right-\(--lsd-spacing-base\):is(:where(.lsd\:group)[data-side="left"] *) {
+    right: calc(var(--lsd-spacing-base) * -1);
   }
 
   .lsd\:group-data-\[side\=left\]\:border-r:is(:where(.lsd\:group)[data-side="left"] *) {
@@ -2285,16 +2245,16 @@
     opacity: .5;
   }
 
-  .lsd\:peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.lsd\:peer\/menu-button)[data-size="default"] ~ *) {
-    top: calc(var(--lsd-spacing) * 1.5);
+  .lsd\:peer-data-\[size\=default\]\/menu-button\:top-\(--lsd-spacing-smaller\):is(:where(.lsd\:peer\/menu-button)[data-size="default"] ~ *) {
+    top: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.lsd\:peer\/menu-button)[data-size="lg"] ~ *) {
-    top: calc(var(--lsd-spacing) * 2.5);
+  .lsd\:peer-data-\[size\=lg\]\/menu-button\:top-\(--lsd-spacing-small\):is(:where(.lsd\:peer\/menu-button)[data-size="lg"] ~ *) {
+    top: var(--lsd-spacing-small);
   }
 
-  .lsd\:peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.lsd\:peer\/menu-button)[data-size="sm"] ~ *) {
-    top: calc(var(--lsd-spacing) * 1);
+  .lsd\:peer-data-\[size\=sm\]\/menu-button\:top-\(--lsd-spacing-smallest\):is(:where(.lsd\:peer\/menu-button)[data-size="sm"] ~ *) {
+    top: var(--lsd-spacing-smallest);
   }
 
   .lsd\:placeholder\:text-lsd-text-primary::placeholder {
@@ -2451,10 +2411,22 @@
     grid-template-columns: 1fr auto;
   }
 
+  .lsd\:data-disabled\:pointer-events-none[data-disabled] {
+    pointer-events: none;
+  }
+
+  .lsd\:data-disabled\:opacity-50[data-disabled] {
+    opacity: .5;
+  }
+
   .lsd\:data-highlighted\:underline[data-highlighted] {
     text-decoration-line: underline;
   }
 
+  .lsd\:data-placeholder\:text-lsd-text-secondary[data-placeholder] {
+    color: var(--lsd-text-secondary);
+  }
+
   .lsd\:data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
     background-color: var(--sidebar-accent);
   }
@@ -2468,14 +2440,6 @@
     color: var(--sidebar-accent-foreground);
   }
 
-  .lsd\:data-\[disabled\]\:pointer-events-none[data-disabled] {
-    pointer-events: none;
-  }
-
-  .lsd\:data-\[disabled\]\:opacity-50[data-disabled] {
-    opacity: .5;
-  }
-
   .lsd\:data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
     pointer-events: none;
   }
@@ -2504,10 +2468,6 @@
     width: 1px;
   }
 
-  .lsd\:data-\[placeholder\]\:text-lsd-text-secondary[data-placeholder] {
-    color: var(--lsd-text-secondary);
-  }
-
   .lsd\:data-\[selected\=true\]\:bg-lsd-surface[data-selected="true"] {
     background-color: var(--lsd-surface);
   }
@@ -2745,8 +2705,8 @@
       opacity: 0;
     }
 
-    .lsd\:md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.lsd\:peer)[data-variant="inset"] ~ *) {
-      margin: calc(var(--lsd-spacing) * 2);
+    .lsd\:md\:peer-data-\[variant\=inset\]\:m-\(--lsd-spacing-smaller\):is(:where(.lsd\:peer)[data-variant="inset"] ~ *) {
+      margin: var(--lsd-spacing-smaller);
     }
 
     .lsd\:md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.lsd\:peer)[data-variant="inset"] ~ *) {
@@ -2762,8 +2722,8 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    .lsd\:md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2:is(:where(.lsd\:peer)[data-variant="inset"] ~ *):is(:where(.lsd\:peer)[data-state="collapsed"] ~ *) {
-      margin-left: calc(var(--lsd-spacing) * 2);
+    .lsd\:md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-\(--lsd-spacing-smaller\):is(:where(.lsd\:peer)[data-variant="inset"] ~ *):is(:where(.lsd\:peer)[data-state="collapsed"] ~ *) {
+      margin-left: var(--lsd-spacing-smaller);
     }
   }
 
@@ -2785,87 +2745,92 @@
     }
   }
 
-  .lsd\:\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
-    padding-inline: calc(var(--lsd-spacing) * 2);
+  .lsd\:\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
+    padding-top: calc(var(--lsd-spacing) * 0);
   }
 
-  .lsd\:\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
-    padding-block: calc(var(--lsd-spacing) * 1.5);
+  .lsd\:\[\&_\[cmdk-input-wrapper\]_svg\]\:h-\(--lsd-spacing-large\) [cmdk-input-wrapper] svg {
+    height: var(--lsd-spacing-large);
   }
 
-  .lsd\:\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
-    font-size: var(--lsd-text-xs);
-    line-height: var(--tw-leading, var(--lsd-text-xs--line-height));
+  .lsd\:\[\&_\[cmdk-input-wrapper\]_svg\]\:w-\(--lsd-spacing-large\) [cmdk-input-wrapper] svg {
+    width: var(--lsd-spacing-large);
   }
 
-  .lsd\:\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
-    --tw-font-weight: var(--lsd-font-weight-medium);
-    font-weight: var(--lsd-font-weight-medium);
+  .lsd\:\[\&_\[cmdk-item\]_svg\]\:h-\(--lsd-spacing-large\) [cmdk-item] svg {
+    height: var(--lsd-spacing-large);
   }
 
-  .lsd\:\[\&_\[cmdk-group-heading\]\]\:text-lsd-text-primary [cmdk-group-heading] {
-    color: var(--lsd-text-primary);
+  .lsd\:\[\&_\[cmdk-item\]_svg\]\:w-\(--lsd-spacing-large\) [cmdk-item] svg {
+    width: var(--lsd-spacing-large);
   }
 
-  .lsd\:\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
-    padding-inline: calc(var(--lsd-spacing) * 2);
+  .lsd\:\[\&_svg\]\:pointer-events-none svg {
+    pointer-events: none;
   }
 
-  .lsd\:\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
-    padding-top: calc(var(--lsd-spacing) * 0);
+  .lsd\:\[\&_svg\]\:shrink-0 svg {
+    flex-shrink: 0;
   }
 
-  .lsd\:\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
-    height: calc(var(--lsd-spacing) * 5);
+  .lsd\:\[\&_svg\]\:\!text-lsd-destructive svg {
+    color: var(--lsd-destructive) !important;
   }
 
-  .lsd\:\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
-    width: calc(var(--lsd-spacing) * 5);
+  .lsd\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--lsd-spacing-base\) svg:not([class*="size-"]) {
+    width: var(--lsd-spacing-base);
+    height: var(--lsd-spacing-base);
   }
 
-  .lsd\:\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
-    height: calc(var(--lsd-spacing) * 12);
+  .lsd\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
+    width: calc(var(--lsd-spacing) * 4);
+    height: calc(var(--lsd-spacing) * 4);
   }
 
-  .lsd\:\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
-    padding-inline: calc(var(--lsd-spacing) * 2);
+  .lsd\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-lsd-icon-primary svg:not([class*="text-"]) {
+    color: var(--lsd-icon-primary);
   }
 
-  .lsd\:\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
-    padding-block: calc(var(--lsd-spacing) * 3);
+  .lsd\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-lsd-text-primary svg:not([class*="text-"]) {
+    color: var(--lsd-text-primary);
   }
 
-  .lsd\:\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
-    height: calc(var(--lsd-spacing) * 5);
+  :is(.lsd\:\*\*\:\[\[cmdk-group-heading\]\]\:px-\(--lsd-spacing-smaller\) *)[cmdk-group-heading] {
+    padding-inline: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
-    width: calc(var(--lsd-spacing) * 5);
+  :is(.lsd\:\*\*\:\[\[cmdk-group-heading\]\]\:py-\(--lsd-spacing-smaller\) *)[cmdk-group-heading] {
+    padding-block: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:\[\&_svg\]\:pointer-events-none svg {
-    pointer-events: none;
+  :is(.lsd\:\*\*\:\[\[cmdk-group-heading\]\]\:text-xs *)[cmdk-group-heading] {
+    font-size: var(--lsd-text-xs);
+    line-height: var(--tw-leading, var(--lsd-text-xs--line-height));
   }
 
-  .lsd\:\[\&_svg\]\:shrink-0 svg {
-    flex-shrink: 0;
+  :is(.lsd\:\*\*\:\[\[cmdk-group-heading\]\]\:font-medium *)[cmdk-group-heading] {
+    --tw-font-weight: var(--lsd-font-weight-medium);
+    font-weight: var(--lsd-font-weight-medium);
   }
 
-  .lsd\:\[\&_svg\]\:\!text-lsd-destructive svg {
-    color: var(--lsd-destructive) !important;
+  :is(.lsd\:\*\*\:\[\[cmdk-group-heading\]\]\:text-lsd-text-primary *)[cmdk-group-heading] {
+    color: var(--lsd-text-primary);
   }
 
-  .lsd\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
-    width: calc(var(--lsd-spacing) * 4);
-    height: calc(var(--lsd-spacing) * 4);
+  :is(.lsd\:\*\*\:\[\[cmdk-group\]\]\:px-\(--lsd-spacing-smaller\) *)[cmdk-group] {
+    padding-inline: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-lsd-icon-primary svg:not([class*="text-"]) {
-    color: var(--lsd-icon-primary);
+  :is(.lsd\:\*\*\:\[\[cmdk-input\]\]\:h-12 *)[cmdk-input] {
+    height: calc(var(--lsd-spacing) * 12);
   }
 
-  .lsd\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-lsd-text-primary svg:not([class*="text-"]) {
-    color: var(--lsd-text-primary);
+  :is(.lsd\:\*\*\:\[\[cmdk-item\]\]\:px-\(--lsd-spacing-smaller\) *)[cmdk-item] {
+    padding-inline: var(--lsd-spacing-smaller);
+  }
+
+  :is(.lsd\:\*\*\:\[\[cmdk-item\]\]\:py-\(--lsd-spacing-small\) *)[cmdk-item] {
+    padding-block: var(--lsd-spacing-small);
   }
 
   :is(.lsd\:\*\:\[span\]\:last\:flex > *):is(span):last-child {
@@ -2876,8 +2841,8 @@
     align-items: center;
   }
 
-  :is(.lsd\:\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
-    gap: calc(var(--lsd-spacing) * 2);
+  :is(.lsd\:\*\:\[span\]\:last\:gap-\(--lsd-spacing-smaller\) > *):is(span):last-child {
+    gap: var(--lsd-spacing-smaller);
   }
 
   .lsd\:\[\&\>\*\]\:focus-visible\:relative > :focus-visible {
@@ -2940,16 +2905,21 @@
     pointer-events: none;
   }
 
-  .lsd\:\[\&\>svg\]\:ml-2 > svg {
-    margin-left: calc(var(--lsd-spacing) * 2);
+  .lsd\:\[\&\>svg\]\:ml-\[var\(--lsd-spacing-base\)\] > svg {
+    margin-left: var(--lsd-spacing-base);
+  }
+
+  .lsd\:\[\&\>svg\]\:ml-\[var\(--lsd-spacing-small\)\] > svg {
+    margin-left: var(--lsd-spacing-small);
   }
 
-  .lsd\:\[\&\>svg\]\:ml-3 > svg {
-    margin-left: calc(var(--lsd-spacing) * 3);
+  .lsd\:\[\&\>svg\]\:ml-\[var\(--lsd-spacing-smaller\)\] > svg {
+    margin-left: var(--lsd-spacing-smaller);
   }
 
-  .lsd\:\[\&\>svg\]\:ml-3\.5 > svg {
-    margin-left: calc(var(--lsd-spacing) * 3.5);
+  .lsd\:\[\&\>svg\]\:size-\(--lsd-spacing-base\) > svg {
+    width: var(--lsd-spacing-base);
+    height: var(--lsd-spacing-base);
   }
 
   .lsd\:\[\&\>svg\]\:size-3 > svg {
@@ -2957,33 +2927,28 @@
     height: calc(var(--lsd-spacing) * 3);
   }
 
-  .lsd\:\[\&\>svg\]\:size-4 > svg {
-    width: calc(var(--lsd-spacing) * 4);
-    height: calc(var(--lsd-spacing) * 4);
+  .lsd\:\[\&\>svg\]\:h-\[var\(--lsd-spacing-base\)\] > svg {
+    height: var(--lsd-spacing-base);
   }
 
-  .lsd\:\[\&\>svg\]\:h-4 > svg {
-    height: calc(var(--lsd-spacing) * 4);
+  .lsd\:\[\&\>svg\]\:h-\[var\(--lsd-spacing-large\)\] > svg {
+    height: var(--lsd-spacing-large);
   }
 
-  .lsd\:\[\&\>svg\]\:h-5 > svg {
-    height: calc(var(--lsd-spacing) * 5);
+  .lsd\:\[\&\>svg\]\:h-\[var\(--lsd-spacing-larger\)\] > svg {
+    height: var(--lsd-spacing-larger);
   }
 
-  .lsd\:\[\&\>svg\]\:h-6 > svg {
-    height: calc(var(--lsd-spacing) * 6);
+  .lsd\:\[\&\>svg\]\:w-\[var\(--lsd-spacing-base\)\] > svg {
+    width: var(--lsd-spacing-base);
   }
 
-  .lsd\:\[\&\>svg\]\:w-4 > svg {
-    width: calc(var(--lsd-spacing) * 4);
-  }
-
-  .lsd\:\[\&\>svg\]\:w-5 > svg {
-    width: calc(var(--lsd-spacing) * 5);
+  .lsd\:\[\&\>svg\]\:w-\[var\(--lsd-spacing-large\)\] > svg {
+    width: var(--lsd-spacing-large);
   }
 
-  .lsd\:\[\&\>svg\]\:w-6 > svg {
-    width: calc(var(--lsd-spacing) * 6);
+  .lsd\:\[\&\>svg\]\:w-\[var\(--lsd-spacing-larger\)\] > svg {
+    width: var(--lsd-spacing-larger);
   }
 
   .lsd\:\[\&\>svg\]\:shrink-0 > svg {
@@ -2994,16 +2959,16 @@
     color: var(--sidebar-accent-foreground);
   }
 
-  [data-side="left"][data-collapsible="offcanvas"] .lsd\:\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
-    right: calc(var(--lsd-spacing) * -2);
+  [data-side="left"][data-collapsible="offcanvas"] .lsd\:\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-\(--lsd-spacing-smaller\) {
+    right: calc(var(--lsd-spacing-smaller) * -1);
   }
 
   [data-side="left"][data-state="collapsed"] .lsd\:\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
     cursor: e-resize;
   }
 
-  [data-side="right"][data-collapsible="offcanvas"] .lsd\:\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
-    left: calc(var(--lsd-spacing) * -2);
+  [data-side="right"][data-collapsible="offcanvas"] .lsd\:\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-\(--lsd-spacing-smaller\) {
+    left: calc(var(--lsd-spacing-smaller) * -1);
   }
 
   [data-side="right"][data-state="collapsed"] .lsd\:\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
@@ -3132,7 +3097,7 @@
   --lsd-spacing-base: 1rem;
   --lsd-spacing-large: 1.25rem;
   --lsd-spacing-larger: 1.5rem;
-  --lsd-spacing-largest: 1.875rem;
+  --lsd-spacing-largest: 1.75rem;
   --lsd-primary: #000;
   --lsd-primary-foreground: #fff;
   --lsd-text-primary: #000;
diff --git a/docs/assets/_virtual_cosmos-imports-BjJlCujV.js b/docs/assets/_virtual_cosmos-imports-DNh6WwHb.js
similarity index 97%
rename from docs/assets/_virtual_cosmos-imports-BjJlCujV.js
rename to docs/assets/_virtual_cosmos-imports-DNh6WwHb.js
index 0632cf92..b565bdf6 100644
--- a/docs/assets/_virtual_cosmos-imports-BjJlCujV.js
+++ b/docs/assets/_virtual_cosmos-imports-DNh6WwHb.js
@@ -1,4 +1,4 @@
-import { r as reactExports, g as getDefaultExportFromCjs, a as requireReactDom, R as React, b as React$1 } from "./index-BFuX6RyW.js";
+import { r as reactExports, g as getDefaultExportFromCjs, a as requireReactDom, R as React, b as React$1 } from "./index-B5zrIT0p.js";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production = {};
 var hasRequiredReactJsxRuntime_production;
@@ -8317,11 +8317,11 @@ function SelectScrollDownButton({
     {
       "data-slot": "select-scroll-down-button",
       className: cn$1(
-        "lsd:flex lsd:cursor-default lsd:items-center lsd:justify-center lsd:py-1 lsd:text-lsd-icon-primary",
+        "lsd:flex lsd:cursor-default lsd:items-center lsd:justify-center lsd:py-(--lsd-spacing-smallest) lsd:text-lsd-icon-primary",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "lsd:size-4" })
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "lsd:size-(--lsd-spacing-base)" })
     }
   );
 }
@@ -8334,11 +8334,11 @@ function SelectScrollUpButton({
     {
       "data-slot": "select-scroll-up-button",
       className: cn$1(
-        "lsd:flex lsd:cursor-default lsd:items-center lsd:justify-center lsd:py-1 lsd:text-lsd-icon-primary",
+        "lsd:flex lsd:cursor-default lsd:items-center lsd:justify-center lsd:py-(--lsd-spacing-smallest) lsd:text-lsd-icon-primary",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronUp, { className: "lsd:size-4" })
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronUp, { className: "lsd:size-(--lsd-spacing-base)" })
     }
   );
 }
@@ -8367,8 +8367,8 @@ function SelectContent({
           Viewport$1,
           {
             className: cn$1(
-              "lsd:p-1",
-              position === "popper" && "lsd:h-[var(--radix-select-trigger-height)] lsd:w-full lsd:min-w-[var(--radix-select-trigger-width)] lsd:scroll-my-1"
+              "lsd:p-(--lsd-spacing-smallest)",
+              position === "popper" && "lsd:h-(--radix-select-trigger-height) lsd:w-full lsd:min-w-(--radix-select-trigger-width) lsd:scroll-my-(--lsd-spacing-smallest)"
             ),
             children
           }
@@ -8393,12 +8393,12 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn$1(
-        "lsd:focus:bg-lsd-surface lsd:focus:text-lsd-text-primary lsd:[&_svg:not([class*='text-'])]:text-lsd-icon-primary lsd:relative lsd:flex lsd:w-full lsd:cursor-pointer lsd:items-center lsd:gap-2 lsd:py-1.5 lsd:pr-8 lsd:pl-2 lsd:text-sm lsd:outline-hidden lsd:select-none lsd:data-[disabled]:pointer-events-none lsd:data-[disabled]:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4 lsd:*:[span]:last:flex lsd:*:[span]:last:items-center lsd:*:[span]:last:gap-2 lsd:hover:underline lsd:focus:underline lsd:data-highlighted:underline",
+        "lsd:focus:bg-lsd-surface lsd:focus:text-lsd-text-primary lsd:[&_svg:not([class*='text-'])]:text-lsd-icon-primary lsd:relative lsd:flex lsd:w-full lsd:cursor-pointer lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:py-(--lsd-spacing-smaller) lsd:pr-8 lsd:pl-(--lsd-spacing-smaller) lsd:text-sm lsd:outline-hidden lsd:select-none lsd:data-disabled:pointer-events-none lsd:data-disabled:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-(--lsd-spacing-base) lsd:*:[span]:last:flex lsd:*:[span]:last:items-center lsd:*:[span]:last:gap-(--lsd-spacing-smaller) lsd:hover:underline lsd:focus:underline lsd:data-highlighted:underline",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:absolute lsd:right-2 lsd:flex lsd:size-3.5 lsd:items-center lsd:justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemIndicator$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "lsd:size-4 lsd:text-lsd-icon-primary" }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:absolute lsd:right-(--lsd-spacing-smaller) lsd:flex lsd:size-(--lsd-spacing-base) lsd:items-center lsd:justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemIndicator$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "lsd:size-(--lsd-spacing-base) lsd:text-lsd-icon-primary" }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { children })
       ]
     }
@@ -8413,7 +8413,7 @@ function SelectLabel({
     {
       "data-slot": "select-label",
       className: cn$1(
-        "lsd:text-lsd-text-secondary lsd:px-2 lsd:py-1.5 lsd:text-xs",
+        "lsd:text-lsd-text-secondary lsd:px-(--lsd-spacing-smaller) lsd:py-(--lsd-spacing-smaller) lsd:text-xs",
         className
       ),
       ...props
@@ -8429,7 +8429,7 @@ function SelectSeparator({
     {
       "data-slot": "select-separator",
       className: cn$1(
-        "lsd:bg-lsd-border lsd:pointer-events-none lsd:-mx-1 lsd:my-1 lsd:h-px",
+        "lsd:bg-lsd-border lsd:pointer-events-none lsd:-mx-(--lsd-spacing-smallest) lsd:my-(--lsd-spacing-smallest) lsd:h-px",
         className
       ),
       ...props
@@ -8448,13 +8448,13 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size2,
       className: cn$1(
-        "lsd:cursor-pointer lsd:border-lsd-border lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:data-[placeholder]:text-lsd-text-secondary lsd:[&_svg:not([class*='text-'])]:text-lsd-icon-primary lsd:focus-visible:border-lsd-border aria-invalid:lsd:ring-lsd-destructive/20 dark:aria-invalid:lsd:ring-lsd-destructive/40 aria-invalid:lsd:border-lsd-destructive dark:lsd:bg-lsd-surface/30 dark:lsd:hover:bg-lsd-surface/50 lsd:flex lsd:w-fit lsd:items-center lsd:justify-between lsd:gap-2 lsd:border lsd:px-3 lsd:py-2 lsd:text-sm lsd:whitespace-nowrap lsd:transition-[color,border] lsd:outline-none lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50 lsd:data-[size=default]:h-9 lsd:data-[size=sm]:h-8 *:lsd:data-[slot=select-value]:line-clamp-1 *:lsd:data-[slot=select-value]:flex *:lsd:data-[slot=select-value]:items-center *:lsd:data-[slot=select-value]:gap-2 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
+        "lsd:cursor-pointer lsd:border-lsd-border lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:data-placeholder:text-lsd-text-secondary lsd:[&_svg:not([class*='text-'])]:text-lsd-icon-primary lsd:focus-visible:border-lsd-border aria-invalid:lsd:ring-lsd-destructive/20 dark:aria-invalid:lsd:ring-lsd-destructive/40 aria-invalid:lsd:border-lsd-destructive dark:lsd:bg-lsd-surface/30 dark:lsd:hover:bg-lsd-surface/50 lsd:flex lsd:w-fit lsd:items-center lsd:justify-between lsd:gap-(--lsd-spacing-smaller) lsd:border lsd:px-(--lsd-spacing-small) lsd:py-(--lsd-spacing-smaller) lsd:text-sm lsd:whitespace-nowrap lsd:transition-[color,border] lsd:outline-none lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50 lsd:data-[size=default]:h-9 lsd:data-[size=sm]:h-8 *:lsd:data-[slot=select-value]:line-clamp-1 *:lsd:data-[slot=select-value]:flex *:lsd:data-[slot=select-value]:items-center *:lsd:data-[slot=select-value]:gap-[var(--lsd-spacing-smaller)] lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-(--lsd-spacing-base)",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "lsd:size-4 lsd:text-lsd-icon-primary" }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "lsd:size-(--lsd-spacing-base) lsd:text-lsd-icon-primary" }) })
       ]
     }
   );
@@ -8923,9 +8923,9 @@ const toggleVariants = cva(
   {
     variants: {
       size: {
-        sm: "lsd:h-8 lsd:min-w-8 lsd:px-2 lsd:py-[6px] lsd:text-[0.75rem]",
-        md: "lsd:h-10 lsd:min-w-10 lsd:px-3 lsd:py-[6px]",
-        lg: "lsd:h-12 lsd:min-w-12 lsd:px-4 lsd:py-[10px] lsd:text-[0.875rem]"
+        sm: "lsd:h-8 lsd:min-w-8 lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-[0.75rem]",
+        md: "lsd:h-10 lsd:min-w-10 lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)]",
+        lg: "lsd:h-12 lsd:min-w-12 lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-small)] lsd:text-[0.875rem]"
       }
     },
     defaultVariants: {
@@ -8991,8 +8991,8 @@ function ThemeToggle() {
       onValueChange: toggleTheme,
       "aria-label": "Theme toggle",
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupItem, { value: "light", "aria-label": "Light theme", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Sun, { className: "lsd:h-4 lsd:w-4" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupItem, { value: "dark", "aria-label": "Dark theme", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Moon, { className: "lsd:h-4 lsd:w-4" }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupItem, { value: "light", "aria-label": "Light theme", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Sun, { className: "lsd:h-(--lsd-spacing-base) lsd:w-(--lsd-spacing-base)" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupItem, { value: "dark", "aria-label": "Dark theme", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Moon, { className: "lsd:h-(--lsd-spacing-base) lsd:w-(--lsd-spacing-base)" }) })
       ]
     }
   );
@@ -9702,11 +9702,11 @@ function AccordionContent({
   const getPaddingBottom = () => {
     switch (size2) {
       case "sm":
-        return "lsd:pb-2";
+        return "lsd:pb-[var(--lsd-spacing-smaller)]";
       case "lg":
-        return "lsd:pb-6";
+        return "lsd:pb-[var(--lsd-spacing-larger)]";
       default:
-        return "lsd:pb-4";
+        return "lsd:pb-[var(--lsd-spacing-base)]";
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9774,7 +9774,7 @@ function CodeBlock({ className, code, ...props }) {
     "pre",
     {
       className: cn$1(
-        "lsd:overflow-x-auto lsd:rounded-md lsd:bg-lsd-surface lsd:p-4 lsd:text-sm lsd:text-lsd-text-primary",
+        "lsd:overflow-x-auto lsd:rounded-md lsd:bg-lsd-surface lsd:p-(--lsd-spacing-base) lsd:text-sm lsd:text-lsd-text-primary",
         className
       ),
       ...props,
@@ -9783,7 +9783,7 @@ function CodeBlock({ className, code, ...props }) {
   );
 }
 function CodeExample({ children, code }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lsd:space-y-4", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lsd:space-y-(--lsd-spacing-base)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Accordion, { type: "single", collapsible: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "code", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { children: "View Code" }),
@@ -10184,7 +10184,7 @@ function FontToggle() {
     root.classList.remove("font-mono", "font-sans", "font-serif");
     root.classList.add(`font-${font}`);
   }, [font]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lsd:flex lsd:items-center lsd:space-x-2", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lsd:flex lsd:items-center lsd:space-x-(--lsd-spacing-smaller)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:text-sm", children: "Font:" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       ToggleGroup,
@@ -10878,9 +10878,9 @@ const tabsTriggerVariants = cva(
   {
     variants: {
       size: {
-        sm: "lsd:px-3 lsd:py-1.5 lsd:text-sm lsd:[&>svg]:ml-2 lsd:[&>svg]:h-4 lsd:[&>svg]:w-4",
-        md: "lsd:px-4 lsd:py-2 lsd:text-base lsd:[&>svg]:ml-3 lsd:[&>svg]:h-5 lsd:[&>svg]:w-5",
-        lg: "lsd:px-5 lsd:py-2.5 lsd:text-lg lsd:[&>svg]:ml-3.5 lsd:[&>svg]:h-6 lsd:[&>svg]:w-6"
+        sm: "lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm lsd:[&>svg]:ml-[var(--lsd-spacing-smaller)] lsd:[&>svg]:h-[var(--lsd-spacing-base)] lsd:[&>svg]:w-[var(--lsd-spacing-base)]",
+        md: "lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-base lsd:[&>svg]:ml-[var(--lsd-spacing-small)] lsd:[&>svg]:h-[var(--lsd-spacing-large)] lsd:[&>svg]:w-[var(--lsd-spacing-large)]",
+        lg: "lsd:px-[var(--lsd-spacing-large)] lsd:py-[var(--lsd-spacing-small)] lsd:text-lg lsd:[&>svg]:ml-[var(--lsd-spacing-base)] lsd:[&>svg]:h-[var(--lsd-spacing-larger)] lsd:[&>svg]:w-[var(--lsd-spacing-larger)]"
       },
       fullWidth: {
         true: "lsd:flex-1",
@@ -11497,9 +11497,9 @@ const switchVariants = cva(
   {
     variants: {
       size: {
-        sm: "lsd:h-[14px] lsd:w-7",
-        md: "lsd:h-[18px] lsd:w-9",
-        lg: "lsd:h-[24px] lsd:w-12"
+        sm: "lsd:h-[var(--lsd-spacing-base)] lsd:w-[var(--lsd-spacing-largest)]",
+        md: "lsd:h-[var(--lsd-spacing-large)] lsd:w-9",
+        lg: "lsd:h-[var(--lsd-spacing-larger)] lsd:w-12"
       }
     },
     defaultVariants: {
@@ -11512,9 +11512,9 @@ const thumbVariants = cva(
   {
     variants: {
       size: {
-        sm: "lsd:size-3 lsd:data-[state=checked]:translate-x-[calc(100%-2px)]",
-        md: "lsd:size-5 lsd:data-[state=checked]:translate-x-[calc(100%-2px)]",
-        lg: "lsd:size-6 lsd:data-[state=checked]:translate-x-[calc(100%-2px)]"
+        sm: "lsd:size-[var(--lsd-spacing-small)] lsd:data-[state=checked]:translate-x-[calc(100%-2px)]",
+        md: "lsd:size-[var(--lsd-spacing-large)] lsd:data-[state=checked]:translate-x-[calc(100%-2px)]",
+        lg: "lsd:size-[var(--lsd-spacing-larger)] lsd:data-[state=checked]:translate-x-[calc(100%-2px)]"
       }
     },
     defaultVariants: {
@@ -12852,16 +12852,12 @@ const buttonVariants = cva(
         "success-icon": "lsd:bg-lsd-success lsd:text-white lsd:border-lsd-success lsd:rounded-full lsd:hover:bg-lsd-success/90"
       },
       size: {
-        xs: "lsd:h-7 lsd:px-2 lsd:py-1 lsd:text-xs",
-        sm: "lsd:h-8 lsd:px-3 lsd:py-[6px] lsd:text-sm",
-        md: "lsd:h-[34px] lsd:px-6 lsd:py-2 lsd:text-base",
-        lg: "lsd:h-12 lsd:px-8 lsd:py-[10px] lsd:text-lg",
-        xl: "lsd:h-14 lsd:px-10 lsd:py-3 lsd:text-xl",
-        "icon-xs": "lsd:w-6 lsd:h-6",
+        sm: "lsd:h-8 lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm",
+        md: "lsd:h-10 lsd:px-[var(--lsd-spacing-larger)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-base",
+        lg: "lsd:h-12 lsd:px-8 lsd:py-[var(--lsd-spacing-small)] lsd:text-lg",
         "icon-sm": "lsd:w-8 lsd:h-8",
         "icon-md": "lsd:w-10 lsd:h-10",
-        "icon-lg": "lsd:w-12 lsd:h-12",
-        "icon-xl": "lsd:w-16 lsd:h-16"
+        "icon-lg": "lsd:w-12 lsd:h-12"
       }
     },
     defaultVariants: {
@@ -12872,25 +12868,20 @@ const buttonVariants = cva(
 );
 const LoadingSpinner = ({ size: size2 }) => {
   const getSpinnerSize = () => {
+    const md = "lsd:w-[var(--lsd-spacing-large)] lsd:h-[var(--lsd-spacing-large)]";
     switch (size2) {
-      case "xs":
-      case "icon-xs":
-        return "lsd:w-3 lsd:h-3";
       case "icon-sm":
-        return "lsd:w-3 lsd:h-3";
+        return "lsd:w-[var(--lsd-spacing-small)] lsd:h-[var(--lsd-spacing-small)]";
       case "sm":
-        return "lsd:w-4 lsd:h-4";
+        return "lsd:w-[var(--lsd-spacing-base)] lsd:h-[var(--lsd-spacing-base)]";
       case "md":
       case "icon-md":
-        return "lsd:w-5 lsd:h-5";
+        return md;
       case "lg":
       case "icon-lg":
-        return "lsd:w-6 lsd:h-6";
-      case "xl":
-      case "icon-xl":
-        return "lsd:w-7 lsd:h-7";
+        return "lsd:w-[var(--lsd-spacing-larger)] lsd:h-[var(--lsd-spacing-larger)]";
       default:
-        return "lsd:w-5 lsd:h-5";
+        return md;
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -12951,7 +12942,7 @@ const Button = reactExports.forwardRef(
         ref,
         disabled: disabled || loading,
         ...props,
-        children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "lsd:flex lsd:items-center lsd:justify-center lsd:gap-2", children: [
+        children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "lsd:flex lsd:items-center lsd:justify-center lsd:gap-(--lsd-spacing-smaller)", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingSpinner, { size: size2 }),
           children && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:opacity-50", children })
         ] }) : children
@@ -13678,7 +13669,7 @@ function SheetContent({
       {
         "data-slot": "sheet-content",
         className: cn$1(
-          "lsd:bg-background lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:fixed lsd:z-50 lsd:flex lsd:flex-col lsd:gap-4 lsd:shadow-lg lsd:transition lsd:ease-in-out lsd:data-[state=closed]:duration-300 lsd:data-[state=open]:duration-500",
+          "lsd:bg-background lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:fixed lsd:z-50 lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-base) lsd:shadow-lg lsd:transition lsd:ease-in-out lsd:data-[state=closed]:duration-300 lsd:data-[state=open]:duration-500",
           side === "right" && "lsd:data-[state=closed]:slide-out-to-right lsd:data-[state=open]:slide-in-from-right lsd:inset-y-0 lsd:right-0 lsd:h-full lsd:w-3/4 lsd:border-l lsd:sm:max-w-sm",
           side === "left" && "lsd:data-[state=closed]:slide-out-to-left lsd:data-[state=open]:slide-in-from-left lsd:inset-y-0 lsd:left-0 lsd:h-full lsd:w-3/4 lsd:border-r lsd:sm:max-w-sm",
           side === "top" && "lsd:data-[state=closed]:slide-out-to-top lsd:data-[state=open]:slide-in-from-top lsd:inset-x-0 lsd:top-0 lsd:h-auto lsd:border-b",
@@ -13688,8 +13679,8 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Close, { className: "lsd:data-[state=open]:bg-secondary lsd:absolute lsd:top-4 lsd:right-4 lsd:rounded-xs lsd:opacity-70 lsd:transition-opacity lsd:hover:opacity-100 lsd:p-2 lsd:cursor-pointer lsd:disabled:pointer-events-none", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "lsd:size-4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Close, { className: "lsd:data-[state=open]:bg-secondary lsd:absolute lsd:top-(--lsd-spacing-base) lsd:right-(--lsd-spacing-base) lsd:rounded-xs lsd:opacity-70 lsd:transition-opacity lsd:hover:opacity-100 lsd:p-(--lsd-spacing-smaller) lsd:cursor-pointer lsd:disabled:pointer-events-none", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "lsd:size-(--lsd-spacing-base)" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:sr-only", children: "Close" })
           ] })
         ]
@@ -13719,7 +13710,7 @@ function SheetFooter({
     {
       "data-slot": "sheet-footer",
       className: cn$1(
-        "lsd:mt-auto lsd:flex lsd:flex-col lsd:gap-2 lsd:p-4",
+        "lsd:mt-auto lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:p-(--lsd-spacing-base)",
         className
       ),
       ...props
@@ -13734,7 +13725,10 @@ function SheetHeader({
     "div",
     {
       "data-slot": "sheet-header",
-      className: cn$1("lsd:flex lsd:flex-col lsd:gap-1.5 lsd:p-4", className),
+      className: cn$1(
+        "lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:p-(--lsd-spacing-base)",
+        className
+      ),
       ...props
     }
   );
@@ -14296,7 +14290,7 @@ function useIsMobile() {
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button lsd:flex lsd:w-full lsd:items-center lsd:gap-2 lsd:overflow-hidden lsd:rounded-md lsd:p-2 lsd:text-left lsd:text-sm lsd:outline-hidden ring-sidebar-ring lsd:transition-[width,height,padding] lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:focus-visible:ring-2 lsd:active:bg-sidebar-accent lsd:active:text-sidebar-accent-foreground lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:bg-sidebar-accent lsd:data-[active=true]:font-medium lsd:data-[active=true]:text-sidebar-accent-foreground lsd:data-[state=open]:hover:bg-sidebar-accent lsd:data-[state=open]:hover:text-sidebar-accent-foreground lsd:group-data-[collapsible=icon]:size-8! lsd:group-data-[collapsible=icon]:p-2! lsd:[&>span:last-child]:truncate lsd:[&>svg]:size-4 lsd:[&>svg]:shrink-0 lsd:hover:underline lsd:focus:underline",
+  "peer/menu-button lsd:flex lsd:w-full lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:overflow-hidden lsd:rounded-md lsd:p-(--lsd-spacing-smaller) lsd:text-left lsd:text-sm lsd:outline-hidden ring-sidebar-ring lsd:transition-[width,height,padding] lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:focus-visible:ring-2 lsd:active:bg-sidebar-accent lsd:active:text-sidebar-accent-foreground lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:bg-sidebar-accent lsd:data-[active=true]:font-medium lsd:data-[active=true]:text-sidebar-accent-foreground lsd:data-[state=open]:hover:bg-sidebar-accent lsd:data-[state=open]:hover:text-sidebar-accent-foreground lsd:group-data-[collapsible=icon]:size-8! lsd:group-data-[collapsible=icon]:p-(--lsd-spacing-smaller)! lsd:[&>span:last-child]:truncate lsd:[&>svg]:size-(--lsd-spacing-base) lsd:[&>svg]:shrink-0 lsd:hover:underline lsd:focus:underline",
   {
     variants: {
       variant: {
@@ -14305,7 +14299,7 @@ const sidebarMenuButtonVariants = cva(
       },
       size: {
         default: "lsd:h-8 lsd:text-sm",
-        sm: "lsd:h-7 lsd:text-xs",
+        sm: "lsd:h-(--lsd-spacing-largest) lsd:text-xs",
         lg: "lsd:h-12 lsd:text-sm lsd:group-data-[collapsible=icon]:p-0!"
       }
     },
@@ -14468,7 +14462,7 @@ function Sidebar({
               "lsd:fixed lsd:inset-y-0 lsd:z-10 lsd:hidden lsd:h-svh lsd:w-(--sidebar-width) lsd:transition-[left,right,width] lsd:duration-200 lsd:ease-linear lsd:md:flex",
               side === "left" ? "lsd:left-0 lsd:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "lsd:right-0 lsd:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
               // Adjust the padding for floating and inset variants.
-              variant === "floating" || variant === "inset" ? "lsd:p-2 lsd:group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "lsd:group-data-[collapsible=icon]:w-(--sidebar-width-icon) lsd:group-data-[side=left]:border-r lsd:group-data-[side=right]:border-l",
+              variant === "floating" || variant === "inset" ? "lsd:p-(--lsd-spacing-smaller) lsd:group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "lsd:group-data-[collapsible=icon]:w-(--sidebar-width-icon) lsd:group-data-[side=left]:border-r lsd:group-data-[side=right]:border-l",
               className
             ),
             ...props,
@@ -14504,19 +14498,20 @@ function getTextSizeClasses(size2) {
   }
 }
 function getVerticalPaddingClasses(size2) {
+  const md = "lsd:py-[var(--lsd-spacing-small)]";
   switch (size2) {
     case "xs":
-      return "lsd:py-1";
+      return "lsd:py-[var(--lsd-spacing-smallest)]";
     case "sm":
-      return "lsd:py-2";
+      return "lsd:py-[var(--lsd-spacing-smaller)]";
     case "md":
-      return "lsd:py-3";
+      return md;
     case "lg":
-      return "lsd:py-4";
+      return "lsd:py-[var(--lsd-spacing-base)]";
     case "xl":
-      return "lsd:py-5";
+      return "lsd:py-[var(--lsd-spacing-large)]";
     default:
-      return "lsd:py-3";
+      return md;
   }
 }
 function getLabelSizeClasses(size2) {
@@ -14574,7 +14569,7 @@ const Input = reactExports.forwardRef(
               id: finalId,
               className: cn$1(
                 "file:lsd:text-lsd-text-primary placeholder:lsd:text-lsd-text-primary placeholder:lsd:opacity-30 selection:lsd:bg-lsd-primary selection:lsd:text-lsd-surface lsd:border-none lsd:outline-none lsd:bg-transparent lsd:text-lsd-text-primary lsd:w-full lsd:h-full file:lsd:inline-flex file:lsd:h-7 file:lsd:border-0 file:lsd:bg-transparent file:lsd:font-medium lsd:disabled:pointer-events-none lsd:disabled:cursor-not-allowed lsd:disabled:opacity-34",
-                "focus-visible:lsd:outline-none lsd:px-4",
+                "focus-visible:lsd:outline-none lsd:px-(--lsd-spacing-base)",
                 getTextSizeClasses(size2),
                 getVerticalPaddingClasses(size2)
               ),
@@ -14583,7 +14578,7 @@ const Input = reactExports.forwardRef(
           )
         }
       ),
-      supportingText && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lsd:pt-1.5 lsd:w-fit", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      supportingText && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lsd:pt-(--lsd-spacing-smaller) lsd:w-fit", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "p",
         {
           className: cn$1(
@@ -14776,7 +14771,7 @@ function SidebarContent({ className, ...props }) {
       "data-slot": "sidebar-content",
       "data-sidebar": "content",
       className: cn$1(
-        "lsd:flex lsd:min-h-0 lsd:flex-1 lsd:flex-col lsd:gap-2 lsd:overflow-auto lsd:group-data-[collapsible=icon]:overflow-hidden",
+        "lsd:flex lsd:min-h-0 lsd:flex-1 lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:overflow-auto lsd:group-data-[collapsible=icon]:overflow-hidden",
         className
       ),
       ...props
@@ -14789,7 +14784,10 @@ function SidebarHeader({ className, ...props }) {
     {
       "data-slot": "sidebar-header",
       "data-sidebar": "header",
-      className: cn$1("lsd:flex lsd:flex-col lsd:gap-2 lsd:p-2", className),
+      className: cn$1(
+        "lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:p-(--lsd-spacing-smaller)",
+        className
+      ),
       ...props
     }
   );
@@ -14800,7 +14798,10 @@ function SidebarFooter({ className, ...props }) {
     {
       "data-slot": "sidebar-footer",
       "data-sidebar": "footer",
-      className: cn$1("lsd:flex lsd:flex-col lsd:gap-2 lsd:p-2", className),
+      className: cn$1(
+        "lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:p-(--lsd-spacing-smaller)",
+        className
+      ),
       ...props
     }
   );
@@ -14826,7 +14827,7 @@ function SidebarInset({ className, ...props }) {
       "data-slot": "sidebar-inset",
       className: cn$1(
         "lsd:bg-background lsd:relative lsd:flex lsd:w-full lsd:flex-1 lsd:flex-col",
-        "lsd:md:peer-data-[variant=inset]:m-2 lsd:md:peer-data-[variant=inset]:ml-0 lsd:md:peer-data-[variant=inset]:rounded-xl lsd:md:peer-data-[variant=inset]:shadow-sm lsd:md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "lsd:md:peer-data-[variant=inset]:m-(--lsd-spacing-smaller) lsd:md:peer-data-[variant=inset]:ml-0 lsd:md:peer-data-[variant=inset]:rounded-xl lsd:md:peer-data-[variant=inset]:shadow-sm lsd:md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-(--lsd-spacing-smaller)",
         className
       ),
       ...props
@@ -14845,7 +14846,7 @@ function SidebarTrigger({
       "data-sidebar": "trigger",
       "data-slot": "sidebar-trigger",
       variant: "ghost",
-      size: "icon-xs",
+      size: "icon-sm",
       className,
       onClick: (event) => {
         onClick?.(event);
@@ -14853,7 +14854,7 @@ function SidebarTrigger({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(PanelLeft, { className: "lsd:size-full" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(PanelLeft, { className: "lsd:size-3/4" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:sr-only", children: "Toggle Sidebar" })
       ]
     }
@@ -14866,7 +14867,7 @@ function SidebarGroup({ className, ...props }) {
       "data-slot": "sidebar-group",
       "data-sidebar": "group",
       className: cn$1(
-        "lsd:relative lsd:flex lsd:w-full lsd:min-w-0 lsd:flex-col lsd:p-2",
+        "lsd:relative lsd:flex lsd:w-full lsd:min-w-0 lsd:flex-col lsd:p-(--lsd-spacing-smaller)",
         className
       ),
       ...props
@@ -14885,7 +14886,7 @@ function SidebarGroupLabel({
       "data-slot": "sidebar-group-label",
       "data-sidebar": "group-label",
       className: cn$1(
-        "lsd:text-sidebar-foreground/70 ring-sidebar-ring lsd:flex lsd:h-8 lsd:shrink-0 lsd:items-center lsd:rounded-md lsd:px-2 lsd:text-xs lsd:font-medium lsd:outline-hidden lsd:transition-[margin,opacity] lsd:duration-200 lsd:ease-linear lsd:focus-visible:ring-2 lsd:[&>svg]:size-4 lsd:[&>svg]:shrink-0",
+        "lsd:text-sidebar-foreground/70 ring-sidebar-ring lsd:flex lsd:h-8 lsd:shrink-0 lsd:items-center lsd:rounded-md lsd:px-(--lsd-spacing-smaller) lsd:text-xs lsd:font-medium lsd:outline-hidden lsd:transition-[margin,opacity] lsd:duration-200 lsd:ease-linear lsd:focus-visible:ring-2 lsd:[&>svg]:size-(--lsd-spacing-base) lsd:[&>svg]:shrink-0",
         "lsd:group-data-[collapsible=icon]:-mt-8 lsd:group-data-[collapsible=icon]:opacity-0",
         className
       ),
@@ -14914,7 +14915,7 @@ function SidebarMenu({ className, ...props }) {
       "data-slot": "sidebar-menu",
       "data-sidebar": "menu",
       className: cn$1(
-        "lsd:flex lsd:w-full lsd:min-w-0 lsd:flex-col lsd:gap-1",
+        "lsd:flex lsd:w-full lsd:min-w-0 lsd:flex-col lsd:gap-(--lsd-spacing-smallest)",
         className
       ),
       ...props
@@ -14982,7 +14983,7 @@ function SidebarMenuSub({ className, ...props }) {
       "data-slot": "sidebar-menu-sub",
       "data-sidebar": "menu-sub",
       className: cn$1(
-        "border-sidebar-border lsd:mx-3.5 lsd:flex lsd:min-w-0 lsd:translate-x-px lsd:flex-col lsd:gap-1 lsd:border-l lsd:px-2.5 lsd:py-0.5",
+        "border-sidebar-border lsd:mx-(--lsd-spacing-base) lsd:flex lsd:min-w-0 lsd:translate-x-px lsd:flex-col lsd:gap-(--lsd-spacing-smallest) lsd:border-l lsd:px-(--lsd-spacing-small) lsd:py-(--lsd-spacing-smallest)",
         "lsd:group-data-[collapsible=icon]:hidden",
         className
       ),
@@ -15020,7 +15021,7 @@ function SidebarMenuSubButton({
       "data-size": size2,
       "data-active": isActive,
       className: cn$1(
-        "lsd:text-sidebar-foreground ring-sidebar-ring lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:active:bg-sidebar-accent lsd:active:text-sidebar-accent-foreground lsd:[&>svg]:text-sidebar-accent-foreground lsd:flex lsd:h-7 lsd:min-w-0 lsd:-translate-x-px lsd:items-center lsd:gap-2 lsd:overflow-hidden lsd:rounded-md lsd:px-2 lsd:outline-hidden lsd:focus-visible:ring-2 lsd:disabled:pointer-events-none lsd:disabled:opacity-50 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:bg-sidebar-accent lsd:data-[active=true]:text-sidebar-accent-foreground lsd:hover:underline lsd:focus:underline",
+        "lsd:text-sidebar-foreground ring-sidebar-ring lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:active:bg-sidebar-accent lsd:active:text-sidebar-accent-foreground lsd:[&>svg]:text-sidebar-accent-foreground lsd:flex lsd:h-(--lsd-spacing-largest) lsd:min-w-0 lsd:-translate-x-px lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:overflow-hidden lsd:rounded-md lsd:px-(--lsd-spacing-smaller) lsd:outline-hidden lsd:focus-visible:ring-2 lsd:disabled:pointer-events-none lsd:disabled:opacity-50 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:bg-sidebar-accent lsd:data-[active=true]:text-sidebar-accent-foreground lsd:hover:underline lsd:focus:underline",
         size2 === "sm" && "lsd:text-xs",
         size2 === "md" && "lsd:text-sm",
         "lsd:group-data-[collapsible=icon]:hidden",
@@ -15228,7 +15229,7 @@ var Label$2 = reactExports.forwardRef((props, forwardedRef) => {
 Label$2.displayName = NAME;
 var Root$2 = Label$2;
 const labelVariants = cva(
-  "lsd:flex lsd:items-center lsd:gap-2 lsd:select-none lsd:group-data-[disabled=true]:pointer-events-none lsd:group-data-[disabled=true]:opacity-50 lsd:peer-disabled:cursor-not-allowed lsd:peer-disabled:opacity-50",
+  "lsd:flex lsd:items-center lsd:gap-[var(--lsd-spacing-smaller)] lsd:select-none lsd:group-data-[disabled=true]:pointer-events-none lsd:group-data-[disabled=true]:opacity-50 lsd:peer-disabled:cursor-not-allowed lsd:peer-disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -15598,7 +15599,10 @@ const CardContent = reactExports.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       "data-slot": "card-content",
-      className: cn$1("lsd:px-6 lsd:py-6", className),
+      className: cn$1(
+        "lsd:px-(--lsd-spacing-larger) lsd:py-(--lsd-spacing-larger)",
+        className
+      ),
       ...props
     }
   );
@@ -15623,7 +15627,7 @@ const CardFooter = reactExports.forwardRef(({ className, ...props }, ref) => {
       ref,
       "data-slot": "card-footer",
       className: cn$1(
-        "lsd:flex lsd:items-center lsd:px-6 lsd:py-6 lsd:border-t lsd:border-lsd-border lsd:pt-6",
+        "lsd:flex lsd:items-center lsd:px-(--lsd-spacing-larger) lsd:py-(--lsd-spacing-larger) lsd:border-t lsd:border-lsd-border lsd:pt-(--lsd-spacing-larger)",
         className
       ),
       ...props
@@ -15638,7 +15642,7 @@ const CardHeader = reactExports.forwardRef(({ className, ...props }, ref) => {
       ref,
       "data-slot": "card-header",
       className: cn$1(
-        "@container/card-header lsd:grid lsd:auto-rows-min lsd:grid-rows-[auto_auto] lsd:items-start lsd:gap-2 lsd:px-6 lsd:py-6 lsd:has-data-[slot=card-action]:grid-cols-[1fr_auto] lsd:border-b lsd:border-lsd-border lsd:pb-6",
+        "@container/card-header lsd:grid lsd:auto-rows-min lsd:grid-rows-[auto_auto] lsd:items-start lsd:gap-(--lsd-spacing-smaller) lsd:px-(--lsd-spacing-larger) lsd:py-(--lsd-spacing-larger) lsd:has-data-[slot=card-action]:grid-cols-[1fr_auto] lsd:border-b lsd:border-lsd-border lsd:pb-(--lsd-spacing-larger)",
         className
       ),
       ...props
@@ -16876,8 +16880,8 @@ function ScrollBar({
       orientation,
       className: cn$1(
         "lsd:flex lsd:touch-none lsd:p-px lsd:transition-colors lsd:select-none",
-        orientation === "vertical" && "lsd:h-full lsd:w-2.5 lsd:border-l lsd:border-l-transparent",
-        orientation === "horizontal" && "lsd:h-2.5 lsd:flex-col lsd:border-t lsd:border-t-transparent",
+        orientation === "vertical" && "lsd:h-full lsd:w-(--lsd-spacing-small) lsd:border-l lsd:border-l-transparent",
+        orientation === "horizontal" && "lsd:h-(--lsd-spacing-small) lsd:flex-col lsd:border-t lsd:border-t-transparent",
         className
       ),
       ...props,
@@ -17264,9 +17268,9 @@ const Progress = reactExports.forwardRef(
       destructive: "lsd:bg-lsd-destructive"
     };
     const sizeClasses = {
-      sm: "lsd:h-2",
-      md: "lsd:h-3",
-      lg: "lsd:h-4"
+      sm: "lsd:h-[var(--lsd-spacing-smaller)]",
+      md: "lsd:h-[var(--lsd-spacing-small)]",
+      lg: "lsd:h-[var(--lsd-spacing-base)]"
     };
     const indeterminateAnimationClasses = indeterminate ? cn$1(
       "lsd:w-1/3",
@@ -17277,7 +17281,7 @@ const Progress = reactExports.forwardRef(
     ) : "lsd:w-full";
     const labelText = showLabel ? `${value ?? 0}%` : null;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lsd:w-full", children: [
-      showLabel && labelText && labelPosition === "top" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lsd:mb-0.5 lsd:text-sm lsd:font-medium lsd:text-lsd-text-primary lsd:text-center", children: labelText }),
+      showLabel && labelText && labelPosition === "top" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lsd:mb-(--lsd-spacing-smallest) lsd:text-sm lsd:font-medium lsd:text-lsd-text-primary lsd:text-center", children: labelText }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Root,
         {
@@ -17304,7 +17308,7 @@ const Progress = reactExports.forwardRef(
           )
         }
       ),
-      showLabel && labelText && labelPosition === "bottom" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lsd:mt-0.5 lsd:text-sm lsd:font-medium lsd:text-lsd-text-primary lsd:text-center", children: labelText })
+      showLabel && labelText && labelPosition === "bottom" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lsd:mt-(--lsd-spacing-smallest) lsd:text-sm lsd:font-medium lsd:text-lsd-text-primary lsd:text-center", children: labelText })
     ] });
   }
 );
@@ -17937,7 +17941,7 @@ function PopoverContent({
       align,
       sideOffset,
       className: cn$1(
-        "lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2 lsd:z-50 lsd:w-72 origin-(--radix-popover-content-transform-origin) lsd:border lsd:border-lsd-border lsd:p-4 lsd:shadow-md lsd:outline-hidden",
+        "lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2 lsd:z-50 lsd:w-72 origin-(--radix-popover-content-transform-origin) lsd:border lsd:border-lsd-border lsd:p-(--lsd-spacing-base) lsd:shadow-md lsd:outline-hidden",
         className
       ),
       ...props
@@ -18183,11 +18187,9 @@ const badgeVariants = cva(
         dot: "lsd:rounded-full lsd:w-fit lsd:h-fit lsd:p-0"
       },
       size: {
-        xs: "lsd:h-[20px] lsd:px-[5px] lsd:py-[3px] lsd:gap-[4px] lsd:text-[0.625rem] [&>svg]:size-[10px]",
-        sm: "lsd:h-[24px] lsd:px-[7px] lsd:py-[3px] lsd:gap-[4px] lsd:text-[0.75rem] [&>svg]:size-3",
-        md: "lsd:h-[28px] lsd:px-[11px] lsd:py-[3px] lsd:gap-[6px] lsd:text-[0.875rem] [&>svg]:size-3",
-        lg: "lsd:h-[32px] lsd:px-[13px] lsd:py-[3px] lsd:gap-[8px] lsd:text-[1rem] [&>svg]:size-[14px]",
-        xl: "lsd:h-[36px] lsd:px-[15px] lsd:py-[3px] lsd:gap-[10px] lsd:text-[1.125rem] [&>svg]:size-[16px]"
+        sm: "lsd:h-[var(--lsd-spacing-larger)] lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smallest)] lsd:gap-[var(--lsd-spacing-smallest)] lsd:text-[0.75rem] [&>svg]:size-3",
+        md: "lsd:h-[var(--lsd-spacing-largest)] lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smallest)] lsd:gap-[var(--lsd-spacing-smaller)] lsd:text-[0.875rem] [&>svg]:size-3",
+        lg: "lsd:h-8 lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smallest)] lsd:gap-[var(--lsd-spacing-smaller)] lsd:text-[1rem] [&>svg]:size-[14px]"
       }
     },
     defaultVariants: {
@@ -18242,19 +18244,16 @@ function Badge({
     onDismiss?.();
   };
   const getDotSize = () => {
+    const md = "lsd:w-[var(--lsd-spacing-small)] lsd:h-[var(--lsd-spacing-small)]";
     switch (size2) {
-      case "xs":
-        return "lsd:w-[8px] lsd:h-[8px]";
       case "sm":
-        return "lsd:w-[10px] lsd:h-[10px]";
+        return "lsd:w-[var(--lsd-spacing-smaller)] lsd:h-[var(--lsd-spacing-smaller)]";
       case "md":
-        return "lsd:w-[12px] lsd:h-[12px]";
+        return md;
       case "lg":
-        return "lsd:w-[14px] lsd:h-[14px]";
-      case "xl":
-        return "lsd:w-[16px] lsd:h-[16px]";
+        return "lsd:w-[var(--lsd-spacing-base)] lsd:h-[var(--lsd-spacing-base)]";
       default:
-        return "lsd:w-[12px] lsd:h-[12px]";
+        return md;
     }
   };
   const dotClasses = isDot ? getDotSize() : "";
@@ -18558,7 +18557,7 @@ function Checkbox({
     {
       "data-slot": "checkbox",
       className: cn$1(
-        "peer lsd:border-lsd-border dark:lsd:bg-lsd-surface/30 lsd:data-[state=checked]:bg-lsd-primary lsd:data-[state=checked]:text-lsd-surface dark:lsd:data-[state=checked]:bg-lsd-primary lsd:data-[state=checked]:border-lsd-primary focus-visible:lsd:border-lsd-border focus-visible:lsd:ring-lsd-text/50 aria-invalid:lsd:ring-lsd-destructive/20 dark:aria-invalid:lsd:ring-lsd-destructive/40 aria-invalid:lsd:border-lsd-destructive lsd:size-5 lsd:shrink-0 lsd:border lsd:shadow-xs lsd:transition-shadow lsd:outline-none focus-visible:lsd:ring-[3px] lsd:cursor-pointer lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50",
+        "peer lsd:border-lsd-border dark:lsd:bg-lsd-surface/30 lsd:data-[state=checked]:bg-lsd-primary lsd:data-[state=checked]:text-lsd-surface dark:lsd:data-[state=checked]:bg-lsd-primary lsd:data-[state=checked]:border-lsd-primary focus-visible:lsd:border-lsd-border focus-visible:lsd:ring-lsd-text/50 aria-invalid:lsd:ring-lsd-destructive/20 dark:aria-invalid:lsd:ring-lsd-destructive/40 aria-invalid:lsd:border-lsd-destructive lsd:size-(--lsd-spacing-large) lsd:shrink-0 lsd:border lsd:shadow-xs lsd:transition-shadow lsd:outline-none focus-visible:lsd:ring-[3px] lsd:cursor-pointer lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50",
         className
       ),
       ...props,
@@ -18567,7 +18566,7 @@ function Checkbox({
         {
           "data-slot": "checkbox-indicator",
           className: "lsd:flex lsd:items-center lsd:justify-center lsd:text-current lsd:transition-none",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "lsd:size-4" })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "lsd:size-(--lsd-spacing-base)" })
         }
       )
     }
@@ -20100,13 +20099,13 @@ var Sub2 = MenubarSub$1;
 var SubTrigger2 = MenubarSubTrigger$1;
 var SubContent2 = MenubarSubContent$1;
 const menubarVariants = cva(
-  "lsd:flex lsd:h-9 lsd:items-center lsd:gap-1 lsd:border lsd:border-lsd-border lsd:bg-lsd-surface lsd:p-1 lsd:shadow-xs"
+  "lsd:flex lsd:h-9 lsd:items-center lsd:gap-[var(--lsd-spacing-smallest)] lsd:border lsd:border-lsd-border lsd:bg-lsd-surface lsd:p-[var(--lsd-spacing-smallest)] lsd:shadow-xs"
 );
 const menubarTriggerVariants = cva(
-  "lsd:cursor-pointer lsd:flex lsd:items-center lsd:px-2 lsd:py-1 lsd:text-sm lsd:font-medium lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:hover:underline lsd:focus:underline lsd:data-[state=open]:bg-lsd-surface-secondary lsd:data-[state=open]:text-lsd-text-primary lsd:transition-colors"
+  "lsd:cursor-pointer lsd:flex lsd:items-center lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smallest)] lsd:text-sm lsd:font-medium lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:hover:underline lsd:focus:underline lsd:data-[state=open]:bg-lsd-surface-secondary lsd:data-[state=open]:text-lsd-text-primary lsd:transition-colors"
 );
 const menubarItemVariants = cva(
-  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-2 lsd:px-2 lsd:py-1.5 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:transition-colors lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
+  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-[var(--lsd-spacing-smaller)] lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:transition-colors lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -20124,10 +20123,10 @@ const menubarItemVariants = cva(
   }
 );
 const menubarSeparatorVariants = cva(
-  "lsd:bg-lsd-border lsd:-mx-1 lsd:my-1 lsd:h-px"
+  "lsd:bg-lsd-border lsd:-mx-[var(--lsd-spacing-smallest)] lsd:my-[var(--lsd-spacing-smallest)] lsd:h-px"
 );
 const menubarLabelVariants = cva(
-  "lsd:px-2 lsd:py-1.5 lsd:text-sm lsd:font-bold lsd:text-lsd-text-primary",
+  "lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm lsd:font-bold lsd:text-lsd-text-primary",
   {
     variants: {
       inset: {
@@ -20140,10 +20139,10 @@ const menubarLabelVariants = cva(
   }
 );
 const menubarContentVariants = cva(
-  "lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:z-50 lsd:min-w-[12rem] lsd:overflow-hidden lsd:border lsd:border-lsd-border lsd:p-1 lsd:shadow-lg lsd:data-[state=open]:animate-in lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2"
+  "lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:z-50 lsd:min-w-[12rem] lsd:overflow-hidden lsd:border lsd:border-lsd-border lsd:p-[var(--lsd-spacing-smallest)] lsd:shadow-lg lsd:data-[state=open]:animate-in lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2"
 );
 const menubarSubTriggerVariants = cva(
-  "lsd:flex lsd:cursor-pointer lsd:items-center lsd:px-2 lsd:py-1.5 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:data-[state=open]:bg-lsd-surface-secondary lsd:data-[state=open]:text-lsd-text-primary lsd:transition-colors",
+  "lsd:flex lsd:cursor-pointer lsd:items-center lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:data-[state=open]:bg-lsd-surface-secondary lsd:data-[state=open]:text-lsd-text-primary lsd:transition-colors",
   {
     variants: {
       inset: {
@@ -20156,13 +20155,13 @@ const menubarSubTriggerVariants = cva(
   }
 );
 const menubarSubContentVariants = cva(
-  "lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:z-50 lsd:min-w-[8rem] lsd:overflow-hidden lsd:border lsd:border-lsd-border lsd:p-1 lsd:shadow-lg lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2"
+  "lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:z-50 lsd:min-w-[8rem] lsd:overflow-hidden lsd:border lsd:border-lsd-border lsd:p-[var(--lsd-spacing-smallest)] lsd:shadow-lg lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2"
 );
 const menubarCheckboxItemVariants = cva(
-  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-2 lsd:py-1.5 lsd:pr-2 lsd:pl-8 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4"
+  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:pr-[var(--lsd-spacing-smaller)] lsd:pl-8 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4"
 );
 const menubarRadioItemVariants = cva(
-  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-2 lsd:py-1.5 lsd:pr-2 lsd:pl-8 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4"
+  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:pr-[var(--lsd-spacing-smaller)] lsd:pl-8 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4"
 );
 function Menubar({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -20188,7 +20187,7 @@ function MenubarCheckboxItem({
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:pointer-events-none lsd:absolute lsd:left-2 lsd:flex lsd:size-3.5 lsd:items-center lsd:justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemIndicator2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "lsd:size-4" }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:pointer-events-none lsd:absolute lsd:left-(--lsd-spacing-smaller) lsd:flex lsd:size-(--lsd-spacing-base) lsd:items-center lsd:justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemIndicator2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "lsd:size-(--lsd-spacing-base)" }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:group-hover:underline lsd:group-focus:underline", children })
       ]
     }
@@ -20283,7 +20282,7 @@ function MenubarRadioItem({
       className: cn$1(menubarRadioItemVariants(), "lsd:group", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:pointer-events-none lsd:absolute lsd:left-2 lsd:flex lsd:size-3.5 lsd:items-center lsd:justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemIndicator2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Circle, { className: "lsd:size-2 lsd:fill-current" }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:pointer-events-none lsd:absolute lsd:left-(--lsd-spacing-smaller) lsd:flex lsd:size-(--lsd-spacing-base) lsd:items-center lsd:justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemIndicator2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Circle, { className: "lsd:size-(--lsd-spacing-smaller) lsd:fill-current" }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:group-hover:underline lsd:group-focus:underline", children })
       ]
     }
@@ -20333,7 +20332,7 @@ function MenubarSubTrigger({
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:group-hover:underline lsd:group-focus:underline", children }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "lsd:ml-auto lsd:h-4 lsd:w-4" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "lsd:ml-auto lsd:h-(--lsd-spacing-base) lsd:w-(--lsd-spacing-base)" })
       ]
     }
   );
@@ -21205,7 +21204,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn$1(
-          "lsd:bg-lsd-surface lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:fixed lsd:top-[50%] lsd:left-[50%] lsd:z-50 lsd:grid lsd:w-full lsd:max-w-[calc(100%-2rem)] lsd:translate-x-[-50%] lsd:translate-y-[-50%] lsd:gap-4 lsd:border lsd:border-lsd-border lsd:p-6 lsd:shadow-lg lsd:duration-200 lsd:sm:max-w-lg",
+          "lsd:bg-lsd-surface lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:fixed lsd:top-[50%] lsd:left-[50%] lsd:z-50 lsd:grid lsd:w-full lsd:max-w-[calc(100%-2rem)] lsd:translate-x-[-50%] lsd:translate-y-[-50%] lsd:gap-(--lsd-spacing-base) lsd:border lsd:border-lsd-border lsd:p-(--lsd-spacing-larger) lsd:shadow-lg lsd:duration-200 lsd:sm:max-w-lg",
           className
         ),
         ...props,
@@ -21215,7 +21214,7 @@ function DialogContent({
             DialogClose,
             {
               "data-slot": "dialog-close",
-              className: "lsd:p-2 focus:lsd:outline-hidden lsd:data-[state=open]:bg-lsd-surface lsd:data-[state=open]:text-lsd-text-primary lsd:absolute lsd:top-4 lsd:right-4 lsd:rounded-xs lsd:opacity-70 lsd:transition-opacity lsd:hover:opacity-100 lsd:disabled:pointer-events-none lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4 lsd:cursor-pointer",
+              className: "lsd:p-(--lsd-spacing-smaller) focus:lsd:outline-hidden lsd:data-[state=open]:bg-lsd-surface lsd:data-[state=open]:text-lsd-text-primary lsd:absolute lsd:top-(--lsd-spacing-base) lsd:right-(--lsd-spacing-base) lsd:rounded-xs lsd:opacity-70 lsd:transition-opacity lsd:hover:opacity-100 lsd:disabled:pointer-events-none lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4 lsd:cursor-pointer",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, {}),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "lsd:sr-only", children: "Close" })
@@ -21246,7 +21245,7 @@ function DialogFooter({ className, ...props }) {
     {
       "data-slot": "dialog-footer",
       className: cn$1(
-        "lsd:flex lsd:flex-col-reverse lsd:gap-2 lsd:sm:flex-row lsd:sm:justify-end",
+        "lsd:flex lsd:flex-col-reverse lsd:gap-(--lsd-spacing-smaller) lsd:sm:flex-row lsd:sm:justify-end",
         className
       ),
       ...props
@@ -21259,7 +21258,7 @@ function DialogHeader({ className, ...props }) {
     {
       "data-slot": "dialog-header",
       className: cn$1(
-        "lsd:flex lsd:flex-col lsd:gap-2 lsd:text-center lsd:sm:text-left",
+        "lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:text-center lsd:sm:text-left",
         className
       ),
       ...props
@@ -21823,7 +21822,7 @@ function CommandDialog({
       {
         className: cn$1("lsd:overflow-hidden lsd:p-0", className),
         showCloseButton,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Command, { className: "lsd:[&_[cmdk-group-heading]]:text-lsd-text-primary lsd:[&_[cmdk-group-heading]]:px-2 lsd:[&_[cmdk-group-heading]]:font-medium lsd:[&_[cmdk-group]]:px-2 lsd:[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 lsd:[&_[cmdk-input-wrapper]_svg]:h-5 lsd:[&_[cmdk-input-wrapper]_svg]:w-5 lsd:[&_[cmdk-input]]:h-12 lsd:[&_[cmdk-item]]:px-2 lsd:[&_[cmdk-item]]:py-3 lsd:[&_[cmdk-item]_svg]:h-5 lsd:[&_[cmdk-item]_svg]:w-5", children })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Command, { className: "lsd:**:[[cmdk-group-heading]]:text-lsd-text-primary lsd:**:[[cmdk-group-heading]]:px-(--lsd-spacing-smaller) lsd:**:[[cmdk-group-heading]]:font-medium lsd:**:[[cmdk-group]]:px-(--lsd-spacing-smaller) lsd:[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 lsd:[&_[cmdk-input-wrapper]_svg]:h-(--lsd-spacing-large) lsd:[&_[cmdk-input-wrapper]_svg]:w-(--lsd-spacing-large) lsd:**:[[cmdk-input]]:h-12 lsd:**:[[cmdk-item]]:px-(--lsd-spacing-smaller) lsd:**:[[cmdk-item]]:py-(--lsd-spacing-small) lsd:[&_[cmdk-item]_svg]:h-(--lsd-spacing-large) lsd:[&_[cmdk-item]_svg]:w-(--lsd-spacing-large)", children })
       }
     )
   ] });
@@ -21835,7 +21834,7 @@ function CommandEmpty({
     _e.Empty,
     {
       "data-slot": "command-empty",
-      className: "lsd:py-6 lsd:text-center lsd:text-sm",
+      className: "lsd:py-(--lsd-spacing-larger) lsd:text-center lsd:text-sm",
       ...props
     }
   );
@@ -21849,7 +21848,7 @@ function CommandGroup({
     {
       "data-slot": "command-group",
       className: cn$1(
-        "lsd:text-lsd-text-primary lsd:[&_[cmdk-group-heading]]:text-lsd-text-primary lsd:overflow-hidden lsd:p-1 lsd:[&_[cmdk-group-heading]]:px-2 lsd:[&_[cmdk-group-heading]]:py-1.5 lsd:[&_[cmdk-group-heading]]:text-xs lsd:[&_[cmdk-group-heading]]:font-medium",
+        "lsd:text-lsd-text-primary lsd:**:[[cmdk-group-heading]]:text-lsd-text-primary lsd:overflow-hidden lsd:p-(--lsd-spacing-smallest) lsd:**:[[cmdk-group-heading]]:px-(--lsd-spacing-smaller) lsd:**:[[cmdk-group-heading]]:py-(--lsd-spacing-smaller) lsd:**:[[cmdk-group-heading]]:text-xs lsd:**:[[cmdk-group-heading]]:font-medium",
         className
       ),
       ...props
@@ -21864,7 +21863,7 @@ function CommandInput({
     "div",
     {
       "data-slot": "command-input-wrapper",
-      className: "lsd:flex lsd:h-9 lsd:items-center lsd:gap-2 lsd:border-b lsd:border-lsd-border lsd:px-3",
+      className: "lsd:flex lsd:h-9 lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:border-b lsd:border-lsd-border lsd:px-(--lsd-spacing-small)",
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "lsd:size-4 lsd:shrink-0 lsd:opacity-50" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -21872,7 +21871,7 @@ function CommandInput({
           {
             "data-slot": "command-input",
             className: cn$1(
-              "placeholder:text-lsd-text/50 lsd:flex lsd:h-10 lsd:w-full lsd:bg-transparent lsd:py-3 lsd:text-sm lsd:outline-hidden lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50",
+              "placeholder:text-lsd-text/50 lsd:flex lsd:h-10 lsd:w-full lsd:bg-transparent lsd:py-(--lsd-spacing-small) lsd:text-sm lsd:outline-hidden lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50",
               className
             ),
             ...props
@@ -21891,7 +21890,7 @@ function CommandItem({
     {
       "data-slot": "command-item",
       className: cn$1(
-        "lsd:data-[selected=true]:bg-lsd-surface lsd:data-[selected=true]:text-lsd-text-primary lsd:[&_svg:not([class*='text-'])]:text-lsd-text-primary lsd:relative lsd:flex lsd:cursor-default lsd:items-center lsd:gap-2 lsd:px-2 lsd:py-1.5 lsd:text-sm lsd:outline-hidden lsd:select-none lsd:data-[disabled=true]:pointer-events-none lsd:data-[disabled=true]:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
+        "lsd:data-[selected=true]:bg-lsd-surface lsd:data-[selected=true]:text-lsd-text-primary lsd:[&_svg:not([class*='text-'])]:text-lsd-text-primary lsd:relative lsd:flex lsd:cursor-default lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:px-(--lsd-spacing-smaller) lsd:py-(--lsd-spacing-smaller) lsd:text-sm lsd:outline-hidden lsd:select-none lsd:data-[disabled=true]:pointer-events-none lsd:data-[disabled=true]:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -21907,7 +21906,7 @@ function CommandList({
     {
       "data-slot": "command-list",
       className: cn$1(
-        "lsd:max-h-[300px] lsd:scroll-py-1 lsd:overflow-x-hidden lsd:overflow-y-auto",
+        "lsd:max-h-[300px] lsd:scroll-py-(--lsd-spacing-smallest) lsd:overflow-x-hidden lsd:overflow-y-auto",
         className
       ),
       ...props
@@ -21922,7 +21921,10 @@ function CommandSeparator({
     _e.Separator,
     {
       "data-slot": "command-separator",
-      className: cn$1("lsd:bg-lsd-border lsd:-mx-1 lsd:h-px", className),
+      className: cn$1(
+        "lsd:bg-lsd-border lsd:-mx-(--lsd-spacing-smallest) lsd:h-px",
+        className
+      ),
       ...props
     }
   );
@@ -22567,7 +22569,7 @@ const fixture20 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
   default: CardFixture
 }, Symbol.toStringTag, { value: "Module" }));
 const buttonGroupVariants = cva(
-  "lsd:flex lsd:w-fit lsd:items-stretch lsd:[&>*]:focus-visible:z-10 lsd:[&>*]:focus-visible:relative lsd:[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit lsd:[&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:lsd:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:lsd:gap-2",
+  "lsd:flex lsd:w-fit lsd:items-stretch lsd:[&>*]:focus-visible:z-10 lsd:[&>*]:focus-visible:relative lsd:[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit lsd:[&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:lsd:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:lsd:gap-[var(--lsd-spacing-smaller)]",
   {
     variants: {
       orientation: {
@@ -22619,7 +22621,7 @@ const ButtonGroupText = reactExports.forwardRef(
       {
         ref,
         className: cn$1(
-          "lsd:bg-secondary lsd:flex lsd:items-center lsd:gap-2 lsd:rounded-md lsd:border lsd:px-4 lsd:text-sm lsd:font-medium lsd:shadow-xs lsd:[&_svg]:pointer-events-none lsd:[&_svg:not([class*='size-'])]:size-4 lsd:disabled:cursor-not-allowed",
+          "lsd:bg-secondary lsd:flex lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:rounded-md lsd:border lsd:px-(--lsd-spacing-base) lsd:text-sm lsd:font-medium lsd:shadow-xs lsd:[&_svg]:pointer-events-none lsd:[&_svg:not([class*='size-'])]:size-4 lsd:disabled:cursor-not-allowed",
           className
         ),
         ...props
@@ -22816,8 +22818,8 @@ function ButtonFixture() {
         {
           title: "Icon Button Variants",
           code: `<div className="lsd:flex lsd:gap-4 lsd:items-center">
-  <Button variant="filled-icon" size="icon-xs" aria-label="Add">
-    <Plus size={12} />
+  <Button variant="filled-icon" size="icon-sm" aria-label="Add">
+    <Plus size={14} />
   </Button>
   <Button variant="filled-icon" size="icon-md" aria-label="Add">
     <Plus />
@@ -22830,7 +22832,7 @@ function ButtonFixture() {
   </Button>
 </div>`,
           children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lsd:flex lsd:gap-4 lsd:items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "filled-icon", size: "icon-xs", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 12 }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "filled-icon", size: "icon-sm", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 14 }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "filled-icon", size: "icon-md", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, {}) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outlined-icon", size: "icon-md", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, {}) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost-icon", size: "icon-md", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, {}) })
@@ -22845,9 +22847,6 @@ function ButtonFixture() {
         {
           title: "Icon Button Sizes",
           code: `<div className="lsd:flex lsd:gap-4 lsd:items-center">
-  <Button variant="filled-icon" size="icon-xs" aria-label="Add">
-    <Plus size={12} />
-  </Button>
   <Button variant="filled-icon" size="icon-sm" aria-label="Add">
     <Plus size={14} />
   </Button>
@@ -22857,16 +22856,11 @@ function ButtonFixture() {
   <Button variant="filled-icon" size="icon-lg" aria-label="Add">
     <Plus size={24} />
   </Button>
-  <Button variant="filled-icon" size="icon-xl" aria-label="Add">
-    <Plus size={32} />
-  </Button>
 </div>`,
           children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lsd:flex lsd:gap-4 lsd:items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "filled-icon", size: "icon-xs", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 12 }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "filled-icon", size: "icon-sm", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 14 }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "filled-icon", size: "icon-md", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, {}) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "filled-icon", size: "icon-lg", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 30 }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "filled-icon", size: "icon-xl", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 32 }) })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "filled-icon", size: "icon-lg", "aria-label": "Add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 30 }) })
           ] })
         }
       )
@@ -23088,18 +23082,14 @@ function BadgeFixture() {
         {
           title: "Badge Sizes",
           code: `<div className="lsd:flex lsd:gap-4 lsd:items-center">
-  <Badge size="xs">Extra Small</Badge>
   <Badge size="sm">Small</Badge>
   <Badge size="md">Medium</Badge>
   <Badge size="lg">Large</Badge>
-  <Badge size="xl">Extra Large</Badge>
 </div>`,
           children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lsd:flex lsd:gap-4 lsd:items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { size: "xs", children: "Extra Small" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { size: "sm", children: "Small" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { size: "md", children: "Medium" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { size: "lg", children: "Large" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { size: "xl", children: "Extra Large" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { size: "lg", children: "Large" })
           ] })
         }
       )
@@ -23120,7 +23110,6 @@ function BadgeFixture() {
   <div className="lsd:flex lsd:gap-4 lsd:items-center">
     <Badge variant="warning" size="sm">Warning Small</Badge>
     <Badge variant="info" size="sm">Info Small</Badge>
-    <Badge variant="filled" size="xs">XS Filled</Badge>
     <Badge variant="outlined" size="lg">LG Outlined</Badge>
   </div>
 </div>`,
@@ -23134,7 +23123,6 @@ function BadgeFixture() {
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lsd:flex lsd:gap-4 lsd:items-center", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "warning", size: "sm", children: "Warning Small" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "info", size: "sm", children: "Info Small" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "filled", size: "xs", children: "XS Filled" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outlined", size: "lg", children: "LG Outlined" })
             ] })
           ] })
@@ -23243,18 +23231,14 @@ function BadgeFixture() {
         {
           title: "Dot Badges",
           code: `<div className="lsd:flex lsd:gap-4 lsd:items-center">
-  <Badge variant="dot" size="xs" />
   <Badge variant="dot" size="sm" />
   <Badge variant="dot" size="md" />
   <Badge variant="dot" size="lg" />
-  <Badge variant="dot" size="xl" />
 </div>`,
           children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lsd:flex lsd:gap-4 lsd:items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "dot", size: "xs" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "dot", size: "sm" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "dot", size: "md" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "dot", size: "lg" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "dot", size: "xl" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "dot", size: "lg" })
           ] })
         }
       )
@@ -23431,38 +23415,38 @@ function AutocompleteContent({
 const AUTOCOMPLETE_SIZE_CLASSES = {
   xs: {
     container: "lsd:w-[140px]",
-    label: "lsd:mb-1.5 lsd:ml-[10px]",
-    inputContainer: "lsd:h-[24px]",
-    input: "lsd:px-[9px] lsd:py-[4px]",
-    icon: "lsd:px-[7px] lsd:py-[5px]"
+    label: "lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-small)]",
+    inputContainer: "lsd:h-[var(--lsd-spacing-larger)]",
+    input: "lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smallest)]",
+    icon: "lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)]"
   },
   sm: {
     container: "lsd:w-[164px]",
-    label: "lsd:mb-1.5 lsd:ml-[12px]",
-    inputContainer: "lsd:h-[28px]",
-    input: "lsd:px-[11px] lsd:py-[5px]",
-    icon: "lsd:px-[9px] lsd:py-[6px]"
+    label: "lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-small)]",
+    inputContainer: "lsd:h-[var(--lsd-spacing-largest)]",
+    input: "lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)]",
+    icon: "lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)]"
   },
   md: {
     container: "lsd:w-[188px]",
-    label: "lsd:mb-1.5 lsd:ml-[14px]",
-    inputContainer: "lsd:h-[32px]",
-    input: "lsd:px-[13px] lsd:py-[5px]",
-    icon: "lsd:px-[11px] lsd:py-[8px]"
+    label: "lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-base)]",
+    inputContainer: "lsd:h-8",
+    input: "lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-smaller)]",
+    icon: "lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)]"
   },
   lg: {
     container: "lsd:w-[208px]",
-    label: "lsd:mb-1.5 lsd:ml-[14px]",
-    inputContainer: "lsd:h-[40px]",
-    input: "lsd:px-[17px] lsd:py-[9px]",
-    icon: "lsd:px-[13px] lsd:py-[12px]"
+    label: "lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-base)]",
+    inputContainer: "lsd:h-10",
+    input: "lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-small)]",
+    icon: "lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-small)]"
   },
   xl: {
     container: "lsd:w-[240px]",
-    label: "lsd:mb-1.5 lsd:ml-[16px]",
-    inputContainer: "lsd:h-[48px]",
-    input: "lsd:px-[20px] lsd:py-[12px]",
-    icon: "lsd:px-[15px] lsd:py-[14px]"
+    label: "lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-base)]",
+    inputContainer: "lsd:h-12",
+    input: "lsd:px-[var(--lsd-spacing-large)] lsd:py-[var(--lsd-spacing-small)]",
+    icon: "lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-base)]"
   }
 };
 const AUTOCOMPLETE_DEBOUNCE_DELAY = 300;
@@ -24279,7 +24263,7 @@ function AlertDialogContent({
       {
         "data-slot": "alert-dialog-content",
         className: cn$1(
-          "lsd:bg-lsd-surface lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:fixed lsd:top-[50%] lsd:left-[50%] lsd:z-50 lsd:grid lsd:w-full lsd:max-w-[calc(100%-2rem)] lsd:translate-x-[-50%] lsd:translate-y-[-50%] lsd:gap-4 lsd:border lsd:border-lsd-border lsd:p-6 lsd:shadow-lg lsd:duration-200 lsd:sm:max-w-lg",
+          "lsd:bg-lsd-surface lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:fixed lsd:top-[50%] lsd:left-[50%] lsd:z-50 lsd:grid lsd:w-full lsd:max-w-[calc(100%-2rem)] lsd:translate-x-[-50%] lsd:translate-y-[-50%] lsd:gap-(--lsd-spacing-base) lsd:border lsd:border-lsd-border lsd:p-(--lsd-spacing-larger) lsd:shadow-lg lsd:duration-200 lsd:sm:max-w-lg",
           className
         ),
         ...props
@@ -24309,7 +24293,7 @@ function AlertDialogFooter({
     {
       "data-slot": "alert-dialog-footer",
       className: cn$1(
-        "lsd:flex lsd:flex-col-reverse lsd:gap-2 lsd:sm:flex-row lsd:sm:justify-end",
+        "lsd:flex lsd:flex-col-reverse lsd:gap-(--lsd-spacing-smaller) lsd:sm:flex-row lsd:sm:justify-end",
         className
       ),
       ...props
@@ -24325,7 +24309,7 @@ function AlertDialogHeader({
     {
       "data-slot": "alert-dialog-header",
       className: cn$1(
-        "lsd:flex lsd:flex-col lsd:gap-2 lsd:text-center lsd:sm:text-left",
+        "lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:text-center lsd:sm:text-left",
         className
       ),
       ...props
diff --git a/docs/assets/index-BFuX6RyW.js b/docs/assets/index-B5zrIT0p.js
similarity index 99%
rename from docs/assets/index-BFuX6RyW.js
rename to docs/assets/index-B5zrIT0p.js
index 5c2abac5..fcbf8272 100644
--- a/docs/assets/index-BFuX6RyW.js
+++ b/docs/assets/index-B5zrIT0p.js
@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./_virtual_cosmos-imports-BjJlCujV.js","./_virtual_cosmos-imports-m6w9TwDV.css"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./_virtual_cosmos-imports-DNh6WwHb.js","./_virtual_cosmos-imports-CghTF5Lu.css"])))=>i.map(i=>d[i]);
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];
@@ -15038,7 +15038,7 @@ function mountDomRenderer({ rendererConfig, moduleWrappers }) {
 }
 mount();
 async function mount() {
-  const args = await __vitePreload(() => import("./_virtual_cosmos-imports-BjJlCujV.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
+  const args = await __vitePreload(() => import("./_virtual_cosmos-imports-DNh6WwHb.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
   mountDomRenderer(args);
 }
 export {
diff --git a/docs/renderer.html b/docs/renderer.html
index 29451fd7..f90b48b9 100644
--- a/docs/renderer.html
+++ b/docs/renderer.html
@@ -15,7 +15,7 @@
   margin: 2.5rem;
 }
 </style>
-    <script type="module" crossorigin src="./assets/index-BFuX6RyW.js"></script>
+    <script type="module" crossorigin src="./assets/index-B5zrIT0p.js"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package.json b/package.json
index effa0745..7c688da7 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.4",
+  "version": "0.2.5",
   "type": "module",
   "module": "./dist/main.js",
   "exports": {
diff --git a/src/__cosmos__/code-block.tsx b/src/__cosmos__/code-block.tsx
index c2b86825..e4fee324 100644
--- a/src/__cosmos__/code-block.tsx
+++ b/src/__cosmos__/code-block.tsx
@@ -9,7 +9,7 @@ export function CodeBlock({ className, code, ...props }: CodeBlockProps) {
   return (
     <pre
       className={cn(
-        'lsd:overflow-x-auto lsd:rounded-md lsd:bg-lsd-surface lsd:p-4 lsd:text-sm lsd:text-lsd-text-primary',
+        'lsd:overflow-x-auto lsd:rounded-md lsd:bg-lsd-surface lsd:p-(--lsd-spacing-base) lsd:text-sm lsd:text-lsd-text-primary',
         className,
       )}
       {...props}
diff --git a/src/__cosmos__/code-example.tsx b/src/__cosmos__/code-example.tsx
index 76514ffd..3cc874ee 100644
--- a/src/__cosmos__/code-example.tsx
+++ b/src/__cosmos__/code-example.tsx
@@ -15,7 +15,7 @@ interface CodeExampleProps {
 
 export function CodeExample({ children, code }: CodeExampleProps) {
   return (
-    <div className="lsd:space-y-4">
+    <div className="lsd:space-y-(--lsd-spacing-base)">
       <div>{children}</div>
       <Accordion type="single" collapsible>
         <AccordionItem value="code">
diff --git a/src/__cosmos__/fixtures/Badge.fixture.tsx b/src/__cosmos__/fixtures/Badge.fixture.tsx
index f86f1e17..7aaecb71 100644
--- a/src/__cosmos__/fixtures/Badge.fixture.tsx
+++ b/src/__cosmos__/fixtures/Badge.fixture.tsx
@@ -129,19 +129,15 @@ export default function BadgeFixture() {
         <CodeExample
           title="Badge Sizes"
           code={`<div className="lsd:flex lsd:gap-4 lsd:items-center">
-  <Badge size="xs">Extra Small</Badge>
   <Badge size="sm">Small</Badge>
   <Badge size="md">Medium</Badge>
   <Badge size="lg">Large</Badge>
-  <Badge size="xl">Extra Large</Badge>
 </div>`}
         >
           <div className="lsd:flex lsd:gap-4 lsd:items-center">
-            <Badge size="xs">Extra Small</Badge>
             <Badge size="sm">Small</Badge>
             <Badge size="md">Medium</Badge>
             <Badge size="lg">Large</Badge>
-            <Badge size="xl">Extra Large</Badge>
           </div>
         </CodeExample>
       </div>
@@ -162,7 +158,6 @@ export default function BadgeFixture() {
   <div className="lsd:flex lsd:gap-4 lsd:items-center">
     <Badge variant="warning" size="sm">Warning Small</Badge>
     <Badge variant="info" size="sm">Info Small</Badge>
-    <Badge variant="filled" size="xs">XS Filled</Badge>
     <Badge variant="outlined" size="lg">LG Outlined</Badge>
   </div>
 </div>`}
@@ -189,9 +184,6 @@ export default function BadgeFixture() {
               <Badge variant="info" size="sm">
                 Info Small
               </Badge>
-              <Badge variant="filled" size="xs">
-                XS Filled
-              </Badge>
               <Badge variant="outlined" size="lg">
                 LG Outlined
               </Badge>
@@ -319,19 +311,15 @@ export default function BadgeFixture() {
         <CodeExample
           title="Dot Badges"
           code={`<div className="lsd:flex lsd:gap-4 lsd:items-center">
-  <Badge variant="dot" size="xs" />
   <Badge variant="dot" size="sm" />
   <Badge variant="dot" size="md" />
   <Badge variant="dot" size="lg" />
-  <Badge variant="dot" size="xl" />
 </div>`}
         >
           <div className="lsd:flex lsd:gap-4 lsd:items-center">
-            <Badge variant="dot" size="xs" />
             <Badge variant="dot" size="sm" />
             <Badge variant="dot" size="md" />
             <Badge variant="dot" size="lg" />
-            <Badge variant="dot" size="xl" />
           </div>
         </CodeExample>
       </div>
diff --git a/src/__cosmos__/fixtures/Button.fixture.tsx b/src/__cosmos__/fixtures/Button.fixture.tsx
index 87ddeb4f..87c298fe 100644
--- a/src/__cosmos__/fixtures/Button.fixture.tsx
+++ b/src/__cosmos__/fixtures/Button.fixture.tsx
@@ -129,8 +129,8 @@ export default function ButtonFixture() {
         <CodeExample
           title="Icon Button Variants"
           code={`<div className="lsd:flex lsd:gap-4 lsd:items-center">
-  <Button variant="filled-icon" size="icon-xs" aria-label="Add">
-    <Plus size={12} />
+  <Button variant="filled-icon" size="icon-sm" aria-label="Add">
+    <Plus size={14} />
   </Button>
   <Button variant="filled-icon" size="icon-md" aria-label="Add">
     <Plus />
@@ -144,8 +144,8 @@ export default function ButtonFixture() {
 </div>`}
         >
           <div className="lsd:flex lsd:gap-4 lsd:items-center">
-            <Button variant="filled-icon" size="icon-xs" aria-label="Add">
-              <Plus size={12} />
+            <Button variant="filled-icon" size="icon-sm" aria-label="Add">
+              <Plus size={14} />
             </Button>
             <Button variant="filled-icon" size="icon-md" aria-label="Add">
               <Plus />
@@ -165,9 +165,6 @@ export default function ButtonFixture() {
         <CodeExample
           title="Icon Button Sizes"
           code={`<div className="lsd:flex lsd:gap-4 lsd:items-center">
-  <Button variant="filled-icon" size="icon-xs" aria-label="Add">
-    <Plus size={12} />
-  </Button>
   <Button variant="filled-icon" size="icon-sm" aria-label="Add">
     <Plus size={14} />
   </Button>
@@ -177,15 +174,9 @@ export default function ButtonFixture() {
   <Button variant="filled-icon" size="icon-lg" aria-label="Add">
     <Plus size={24} />
   </Button>
-  <Button variant="filled-icon" size="icon-xl" aria-label="Add">
-    <Plus size={32} />
-  </Button>
 </div>`}
         >
           <div className="lsd:flex lsd:gap-4 lsd:items-center">
-            <Button variant="filled-icon" size="icon-xs" aria-label="Add">
-              <Plus size={12} />
-            </Button>
             <Button variant="filled-icon" size="icon-sm" aria-label="Add">
               <Plus size={14} />
             </Button>
@@ -195,9 +186,6 @@ export default function ButtonFixture() {
             <Button variant="filled-icon" size="icon-lg" aria-label="Add">
               <Plus size={30} />
             </Button>
-            <Button variant="filled-icon" size="icon-xl" aria-label="Add">
-              <Plus size={32} />
-            </Button>
           </div>
         </CodeExample>
       </div>
diff --git a/src/__cosmos__/font-toggle.tsx b/src/__cosmos__/font-toggle.tsx
index 8bf05aec..36b24269 100644
--- a/src/__cosmos__/font-toggle.tsx
+++ b/src/__cosmos__/font-toggle.tsx
@@ -11,7 +11,7 @@ export function FontToggle() {
   }, [font]);
 
   return (
-    <div className="lsd:flex lsd:items-center lsd:space-x-2">
+    <div className="lsd:flex lsd:items-center lsd:space-x-(--lsd-spacing-smaller)">
       <span className="lsd:text-sm">Font:</span>
       <ToggleGroup
         type="single"
diff --git a/src/__cosmos__/theme-toggle.tsx b/src/__cosmos__/theme-toggle.tsx
index 1c2580e3..a6758045 100644
--- a/src/__cosmos__/theme-toggle.tsx
+++ b/src/__cosmos__/theme-toggle.tsx
@@ -41,10 +41,10 @@ export function ThemeToggle() {
       aria-label="Theme toggle"
     >
       <ToggleGroupItem value="light" aria-label="Light theme">
-        <Sun className="lsd:h-4 lsd:w-4" />
+        <Sun className="lsd:h-(--lsd-spacing-base) lsd:w-(--lsd-spacing-base)" />
       </ToggleGroupItem>
       <ToggleGroupItem value="dark" aria-label="Dark theme">
-        <Moon className="lsd:h-4 lsd:w-4" />
+        <Moon className="lsd:h-(--lsd-spacing-base) lsd:w-(--lsd-spacing-base)" />
       </ToggleGroupItem>
     </ToggleGroup>
   );
diff --git a/src/components/ui/accordion/AccordionContent.tsx b/src/components/ui/accordion/AccordionContent.tsx
index 727074b4..d6834d7d 100644
--- a/src/components/ui/accordion/AccordionContent.tsx
+++ b/src/components/ui/accordion/AccordionContent.tsx
@@ -17,11 +17,11 @@ function AccordionContent({
   const getPaddingBottom = () => {
     switch (size) {
       case 'sm':
-        return 'lsd:pb-2';
+        return 'lsd:pb-[var(--lsd-spacing-smaller)]';
       case 'lg':
-        return 'lsd:pb-6';
+        return 'lsd:pb-[var(--lsd-spacing-larger)]';
       default:
-        return 'lsd:pb-4';
+        return 'lsd:pb-[var(--lsd-spacing-base)]';
     }
   };
 
diff --git a/src/components/ui/accordion/__tests__/accordion-content.test.tsx b/src/components/ui/accordion/__tests__/accordion-content.test.tsx
index cda6efc4..d5031535 100644
--- a/src/components/ui/accordion/__tests__/accordion-content.test.tsx
+++ b/src/components/ui/accordion/__tests__/accordion-content.test.tsx
@@ -109,6 +109,6 @@ describe('AccordionContent', () => {
       '[data-slot="accordion-content"] > div',
     );
     expect(innerDiv).toHaveClass('lsd:pt-0');
-    expect(innerDiv).toHaveClass('lsd:pb-4');
+    expect(innerDiv).toHaveClass('lsd:pb-[var(--lsd-spacing-base)]');
   });
 });
diff --git a/src/components/ui/alert-dialog/AlertDialogContent.tsx b/src/components/ui/alert-dialog/AlertDialogContent.tsx
index 0400f818..2c482892 100644
--- a/src/components/ui/alert-dialog/AlertDialogContent.tsx
+++ b/src/components/ui/alert-dialog/AlertDialogContent.tsx
@@ -14,7 +14,7 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          'lsd:bg-lsd-surface lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:fixed lsd:top-[50%] lsd:left-[50%] lsd:z-50 lsd:grid lsd:w-full lsd:max-w-[calc(100%-2rem)] lsd:translate-x-[-50%] lsd:translate-y-[-50%] lsd:gap-4 lsd:border lsd:border-lsd-border lsd:p-6 lsd:shadow-lg lsd:duration-200 lsd:sm:max-w-lg',
+          'lsd:bg-lsd-surface lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:fixed lsd:top-[50%] lsd:left-[50%] lsd:z-50 lsd:grid lsd:w-full lsd:max-w-[calc(100%-2rem)] lsd:translate-x-[-50%] lsd:translate-y-[-50%] lsd:gap-(--lsd-spacing-base) lsd:border lsd:border-lsd-border lsd:p-(--lsd-spacing-larger) lsd:shadow-lg lsd:duration-200 lsd:sm:max-w-lg',
           className,
         )}
         {...props}
diff --git a/src/components/ui/alert-dialog/AlertDialogFooter.tsx b/src/components/ui/alert-dialog/AlertDialogFooter.tsx
index 54c8493d..ec4c5529 100644
--- a/src/components/ui/alert-dialog/AlertDialogFooter.tsx
+++ b/src/components/ui/alert-dialog/AlertDialogFooter.tsx
@@ -10,7 +10,7 @@ function AlertDialogFooter({
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        'lsd:flex lsd:flex-col-reverse lsd:gap-2 lsd:sm:flex-row lsd:sm:justify-end',
+        'lsd:flex lsd:flex-col-reverse lsd:gap-(--lsd-spacing-smaller) lsd:sm:flex-row lsd:sm:justify-end',
         className,
       )}
       {...props}
diff --git a/src/components/ui/alert-dialog/AlertDialogHeader.tsx b/src/components/ui/alert-dialog/AlertDialogHeader.tsx
index 83299c9b..ac3ab678 100644
--- a/src/components/ui/alert-dialog/AlertDialogHeader.tsx
+++ b/src/components/ui/alert-dialog/AlertDialogHeader.tsx
@@ -10,7 +10,7 @@ function AlertDialogHeader({
     <div
       data-slot="alert-dialog-header"
       className={cn(
-        'lsd:flex lsd:flex-col lsd:gap-2 lsd:text-center lsd:sm:text-left',
+        'lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:text-center lsd:sm:text-left',
         className,
       )}
       {...props}
diff --git a/src/components/ui/alert-dialog/__tests__/alert-dialog-content.test.tsx b/src/components/ui/alert-dialog/__tests__/alert-dialog-content.test.tsx
index 513d7e64..bfe0d94e 100644
--- a/src/components/ui/alert-dialog/__tests__/alert-dialog-content.test.tsx
+++ b/src/components/ui/alert-dialog/__tests__/alert-dialog-content.test.tsx
@@ -34,7 +34,7 @@ describe('AlertDialogContent', () => {
     expect(content).toHaveClass('lsd:w-full');
     expect(content).toHaveClass('lsd:border');
     expect(content).toHaveClass('lsd:border-lsd-border');
-    expect(content).toHaveClass('lsd:p-6');
+    expect(content).toHaveClass('lsd:p-(--lsd-spacing-larger)');
   });
 
   it('applies data-slot attribute', () => {
diff --git a/src/components/ui/alert-dialog/__tests__/alert-dialog-footer.test.tsx b/src/components/ui/alert-dialog/__tests__/alert-dialog-footer.test.tsx
index f3f4be83..efe0419e 100644
--- a/src/components/ui/alert-dialog/__tests__/alert-dialog-footer.test.tsx
+++ b/src/components/ui/alert-dialog/__tests__/alert-dialog-footer.test.tsx
@@ -32,7 +32,7 @@ describe('AlertDialogFooter', () => {
     const footer = document.querySelector('[data-slot="alert-dialog-footer"]');
     expect(footer).toHaveClass('lsd:flex');
     expect(footer).toHaveClass('lsd:flex-col-reverse');
-    expect(footer).toHaveClass('lsd:gap-2');
+    expect(footer).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
   });
 
   it('applies data-slot attribute', () => {
diff --git a/src/components/ui/alert-dialog/__tests__/alert-dialog-header.test.tsx b/src/components/ui/alert-dialog/__tests__/alert-dialog-header.test.tsx
index ceea2186..ecf4fbc2 100644
--- a/src/components/ui/alert-dialog/__tests__/alert-dialog-header.test.tsx
+++ b/src/components/ui/alert-dialog/__tests__/alert-dialog-header.test.tsx
@@ -31,7 +31,7 @@ describe('AlertDialogHeader', () => {
     const header = document.querySelector('[data-slot="alert-dialog-header"]');
     expect(header).toHaveClass('lsd:flex');
     expect(header).toHaveClass('lsd:flex-col');
-    expect(header).toHaveClass('lsd:gap-2');
+    expect(header).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
     expect(header).toHaveClass('lsd:text-center');
   });
 
diff --git a/src/components/ui/autocomplete/types.ts b/src/components/ui/autocomplete/types.ts
index 37870e99..9f13eb62 100644
--- a/src/components/ui/autocomplete/types.ts
+++ b/src/components/ui/autocomplete/types.ts
@@ -47,38 +47,47 @@ export const AUTOCOMPLETE_SIZE_CLASSES: Record<
 > = {
   xs: {
     container: 'lsd:w-[140px]',
-    label: 'lsd:mb-1.5 lsd:ml-[10px]',
-    inputContainer: 'lsd:h-[24px]',
-    input: 'lsd:px-[9px] lsd:py-[4px]',
-    icon: 'lsd:px-[7px] lsd:py-[5px]',
+    label:
+      'lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-small)]',
+    inputContainer: 'lsd:h-[var(--lsd-spacing-larger)]',
+    input:
+      'lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smallest)]',
+    icon: 'lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)]',
   },
   sm: {
     container: 'lsd:w-[164px]',
-    label: 'lsd:mb-1.5 lsd:ml-[12px]',
-    inputContainer: 'lsd:h-[28px]',
-    input: 'lsd:px-[11px] lsd:py-[5px]',
-    icon: 'lsd:px-[9px] lsd:py-[6px]',
+    label:
+      'lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-small)]',
+    inputContainer: 'lsd:h-[var(--lsd-spacing-largest)]',
+    input:
+      'lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)]',
+    icon: 'lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)]',
   },
   md: {
     container: 'lsd:w-[188px]',
-    label: 'lsd:mb-1.5 lsd:ml-[14px]',
-    inputContainer: 'lsd:h-[32px]',
-    input: 'lsd:px-[13px] lsd:py-[5px]',
-    icon: 'lsd:px-[11px] lsd:py-[8px]',
+    label:
+      'lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-base)]',
+    inputContainer: 'lsd:h-8',
+    input:
+      'lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-smaller)]',
+    icon: 'lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)]',
   },
   lg: {
     container: 'lsd:w-[208px]',
-    label: 'lsd:mb-1.5 lsd:ml-[14px]',
-    inputContainer: 'lsd:h-[40px]',
-    input: 'lsd:px-[17px] lsd:py-[9px]',
-    icon: 'lsd:px-[13px] lsd:py-[12px]',
+    label:
+      'lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-base)]',
+    inputContainer: 'lsd:h-10',
+    input: 'lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-small)]',
+    icon: 'lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-small)]',
   },
   xl: {
     container: 'lsd:w-[240px]',
-    label: 'lsd:mb-1.5 lsd:ml-[16px]',
-    inputContainer: 'lsd:h-[48px]',
-    input: 'lsd:px-[20px] lsd:py-[12px]',
-    icon: 'lsd:px-[15px] lsd:py-[14px]',
+    label:
+      'lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-base)]',
+    inputContainer: 'lsd:h-12',
+    input:
+      'lsd:px-[var(--lsd-spacing-large)] lsd:py-[var(--lsd-spacing-small)]',
+    icon: 'lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-base)]',
   },
 };
 
diff --git a/src/components/ui/badge/Badge.tsx b/src/components/ui/badge/Badge.tsx
index 559ad593..514dd3f6 100644
--- a/src/components/ui/badge/Badge.tsx
+++ b/src/components/ui/badge/Badge.tsx
@@ -64,19 +64,17 @@ function Badge({
 
   // Get dot size based on size prop
   const getDotSize = () => {
+    const md =
+      'lsd:w-[var(--lsd-spacing-small)] lsd:h-[var(--lsd-spacing-small)]';
     switch (size) {
-      case 'xs':
-        return 'lsd:w-[8px] lsd:h-[8px]';
       case 'sm':
-        return 'lsd:w-[10px] lsd:h-[10px]';
+        return 'lsd:w-[var(--lsd-spacing-smaller)] lsd:h-[var(--lsd-spacing-smaller)]';
       case 'md':
-        return 'lsd:w-[12px] lsd:h-[12px]';
+        return md;
       case 'lg':
-        return 'lsd:w-[14px] lsd:h-[14px]';
-      case 'xl':
-        return 'lsd:w-[16px] lsd:h-[16px]';
+        return 'lsd:w-[var(--lsd-spacing-base)] lsd:h-[var(--lsd-spacing-base)]';
       default:
-        return 'lsd:w-[12px] lsd:h-[12px]';
+        return md;
     }
   };
 
diff --git a/src/components/ui/badge/badge.test.tsx b/src/components/ui/badge/badge.test.tsx
index fa5d5a0f..b5c462c2 100644
--- a/src/components/ui/badge/badge.test.tsx
+++ b/src/components/ui/badge/badge.test.tsx
@@ -45,9 +45,9 @@ describe('Badge', () => {
       </Badge>,
     );
     const badge = screen.getByTestId('badge');
-    expect(badge).toHaveClass('lsd:h-[28px]');
-    expect(badge).toHaveClass('lsd:px-[11px]');
-    expect(badge).toHaveClass('lsd:py-[3px]');
+    expect(badge).toHaveClass('lsd:h-[var(--lsd-spacing-largest)]');
+    expect(badge).toHaveClass('lsd:px-[var(--lsd-spacing-small)]');
+    expect(badge).toHaveClass('lsd:py-[var(--lsd-spacing-smallest)]');
     expect(badge).toHaveClass('lsd:text-[0.875rem]');
   });
 
@@ -58,8 +58,8 @@ describe('Badge', () => {
       </Badge>,
     );
     const badge = screen.getByTestId('badge');
-    expect(badge).toHaveClass('lsd:h-[24px]');
-    expect(badge).toHaveClass('lsd:px-[7px]');
+    expect(badge).toHaveClass('lsd:h-[var(--lsd-spacing-larger)]');
+    expect(badge).toHaveClass('lsd:px-[var(--lsd-spacing-smaller)]');
     expect(badge).toHaveClass('lsd:text-[0.75rem]');
   });
 
@@ -72,7 +72,7 @@ describe('Badge', () => {
   it('uses default size when not specified', () => {
     render(<Badge data-testid="badge">Default</Badge>);
     const badge = screen.getByTestId('badge');
-    expect(badge).toHaveClass('lsd:h-[28px]');
+    expect(badge).toHaveClass('lsd:h-[var(--lsd-spacing-largest)]');
   });
 
   it('merges custom className with component classes', () => {
@@ -177,39 +177,25 @@ describe('Badge', () => {
     expect(badge).toHaveClass('lsd:border-0');
   });
 
-  it('applies correct dot size for xs', () => {
-    render(<Badge dot size="xs" data-testid="badge" />);
-    const badge = screen.getByTestId('badge');
-    expect(badge).toHaveClass('lsd:w-[8px]');
-    expect(badge).toHaveClass('lsd:h-[8px]');
-  });
-
   it('applies correct dot size for sm', () => {
     render(<Badge dot size="sm" data-testid="badge" />);
     const badge = screen.getByTestId('badge');
-    expect(badge).toHaveClass('lsd:w-[10px]');
-    expect(badge).toHaveClass('lsd:h-[10px]');
+    expect(badge).toHaveClass('lsd:w-[var(--lsd-spacing-smaller)]');
+    expect(badge).toHaveClass('lsd:h-[var(--lsd-spacing-smaller)]');
   });
 
   it('applies correct dot size for md', () => {
     render(<Badge dot size="md" data-testid="badge" />);
     const badge = screen.getByTestId('badge');
-    expect(badge).toHaveClass('lsd:w-[12px]');
-    expect(badge).toHaveClass('lsd:h-[12px]');
+    expect(badge).toHaveClass('lsd:w-[var(--lsd-spacing-small)]');
+    expect(badge).toHaveClass('lsd:h-[var(--lsd-spacing-small)]');
   });
 
   it('applies correct dot size for lg', () => {
     render(<Badge dot size="lg" data-testid="badge" />);
     const badge = screen.getByTestId('badge');
-    expect(badge).toHaveClass('lsd:w-[14px]');
-    expect(badge).toHaveClass('lsd:h-[14px]');
-  });
-
-  it('applies correct dot size for xl', () => {
-    render(<Badge dot size="xl" data-testid="badge" />);
-    const badge = screen.getByTestId('badge');
-    expect(badge).toHaveClass('lsd:w-[16px]');
-    expect(badge).toHaveClass('lsd:h-[16px]');
+    expect(badge).toHaveClass('lsd:w-[var(--lsd-spacing-base)]');
+    expect(badge).toHaveClass('lsd:h-[var(--lsd-spacing-base)]');
   });
 
   it('handles dismiss event', () => {
@@ -247,14 +233,22 @@ describe('badgeVariants', () => {
   });
 
   it('returns correct classes for medium size', () => {
-    expect(badgeVariants({ size: 'md' })).toContain('lsd:h-[28px]');
-    expect(badgeVariants({ size: 'md' })).toContain('lsd:px-[11px]');
+    expect(badgeVariants({ size: 'md' })).toContain(
+      'lsd:h-[var(--lsd-spacing-largest)]',
+    );
+    expect(badgeVariants({ size: 'md' })).toContain(
+      'lsd:px-[var(--lsd-spacing-small)]',
+    );
     expect(badgeVariants({ size: 'md' })).toContain('lsd:text-[0.875rem]');
   });
 
   it('returns correct classes for small size', () => {
-    expect(badgeVariants({ size: 'sm' })).toContain('lsd:h-[24px]');
-    expect(badgeVariants({ size: 'sm' })).toContain('lsd:px-[7px]');
+    expect(badgeVariants({ size: 'sm' })).toContain(
+      'lsd:h-[var(--lsd-spacing-larger)]',
+    );
+    expect(badgeVariants({ size: 'sm' })).toContain(
+      'lsd:px-[var(--lsd-spacing-smaller)]',
+    );
     expect(badgeVariants({ size: 'sm' })).toContain('lsd:text-[0.75rem]');
   });
 
@@ -263,12 +257,12 @@ describe('badgeVariants', () => {
   });
 
   it('uses default size when not specified', () => {
-    expect(badgeVariants({})).toContain('lsd:h-[28px]');
+    expect(badgeVariants({})).toContain('lsd:h-[var(--lsd-spacing-largest)]');
   });
 
   it('combines variant and size correctly', () => {
     const classes = badgeVariants({ variant: 'outlined', size: 'sm' });
     expect(classes).toContain('lsd:bg-transparent');
-    expect(classes).toContain('lsd:h-[24px]');
+    expect(classes).toContain('lsd:h-[var(--lsd-spacing-larger)]');
   });
 });
diff --git a/src/components/ui/badge/types.ts b/src/components/ui/badge/types.ts
index 3de2671d..a3125897 100644
--- a/src/components/ui/badge/types.ts
+++ b/src/components/ui/badge/types.ts
@@ -25,11 +25,9 @@ export const badgeVariants = cva(
         dot: 'lsd:rounded-full lsd:w-fit lsd:h-fit lsd:p-0',
       },
       size: {
-        xs: 'lsd:h-[20px] lsd:px-[5px] lsd:py-[3px] lsd:gap-[4px] lsd:text-[0.625rem] [&>svg]:size-[10px]',
-        sm: 'lsd:h-[24px] lsd:px-[7px] lsd:py-[3px] lsd:gap-[4px] lsd:text-[0.75rem] [&>svg]:size-3',
-        md: 'lsd:h-[28px] lsd:px-[11px] lsd:py-[3px] lsd:gap-[6px] lsd:text-[0.875rem] [&>svg]:size-3',
-        lg: 'lsd:h-[32px] lsd:px-[13px] lsd:py-[3px] lsd:gap-[8px] lsd:text-[1rem] [&>svg]:size-[14px]',
-        xl: 'lsd:h-[36px] lsd:px-[15px] lsd:py-[3px] lsd:gap-[10px] lsd:text-[1.125rem] [&>svg]:size-[16px]',
+        sm: 'lsd:h-[var(--lsd-spacing-larger)] lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smallest)] lsd:gap-[var(--lsd-spacing-smallest)] lsd:text-[0.75rem] [&>svg]:size-3',
+        md: 'lsd:h-[var(--lsd-spacing-largest)] lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smallest)] lsd:gap-[var(--lsd-spacing-smaller)] lsd:text-[0.875rem] [&>svg]:size-3',
+        lg: 'lsd:h-8 lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smallest)] lsd:gap-[var(--lsd-spacing-smaller)] lsd:text-[1rem] [&>svg]:size-[14px]',
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/button-group/ButtonGroupText.tsx b/src/components/ui/button-group/ButtonGroupText.tsx
index df7972e9..a9eab4cb 100644
--- a/src/components/ui/button-group/ButtonGroupText.tsx
+++ b/src/components/ui/button-group/ButtonGroupText.tsx
@@ -12,7 +12,7 @@ const ButtonGroupText = React.forwardRef<HTMLDivElement, ButtonGroupTextProps>(
       <Comp
         ref={ref}
         className={cn(
-          "lsd:bg-secondary lsd:flex lsd:items-center lsd:gap-2 lsd:rounded-md lsd:border lsd:px-4 lsd:text-sm lsd:font-medium lsd:shadow-xs lsd:[&_svg]:pointer-events-none lsd:[&_svg:not([class*='size-'])]:size-4 lsd:disabled:cursor-not-allowed",
+          "lsd:bg-secondary lsd:flex lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:rounded-md lsd:border lsd:px-(--lsd-spacing-base) lsd:text-sm lsd:font-medium lsd:shadow-xs lsd:[&_svg]:pointer-events-none lsd:[&_svg:not([class*='size-'])]:size-4 lsd:disabled:cursor-not-allowed",
           className,
         )}
         {...props}
diff --git a/src/components/ui/button-group/__tests__/button-group-text.test.tsx b/src/components/ui/button-group/__tests__/button-group-text.test.tsx
index db3a5343..d7219deb 100644
--- a/src/components/ui/button-group/__tests__/button-group-text.test.tsx
+++ b/src/components/ui/button-group/__tests__/button-group-text.test.tsx
@@ -19,10 +19,10 @@ describe('ButtonGroupText', () => {
     expect(text).toHaveClass('lsd:bg-secondary');
     expect(text).toHaveClass('lsd:flex');
     expect(text).toHaveClass('lsd:items-center');
-    expect(text).toHaveClass('lsd:gap-2');
+    expect(text).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
     expect(text).toHaveClass('lsd:rounded-md');
     expect(text).toHaveClass('lsd:border');
-    expect(text).toHaveClass('lsd:px-4');
+    expect(text).toHaveClass('lsd:px-(--lsd-spacing-base)');
     expect(text).toHaveClass('lsd:text-sm');
     expect(text).toHaveClass('lsd:font-medium');
     expect(text).toHaveClass('lsd:shadow-xs');
diff --git a/src/components/ui/button-group/types.ts b/src/components/ui/button-group/types.ts
index e17f8f46..489d5963 100644
--- a/src/components/ui/button-group/types.ts
+++ b/src/components/ui/button-group/types.ts
@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonGroupVariants = cva(
-  "lsd:flex lsd:w-fit lsd:items-stretch lsd:[&>*]:focus-visible:z-10 lsd:[&>*]:focus-visible:relative lsd:[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit lsd:[&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:lsd:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:lsd:gap-2",
+  "lsd:flex lsd:w-fit lsd:items-stretch lsd:[&>*]:focus-visible:z-10 lsd:[&>*]:focus-visible:relative lsd:[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit lsd:[&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:lsd:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:lsd:gap-[var(--lsd-spacing-smaller)]",
   {
     variants: {
       orientation: {
diff --git a/src/components/ui/button/Button.tsx b/src/components/ui/button/Button.tsx
index 5a6eebd4..40d412ed 100644
--- a/src/components/ui/button/Button.tsx
+++ b/src/components/ui/button/Button.tsx
@@ -12,25 +12,21 @@ export interface ButtonProps
 
 const LoadingSpinner = ({ size }: { size?: string }) => {
   const getSpinnerSize = () => {
+    const md =
+      'lsd:w-[var(--lsd-spacing-large)] lsd:h-[var(--lsd-spacing-large)]';
     switch (size) {
-      case 'xs':
-      case 'icon-xs':
-        return 'lsd:w-3 lsd:h-3';
       case 'icon-sm':
-        return 'lsd:w-3 lsd:h-3';
+        return 'lsd:w-[var(--lsd-spacing-small)] lsd:h-[var(--lsd-spacing-small)]';
       case 'sm':
-        return 'lsd:w-4 lsd:h-4';
+        return 'lsd:w-[var(--lsd-spacing-base)] lsd:h-[var(--lsd-spacing-base)]';
       case 'md':
       case 'icon-md':
-        return 'lsd:w-5 lsd:h-5';
+        return md;
       case 'lg':
       case 'icon-lg':
-        return 'lsd:w-6 lsd:h-6';
-      case 'xl':
-      case 'icon-xl':
-        return 'lsd:w-7 lsd:h-7';
+        return 'lsd:w-[var(--lsd-spacing-larger)] lsd:h-[var(--lsd-spacing-larger)]';
       default:
-        return 'lsd:w-5 lsd:h-5';
+        return md;
     }
   };
 
@@ -90,7 +86,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {loading ? (
-          <span className="lsd:flex lsd:items-center lsd:justify-center lsd:gap-2">
+          <span className="lsd:flex lsd:items-center lsd:justify-center lsd:gap-(--lsd-spacing-smaller)">
             <LoadingSpinner size={size} />
             {children && <span className="lsd:opacity-50">{children}</span>}
           </span>
diff --git a/src/components/ui/button/button.test.tsx b/src/components/ui/button/button.test.tsx
index 15f8d3dd..14dd9a0b 100644
--- a/src/components/ui/button/button.test.tsx
+++ b/src/components/ui/button/button.test.tsx
@@ -112,9 +112,9 @@ describe('Button', () => {
   it('applies medium size classes correctly', () => {
     render(<Button size="md">Medium</Button>);
     const button = screen.getByRole('button');
-    expect(button).toHaveClass('lsd:h-[34px]');
-    expect(button).toHaveClass('lsd:px-6');
-    expect(button).toHaveClass('lsd:py-2');
+    expect(button).toHaveClass('lsd:h-10');
+    expect(button).toHaveClass('lsd:px-[var(--lsd-spacing-larger)]');
+    expect(button).toHaveClass('lsd:py-[var(--lsd-spacing-smaller)]');
     expect(button).toHaveClass('lsd:text-base');
   });
 
@@ -122,8 +122,8 @@ describe('Button', () => {
     render(<Button size="sm">Small</Button>);
     const button = screen.getByRole('button');
     expect(button).toHaveClass('lsd:h-8');
-    expect(button).toHaveClass('lsd:px-3');
-    expect(button).toHaveClass('lsd:py-[6px]');
+    expect(button).toHaveClass('lsd:px-[var(--lsd-spacing-small)]');
+    expect(button).toHaveClass('lsd:py-[var(--lsd-spacing-smaller)]');
     expect(button).toHaveClass('lsd:text-sm');
   });
 
@@ -132,7 +132,7 @@ describe('Button', () => {
     const button = screen.getByRole('button');
     expect(button).toHaveClass('lsd:h-12');
     expect(button).toHaveClass('lsd:px-8');
-    expect(button).toHaveClass('lsd:py-[10px]');
+    expect(button).toHaveClass('lsd:py-[var(--lsd-spacing-small)]');
     expect(button).toHaveClass('lsd:text-lg');
   });
 
@@ -150,11 +150,11 @@ describe('Button', () => {
     expect(button).toHaveClass('lsd:h-8');
   });
 
-  it('applies icon-xs size classes correctly', () => {
-    render(<Button size="icon-xs">Icon</Button>);
+  it('applies icon-md size classes correctly', () => {
+    render(<Button size="icon-md">Icon</Button>);
     const button = screen.getByRole('button');
-    expect(button).toHaveClass('lsd:w-6');
-    expect(button).toHaveClass('lsd:h-6');
+    expect(button).toHaveClass('lsd:w-10');
+    expect(button).toHaveClass('lsd:h-10');
   });
 
   it('applies icon-lg size classes correctly', () => {
@@ -164,13 +164,6 @@ describe('Button', () => {
     expect(button).toHaveClass('lsd:h-12');
   });
 
-  it('applies icon-xl size classes correctly', () => {
-    render(<Button size="icon-xl">Icon</Button>);
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass('lsd:w-16');
-    expect(button).toHaveClass('lsd:h-16');
-  });
-
   it('uses default variant when not specified', () => {
     render(<Button>Default</Button>);
     const button = screen.getByRole('button');
@@ -180,7 +173,7 @@ describe('Button', () => {
   it('uses default size when not specified', () => {
     render(<Button>Default</Button>);
     const button = screen.getByRole('button');
-    expect(button).toHaveClass('lsd:h-[34px]');
+    expect(button).toHaveClass('lsd:h-10');
   });
 
   it('handles click events', () => {
@@ -423,23 +416,33 @@ describe('buttonVariants', () => {
   });
 
   it('returns correct classes for medium size', () => {
-    expect(buttonVariants({ size: 'md' })).toContain('lsd:h-[34px]');
-    expect(buttonVariants({ size: 'md' })).toContain('lsd:px-6');
-    expect(buttonVariants({ size: 'md' })).toContain('lsd:py-2');
+    expect(buttonVariants({ size: 'md' })).toContain('lsd:h-10');
+    expect(buttonVariants({ size: 'md' })).toContain(
+      'lsd:px-[var(--lsd-spacing-larger)]',
+    );
+    expect(buttonVariants({ size: 'md' })).toContain(
+      'lsd:py-[var(--lsd-spacing-smaller)]',
+    );
     expect(buttonVariants({ size: 'md' })).toContain('lsd:text-base');
   });
 
   it('returns correct classes for small size', () => {
     expect(buttonVariants({ size: 'sm' })).toContain('lsd:h-8');
-    expect(buttonVariants({ size: 'sm' })).toContain('lsd:px-3');
-    expect(buttonVariants({ size: 'sm' })).toContain('lsd:py-[6px]');
+    expect(buttonVariants({ size: 'sm' })).toContain(
+      'lsd:px-[var(--lsd-spacing-small)]',
+    );
+    expect(buttonVariants({ size: 'sm' })).toContain(
+      'lsd:py-[var(--lsd-spacing-smaller)]',
+    );
     expect(buttonVariants({ size: 'sm' })).toContain('lsd:text-sm');
   });
 
   it('returns correct classes for large size', () => {
     expect(buttonVariants({ size: 'lg' })).toContain('lsd:h-12');
     expect(buttonVariants({ size: 'lg' })).toContain('lsd:px-8');
-    expect(buttonVariants({ size: 'lg' })).toContain('lsd:py-[10px]');
+    expect(buttonVariants({ size: 'lg' })).toContain(
+      'lsd:py-[var(--lsd-spacing-small)]',
+    );
     expect(buttonVariants({ size: 'lg' })).toContain('lsd:text-lg');
   });
 
@@ -453,9 +456,9 @@ describe('buttonVariants', () => {
     expect(buttonVariants({ size: 'icon-sm' })).toContain('lsd:h-8');
   });
 
-  it('returns correct classes for icon-xs size', () => {
-    expect(buttonVariants({ size: 'icon-xs' })).toContain('lsd:w-6');
-    expect(buttonVariants({ size: 'icon-xs' })).toContain('lsd:h-6');
+  it('returns correct classes for icon-md size', () => {
+    expect(buttonVariants({ size: 'icon-md' })).toContain('lsd:w-10');
+    expect(buttonVariants({ size: 'icon-md' })).toContain('lsd:h-10');
   });
 
   it('returns correct classes for icon-lg size', () => {
@@ -463,17 +466,12 @@ describe('buttonVariants', () => {
     expect(buttonVariants({ size: 'icon-lg' })).toContain('lsd:h-12');
   });
 
-  it('returns correct classes for icon-xl size', () => {
-    expect(buttonVariants({ size: 'icon-xl' })).toContain('lsd:w-16');
-    expect(buttonVariants({ size: 'icon-xl' })).toContain('lsd:h-16');
-  });
-
   it('uses default variant when not specified', () => {
     expect(buttonVariants({})).toContain('lsd:bg-primary');
   });
 
   it('uses default size when not specified', () => {
-    expect(buttonVariants({})).toContain('lsd:h-[34px]');
+    expect(buttonVariants({})).toContain('lsd:h-10');
   });
 
   it('combines variant and size correctly', () => {
diff --git a/src/components/ui/button/types.ts b/src/components/ui/button/types.ts
index 6dd5e369..5eb793a1 100644
--- a/src/components/ui/button/types.ts
+++ b/src/components/ui/button/types.ts
@@ -40,16 +40,12 @@ export const buttonVariants = cva(
           'lsd:bg-lsd-success lsd:text-white lsd:border-lsd-success lsd:rounded-full lsd:hover:bg-lsd-success/90',
       },
       size: {
-        xs: 'lsd:h-7 lsd:px-2 lsd:py-1 lsd:text-xs',
-        sm: 'lsd:h-8 lsd:px-3 lsd:py-[6px] lsd:text-sm',
-        md: 'lsd:h-[34px] lsd:px-6 lsd:py-2 lsd:text-base',
-        lg: 'lsd:h-12 lsd:px-8 lsd:py-[10px] lsd:text-lg',
-        xl: 'lsd:h-14 lsd:px-10 lsd:py-3 lsd:text-xl',
-        'icon-xs': 'lsd:w-6 lsd:h-6',
+        sm: 'lsd:h-8 lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm',
+        md: 'lsd:h-10 lsd:px-[var(--lsd-spacing-larger)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-base',
+        lg: 'lsd:h-12 lsd:px-8 lsd:py-[var(--lsd-spacing-small)] lsd:text-lg',
         'icon-sm': 'lsd:w-8 lsd:h-8',
         'icon-md': 'lsd:w-10 lsd:h-10',
         'icon-lg': 'lsd:w-12 lsd:h-12',
-        'icon-xl': 'lsd:w-16 lsd:h-16',
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/card/CardContent.tsx b/src/components/ui/card/CardContent.tsx
index 47ef7cdf..838c3f81 100644
--- a/src/components/ui/card/CardContent.tsx
+++ b/src/components/ui/card/CardContent.tsx
@@ -10,7 +10,10 @@ const CardContent = React.forwardRef<
     <div
       ref={ref}
       data-slot="card-content"
-      className={cn('lsd:px-6 lsd:py-6', className)}
+      className={cn(
+        'lsd:px-(--lsd-spacing-larger) lsd:py-(--lsd-spacing-larger)',
+        className,
+      )}
       {...props}
     />
   );
diff --git a/src/components/ui/card/CardFooter.tsx b/src/components/ui/card/CardFooter.tsx
index 0da72f3e..cf1a2788 100644
--- a/src/components/ui/card/CardFooter.tsx
+++ b/src/components/ui/card/CardFooter.tsx
@@ -11,7 +11,7 @@ const CardFooter = React.forwardRef<
       ref={ref}
       data-slot="card-footer"
       className={cn(
-        'lsd:flex lsd:items-center lsd:px-6 lsd:py-6 lsd:border-t lsd:border-lsd-border lsd:pt-6',
+        'lsd:flex lsd:items-center lsd:px-(--lsd-spacing-larger) lsd:py-(--lsd-spacing-larger) lsd:border-t lsd:border-lsd-border lsd:pt-(--lsd-spacing-larger)',
         className,
       )}
       {...props}
diff --git a/src/components/ui/card/CardHeader.tsx b/src/components/ui/card/CardHeader.tsx
index 2019517b..a0f997aa 100644
--- a/src/components/ui/card/CardHeader.tsx
+++ b/src/components/ui/card/CardHeader.tsx
@@ -11,7 +11,7 @@ const CardHeader = React.forwardRef<
       ref={ref}
       data-slot="card-header"
       className={cn(
-        '@container/card-header lsd:grid lsd:auto-rows-min lsd:grid-rows-[auto_auto] lsd:items-start lsd:gap-2 lsd:px-6 lsd:py-6 lsd:has-data-[slot=card-action]:grid-cols-[1fr_auto] lsd:border-b lsd:border-lsd-border lsd:pb-6',
+        '@container/card-header lsd:grid lsd:auto-rows-min lsd:grid-rows-[auto_auto] lsd:items-start lsd:gap-(--lsd-spacing-smaller) lsd:px-(--lsd-spacing-larger) lsd:py-(--lsd-spacing-larger) lsd:has-data-[slot=card-action]:grid-cols-[1fr_auto] lsd:border-b lsd:border-lsd-border lsd:pb-(--lsd-spacing-larger)',
         className,
       )}
       {...props}
diff --git a/src/components/ui/card/__tests__/card-content.test.tsx b/src/components/ui/card/__tests__/card-content.test.tsx
index f7e0c1d1..d3233c25 100644
--- a/src/components/ui/card/__tests__/card-content.test.tsx
+++ b/src/components/ui/card/__tests__/card-content.test.tsx
@@ -22,8 +22,8 @@ describe('CardContent', () => {
   it('applies default classes', () => {
     const { container } = render(<CardContent />);
     const content = queryByDataSlot(container, 'card-content');
-    expect(content).toHaveClass('lsd:px-6');
-    expect(content).toHaveClass('lsd:py-6');
+    expect(content).toHaveClass('lsd:px-(--lsd-spacing-larger)');
+    expect(content).toHaveClass('lsd:py-(--lsd-spacing-larger)');
   });
 
   it('renders children', () => {
diff --git a/src/components/ui/card/__tests__/card-footer.test.tsx b/src/components/ui/card/__tests__/card-footer.test.tsx
index 58544b7e..ed05665e 100644
--- a/src/components/ui/card/__tests__/card-footer.test.tsx
+++ b/src/components/ui/card/__tests__/card-footer.test.tsx
@@ -24,11 +24,11 @@ describe('CardFooter', () => {
     const footer = queryByDataSlot(container, 'card-footer');
     expect(footer).toHaveClass('lsd:flex');
     expect(footer).toHaveClass('lsd:items-center');
-    expect(footer).toHaveClass('lsd:px-6');
-    expect(footer).toHaveClass('lsd:py-6');
+    expect(footer).toHaveClass('lsd:px-(--lsd-spacing-larger)');
+    expect(footer).toHaveClass('lsd:py-(--lsd-spacing-larger)');
     expect(footer).toHaveClass('lsd:border-t');
     expect(footer).toHaveClass('lsd:border-lsd-border');
-    expect(footer).toHaveClass('lsd:pt-6');
+    expect(footer).toHaveClass('lsd:pt-(--lsd-spacing-larger)');
   });
 
   it('renders children', () => {
diff --git a/src/components/ui/card/__tests__/card-header.test.tsx b/src/components/ui/card/__tests__/card-header.test.tsx
index 5a0040c3..ca85e3a0 100644
--- a/src/components/ui/card/__tests__/card-header.test.tsx
+++ b/src/components/ui/card/__tests__/card-header.test.tsx
@@ -27,12 +27,12 @@ describe('CardHeader', () => {
     expect(header).toHaveClass('lsd:auto-rows-min');
     expect(header).toHaveClass('lsd:grid-rows-[auto_auto]');
     expect(header).toHaveClass('lsd:items-start');
-    expect(header).toHaveClass('lsd:gap-2');
-    expect(header).toHaveClass('lsd:px-6');
-    expect(header).toHaveClass('lsd:py-6');
+    expect(header).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
+    expect(header).toHaveClass('lsd:px-(--lsd-spacing-larger)');
+    expect(header).toHaveClass('lsd:py-(--lsd-spacing-larger)');
     expect(header).toHaveClass('lsd:border-b');
     expect(header).toHaveClass('lsd:border-lsd-border');
-    expect(header).toHaveClass('lsd:pb-6');
+    expect(header).toHaveClass('lsd:pb-(--lsd-spacing-larger)');
   });
 
   it('renders children', () => {
diff --git a/src/components/ui/checkbox/Checkbox.tsx b/src/components/ui/checkbox/Checkbox.tsx
index c99526d6..d457da76 100644
--- a/src/components/ui/checkbox/Checkbox.tsx
+++ b/src/components/ui/checkbox/Checkbox.tsx
@@ -12,7 +12,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        'peer lsd:border-lsd-border dark:lsd:bg-lsd-surface/30 lsd:data-[state=checked]:bg-lsd-primary lsd:data-[state=checked]:text-lsd-surface dark:lsd:data-[state=checked]:bg-lsd-primary lsd:data-[state=checked]:border-lsd-primary focus-visible:lsd:border-lsd-border focus-visible:lsd:ring-lsd-text/50 aria-invalid:lsd:ring-lsd-destructive/20 dark:aria-invalid:lsd:ring-lsd-destructive/40 aria-invalid:lsd:border-lsd-destructive lsd:size-5 lsd:shrink-0 lsd:border lsd:shadow-xs lsd:transition-shadow lsd:outline-none focus-visible:lsd:ring-[3px] lsd:cursor-pointer lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50',
+        'peer lsd:border-lsd-border dark:lsd:bg-lsd-surface/30 lsd:data-[state=checked]:bg-lsd-primary lsd:data-[state=checked]:text-lsd-surface dark:lsd:data-[state=checked]:bg-lsd-primary lsd:data-[state=checked]:border-lsd-primary focus-visible:lsd:border-lsd-border focus-visible:lsd:ring-lsd-text/50 aria-invalid:lsd:ring-lsd-destructive/20 dark:aria-invalid:lsd:ring-lsd-destructive/40 aria-invalid:lsd:border-lsd-destructive lsd:size-(--lsd-spacing-large) lsd:shrink-0 lsd:border lsd:shadow-xs lsd:transition-shadow lsd:outline-none focus-visible:lsd:ring-[3px] lsd:cursor-pointer lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50',
         className,
       )}
       {...props}
@@ -21,7 +21,7 @@ function Checkbox({
         data-slot="checkbox-indicator"
         className="lsd:flex lsd:items-center lsd:justify-center lsd:text-current lsd:transition-none"
       >
-        <CheckIcon className="lsd:size-4" />
+        <CheckIcon className="lsd:size-(--lsd-spacing-base)" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   );
diff --git a/src/components/ui/checkbox/checkbox.test.tsx b/src/components/ui/checkbox/checkbox.test.tsx
index 4b181438..3ff8fb88 100644
--- a/src/components/ui/checkbox/checkbox.test.tsx
+++ b/src/components/ui/checkbox/checkbox.test.tsx
@@ -16,7 +16,7 @@ describe('Checkbox', () => {
   it('applies base classes correctly', () => {
     render(<Checkbox />);
     const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).toHaveClass('lsd:size-5');
+    expect(checkbox).toHaveClass('lsd:size-(--lsd-spacing-large)');
     expect(checkbox).toHaveClass('lsd:border');
     expect(checkbox).toHaveClass('lsd:cursor-pointer');
     expect(checkbox).toHaveClass('lsd:transition-shadow');
diff --git a/src/components/ui/command/CommandDialog.tsx b/src/components/ui/command/CommandDialog.tsx
index 8e668597..69436ea6 100644
--- a/src/components/ui/command/CommandDialog.tsx
+++ b/src/components/ui/command/CommandDialog.tsx
@@ -33,7 +33,7 @@ export function CommandDialog({
         className={cn('lsd:overflow-hidden lsd:p-0', className)}
         showCloseButton={showCloseButton}
       >
-        <Command className="lsd:[&_[cmdk-group-heading]]:text-lsd-text-primary lsd:[&_[cmdk-group-heading]]:px-2 lsd:[&_[cmdk-group-heading]]:font-medium lsd:[&_[cmdk-group]]:px-2 lsd:[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 lsd:[&_[cmdk-input-wrapper]_svg]:h-5 lsd:[&_[cmdk-input-wrapper]_svg]:w-5 lsd:[&_[cmdk-input]]:h-12 lsd:[&_[cmdk-item]]:px-2 lsd:[&_[cmdk-item]]:py-3 lsd:[&_[cmdk-item]_svg]:h-5 lsd:[&_[cmdk-item]_svg]:w-5">
+        <Command className="lsd:**:[[cmdk-group-heading]]:text-lsd-text-primary lsd:**:[[cmdk-group-heading]]:px-(--lsd-spacing-smaller) lsd:**:[[cmdk-group-heading]]:font-medium lsd:**:[[cmdk-group]]:px-(--lsd-spacing-smaller) lsd:[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 lsd:[&_[cmdk-input-wrapper]_svg]:h-(--lsd-spacing-large) lsd:[&_[cmdk-input-wrapper]_svg]:w-(--lsd-spacing-large) lsd:**:[[cmdk-input]]:h-12 lsd:**:[[cmdk-item]]:px-(--lsd-spacing-smaller) lsd:**:[[cmdk-item]]:py-(--lsd-spacing-small) lsd:[&_[cmdk-item]_svg]:h-(--lsd-spacing-large) lsd:[&_[cmdk-item]_svg]:w-(--lsd-spacing-large)">
           {children}
         </Command>
       </DialogContent>
diff --git a/src/components/ui/command/CommandEmpty.tsx b/src/components/ui/command/CommandEmpty.tsx
index 991bd3e0..84ee4e5b 100644
--- a/src/components/ui/command/CommandEmpty.tsx
+++ b/src/components/ui/command/CommandEmpty.tsx
@@ -7,7 +7,7 @@ export function CommandEmpty({
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className="lsd:py-6 lsd:text-center lsd:text-sm"
+      className="lsd:py-(--lsd-spacing-larger) lsd:text-center lsd:text-sm"
       {...props}
     />
   );
diff --git a/src/components/ui/command/CommandGroup.tsx b/src/components/ui/command/CommandGroup.tsx
index a45ce9d2..8b199b8f 100644
--- a/src/components/ui/command/CommandGroup.tsx
+++ b/src/components/ui/command/CommandGroup.tsx
@@ -11,7 +11,7 @@ export function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        'lsd:text-lsd-text-primary lsd:[&_[cmdk-group-heading]]:text-lsd-text-primary lsd:overflow-hidden lsd:p-1 lsd:[&_[cmdk-group-heading]]:px-2 lsd:[&_[cmdk-group-heading]]:py-1.5 lsd:[&_[cmdk-group-heading]]:text-xs lsd:[&_[cmdk-group-heading]]:font-medium',
+        'lsd:text-lsd-text-primary lsd:**:[[cmdk-group-heading]]:text-lsd-text-primary lsd:overflow-hidden lsd:p-(--lsd-spacing-smallest) lsd:**:[[cmdk-group-heading]]:px-(--lsd-spacing-smaller) lsd:**:[[cmdk-group-heading]]:py-(--lsd-spacing-smaller) lsd:**:[[cmdk-group-heading]]:text-xs lsd:**:[[cmdk-group-heading]]:font-medium',
         className,
       )}
       {...props}
diff --git a/src/components/ui/command/CommandInput.tsx b/src/components/ui/command/CommandInput.tsx
index 2cb0db05..1435d1a4 100644
--- a/src/components/ui/command/CommandInput.tsx
+++ b/src/components/ui/command/CommandInput.tsx
@@ -11,13 +11,13 @@ export function CommandInput({
   return (
     <div
       data-slot="command-input-wrapper"
-      className="lsd:flex lsd:h-9 lsd:items-center lsd:gap-2 lsd:border-b lsd:border-lsd-border lsd:px-3"
+      className="lsd:flex lsd:h-9 lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:border-b lsd:border-lsd-border lsd:px-(--lsd-spacing-small)"
     >
       <SearchIcon className="lsd:size-4 lsd:shrink-0 lsd:opacity-50" />
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          'placeholder:text-lsd-text/50 lsd:flex lsd:h-10 lsd:w-full lsd:bg-transparent lsd:py-3 lsd:text-sm lsd:outline-hidden lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50',
+          'placeholder:text-lsd-text/50 lsd:flex lsd:h-10 lsd:w-full lsd:bg-transparent lsd:py-(--lsd-spacing-small) lsd:text-sm lsd:outline-hidden lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50',
           className,
         )}
         {...props}
diff --git a/src/components/ui/command/CommandItem.tsx b/src/components/ui/command/CommandItem.tsx
index 27e2f20f..e90a2607 100644
--- a/src/components/ui/command/CommandItem.tsx
+++ b/src/components/ui/command/CommandItem.tsx
@@ -11,7 +11,7 @@ export function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "lsd:data-[selected=true]:bg-lsd-surface lsd:data-[selected=true]:text-lsd-text-primary lsd:[&_svg:not([class*='text-'])]:text-lsd-text-primary lsd:relative lsd:flex lsd:cursor-default lsd:items-center lsd:gap-2 lsd:px-2 lsd:py-1.5 lsd:text-sm lsd:outline-hidden lsd:select-none lsd:data-[disabled=true]:pointer-events-none lsd:data-[disabled=true]:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
+        "lsd:data-[selected=true]:bg-lsd-surface lsd:data-[selected=true]:text-lsd-text-primary lsd:[&_svg:not([class*='text-'])]:text-lsd-text-primary lsd:relative lsd:flex lsd:cursor-default lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:px-(--lsd-spacing-smaller) lsd:py-(--lsd-spacing-smaller) lsd:text-sm lsd:outline-hidden lsd:select-none lsd:data-[disabled=true]:pointer-events-none lsd:data-[disabled=true]:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
diff --git a/src/components/ui/command/CommandList.tsx b/src/components/ui/command/CommandList.tsx
index 0815da9a..eb468e99 100644
--- a/src/components/ui/command/CommandList.tsx
+++ b/src/components/ui/command/CommandList.tsx
@@ -11,7 +11,7 @@ export function CommandList({
     <CommandPrimitive.List
       data-slot="command-list"
       className={cn(
-        'lsd:max-h-[300px] lsd:scroll-py-1 lsd:overflow-x-hidden lsd:overflow-y-auto',
+        'lsd:max-h-[300px] lsd:scroll-py-(--lsd-spacing-smallest) lsd:overflow-x-hidden lsd:overflow-y-auto',
         className,
       )}
       {...props}
diff --git a/src/components/ui/command/CommandSeparator.tsx b/src/components/ui/command/CommandSeparator.tsx
index 4ee3ee44..9c8ef60d 100644
--- a/src/components/ui/command/CommandSeparator.tsx
+++ b/src/components/ui/command/CommandSeparator.tsx
@@ -10,7 +10,10 @@ export function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn('lsd:bg-lsd-border lsd:-mx-1 lsd:h-px', className)}
+      className={cn(
+        'lsd:bg-lsd-border lsd:-mx-(--lsd-spacing-smallest) lsd:h-px',
+        className,
+      )}
       {...props}
     />
   );
diff --git a/src/components/ui/command/__tests__/command-empty.test.tsx b/src/components/ui/command/__tests__/command-empty.test.tsx
index f0da9032..07a6bbb8 100644
--- a/src/components/ui/command/__tests__/command-empty.test.tsx
+++ b/src/components/ui/command/__tests__/command-empty.test.tsx
@@ -40,7 +40,7 @@ describe('CommandEmpty', () => {
       </Command>,
     );
     const empty = document.querySelector('[data-slot="command-empty"]');
-    expect(empty).toHaveClass('lsd:py-6');
+    expect(empty).toHaveClass('lsd:py-(--lsd-spacing-larger)');
     expect(empty).toHaveClass('lsd:text-center');
     expect(empty).toHaveClass('lsd:text-sm');
   });
diff --git a/src/components/ui/command/__tests__/command-group.test.tsx b/src/components/ui/command/__tests__/command-group.test.tsx
index b0e89ada..736ca3b5 100644
--- a/src/components/ui/command/__tests__/command-group.test.tsx
+++ b/src/components/ui/command/__tests__/command-group.test.tsx
@@ -54,7 +54,7 @@ describe('CommandGroup', () => {
     const group = document.querySelector('[data-slot="command-group"]');
     expect(group).toHaveClass('lsd:text-lsd-text-primary');
     expect(group).toHaveClass('lsd:overflow-hidden');
-    expect(group).toHaveClass('lsd:p-1');
+    expect(group).toHaveClass('lsd:p-(--lsd-spacing-smallest)');
   });
 
   it('merges custom className with component classes', () => {
diff --git a/src/components/ui/command/__tests__/command-input.test.tsx b/src/components/ui/command/__tests__/command-input.test.tsx
index ed33bba0..fd3a28b3 100644
--- a/src/components/ui/command/__tests__/command-input.test.tsx
+++ b/src/components/ui/command/__tests__/command-input.test.tsx
@@ -75,10 +75,10 @@ describe('CommandInput', () => {
     expect(wrapper).toHaveClass('lsd:flex');
     expect(wrapper).toHaveClass('lsd:h-9');
     expect(wrapper).toHaveClass('lsd:items-center');
-    expect(wrapper).toHaveClass('lsd:gap-2');
+    expect(wrapper).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
     expect(wrapper).toHaveClass('lsd:border-b');
     expect(wrapper).toHaveClass('lsd:border-lsd-border');
-    expect(wrapper).toHaveClass('lsd:px-3');
+    expect(wrapper).toHaveClass('lsd:px-(--lsd-spacing-small)');
   });
 
   it('applies base classes to input', () => {
@@ -95,7 +95,7 @@ describe('CommandInput', () => {
     expect(input).toHaveClass('lsd:h-10');
     expect(input).toHaveClass('lsd:w-full');
     expect(input).toHaveClass('lsd:bg-transparent');
-    expect(input).toHaveClass('lsd:py-3');
+    expect(input).toHaveClass('lsd:py-(--lsd-spacing-small)');
     expect(input).toHaveClass('lsd:text-sm');
   });
 
diff --git a/src/components/ui/command/__tests__/command-item.test.tsx b/src/components/ui/command/__tests__/command-item.test.tsx
index d92acba8..8b0b8376 100644
--- a/src/components/ui/command/__tests__/command-item.test.tsx
+++ b/src/components/ui/command/__tests__/command-item.test.tsx
@@ -50,9 +50,9 @@ describe('CommandItem', () => {
     expect(item).toHaveClass('lsd:flex');
     expect(item).toHaveClass('lsd:cursor-default');
     expect(item).toHaveClass('lsd:items-center');
-    expect(item).toHaveClass('lsd:gap-2');
-    expect(item).toHaveClass('lsd:px-2');
-    expect(item).toHaveClass('lsd:py-1.5');
+    expect(item).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
+    expect(item).toHaveClass('lsd:px-(--lsd-spacing-smaller)');
+    expect(item).toHaveClass('lsd:py-(--lsd-spacing-smaller)');
     expect(item).toHaveClass('lsd:text-sm');
   });
 
diff --git a/src/components/ui/command/__tests__/command-list.test.tsx b/src/components/ui/command/__tests__/command-list.test.tsx
index 64d9908b..79dc7dd4 100644
--- a/src/components/ui/command/__tests__/command-list.test.tsx
+++ b/src/components/ui/command/__tests__/command-list.test.tsx
@@ -41,7 +41,7 @@ describe('CommandList', () => {
     );
     const list = document.querySelector('[data-slot="command-list"]');
     expect(list).toHaveClass('lsd:max-h-[300px]');
-    expect(list).toHaveClass('lsd:scroll-py-1');
+    expect(list).toHaveClass('lsd:scroll-py-(--lsd-spacing-smallest)');
     expect(list).toHaveClass('lsd:overflow-x-hidden');
     expect(list).toHaveClass('lsd:overflow-y-auto');
   });
diff --git a/src/components/ui/command/__tests__/command-separator.test.tsx b/src/components/ui/command/__tests__/command-separator.test.tsx
index 6cabfd59..f2c3006c 100644
--- a/src/components/ui/command/__tests__/command-separator.test.tsx
+++ b/src/components/ui/command/__tests__/command-separator.test.tsx
@@ -53,7 +53,7 @@ describe('CommandSeparator', () => {
     );
     const separator = document.querySelector('[data-slot="command-separator"]');
     expect(separator).toHaveClass('lsd:bg-lsd-border');
-    expect(separator).toHaveClass('lsd:-mx-1');
+    expect(separator).toHaveClass('lsd:-mx-(--lsd-spacing-smallest)');
     expect(separator).toHaveClass('lsd:h-px');
   });
 
diff --git a/src/components/ui/dialog/DialogContent.tsx b/src/components/ui/dialog/DialogContent.tsx
index 5255f365..ead6d46e 100644
--- a/src/components/ui/dialog/DialogContent.tsx
+++ b/src/components/ui/dialog/DialogContent.tsx
@@ -21,7 +21,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'lsd:bg-lsd-surface lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:fixed lsd:top-[50%] lsd:left-[50%] lsd:z-50 lsd:grid lsd:w-full lsd:max-w-[calc(100%-2rem)] lsd:translate-x-[-50%] lsd:translate-y-[-50%] lsd:gap-4 lsd:border lsd:border-lsd-border lsd:p-6 lsd:shadow-lg lsd:duration-200 lsd:sm:max-w-lg',
+          'lsd:bg-lsd-surface lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:fixed lsd:top-[50%] lsd:left-[50%] lsd:z-50 lsd:grid lsd:w-full lsd:max-w-[calc(100%-2rem)] lsd:translate-x-[-50%] lsd:translate-y-[-50%] lsd:gap-(--lsd-spacing-base) lsd:border lsd:border-lsd-border lsd:p-(--lsd-spacing-larger) lsd:shadow-lg lsd:duration-200 lsd:sm:max-w-lg',
           className,
         )}
         {...props}
@@ -30,7 +30,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogClose
             data-slot="dialog-close"
-            className="lsd:p-2 focus:lsd:outline-hidden lsd:data-[state=open]:bg-lsd-surface lsd:data-[state=open]:text-lsd-text-primary lsd:absolute lsd:top-4 lsd:right-4 lsd:rounded-xs lsd:opacity-70 lsd:transition-opacity lsd:hover:opacity-100 lsd:disabled:pointer-events-none lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4 lsd:cursor-pointer"
+            className="lsd:p-(--lsd-spacing-smaller) focus:lsd:outline-hidden lsd:data-[state=open]:bg-lsd-surface lsd:data-[state=open]:text-lsd-text-primary lsd:absolute lsd:top-(--lsd-spacing-base) lsd:right-(--lsd-spacing-base) lsd:rounded-xs lsd:opacity-70 lsd:transition-opacity lsd:hover:opacity-100 lsd:disabled:pointer-events-none lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4 lsd:cursor-pointer"
           >
             <XIcon />
             <span className="lsd:sr-only">Close</span>
diff --git a/src/components/ui/dialog/DialogFooter.tsx b/src/components/ui/dialog/DialogFooter.tsx
index 0cfca9ec..aae37f42 100644
--- a/src/components/ui/dialog/DialogFooter.tsx
+++ b/src/components/ui/dialog/DialogFooter.tsx
@@ -7,7 +7,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="dialog-footer"
       className={cn(
-        'lsd:flex lsd:flex-col-reverse lsd:gap-2 lsd:sm:flex-row lsd:sm:justify-end',
+        'lsd:flex lsd:flex-col-reverse lsd:gap-(--lsd-spacing-smaller) lsd:sm:flex-row lsd:sm:justify-end',
         className,
       )}
       {...props}
diff --git a/src/components/ui/dialog/DialogHeader.tsx b/src/components/ui/dialog/DialogHeader.tsx
index 56434a37..157d896d 100644
--- a/src/components/ui/dialog/DialogHeader.tsx
+++ b/src/components/ui/dialog/DialogHeader.tsx
@@ -7,7 +7,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="dialog-header"
       className={cn(
-        'lsd:flex lsd:flex-col lsd:gap-2 lsd:text-center lsd:sm:text-left',
+        'lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:text-center lsd:sm:text-left',
         className,
       )}
       {...props}
diff --git a/src/components/ui/dialog/__tests__/dialog-content.test.tsx b/src/components/ui/dialog/__tests__/dialog-content.test.tsx
index 76376074..3fbb59fe 100644
--- a/src/components/ui/dialog/__tests__/dialog-content.test.tsx
+++ b/src/components/ui/dialog/__tests__/dialog-content.test.tsx
@@ -36,7 +36,7 @@ describe('DialogContent', () => {
     expect(content).toHaveClass('lsd:w-full');
     expect(content).toHaveClass('lsd:border');
     expect(content).toHaveClass('lsd:border-lsd-border');
-    expect(content).toHaveClass('lsd:p-6');
+    expect(content).toHaveClass('lsd:p-(--lsd-spacing-larger)');
   });
 
   it('applies data-slot attribute', () => {
diff --git a/src/components/ui/dialog/__tests__/dialog-footer.test.tsx b/src/components/ui/dialog/__tests__/dialog-footer.test.tsx
index 27cedd0d..6535b463 100644
--- a/src/components/ui/dialog/__tests__/dialog-footer.test.tsx
+++ b/src/components/ui/dialog/__tests__/dialog-footer.test.tsx
@@ -32,7 +32,7 @@ describe('DialogFooter', () => {
     const footer = document.querySelector('[data-slot="dialog-footer"]');
     expect(footer).toHaveClass('lsd:flex');
     expect(footer).toHaveClass('lsd:flex-col-reverse');
-    expect(footer).toHaveClass('lsd:gap-2');
+    expect(footer).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
   });
 
   it('applies data-slot attribute', () => {
diff --git a/src/components/ui/dialog/__tests__/dialog-header.test.tsx b/src/components/ui/dialog/__tests__/dialog-header.test.tsx
index 45ef58c5..76e1d0c4 100644
--- a/src/components/ui/dialog/__tests__/dialog-header.test.tsx
+++ b/src/components/ui/dialog/__tests__/dialog-header.test.tsx
@@ -31,7 +31,7 @@ describe('DialogHeader', () => {
     const header = document.querySelector('[data-slot="dialog-header"]');
     expect(header).toHaveClass('lsd:flex');
     expect(header).toHaveClass('lsd:flex-col');
-    expect(header).toHaveClass('lsd:gap-2');
+    expect(header).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
     expect(header).toHaveClass('lsd:text-center');
   });
 
diff --git a/src/components/ui/input/Input.tsx b/src/components/ui/input/Input.tsx
index 8305cc73..636d7483 100644
--- a/src/components/ui/input/Input.tsx
+++ b/src/components/ui/input/Input.tsx
@@ -51,7 +51,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             id={finalId}
             className={cn(
               'file:lsd:text-lsd-text-primary placeholder:lsd:text-lsd-text-primary placeholder:lsd:opacity-30 selection:lsd:bg-lsd-primary selection:lsd:text-lsd-surface lsd:border-none lsd:outline-none lsd:bg-transparent lsd:text-lsd-text-primary lsd:w-full lsd:h-full file:lsd:inline-flex file:lsd:h-7 file:lsd:border-0 file:lsd:bg-transparent file:lsd:font-medium lsd:disabled:pointer-events-none lsd:disabled:cursor-not-allowed lsd:disabled:opacity-34',
-              'focus-visible:lsd:outline-none lsd:px-4',
+              'focus-visible:lsd:outline-none lsd:px-(--lsd-spacing-base)',
               getTextSizeClasses(size),
               getVerticalPaddingClasses(size),
             )}
@@ -59,7 +59,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           />
         </div>
         {supportingText && (
-          <div className="lsd:pt-1.5 lsd:w-fit">
+          <div className="lsd:pt-(--lsd-spacing-smaller) lsd:w-fit">
             <p
               className={cn(
                 'lsd:text-sm',
diff --git a/src/components/ui/input/input.test.tsx b/src/components/ui/input/input.test.tsx
index bbec1e47..c942d43e 100644
--- a/src/components/ui/input/input.test.tsx
+++ b/src/components/ui/input/input.test.tsx
@@ -31,21 +31,21 @@ describe('Input', () => {
     render(<Input />);
     const input = screen.getByRole('textbox');
     expect(input).toHaveClass('lsd:text-base');
-    expect(input).toHaveClass('lsd:py-3');
+    expect(input).toHaveClass('lsd:py-[var(--lsd-spacing-small)]');
   });
 
   it('renders with large size', () => {
     render(<Input size="lg" />);
     const input = screen.getByRole('textbox');
     expect(input).toHaveClass('lsd:text-lg');
-    expect(input).toHaveClass('lsd:py-4');
+    expect(input).toHaveClass('lsd:py-[var(--lsd-spacing-base)]');
   });
 
   it('renders with small size', () => {
     render(<Input size="sm" />);
     const input = screen.getByRole('textbox');
     expect(input).toHaveClass('lsd:text-sm');
-    expect(input).toHaveClass('lsd:py-2');
+    expect(input).toHaveClass('lsd:py-[var(--lsd-spacing-smaller)]');
   });
 
   it('renders with label', () => {
@@ -171,7 +171,7 @@ describe('Input', () => {
     render(<Input />);
     const input = screen.getByRole('textbox');
     expect(input).toHaveClass('focus-visible:lsd:outline-none');
-    expect(input).toHaveClass('lsd:px-4');
+    expect(input).toHaveClass('lsd:px-(--lsd-spacing-base)');
   });
 
   it('applies base classes correctly', () => {
diff --git a/src/components/ui/input/utils.ts b/src/components/ui/input/utils.ts
index 1143ad10..8628acf0 100644
--- a/src/components/ui/input/utils.ts
+++ b/src/components/ui/input/utils.ts
@@ -18,19 +18,20 @@ export function getTextSizeClasses(size: SizeVariant): string {
 }
 
 export function getVerticalPaddingClasses(size: SizeVariant): string {
+  const md = 'lsd:py-[var(--lsd-spacing-small)]';
   switch (size) {
     case 'xs':
-      return 'lsd:py-1';
+      return 'lsd:py-[var(--lsd-spacing-smallest)]';
     case 'sm':
-      return 'lsd:py-2';
+      return 'lsd:py-[var(--lsd-spacing-smaller)]';
     case 'md':
-      return 'lsd:py-3';
+      return md;
     case 'lg':
-      return 'lsd:py-4';
+      return 'lsd:py-[var(--lsd-spacing-base)]';
     case 'xl':
-      return 'lsd:py-5';
+      return 'lsd:py-[var(--lsd-spacing-large)]';
     default:
-      return 'lsd:py-3';
+      return md;
   }
 }
 
diff --git a/src/components/ui/label/label.test.tsx b/src/components/ui/label/label.test.tsx
index d1246cc9..442ce6f9 100644
--- a/src/components/ui/label/label.test.tsx
+++ b/src/components/ui/label/label.test.tsx
@@ -68,7 +68,7 @@ describe('Label', () => {
     const label = screen.getByText('Label');
     expect(label).toHaveClass('lsd:flex');
     expect(label).toHaveClass('lsd:items-center');
-    expect(label).toHaveClass('lsd:gap-2');
+    expect(label).toHaveClass('lsd:gap-[var(--lsd-spacing-smaller)]');
     expect(label).toHaveClass('lsd:select-none');
   });
 
diff --git a/src/components/ui/label/types.ts b/src/components/ui/label/types.ts
index 069495ae..035fb3e8 100644
--- a/src/components/ui/label/types.ts
+++ b/src/components/ui/label/types.ts
@@ -4,7 +4,7 @@ import type { SizeVariant } from '@/lib/types';
 export type LabelVariant = 'default' | 'secondary';
 
 export const labelVariants = cva(
-  'lsd:flex lsd:items-center lsd:gap-2 lsd:select-none lsd:group-data-[disabled=true]:pointer-events-none lsd:group-data-[disabled=true]:opacity-50 lsd:peer-disabled:cursor-not-allowed lsd:peer-disabled:opacity-50',
+  'lsd:flex lsd:items-center lsd:gap-[var(--lsd-spacing-smaller)] lsd:select-none lsd:group-data-[disabled=true]:pointer-events-none lsd:group-data-[disabled=true]:opacity-50 lsd:peer-disabled:cursor-not-allowed lsd:peer-disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/src/components/ui/menubar/MenubarCheckboxItem.tsx b/src/components/ui/menubar/MenubarCheckboxItem.tsx
index b9e58364..8fc0b608 100644
--- a/src/components/ui/menubar/MenubarCheckboxItem.tsx
+++ b/src/components/ui/menubar/MenubarCheckboxItem.tsx
@@ -21,9 +21,9 @@ function MenubarCheckboxItem({
       checked={checked}
       {...props}
     >
-      <span className="lsd:pointer-events-none lsd:absolute lsd:left-2 lsd:flex lsd:size-3.5 lsd:items-center lsd:justify-center">
+      <span className="lsd:pointer-events-none lsd:absolute lsd:left-(--lsd-spacing-smaller) lsd:flex lsd:size-(--lsd-spacing-base) lsd:items-center lsd:justify-center">
         <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="lsd:size-4" />
+          <CheckIcon className="lsd:size-(--lsd-spacing-base)" />
         </MenubarPrimitive.ItemIndicator>
       </span>
       <span className="lsd:group-hover:underline lsd:group-focus:underline">
diff --git a/src/components/ui/menubar/MenubarRadioItem.tsx b/src/components/ui/menubar/MenubarRadioItem.tsx
index b4db1f6c..ab8c1d7f 100644
--- a/src/components/ui/menubar/MenubarRadioItem.tsx
+++ b/src/components/ui/menubar/MenubarRadioItem.tsx
@@ -19,9 +19,9 @@ function MenubarRadioItem({
       className={cn(menubarRadioItemVariants(), 'lsd:group', className)}
       {...props}
     >
-      <span className="lsd:pointer-events-none lsd:absolute lsd:left-2 lsd:flex lsd:size-3.5 lsd:items-center lsd:justify-center">
+      <span className="lsd:pointer-events-none lsd:absolute lsd:left-(--lsd-spacing-smaller) lsd:flex lsd:size-(--lsd-spacing-base) lsd:items-center lsd:justify-center">
         <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="lsd:size-2 lsd:fill-current" />
+          <CircleIcon className="lsd:size-(--lsd-spacing-smaller) lsd:fill-current" />
         </MenubarPrimitive.ItemIndicator>
       </span>
       <span className="lsd:group-hover:underline lsd:group-focus:underline">
diff --git a/src/components/ui/menubar/MenubarSubTrigger.tsx b/src/components/ui/menubar/MenubarSubTrigger.tsx
index a826c7c8..60bd05b4 100644
--- a/src/components/ui/menubar/MenubarSubTrigger.tsx
+++ b/src/components/ui/menubar/MenubarSubTrigger.tsx
@@ -32,7 +32,7 @@ function MenubarSubTrigger({
       <span className="lsd:group-hover:underline lsd:group-focus:underline">
         {children}
       </span>
-      <ChevronRightIcon className="lsd:ml-auto lsd:h-4 lsd:w-4" />
+      <ChevronRightIcon className="lsd:ml-auto lsd:h-(--lsd-spacing-base) lsd:w-(--lsd-spacing-base)" />
     </MenubarPrimitive.SubTrigger>
   );
 }
diff --git a/src/components/ui/menubar/__tests__/menubar-trigger.test.tsx b/src/components/ui/menubar/__tests__/menubar-trigger.test.tsx
index d5d35795..a3e9336f 100644
--- a/src/components/ui/menubar/__tests__/menubar-trigger.test.tsx
+++ b/src/components/ui/menubar/__tests__/menubar-trigger.test.tsx
@@ -52,8 +52,8 @@ describe('MenubarTrigger', () => {
     const trigger = screen.getByRole('menuitem', { name: 'File' });
     expect(trigger).toHaveClass('lsd:flex');
     expect(trigger).toHaveClass('lsd:items-center');
-    expect(trigger).toHaveClass('lsd:px-2');
-    expect(trigger).toHaveClass('lsd:py-1');
+    expect(trigger).toHaveClass('lsd:px-[var(--lsd-spacing-smaller)]');
+    expect(trigger).toHaveClass('lsd:py-[var(--lsd-spacing-smallest)]');
     expect(trigger).toHaveClass('lsd:text-sm');
     expect(trigger).toHaveClass('lsd:font-medium');
     expect(trigger).toHaveClass('lsd:cursor-pointer');
diff --git a/src/components/ui/menubar/__tests__/menubar.test.tsx b/src/components/ui/menubar/__tests__/menubar.test.tsx
index 4cc18ad6..706390d7 100644
--- a/src/components/ui/menubar/__tests__/menubar.test.tsx
+++ b/src/components/ui/menubar/__tests__/menubar.test.tsx
@@ -53,7 +53,7 @@ describe('Menubar', () => {
     expect(menubar).toHaveClass('lsd:flex');
     expect(menubar).toHaveClass('lsd:h-9');
     expect(menubar).toHaveClass('lsd:items-center');
-    expect(menubar).toHaveClass('lsd:gap-1');
+    expect(menubar).toHaveClass('lsd:gap-[var(--lsd-spacing-smallest)]');
     expect(menubar).toHaveClass('lsd:border');
     expect(menubar).toHaveClass('lsd:bg-lsd-surface');
   });
diff --git a/src/components/ui/menubar/types.ts b/src/components/ui/menubar/types.ts
index be6df08d..a2d59d85 100644
--- a/src/components/ui/menubar/types.ts
+++ b/src/components/ui/menubar/types.ts
@@ -1,15 +1,15 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const menubarVariants = cva(
-  'lsd:flex lsd:h-9 lsd:items-center lsd:gap-1 lsd:border lsd:border-lsd-border lsd:bg-lsd-surface lsd:p-1 lsd:shadow-xs',
+  'lsd:flex lsd:h-9 lsd:items-center lsd:gap-[var(--lsd-spacing-smallest)] lsd:border lsd:border-lsd-border lsd:bg-lsd-surface lsd:p-[var(--lsd-spacing-smallest)] lsd:shadow-xs',
 );
 
 export const menubarTriggerVariants = cva(
-  'lsd:cursor-pointer lsd:flex lsd:items-center lsd:px-2 lsd:py-1 lsd:text-sm lsd:font-medium lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:hover:underline lsd:focus:underline lsd:data-[state=open]:bg-lsd-surface-secondary lsd:data-[state=open]:text-lsd-text-primary lsd:transition-colors',
+  'lsd:cursor-pointer lsd:flex lsd:items-center lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smallest)] lsd:text-sm lsd:font-medium lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:hover:underline lsd:focus:underline lsd:data-[state=open]:bg-lsd-surface-secondary lsd:data-[state=open]:text-lsd-text-primary lsd:transition-colors',
 );
 
 export const menubarItemVariants = cva(
-  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-2 lsd:px-2 lsd:py-1.5 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:transition-colors lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
+  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-[var(--lsd-spacing-smaller)] lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:transition-colors lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -29,11 +29,11 @@ export const menubarItemVariants = cva(
 );
 
 export const menubarSeparatorVariants = cva(
-  'lsd:bg-lsd-border lsd:-mx-1 lsd:my-1 lsd:h-px',
+  'lsd:bg-lsd-border lsd:-mx-[var(--lsd-spacing-smallest)] lsd:my-[var(--lsd-spacing-smallest)] lsd:h-px',
 );
 
 export const menubarLabelVariants = cva(
-  'lsd:px-2 lsd:py-1.5 lsd:text-sm lsd:font-bold lsd:text-lsd-text-primary',
+  'lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm lsd:font-bold lsd:text-lsd-text-primary',
   {
     variants: {
       inset: {
@@ -47,11 +47,11 @@ export const menubarLabelVariants = cva(
 );
 
 export const menubarContentVariants = cva(
-  'lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:z-50 lsd:min-w-[12rem] lsd:overflow-hidden lsd:border lsd:border-lsd-border lsd:p-1 lsd:shadow-lg lsd:data-[state=open]:animate-in lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2',
+  'lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:z-50 lsd:min-w-[12rem] lsd:overflow-hidden lsd:border lsd:border-lsd-border lsd:p-[var(--lsd-spacing-smallest)] lsd:shadow-lg lsd:data-[state=open]:animate-in lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2',
 );
 
 export const menubarSubTriggerVariants = cva(
-  'lsd:flex lsd:cursor-pointer lsd:items-center lsd:px-2 lsd:py-1.5 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:data-[state=open]:bg-lsd-surface-secondary lsd:data-[state=open]:text-lsd-text-primary lsd:transition-colors',
+  'lsd:flex lsd:cursor-pointer lsd:items-center lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:data-[state=open]:bg-lsd-surface-secondary lsd:data-[state=open]:text-lsd-text-primary lsd:transition-colors',
   {
     variants: {
       inset: {
@@ -65,15 +65,15 @@ export const menubarSubTriggerVariants = cva(
 );
 
 export const menubarSubContentVariants = cva(
-  'lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:z-50 lsd:min-w-[8rem] lsd:overflow-hidden lsd:border lsd:border-lsd-border lsd:p-1 lsd:shadow-lg lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2',
+  'lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:z-50 lsd:min-w-[8rem] lsd:overflow-hidden lsd:border lsd:border-lsd-border lsd:p-[var(--lsd-spacing-smallest)] lsd:shadow-lg lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2',
 );
 
 export const menubarCheckboxItemVariants = cva(
-  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-2 lsd:py-1.5 lsd:pr-2 lsd:pl-8 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
+  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:pr-[var(--lsd-spacing-smaller)] lsd:pl-8 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
 );
 
 export const menubarRadioItemVariants = cva(
-  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-2 lsd:py-1.5 lsd:pr-2 lsd:pl-8 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
+  "lsd:relative lsd:flex lsd:cursor-pointer lsd:items-center lsd:gap-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:pr-[var(--lsd-spacing-smaller)] lsd:pl-8 lsd:text-sm lsd:outline-none lsd:select-none lsd:text-lsd-text-primary lsd:bg-lsd-surface lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
 );
 
 export type MenubarVariants = VariantProps<typeof menubarVariants>;
diff --git a/src/components/ui/popover/PopoverContent.tsx b/src/components/ui/popover/PopoverContent.tsx
index 6b8d2721..5426bf3a 100644
--- a/src/components/ui/popover/PopoverContent.tsx
+++ b/src/components/ui/popover/PopoverContent.tsx
@@ -16,7 +16,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2 lsd:z-50 lsd:w-72 origin-(--radix-popover-content-transform-origin) lsd:border lsd:border-lsd-border lsd:p-4 lsd:shadow-md lsd:outline-hidden',
+          'lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:data-[side=bottom]:slide-in-from-top-2 lsd:data-[side=left]:slide-in-from-right-2 lsd:data-[side=right]:slide-in-from-left-2 lsd:data-[side=top]:slide-in-from-bottom-2 lsd:z-50 lsd:w-72 origin-(--radix-popover-content-transform-origin) lsd:border lsd:border-lsd-border lsd:p-(--lsd-spacing-base) lsd:shadow-md lsd:outline-hidden',
           className,
         )}
         {...props}
diff --git a/src/components/ui/popover/__tests__/popover-content.test.tsx b/src/components/ui/popover/__tests__/popover-content.test.tsx
index 35b3822d..57bcd9bc 100644
--- a/src/components/ui/popover/__tests__/popover-content.test.tsx
+++ b/src/components/ui/popover/__tests__/popover-content.test.tsx
@@ -29,7 +29,7 @@ describe('PopoverContent', () => {
     expect(content).toHaveClass('lsd:w-72');
     expect(content).toHaveClass('lsd:border');
     expect(content).toHaveClass('lsd:border-lsd-border');
-    expect(content).toHaveClass('lsd:p-4');
+    expect(content).toHaveClass('lsd:p-(--lsd-spacing-base)');
     expect(content).toHaveClass('lsd:shadow-md');
   });
 
diff --git a/src/components/ui/progress/Progress.tsx b/src/components/ui/progress/Progress.tsx
index bb5d8f05..563f45db 100644
--- a/src/components/ui/progress/Progress.tsx
+++ b/src/components/ui/progress/Progress.tsx
@@ -33,9 +33,9 @@ const Progress = React.forwardRef<
 
     // Size mapping
     const sizeClasses = {
-      sm: 'lsd:h-2',
-      md: 'lsd:h-3',
-      lg: 'lsd:h-4',
+      sm: 'lsd:h-[var(--lsd-spacing-smaller)]',
+      md: 'lsd:h-[var(--lsd-spacing-small)]',
+      lg: 'lsd:h-[var(--lsd-spacing-base)]',
     };
 
     // Animation classes for indeterminate state
@@ -55,7 +55,7 @@ const Progress = React.forwardRef<
     return (
       <div className="lsd:w-full">
         {showLabel && labelText && labelPosition === 'top' && (
-          <div className="lsd:mb-0.5 lsd:text-sm lsd:font-medium lsd:text-lsd-text-primary lsd:text-center">
+          <div className="lsd:mb-(--lsd-spacing-smallest) lsd:text-sm lsd:font-medium lsd:text-lsd-text-primary lsd:text-center">
             {labelText}
           </div>
         )}
@@ -85,7 +85,7 @@ const Progress = React.forwardRef<
           />
         </ProgressPrimitive.Root>
         {showLabel && labelText && labelPosition === 'bottom' && (
-          <div className="lsd:mt-0.5 lsd:text-sm lsd:font-medium lsd:text-lsd-text-primary lsd:text-center">
+          <div className="lsd:mt-(--lsd-spacing-smallest) lsd:text-sm lsd:font-medium lsd:text-lsd-text-primary lsd:text-center">
             {labelText}
           </div>
         )}
diff --git a/src/components/ui/progress/progress.test.tsx b/src/components/ui/progress/progress.test.tsx
index 5420d912..e3577cfb 100644
--- a/src/components/ui/progress/progress.test.tsx
+++ b/src/components/ui/progress/progress.test.tsx
@@ -18,7 +18,7 @@ describe('Progress', () => {
     const progress = screen.getByRole('progressbar');
     expect(progress).toHaveClass('lsd:relative');
     expect(progress).toHaveClass('lsd:w-full');
-    expect(progress).toHaveClass('lsd:h-3');
+    expect(progress).toHaveClass('lsd:h-[var(--lsd-spacing-small)]');
     expect(progress).toHaveClass('lsd:overflow-hidden');
     expect(progress).toHaveClass('lsd:bg-lsd-surface');
     expect(progress).toHaveClass('lsd:border');
diff --git a/src/components/ui/scroll-area/ScrollBar.tsx b/src/components/ui/scroll-area/ScrollBar.tsx
index a9ced7da..213a79f2 100644
--- a/src/components/ui/scroll-area/ScrollBar.tsx
+++ b/src/components/ui/scroll-area/ScrollBar.tsx
@@ -15,9 +15,9 @@ function ScrollBar({
       className={cn(
         'lsd:flex lsd:touch-none lsd:p-px lsd:transition-colors lsd:select-none',
         orientation === 'vertical' &&
-          'lsd:h-full lsd:w-2.5 lsd:border-l lsd:border-l-transparent',
+          'lsd:h-full lsd:w-(--lsd-spacing-small) lsd:border-l lsd:border-l-transparent',
         orientation === 'horizontal' &&
-          'lsd:h-2.5 lsd:flex-col lsd:border-t lsd:border-t-transparent',
+          'lsd:h-(--lsd-spacing-small) lsd:flex-col lsd:border-t lsd:border-t-transparent',
         className,
       )}
       {...props}
diff --git a/src/components/ui/select/SelectContent.tsx b/src/components/ui/select/SelectContent.tsx
index 1d431cdb..c121f38e 100644
--- a/src/components/ui/select/SelectContent.tsx
+++ b/src/components/ui/select/SelectContent.tsx
@@ -31,9 +31,9 @@ export function SelectContent({
         <SelectScrollUpButton />
         <SelectPrimitive.Viewport
           className={cn(
-            'lsd:p-1',
+            'lsd:p-(--lsd-spacing-smallest)',
             position === 'popper' &&
-              'lsd:h-[var(--radix-select-trigger-height)] lsd:w-full lsd:min-w-[var(--radix-select-trigger-width)] lsd:scroll-my-1',
+              'lsd:h-(--radix-select-trigger-height) lsd:w-full lsd:min-w-(--radix-select-trigger-width) lsd:scroll-my-(--lsd-spacing-smallest)',
           )}
         >
           {children}
diff --git a/src/components/ui/select/SelectItem.tsx b/src/components/ui/select/SelectItem.tsx
index 3fb72f46..74781477 100644
--- a/src/components/ui/select/SelectItem.tsx
+++ b/src/components/ui/select/SelectItem.tsx
@@ -13,14 +13,14 @@ export function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "lsd:focus:bg-lsd-surface lsd:focus:text-lsd-text-primary lsd:[&_svg:not([class*='text-'])]:text-lsd-icon-primary lsd:relative lsd:flex lsd:w-full lsd:cursor-pointer lsd:items-center lsd:gap-2 lsd:py-1.5 lsd:pr-8 lsd:pl-2 lsd:text-sm lsd:outline-hidden lsd:select-none lsd:data-[disabled]:pointer-events-none lsd:data-[disabled]:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4 lsd:*:[span]:last:flex lsd:*:[span]:last:items-center lsd:*:[span]:last:gap-2 lsd:hover:underline lsd:focus:underline lsd:data-highlighted:underline",
+        "lsd:focus:bg-lsd-surface lsd:focus:text-lsd-text-primary lsd:[&_svg:not([class*='text-'])]:text-lsd-icon-primary lsd:relative lsd:flex lsd:w-full lsd:cursor-pointer lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:py-(--lsd-spacing-smaller) lsd:pr-8 lsd:pl-(--lsd-spacing-smaller) lsd:text-sm lsd:outline-hidden lsd:select-none lsd:data-disabled:pointer-events-none lsd:data-disabled:opacity-50 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-(--lsd-spacing-base) lsd:*:[span]:last:flex lsd:*:[span]:last:items-center lsd:*:[span]:last:gap-(--lsd-spacing-smaller) lsd:hover:underline lsd:focus:underline lsd:data-highlighted:underline",
         className,
       )}
       {...props}
     >
-      <span className="lsd:absolute lsd:right-2 lsd:flex lsd:size-3.5 lsd:items-center lsd:justify-center">
+      <span className="lsd:absolute lsd:right-(--lsd-spacing-smaller) lsd:flex lsd:size-(--lsd-spacing-base) lsd:items-center lsd:justify-center">
         <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="lsd:size-4 lsd:text-lsd-icon-primary" />
+          <CheckIcon className="lsd:size-(--lsd-spacing-base) lsd:text-lsd-icon-primary" />
         </SelectPrimitive.ItemIndicator>
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
diff --git a/src/components/ui/select/SelectLabel.tsx b/src/components/ui/select/SelectLabel.tsx
index d6facc2a..f4c457cc 100644
--- a/src/components/ui/select/SelectLabel.tsx
+++ b/src/components/ui/select/SelectLabel.tsx
@@ -11,7 +11,7 @@ export function SelectLabel({
     <SelectPrimitive.Label
       data-slot="select-label"
       className={cn(
-        'lsd:text-lsd-text-secondary lsd:px-2 lsd:py-1.5 lsd:text-xs',
+        'lsd:text-lsd-text-secondary lsd:px-(--lsd-spacing-smaller) lsd:py-(--lsd-spacing-smaller) lsd:text-xs',
         className,
       )}
       {...props}
diff --git a/src/components/ui/select/SelectScrollDownButton.tsx b/src/components/ui/select/SelectScrollDownButton.tsx
index 1baff024..1908f81f 100644
--- a/src/components/ui/select/SelectScrollDownButton.tsx
+++ b/src/components/ui/select/SelectScrollDownButton.tsx
@@ -12,12 +12,12 @@ export function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
       className={cn(
-        'lsd:flex lsd:cursor-default lsd:items-center lsd:justify-center lsd:py-1 lsd:text-lsd-icon-primary',
+        'lsd:flex lsd:cursor-default lsd:items-center lsd:justify-center lsd:py-(--lsd-spacing-smallest) lsd:text-lsd-icon-primary',
         className,
       )}
       {...props}
     >
-      <ChevronDownIcon className="lsd:size-4" />
+      <ChevronDownIcon className="lsd:size-(--lsd-spacing-base)" />
     </SelectPrimitive.ScrollDownButton>
   );
 }
diff --git a/src/components/ui/select/SelectScrollUpButton.tsx b/src/components/ui/select/SelectScrollUpButton.tsx
index 5805199f..23b120c7 100644
--- a/src/components/ui/select/SelectScrollUpButton.tsx
+++ b/src/components/ui/select/SelectScrollUpButton.tsx
@@ -12,12 +12,12 @@ export function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
       className={cn(
-        'lsd:flex lsd:cursor-default lsd:items-center lsd:justify-center lsd:py-1 lsd:text-lsd-icon-primary',
+        'lsd:flex lsd:cursor-default lsd:items-center lsd:justify-center lsd:py-(--lsd-spacing-smallest) lsd:text-lsd-icon-primary',
         className,
       )}
       {...props}
     >
-      <ChevronUpIcon className="lsd:size-4" />
+      <ChevronUpIcon className="lsd:size-(--lsd-spacing-base)" />
     </SelectPrimitive.ScrollUpButton>
   );
 }
diff --git a/src/components/ui/select/SelectSeparator.tsx b/src/components/ui/select/SelectSeparator.tsx
index bd798120..6ad0fd1d 100644
--- a/src/components/ui/select/SelectSeparator.tsx
+++ b/src/components/ui/select/SelectSeparator.tsx
@@ -11,7 +11,7 @@ export function SelectSeparator({
     <SelectPrimitive.Separator
       data-slot="select-separator"
       className={cn(
-        'lsd:bg-lsd-border lsd:pointer-events-none lsd:-mx-1 lsd:my-1 lsd:h-px',
+        'lsd:bg-lsd-border lsd:pointer-events-none lsd:-mx-(--lsd-spacing-smallest) lsd:my-(--lsd-spacing-smallest) lsd:h-px',
         className,
       )}
       {...props}
diff --git a/src/components/ui/select/SelectTrigger.tsx b/src/components/ui/select/SelectTrigger.tsx
index 3d870604..711dff2a 100644
--- a/src/components/ui/select/SelectTrigger.tsx
+++ b/src/components/ui/select/SelectTrigger.tsx
@@ -17,14 +17,14 @@ export function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "lsd:cursor-pointer lsd:border-lsd-border lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:data-[placeholder]:text-lsd-text-secondary lsd:[&_svg:not([class*='text-'])]:text-lsd-icon-primary lsd:focus-visible:border-lsd-border aria-invalid:lsd:ring-lsd-destructive/20 dark:aria-invalid:lsd:ring-lsd-destructive/40 aria-invalid:lsd:border-lsd-destructive dark:lsd:bg-lsd-surface/30 dark:lsd:hover:bg-lsd-surface/50 lsd:flex lsd:w-fit lsd:items-center lsd:justify-between lsd:gap-2 lsd:border lsd:px-3 lsd:py-2 lsd:text-sm lsd:whitespace-nowrap lsd:transition-[color,border] lsd:outline-none lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50 lsd:data-[size=default]:h-9 lsd:data-[size=sm]:h-8 *:lsd:data-[slot=select-value]:line-clamp-1 *:lsd:data-[slot=select-value]:flex *:lsd:data-[slot=select-value]:items-center *:lsd:data-[slot=select-value]:gap-2 lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4",
+        "lsd:cursor-pointer lsd:border-lsd-border lsd:bg-lsd-surface lsd:text-lsd-text-primary lsd:data-placeholder:text-lsd-text-secondary lsd:[&_svg:not([class*='text-'])]:text-lsd-icon-primary lsd:focus-visible:border-lsd-border aria-invalid:lsd:ring-lsd-destructive/20 dark:aria-invalid:lsd:ring-lsd-destructive/40 aria-invalid:lsd:border-lsd-destructive dark:lsd:bg-lsd-surface/30 dark:lsd:hover:bg-lsd-surface/50 lsd:flex lsd:w-fit lsd:items-center lsd:justify-between lsd:gap-(--lsd-spacing-smaller) lsd:border lsd:px-(--lsd-spacing-small) lsd:py-(--lsd-spacing-smaller) lsd:text-sm lsd:whitespace-nowrap lsd:transition-[color,border] lsd:outline-none lsd:disabled:cursor-not-allowed lsd:disabled:opacity-50 lsd:data-[size=default]:h-9 lsd:data-[size=sm]:h-8 *:lsd:data-[slot=select-value]:line-clamp-1 *:lsd:data-[slot=select-value]:flex *:lsd:data-[slot=select-value]:items-center *:lsd:data-[slot=select-value]:gap-[var(--lsd-spacing-smaller)] lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-(--lsd-spacing-base)",
         className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="lsd:size-4 lsd:text-lsd-icon-primary" />
+        <ChevronDownIcon className="lsd:size-(--lsd-spacing-base) lsd:text-lsd-icon-primary" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );
diff --git a/src/components/ui/sheet/SheetContent.tsx b/src/components/ui/sheet/SheetContent.tsx
index 18727db5..2e390287 100644
--- a/src/components/ui/sheet/SheetContent.tsx
+++ b/src/components/ui/sheet/SheetContent.tsx
@@ -23,7 +23,7 @@ export function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          'lsd:bg-background lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:fixed lsd:z-50 lsd:flex lsd:flex-col lsd:gap-4 lsd:shadow-lg lsd:transition lsd:ease-in-out lsd:data-[state=closed]:duration-300 lsd:data-[state=open]:duration-500',
+          'lsd:bg-background lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:fixed lsd:z-50 lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-base) lsd:shadow-lg lsd:transition lsd:ease-in-out lsd:data-[state=closed]:duration-300 lsd:data-[state=open]:duration-500',
           side === 'right' &&
             'lsd:data-[state=closed]:slide-out-to-right lsd:data-[state=open]:slide-in-from-right lsd:inset-y-0 lsd:right-0 lsd:h-full lsd:w-3/4 lsd:border-l lsd:sm:max-w-sm',
           side === 'left' &&
@@ -37,8 +37,8 @@ export function SheetContent({
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="lsd:data-[state=open]:bg-secondary lsd:absolute lsd:top-4 lsd:right-4 lsd:rounded-xs lsd:opacity-70 lsd:transition-opacity lsd:hover:opacity-100 lsd:p-2 lsd:cursor-pointer lsd:disabled:pointer-events-none">
-          <XIcon className="lsd:size-4" />
+        <SheetPrimitive.Close className="lsd:data-[state=open]:bg-secondary lsd:absolute lsd:top-(--lsd-spacing-base) lsd:right-(--lsd-spacing-base) lsd:rounded-xs lsd:opacity-70 lsd:transition-opacity lsd:hover:opacity-100 lsd:p-(--lsd-spacing-smaller) lsd:cursor-pointer lsd:disabled:pointer-events-none">
+          <XIcon className="lsd:size-(--lsd-spacing-base)" />
           <span className="lsd:sr-only">Close</span>
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
diff --git a/src/components/ui/sheet/SheetFooter.tsx b/src/components/ui/sheet/SheetFooter.tsx
index 1d6dc3eb..b84a68e1 100644
--- a/src/components/ui/sheet/SheetFooter.tsx
+++ b/src/components/ui/sheet/SheetFooter.tsx
@@ -10,7 +10,7 @@ export function SheetFooter({
     <div
       data-slot="sheet-footer"
       className={cn(
-        'lsd:mt-auto lsd:flex lsd:flex-col lsd:gap-2 lsd:p-4',
+        'lsd:mt-auto lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:p-(--lsd-spacing-base)',
         className,
       )}
       {...props}
diff --git a/src/components/ui/sheet/SheetHeader.tsx b/src/components/ui/sheet/SheetHeader.tsx
index a6507658..1042c7af 100644
--- a/src/components/ui/sheet/SheetHeader.tsx
+++ b/src/components/ui/sheet/SheetHeader.tsx
@@ -9,7 +9,10 @@ export function SheetHeader({
   return (
     <div
       data-slot="sheet-header"
-      className={cn('lsd:flex lsd:flex-col lsd:gap-1.5 lsd:p-4', className)}
+      className={cn(
+        'lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:p-(--lsd-spacing-base)',
+        className,
+      )}
       {...props}
     />
   );
diff --git a/src/components/ui/sheet/__tests__/sheet-footer.test.tsx b/src/components/ui/sheet/__tests__/sheet-footer.test.tsx
index c7043b92..7e521678 100644
--- a/src/components/ui/sheet/__tests__/sheet-footer.test.tsx
+++ b/src/components/ui/sheet/__tests__/sheet-footer.test.tsx
@@ -33,8 +33,8 @@ describe('SheetFooter', () => {
     expect(footer).toHaveClass('lsd:mt-auto');
     expect(footer).toHaveClass('lsd:flex');
     expect(footer).toHaveClass('lsd:flex-col');
-    expect(footer).toHaveClass('lsd:gap-2');
-    expect(footer).toHaveClass('lsd:p-4');
+    expect(footer).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
+    expect(footer).toHaveClass('lsd:p-(--lsd-spacing-base)');
   });
 
   it('applies data-slot attribute', () => {
diff --git a/src/components/ui/sheet/__tests__/sheet-header.test.tsx b/src/components/ui/sheet/__tests__/sheet-header.test.tsx
index be96d7b4..2b97c40e 100644
--- a/src/components/ui/sheet/__tests__/sheet-header.test.tsx
+++ b/src/components/ui/sheet/__tests__/sheet-header.test.tsx
@@ -31,8 +31,8 @@ describe('SheetHeader', () => {
     const header = document.querySelector('[data-slot="sheet-header"]');
     expect(header).toHaveClass('lsd:flex');
     expect(header).toHaveClass('lsd:flex-col');
-    expect(header).toHaveClass('lsd:gap-1.5');
-    expect(header).toHaveClass('lsd:p-4');
+    expect(header).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
+    expect(header).toHaveClass('lsd:p-(--lsd-spacing-base)');
   });
 
   it('applies data-slot attribute', () => {
diff --git a/src/components/ui/sidebar/Sidebar.tsx b/src/components/ui/sidebar/Sidebar.tsx
index 4a503681..439a69d5 100644
--- a/src/components/ui/sidebar/Sidebar.tsx
+++ b/src/components/ui/sidebar/Sidebar.tsx
@@ -94,7 +94,7 @@ export function Sidebar({
             : 'lsd:right-0 lsd:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
           // Adjust the padding for floating and inset variants.
           variant === 'floating' || variant === 'inset'
-            ? 'lsd:p-2 lsd:group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            ? 'lsd:p-(--lsd-spacing-smaller) lsd:group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
             : 'lsd:group-data-[collapsible=icon]:w-(--sidebar-width-icon) lsd:group-data-[side=left]:border-r lsd:group-data-[side=right]:border-l',
           className,
         )}
diff --git a/src/components/ui/sidebar/SidebarContent.tsx b/src/components/ui/sidebar/SidebarContent.tsx
index e4fc1d8f..52a459eb 100644
--- a/src/components/ui/sidebar/SidebarContent.tsx
+++ b/src/components/ui/sidebar/SidebarContent.tsx
@@ -23,7 +23,7 @@ export function SidebarContent({ className, ...props }: SidebarContentProps) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        'lsd:flex lsd:min-h-0 lsd:flex-1 lsd:flex-col lsd:gap-2 lsd:overflow-auto lsd:group-data-[collapsible=icon]:overflow-hidden',
+        'lsd:flex lsd:min-h-0 lsd:flex-1 lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:overflow-auto lsd:group-data-[collapsible=icon]:overflow-hidden',
         className,
       )}
       {...props}
@@ -36,7 +36,10 @@ export function SidebarHeader({ className, ...props }: SidebarHeaderProps) {
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn('lsd:flex lsd:flex-col lsd:gap-2 lsd:p-2', className)}
+      className={cn(
+        'lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:p-(--lsd-spacing-smaller)',
+        className,
+      )}
       {...props}
     />
   );
@@ -47,7 +50,10 @@ export function SidebarFooter({ className, ...props }: SidebarFooterProps) {
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn('lsd:flex lsd:flex-col lsd:gap-2 lsd:p-2', className)}
+      className={cn(
+        'lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:p-(--lsd-spacing-smaller)',
+        className,
+      )}
       {...props}
     />
   );
@@ -61,7 +67,10 @@ export function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn('lsd:bg-sidebar-border lsd:mx-2 lsd:w-auto', className)}
+      className={cn(
+        'lsd:bg-sidebar-border lsd:mx-(--lsd-spacing-smaller) lsd:w-auto',
+        className,
+      )}
       {...props}
     />
   );
@@ -87,7 +96,7 @@ export function SidebarInset({ className, ...props }: SidebarInsetProps) {
       data-slot="sidebar-inset"
       className={cn(
         'lsd:bg-background lsd:relative lsd:flex lsd:w-full lsd:flex-1 lsd:flex-col',
-        'lsd:md:peer-data-[variant=inset]:m-2 lsd:md:peer-data-[variant=inset]:ml-0 lsd:md:peer-data-[variant=inset]:rounded-xl lsd:md:peer-data-[variant=inset]:shadow-sm lsd:md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        'lsd:md:peer-data-[variant=inset]:m-(--lsd-spacing-smaller) lsd:md:peer-data-[variant=inset]:ml-0 lsd:md:peer-data-[variant=inset]:rounded-xl lsd:md:peer-data-[variant=inset]:shadow-sm lsd:md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-(--lsd-spacing-smaller)',
         className,
       )}
       {...props}
@@ -107,7 +116,7 @@ export function SidebarTrigger({
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
       variant="ghost"
-      size="icon-xs"
+      size="icon-sm"
       className={className}
       onClick={(event) => {
         onClick?.(event);
@@ -115,7 +124,7 @@ export function SidebarTrigger({
       }}
       {...props}
     >
-      <PanelLeftIcon className="lsd:size-full" />
+      <PanelLeftIcon className="lsd:size-3/4" />
       <span className="lsd:sr-only">Toggle Sidebar</span>
     </Button>
   );
@@ -133,12 +142,12 @@ export function SidebarRail({ className, ...props }: SidebarRailProps) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        'hover:after:bg-sidebar-border lsd:absolute lsd:inset-y-0 lsd:z-20 lsd:hidden lsd:w-4 lsd:-translate-x-1/2 lsd:transition-all lsd:ease-linear lsd:group-data-[side=left]:-right-4 lsd:group-data-[side=right]:left-0 after:lsd:absolute after:lsd:inset-y-0 after:lsd:left-1/2 after:lsd:w-[2px] lsd:sm:flex',
+        'hover:after:bg-sidebar-border lsd:absolute lsd:inset-y-0 lsd:z-20 lsd:hidden lsd:w-(--lsd-spacing-base) lsd:-translate-x-1/2 lsd:transition-all lsd:ease-linear lsd:group-data-[side=left]:-right-(--lsd-spacing-base) lsd:group-data-[side=right]:left-0 after:lsd:absolute after:lsd:inset-y-0 after:lsd:left-1/2 after:lsd:w-[2px] lsd:sm:flex',
         'lsd:in-data-[side=left]:cursor-w-resize lsd:in-data-[side=right]:cursor-e-resize',
         'lsd:[[data-side=left][data-state=collapsed]_&]:cursor-e-resize lsd:[[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
         'hover:group-data-[collapsible=offcanvas]:bg-sidebar lsd:group-data-[collapsible=offcanvas]:translate-x-0 lsd:group-data-[collapsible=offcanvas]:after:left-full',
-        'lsd:[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-        'lsd:[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        'lsd:[[data-side=left][data-collapsible=offcanvas]_&]:-right-(--lsd-spacing-smaller)',
+        'lsd:[[data-side=right][data-collapsible=offcanvas]_&]:-left-(--lsd-spacing-smaller)',
         className,
       )}
       {...props}
diff --git a/src/components/ui/sidebar/SidebarGroup.tsx b/src/components/ui/sidebar/SidebarGroup.tsx
index 261a7ec1..d32e0a43 100644
--- a/src/components/ui/sidebar/SidebarGroup.tsx
+++ b/src/components/ui/sidebar/SidebarGroup.tsx
@@ -15,7 +15,7 @@ export function SidebarGroup({ className, ...props }: SidebarGroupProps) {
       data-slot="sidebar-group"
       data-sidebar="group"
       className={cn(
-        'lsd:relative lsd:flex lsd:w-full lsd:min-w-0 lsd:flex-col lsd:p-2',
+        'lsd:relative lsd:flex lsd:w-full lsd:min-w-0 lsd:flex-col lsd:p-(--lsd-spacing-smaller)',
         className,
       )}
       {...props}
@@ -35,7 +35,7 @@ export function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        'lsd:text-sidebar-foreground/70 ring-sidebar-ring lsd:flex lsd:h-8 lsd:shrink-0 lsd:items-center lsd:rounded-md lsd:px-2 lsd:text-xs lsd:font-medium lsd:outline-hidden lsd:transition-[margin,opacity] lsd:duration-200 lsd:ease-linear lsd:focus-visible:ring-2 lsd:[&>svg]:size-4 lsd:[&>svg]:shrink-0',
+        'lsd:text-sidebar-foreground/70 ring-sidebar-ring lsd:flex lsd:h-8 lsd:shrink-0 lsd:items-center lsd:rounded-md lsd:px-(--lsd-spacing-smaller) lsd:text-xs lsd:font-medium lsd:outline-hidden lsd:transition-[margin,opacity] lsd:duration-200 lsd:ease-linear lsd:focus-visible:ring-2 lsd:[&>svg]:size-(--lsd-spacing-base) lsd:[&>svg]:shrink-0',
         'lsd:group-data-[collapsible=icon]:-mt-8 lsd:group-data-[collapsible=icon]:opacity-0',
         className,
       )}
@@ -56,9 +56,9 @@ export function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        'lsd:text-sidebar-foreground ring-sidebar-ring lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:absolute lsd:top-3.5 lsd:right-3 lsd:flex lsd:aspect-square lsd:w-5 lsd:items-center lsd:justify-center lsd:rounded-md lsd:p-0 lsd:outline-hidden lsd:transition-transform lsd:focus-visible:ring-2 lsd:[&>svg]:size-4 lsd:[&>svg]:shrink-0',
+        'lsd:text-sidebar-foreground ring-sidebar-ring lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:absolute lsd:top-(--lsd-spacing-base) lsd:right-(--lsd-spacing-small) lsd:flex lsd:aspect-square lsd:w-(--lsd-spacing-large) lsd:items-center lsd:justify-center lsd:rounded-md lsd:p-0 lsd:outline-hidden lsd:transition-transform lsd:focus-visible:ring-2 lsd:[&>svg]:size-(--lsd-spacing-base) lsd:[&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        'after:lsd:absolute after:lsd:-inset-2 md:after:lsd:hidden',
+        'after:lsd:absolute after:lsd:-inset-[var(--lsd-spacing-smaller)] md:after:lsd:hidden',
         'lsd:group-data-[collapsible=icon]:hidden',
         className,
       )}
diff --git a/src/components/ui/sidebar/SidebarMenu.tsx b/src/components/ui/sidebar/SidebarMenu.tsx
index de3b8f99..0fca1e9a 100644
--- a/src/components/ui/sidebar/SidebarMenu.tsx
+++ b/src/components/ui/sidebar/SidebarMenu.tsx
@@ -29,7 +29,7 @@ export function SidebarMenu({ className, ...props }: SidebarMenuProps) {
       data-slot="sidebar-menu"
       data-sidebar="menu"
       className={cn(
-        'lsd:flex lsd:w-full lsd:min-w-0 lsd:flex-col lsd:gap-1',
+        'lsd:flex lsd:w-full lsd:min-w-0 lsd:flex-col lsd:gap-(--lsd-spacing-smallest)',
         className,
       )}
       {...props}
@@ -107,12 +107,12 @@ export function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        'lsd:text-sidebar-foreground ring-sidebar-ring lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground lsd:absolute lsd:top-1.5 lsd:right-1 lsd:flex lsd:aspect-square lsd:w-5 lsd:items-center lsd:justify-center lsd:rounded-md lsd:p-0 lsd:outline-hidden lsd:transition-transform lsd:focus-visible:ring-2 lsd:[&>svg]:size-4 lsd:[&>svg]:shrink-0',
+        'lsd:text-sidebar-foreground ring-sidebar-ring lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground lsd:absolute lsd:top-(--lsd-spacing-smaller) lsd:right-(--lsd-spacing-smallest) lsd:flex lsd:aspect-square lsd:w-(--lsd-spacing-large) lsd:items-center lsd:justify-center lsd:rounded-md lsd:p-0 lsd:outline-hidden lsd:transition-transform lsd:focus-visible:ring-2 lsd:[&>svg]:size-(--lsd-spacing-base) lsd:[&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        'after:lsd:absolute after:lsd:-inset-2 md:after:lsd:hidden',
-        'lsd:peer-data-[size=sm]/menu-button:top-1',
-        'lsd:peer-data-[size=default]/menu-button:top-1.5',
-        'lsd:peer-data-[size=lg]/menu-button:top-2.5',
+        'after:lsd:absolute after:lsd:-inset-[var(--lsd-spacing-smaller)] md:after:lsd:hidden',
+        'lsd:peer-data-[size=sm]/menu-button:top-(--lsd-spacing-smallest)',
+        'lsd:peer-data-[size=default]/menu-button:top-(--lsd-spacing-smaller)',
+        'lsd:peer-data-[size=lg]/menu-button:top-(--lsd-spacing-small)',
         'lsd:group-data-[collapsible=icon]:hidden',
         showOnHover &&
           'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:lsd:opacity-100 group-hover/menu-item:lsd:opacity-100 lsd:data-[state=open]:opacity-100 lsd:md:opacity-0',
@@ -132,11 +132,11 @@ export function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        'lsd:text-sidebar-foreground lsd:pointer-events-none lsd:absolute lsd:right-1 lsd:flex lsd:h-5 lsd:min-w-5 lsd:items-center lsd:justify-center lsd:rounded-md lsd:px-1 lsd:text-xs lsd:font-medium lsd:tabular-nums lsd:select-none',
+        'lsd:text-sidebar-foreground lsd:pointer-events-none lsd:absolute lsd:right-(--lsd-spacing-smallest) lsd:flex lsd:h-(--lsd-spacing-large) lsd:min-w-(--lsd-spacing-large) lsd:items-center lsd:justify-center lsd:rounded-md lsd:px-(--lsd-spacing-smallest) lsd:text-xs lsd:font-medium lsd:tabular-nums lsd:select-none',
         'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-        'lsd:peer-data-[size=sm]/menu-button:top-1',
-        'lsd:peer-data-[size=default]/menu-button:top-1.5',
-        'lsd:peer-data-[size=lg]/menu-button:top-2.5',
+        'lsd:peer-data-[size=sm]/menu-button:top-(--lsd-spacing-smallest)',
+        'lsd:peer-data-[size=default]/menu-button:top-(--lsd-spacing-smaller)',
+        'lsd:peer-data-[size=lg]/menu-button:top-(--lsd-spacing-small)',
         'lsd:group-data-[collapsible=icon]:hidden',
         className,
       )}
@@ -160,19 +160,19 @@ export function SidebarMenuSkeleton({
       data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
       className={cn(
-        'lsd:flex lsd:h-8 lsd:items-center lsd:gap-2 lsd:rounded-md lsd:px-2',
+        'lsd:flex lsd:h-8 lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:rounded-md lsd:px-(--lsd-spacing-smaller)',
         className,
       )}
       {...props}
     >
       {showIcon && (
         <div
-          className="lsd:size-4 lsd:rounded-md lsd:bg-sidebar-accent"
+          className="lsd:size-(--lsd-spacing-base) lsd:rounded-md lsd:bg-sidebar-accent"
           data-sidebar="menu-skeleton-icon"
         />
       )}
       <div
-        className="lsd:h-4 lsd:flex-1 lsd:rounded-md lsd:bg-sidebar-accent"
+        className="lsd:h-(--lsd-spacing-base) lsd:flex-1 lsd:rounded-md lsd:bg-sidebar-accent"
         data-sidebar="menu-skeleton-text"
         style={
           {
@@ -190,7 +190,7 @@ export function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        'border-sidebar-border lsd:mx-3.5 lsd:flex lsd:min-w-0 lsd:translate-x-px lsd:flex-col lsd:gap-1 lsd:border-l lsd:px-2.5 lsd:py-0.5',
+        'border-sidebar-border lsd:mx-(--lsd-spacing-base) lsd:flex lsd:min-w-0 lsd:translate-x-px lsd:flex-col lsd:gap-(--lsd-spacing-smallest) lsd:border-l lsd:px-(--lsd-spacing-small) lsd:py-(--lsd-spacing-smallest)',
         'lsd:group-data-[collapsible=icon]:hidden',
         className,
       )}
@@ -229,7 +229,7 @@ export function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        'lsd:text-sidebar-foreground ring-sidebar-ring lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:active:bg-sidebar-accent lsd:active:text-sidebar-accent-foreground lsd:[&>svg]:text-sidebar-accent-foreground lsd:flex lsd:h-7 lsd:min-w-0 lsd:-translate-x-px lsd:items-center lsd:gap-2 lsd:overflow-hidden lsd:rounded-md lsd:px-2 lsd:outline-hidden lsd:focus-visible:ring-2 lsd:disabled:pointer-events-none lsd:disabled:opacity-50 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:bg-sidebar-accent lsd:data-[active=true]:text-sidebar-accent-foreground lsd:hover:underline lsd:focus:underline',
+        'lsd:text-sidebar-foreground ring-sidebar-ring lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:active:bg-sidebar-accent lsd:active:text-sidebar-accent-foreground lsd:[&>svg]:text-sidebar-accent-foreground lsd:flex lsd:h-(--lsd-spacing-largest) lsd:min-w-0 lsd:-translate-x-px lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:overflow-hidden lsd:rounded-md lsd:px-(--lsd-spacing-smaller) lsd:outline-hidden lsd:focus-visible:ring-2 lsd:disabled:pointer-events-none lsd:disabled:opacity-50 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:bg-sidebar-accent lsd:data-[active=true]:text-sidebar-accent-foreground lsd:hover:underline lsd:focus:underline',
         size === 'sm' && 'lsd:text-xs',
         size === 'md' && 'lsd:text-sm',
         'lsd:group-data-[collapsible=icon]:hidden',
diff --git a/src/components/ui/sidebar/__tests__/sidebar.test.tsx b/src/components/ui/sidebar/__tests__/sidebar.test.tsx
index fd4520f2..ec9fdb6a 100644
--- a/src/components/ui/sidebar/__tests__/sidebar.test.tsx
+++ b/src/components/ui/sidebar/__tests__/sidebar.test.tsx
@@ -218,8 +218,8 @@ describe('SidebarTrigger', () => {
       </SidebarProvider>,
     );
     const trigger = queryByDataSlot(container, 'sidebar-trigger');
-    expect(trigger).toHaveClass('lsd:w-6');
-    expect(trigger).toHaveClass('lsd:h-6');
+    expect(trigger).toHaveClass('lsd:w-8');
+    expect(trigger).toHaveClass('lsd:h-8');
   });
 
   it('renders PanelLeftIcon', () => {
@@ -361,8 +361,8 @@ describe('SidebarHeader', () => {
     const header = queryByDataSlot(container, 'sidebar-header');
     expect(header).toHaveClass('lsd:flex');
     expect(header).toHaveClass('lsd:flex-col');
-    expect(header).toHaveClass('lsd:gap-2');
-    expect(header).toHaveClass('lsd:p-2');
+    expect(header).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
+    expect(header).toHaveClass('lsd:p-(--lsd-spacing-smaller)');
   });
 
   it('renders children', () => {
@@ -391,8 +391,8 @@ describe('SidebarFooter', () => {
     const footer = queryByDataSlot(container, 'sidebar-footer');
     expect(footer).toHaveClass('lsd:flex');
     expect(footer).toHaveClass('lsd:flex-col');
-    expect(footer).toHaveClass('lsd:gap-2');
-    expect(footer).toHaveClass('lsd:p-2');
+    expect(footer).toHaveClass('lsd:gap-(--lsd-spacing-smaller)');
+    expect(footer).toHaveClass('lsd:p-(--lsd-spacing-smaller)');
   });
 
   it('renders children', () => {
@@ -418,7 +418,7 @@ describe('SidebarSeparator', () => {
     const { container } = render(<SidebarSeparator />);
     const separator = queryByDataSlot(container, 'sidebar-separator');
     expect(separator).toHaveClass('lsd:bg-sidebar-border');
-    expect(separator).toHaveClass('lsd:mx-2');
+    expect(separator).toHaveClass('lsd:mx-(--lsd-spacing-smaller)');
     expect(separator).toHaveClass('lsd:w-auto');
   });
 });
@@ -480,8 +480,8 @@ describe('SidebarGroupAction', () => {
     const action = queryByDataSlot(container, 'sidebar-group-action');
     expect(action).toHaveClass('lsd:text-sidebar-foreground');
     expect(action).toHaveClass('lsd:absolute');
-    expect(action).toHaveClass('lsd:top-3.5');
-    expect(action).toHaveClass('lsd:right-3');
+    expect(action).toHaveClass('lsd:top-(--lsd-spacing-base)');
+    expect(action).toHaveClass('lsd:right-(--lsd-spacing-small)');
   });
 });
 
@@ -657,8 +657,8 @@ describe('SidebarMenuAction', () => {
     const action = queryByDataSlot(container, 'sidebar-menu-action');
     expect(action).toHaveClass('lsd:text-sidebar-foreground');
     expect(action).toHaveClass('lsd:absolute');
-    expect(action).toHaveClass('lsd:top-1.5');
-    expect(action).toHaveClass('lsd:right-1');
+    expect(action).toHaveClass('lsd:top-(--lsd-spacing-smaller)');
+    expect(action).toHaveClass('lsd:right-(--lsd-spacing-smallest)');
   });
 });
 
@@ -718,7 +718,7 @@ describe('SidebarMenuBadge', () => {
     expect(badge).toHaveClass('lsd:text-sidebar-foreground');
     expect(badge).toHaveClass('lsd:pointer-events-none');
     expect(badge).toHaveClass('lsd:absolute');
-    expect(badge).toHaveClass('lsd:right-1');
+    expect(badge).toHaveClass('lsd:right-(--lsd-spacing-smallest)');
   });
 
   it('renders children', () => {
@@ -794,7 +794,7 @@ describe('SidebarMenuSub', () => {
     const { container } = render(<SidebarMenuSub>Sub</SidebarMenuSub>);
     const sub = queryByDataSlot(container, 'sidebar-menu-sub');
     expect(sub).toHaveClass('border-sidebar-border');
-    expect(sub).toHaveClass('lsd:mx-3.5');
+    expect(sub).toHaveClass('lsd:mx-(--lsd-spacing-base)');
     expect(sub).toHaveClass('lsd:flex');
     expect(sub).toHaveClass('lsd:min-w-0');
   });
@@ -867,7 +867,7 @@ describe('SidebarMenuSubButton', () => {
     const subButton = queryByDataSlot(container, 'sidebar-menu-sub-button');
     expect(subButton).toHaveClass('lsd:text-sidebar-foreground');
     expect(subButton).toHaveClass('lsd:flex');
-    expect(subButton).toHaveClass('lsd:h-7');
+    expect(subButton).toHaveClass('lsd:h-(--lsd-spacing-largest)');
   });
 
   it('renders children', () => {
diff --git a/src/components/ui/sidebar/types.ts b/src/components/ui/sidebar/types.ts
index 7612703d..02e5608c 100644
--- a/src/components/ui/sidebar/types.ts
+++ b/src/components/ui/sidebar/types.ts
@@ -98,7 +98,7 @@ export interface SidebarMenuBadgeProps extends React.ComponentProps<'div'> {}
 
 // Variants
 export const sidebarMenuButtonVariants = cva(
-  'peer/menu-button lsd:flex lsd:w-full lsd:items-center lsd:gap-2 lsd:overflow-hidden lsd:rounded-md lsd:p-2 lsd:text-left lsd:text-sm lsd:outline-hidden ring-sidebar-ring lsd:transition-[width,height,padding] lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:focus-visible:ring-2 lsd:active:bg-sidebar-accent lsd:active:text-sidebar-accent-foreground lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:bg-sidebar-accent lsd:data-[active=true]:font-medium lsd:data-[active=true]:text-sidebar-accent-foreground lsd:data-[state=open]:hover:bg-sidebar-accent lsd:data-[state=open]:hover:text-sidebar-accent-foreground lsd:group-data-[collapsible=icon]:size-8! lsd:group-data-[collapsible=icon]:p-2! lsd:[&>span:last-child]:truncate lsd:[&>svg]:size-4 lsd:[&>svg]:shrink-0 lsd:hover:underline lsd:focus:underline',
+  'peer/menu-button lsd:flex lsd:w-full lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:overflow-hidden lsd:rounded-md lsd:p-(--lsd-spacing-smaller) lsd:text-left lsd:text-sm lsd:outline-hidden ring-sidebar-ring lsd:transition-[width,height,padding] lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:focus-visible:ring-2 lsd:active:bg-sidebar-accent lsd:active:text-sidebar-accent-foreground lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:bg-sidebar-accent lsd:data-[active=true]:font-medium lsd:data-[active=true]:text-sidebar-accent-foreground lsd:data-[state=open]:hover:bg-sidebar-accent lsd:data-[state=open]:hover:text-sidebar-accent-foreground lsd:group-data-[collapsible=icon]:size-8! lsd:group-data-[collapsible=icon]:p-(--lsd-spacing-smaller)! lsd:[&>span:last-child]:truncate lsd:[&>svg]:size-(--lsd-spacing-base) lsd:[&>svg]:shrink-0 lsd:hover:underline lsd:focus:underline',
   {
     variants: {
       variant: {
@@ -109,7 +109,7 @@ export const sidebarMenuButtonVariants = cva(
       },
       size: {
         default: 'lsd:h-8 lsd:text-sm',
-        sm: 'lsd:h-7 lsd:text-xs',
+        sm: 'lsd:h-(--lsd-spacing-largest) lsd:text-xs',
         lg: 'lsd:h-12 lsd:text-sm lsd:group-data-[collapsible=icon]:p-0!',
       },
     },
diff --git a/src/components/ui/switch/Switch.tsx b/src/components/ui/switch/Switch.tsx
index d3df8247..2e40ad47 100644
--- a/src/components/ui/switch/Switch.tsx
+++ b/src/components/ui/switch/Switch.tsx
@@ -9,9 +9,9 @@ const switchVariants = cva(
   {
     variants: {
       size: {
-        sm: 'lsd:h-[14px] lsd:w-7',
-        md: 'lsd:h-[18px] lsd:w-9',
-        lg: 'lsd:h-[24px] lsd:w-12',
+        sm: 'lsd:h-[var(--lsd-spacing-base)] lsd:w-[var(--lsd-spacing-largest)]',
+        md: 'lsd:h-[var(--lsd-spacing-large)] lsd:w-9',
+        lg: 'lsd:h-[var(--lsd-spacing-larger)] lsd:w-12',
       },
     },
     defaultVariants: {
@@ -25,9 +25,9 @@ const thumbVariants = cva(
   {
     variants: {
       size: {
-        sm: 'lsd:size-3 lsd:data-[state=checked]:translate-x-[calc(100%-2px)]',
-        md: 'lsd:size-5 lsd:data-[state=checked]:translate-x-[calc(100%-2px)]',
-        lg: 'lsd:size-6 lsd:data-[state=checked]:translate-x-[calc(100%-2px)]',
+        sm: 'lsd:size-[var(--lsd-spacing-small)] lsd:data-[state=checked]:translate-x-[calc(100%-2px)]',
+        md: 'lsd:size-[var(--lsd-spacing-large)] lsd:data-[state=checked]:translate-x-[calc(100%-2px)]',
+        lg: 'lsd:size-[var(--lsd-spacing-larger)] lsd:data-[state=checked]:translate-x-[calc(100%-2px)]',
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/switch/switch.test.tsx b/src/components/ui/switch/switch.test.tsx
index 57572245..601a3527 100644
--- a/src/components/ui/switch/switch.test.tsx
+++ b/src/components/ui/switch/switch.test.tsx
@@ -17,7 +17,7 @@ describe('Switch', () => {
     render(<Switch />);
     const switchElement = screen.getByRole('switch');
     expect(switchElement).toHaveClass('lsd:inline-flex');
-    expect(switchElement).toHaveClass('lsd:h-[18px]');
+    expect(switchElement).toHaveClass('lsd:h-[var(--lsd-spacing-large)]');
     expect(switchElement).toHaveClass('lsd:w-9');
     expect(switchElement).toHaveClass('lsd:rounded-full');
     expect(switchElement).toHaveClass('lsd:transition-all');
@@ -53,7 +53,7 @@ describe('Switch', () => {
     render(<Switch />);
     const thumb = screen.getByRole('switch').children[0];
     expect(thumb).toHaveClass('lsd:bg-lsd-surface');
-    expect(thumb).toHaveClass('lsd:size-5');
+    expect(thumb).toHaveClass('lsd:size-[var(--lsd-spacing-large)]');
     expect(thumb).toHaveClass('lsd:rounded-full');
     expect(thumb).toHaveClass('lsd:transition-transform');
   });
@@ -104,28 +104,28 @@ describe('Switch', () => {
   it('renders with small size', () => {
     render(<Switch size="sm" />);
     const switchElement = screen.getByRole('switch');
-    expect(switchElement).toHaveClass('lsd:h-[14px]');
-    expect(switchElement).toHaveClass('lsd:w-7');
+    expect(switchElement).toHaveClass('lsd:h-[var(--lsd-spacing-base)]');
+    expect(switchElement).toHaveClass('lsd:w-[var(--lsd-spacing-largest)]');
     const thumb = switchElement.children[0];
-    expect(thumb).toHaveClass('lsd:size-3');
+    expect(thumb).toHaveClass('lsd:size-[var(--lsd-spacing-small)]');
   });
 
   it('renders with medium size (default)', () => {
     render(<Switch size="md" />);
     const switchElement = screen.getByRole('switch');
-    expect(switchElement).toHaveClass('lsd:h-[18px]');
+    expect(switchElement).toHaveClass('lsd:h-[var(--lsd-spacing-large)]');
     expect(switchElement).toHaveClass('lsd:w-9');
     const thumb = switchElement.children[0];
-    expect(thumb).toHaveClass('lsd:size-5');
+    expect(thumb).toHaveClass('lsd:size-[var(--lsd-spacing-large)]');
   });
 
   it('renders with large size', () => {
     render(<Switch size="lg" />);
     const switchElement = screen.getByRole('switch');
-    expect(switchElement).toHaveClass('lsd:h-[24px]');
+    expect(switchElement).toHaveClass('lsd:h-[var(--lsd-spacing-larger)]');
     expect(switchElement).toHaveClass('lsd:w-12');
     const thumb = switchElement.children[0];
-    expect(thumb).toHaveClass('lsd:size-6');
+    expect(thumb).toHaveClass('lsd:size-[var(--lsd-spacing-larger)]');
   });
 
   it('applies thumb translate classes for checked state with small size', () => {
@@ -160,54 +160,54 @@ describe('Switch', () => {
     it('applies small size classes correctly', () => {
       render(<Switch size="sm" />);
       const switchElement = screen.getByRole('switch');
-      expect(switchElement).toHaveClass('lsd:h-[14px]');
-      expect(switchElement).toHaveClass('lsd:w-7');
+      expect(switchElement).toHaveClass('lsd:h-[var(--lsd-spacing-base)]');
+      expect(switchElement).toHaveClass('lsd:w-[var(--lsd-spacing-largest)]');
     });
 
     it('applies small size thumb classes correctly', () => {
       render(<Switch size="sm" />);
       const thumb = screen.getByRole('switch').children[0];
-      expect(thumb).toHaveClass('lsd:size-3');
+      expect(thumb).toHaveClass('lsd:size-[var(--lsd-spacing-small)]');
     });
 
     it('applies medium size classes correctly', () => {
       render(<Switch size="md" />);
       const switchElement = screen.getByRole('switch');
-      expect(switchElement).toHaveClass('lsd:h-[18px]');
+      expect(switchElement).toHaveClass('lsd:h-[var(--lsd-spacing-large)]');
       expect(switchElement).toHaveClass('lsd:w-9');
     });
 
     it('applies medium size thumb classes correctly', () => {
       render(<Switch size="md" />);
       const thumb = screen.getByRole('switch').children[0];
-      expect(thumb).toHaveClass('lsd:size-5');
+      expect(thumb).toHaveClass('lsd:size-[var(--lsd-spacing-large)]');
     });
 
     it('applies large size classes correctly', () => {
       render(<Switch size="lg" />);
       const switchElement = screen.getByRole('switch');
-      expect(switchElement).toHaveClass('lsd:h-[24px]');
+      expect(switchElement).toHaveClass('lsd:h-[var(--lsd-spacing-larger)]');
       expect(switchElement).toHaveClass('lsd:w-12');
     });
 
     it('applies large size thumb classes correctly', () => {
       render(<Switch size="lg" />);
       const thumb = screen.getByRole('switch').children[0];
-      expect(thumb).toHaveClass('lsd:size-6');
+      expect(thumb).toHaveClass('lsd:size-[var(--lsd-spacing-larger)]');
     });
 
     it('defaults to medium size when no size prop is provided', () => {
       render(<Switch />);
       const switchElement = screen.getByRole('switch');
-      expect(switchElement).toHaveClass('lsd:h-[18px]');
+      expect(switchElement).toHaveClass('lsd:h-[var(--lsd-spacing-large)]');
       expect(switchElement).toHaveClass('lsd:w-9');
     });
 
     it('applies small size with checked state', () => {
       render(<Switch size="sm" checked />);
       const switchElement = screen.getByRole('switch');
-      expect(switchElement).toHaveClass('lsd:h-[14px]');
-      expect(switchElement).toHaveClass('lsd:w-7');
+      expect(switchElement).toHaveClass('lsd:h-[var(--lsd-spacing-base)]');
+      expect(switchElement).toHaveClass('lsd:w-[var(--lsd-spacing-largest)]');
       expect(switchElement).toHaveClass(
         'lsd:data-[state=checked]:bg-lsd-primary',
       );
@@ -216,7 +216,7 @@ describe('Switch', () => {
     it('applies large size with disabled state', () => {
       render(<Switch size="lg" disabled />);
       const switchElement = screen.getByRole('switch');
-      expect(switchElement).toHaveClass('lsd:h-[24px]');
+      expect(switchElement).toHaveClass('lsd:h-[var(--lsd-spacing-larger)]');
       expect(switchElement).toHaveClass('lsd:w-12');
       expect(switchElement).toBeDisabled();
     });
diff --git a/src/components/ui/tabs/__tests__/tabs-trigger.test.tsx b/src/components/ui/tabs/__tests__/tabs-trigger.test.tsx
index 562621a0..f380895d 100644
--- a/src/components/ui/tabs/__tests__/tabs-trigger.test.tsx
+++ b/src/components/ui/tabs/__tests__/tabs-trigger.test.tsx
@@ -77,8 +77,8 @@ describe('TabsTrigger', () => {
       </Tabs>,
     );
     const trigger = document.querySelector('[data-slot="tabs-trigger"]');
-    expect(trigger).toHaveClass('lsd:px-5');
-    expect(trigger).toHaveClass('lsd:py-2.5');
+    expect(trigger).toHaveClass('lsd:px-[var(--lsd-spacing-large)]');
+    expect(trigger).toHaveClass('lsd:py-[var(--lsd-spacing-small)]');
     expect(trigger).toHaveClass('lsd:text-lg');
   });
 
@@ -94,8 +94,8 @@ describe('TabsTrigger', () => {
       </Tabs>,
     );
     const trigger = document.querySelector('[data-slot="tabs-trigger"]');
-    expect(trigger).toHaveClass('lsd:px-3');
-    expect(trigger).toHaveClass('lsd:py-1.5');
+    expect(trigger).toHaveClass('lsd:px-[var(--lsd-spacing-small)]');
+    expect(trigger).toHaveClass('lsd:py-[var(--lsd-spacing-smaller)]');
     expect(trigger).toHaveClass('lsd:text-sm');
   });
 
@@ -111,8 +111,8 @@ describe('TabsTrigger', () => {
       </Tabs>,
     );
     const trigger = document.querySelector('[data-slot="tabs-trigger"]');
-    expect(trigger).toHaveClass('lsd:px-4');
-    expect(trigger).toHaveClass('lsd:py-2');
+    expect(trigger).toHaveClass('lsd:px-[var(--lsd-spacing-base)]');
+    expect(trigger).toHaveClass('lsd:py-[var(--lsd-spacing-smaller)]');
     expect(trigger).toHaveClass('lsd:text-base');
   });
 
diff --git a/src/components/ui/tabs/__tests__/tabs.test.tsx b/src/components/ui/tabs/__tests__/tabs.test.tsx
index 4d858aa3..9d5ca800 100644
--- a/src/components/ui/tabs/__tests__/tabs.test.tsx
+++ b/src/components/ui/tabs/__tests__/tabs.test.tsx
@@ -154,8 +154,8 @@ describe('tabsTriggerVariants', () => {
     expect(result).toContain('lsd:flex');
     expect(result).toContain('lsd:items-center');
     expect(result).toContain('lsd:justify-center');
-    expect(result).toContain('lsd:px-5');
-    expect(result).toContain('lsd:py-2.5');
+    expect(result).toContain('lsd:px-[var(--lsd-spacing-large)]');
+    expect(result).toContain('lsd:py-[var(--lsd-spacing-small)]');
     expect(result).toContain('lsd:text-lg');
   });
 
@@ -164,16 +164,16 @@ describe('tabsTriggerVariants', () => {
     const md = tabsTriggerVariants({ size: 'md' });
     const lg = tabsTriggerVariants({ size: 'lg' });
 
-    expect(sm).toContain('lsd:px-3');
-    expect(sm).toContain('lsd:py-1.5');
+    expect(sm).toContain('lsd:px-[var(--lsd-spacing-small)]');
+    expect(sm).toContain('lsd:py-[var(--lsd-spacing-smaller)]');
     expect(sm).toContain('lsd:text-sm');
 
-    expect(md).toContain('lsd:px-4');
-    expect(md).toContain('lsd:py-2');
+    expect(md).toContain('lsd:px-[var(--lsd-spacing-base)]');
+    expect(md).toContain('lsd:py-[var(--lsd-spacing-smaller)]');
     expect(md).toContain('lsd:text-base');
 
-    expect(lg).toContain('lsd:px-5');
-    expect(lg).toContain('lsd:py-2.5');
+    expect(lg).toContain('lsd:px-[var(--lsd-spacing-large)]');
+    expect(lg).toContain('lsd:py-[var(--lsd-spacing-small)]');
     expect(lg).toContain('lsd:text-lg');
   });
 
diff --git a/src/components/ui/tabs/types.ts b/src/components/ui/tabs/types.ts
index 11e61c0e..2428cf9c 100644
--- a/src/components/ui/tabs/types.ts
+++ b/src/components/ui/tabs/types.ts
@@ -45,9 +45,9 @@ export const tabsTriggerVariants = cva(
   {
     variants: {
       size: {
-        sm: 'lsd:px-3 lsd:py-1.5 lsd:text-sm lsd:[&>svg]:ml-2 lsd:[&>svg]:h-4 lsd:[&>svg]:w-4',
-        md: 'lsd:px-4 lsd:py-2 lsd:text-base lsd:[&>svg]:ml-3 lsd:[&>svg]:h-5 lsd:[&>svg]:w-5',
-        lg: 'lsd:px-5 lsd:py-2.5 lsd:text-lg lsd:[&>svg]:ml-3.5 lsd:[&>svg]:h-6 lsd:[&>svg]:w-6',
+        sm: 'lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm lsd:[&>svg]:ml-[var(--lsd-spacing-smaller)] lsd:[&>svg]:h-[var(--lsd-spacing-base)] lsd:[&>svg]:w-[var(--lsd-spacing-base)]',
+        md: 'lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-base lsd:[&>svg]:ml-[var(--lsd-spacing-small)] lsd:[&>svg]:h-[var(--lsd-spacing-large)] lsd:[&>svg]:w-[var(--lsd-spacing-large)]',
+        lg: 'lsd:px-[var(--lsd-spacing-large)] lsd:py-[var(--lsd-spacing-small)] lsd:text-lg lsd:[&>svg]:ml-[var(--lsd-spacing-base)] lsd:[&>svg]:h-[var(--lsd-spacing-larger)] lsd:[&>svg]:w-[var(--lsd-spacing-larger)]',
       },
       fullWidth: {
         true: 'lsd:flex-1',
diff --git a/src/components/ui/toggle-group/__tests__/toggle-group.test.tsx b/src/components/ui/toggle-group/__tests__/toggle-group.test.tsx
index 12ee187c..d0c911e9 100644
--- a/src/components/ui/toggle-group/__tests__/toggle-group.test.tsx
+++ b/src/components/ui/toggle-group/__tests__/toggle-group.test.tsx
@@ -44,7 +44,7 @@ describe('ToggleGroup', () => {
     );
     const item = screen.getByRole('radio', { name: 'A' });
     expect(item).toHaveClass('lsd:h-10');
-    expect(item).toHaveClass('lsd:px-3');
+    expect(item).toHaveClass('lsd:px-[var(--lsd-spacing-small)]');
   });
 
   it('applies small size classes correctly', () => {
@@ -55,7 +55,7 @@ describe('ToggleGroup', () => {
     );
     const item = screen.getByRole('radio', { name: 'A' });
     expect(item).toHaveClass('lsd:h-8');
-    expect(item).toHaveClass('lsd:px-2');
+    expect(item).toHaveClass('lsd:px-[var(--lsd-spacing-smaller)]');
   });
 
   it('applies large size classes correctly', () => {
@@ -66,7 +66,7 @@ describe('ToggleGroup', () => {
     );
     const item = screen.getByRole('radio', { name: 'A' });
     expect(item).toHaveClass('lsd:h-12');
-    expect(item).toHaveClass('lsd:px-4');
+    expect(item).toHaveClass('lsd:px-[var(--lsd-spacing-base)]');
   });
 
   it('uses default size when not specified', () => {
diff --git a/src/components/ui/toggle/toggle.test.tsx b/src/components/ui/toggle/toggle.test.tsx
index 7c38611a..68a8e473 100644
--- a/src/components/ui/toggle/toggle.test.tsx
+++ b/src/components/ui/toggle/toggle.test.tsx
@@ -37,8 +37,8 @@ describe('Toggle', () => {
     const toggle = screen.getByRole('button');
     expect(toggle).toHaveClass('lsd:h-10');
     expect(toggle).toHaveClass('lsd:min-w-10');
-    expect(toggle).toHaveClass('lsd:px-3');
-    expect(toggle).toHaveClass('lsd:py-[6px]');
+    expect(toggle).toHaveClass('lsd:px-[var(--lsd-spacing-small)]');
+    expect(toggle).toHaveClass('lsd:py-[var(--lsd-spacing-smaller)]');
   });
 
   it('applies small size classes correctly', () => {
@@ -46,8 +46,8 @@ describe('Toggle', () => {
     const toggle = screen.getByRole('button');
     expect(toggle).toHaveClass('lsd:h-8');
     expect(toggle).toHaveClass('lsd:min-w-8');
-    expect(toggle).toHaveClass('lsd:px-2');
-    expect(toggle).toHaveClass('lsd:py-[6px]');
+    expect(toggle).toHaveClass('lsd:px-[var(--lsd-spacing-smaller)]');
+    expect(toggle).toHaveClass('lsd:py-[var(--lsd-spacing-smaller)]');
     expect(toggle).toHaveClass('lsd:text-[0.75rem]');
   });
 
@@ -56,8 +56,8 @@ describe('Toggle', () => {
     const toggle = screen.getByRole('button');
     expect(toggle).toHaveClass('lsd:h-12');
     expect(toggle).toHaveClass('lsd:min-w-12');
-    expect(toggle).toHaveClass('lsd:px-4');
-    expect(toggle).toHaveClass('lsd:py-[10px]');
+    expect(toggle).toHaveClass('lsd:px-[var(--lsd-spacing-base)]');
+    expect(toggle).toHaveClass('lsd:py-[var(--lsd-spacing-small)]');
     expect(toggle).toHaveClass('lsd:text-[0.875rem]');
   });
 
@@ -127,23 +127,35 @@ describe('toggleVariants', () => {
   it('returns correct classes for medium size', () => {
     expect(toggleVariants({ size: 'md' })).toContain('lsd:h-10');
     expect(toggleVariants({ size: 'md' })).toContain('lsd:min-w-10');
-    expect(toggleVariants({ size: 'md' })).toContain('lsd:px-3');
-    expect(toggleVariants({ size: 'md' })).toContain('lsd:py-[6px]');
+    expect(toggleVariants({ size: 'md' })).toContain(
+      'lsd:px-[var(--lsd-spacing-small)]',
+    );
+    expect(toggleVariants({ size: 'md' })).toContain(
+      'lsd:py-[var(--lsd-spacing-smaller)]',
+    );
   });
 
   it('returns correct classes for small size', () => {
     expect(toggleVariants({ size: 'sm' })).toContain('lsd:h-8');
     expect(toggleVariants({ size: 'sm' })).toContain('lsd:min-w-8');
-    expect(toggleVariants({ size: 'sm' })).toContain('lsd:px-2');
-    expect(toggleVariants({ size: 'sm' })).toContain('lsd:py-[6px]');
+    expect(toggleVariants({ size: 'sm' })).toContain(
+      'lsd:px-[var(--lsd-spacing-smaller)]',
+    );
+    expect(toggleVariants({ size: 'sm' })).toContain(
+      'lsd:py-[var(--lsd-spacing-smaller)]',
+    );
     expect(toggleVariants({ size: 'sm' })).toContain('lsd:text-[0.75rem]');
   });
 
   it('returns correct classes for large size', () => {
     expect(toggleVariants({ size: 'lg' })).toContain('lsd:h-12');
     expect(toggleVariants({ size: 'lg' })).toContain('lsd:min-w-12');
-    expect(toggleVariants({ size: 'lg' })).toContain('lsd:px-4');
-    expect(toggleVariants({ size: 'lg' })).toContain('lsd:py-[10px]');
+    expect(toggleVariants({ size: 'lg' })).toContain(
+      'lsd:px-[var(--lsd-spacing-base)]',
+    );
+    expect(toggleVariants({ size: 'lg' })).toContain(
+      'lsd:py-[var(--lsd-spacing-small)]',
+    );
     expect(toggleVariants({ size: 'lg' })).toContain('lsd:text-[0.875rem]');
   });
 
diff --git a/src/components/ui/toggle/types.ts b/src/components/ui/toggle/types.ts
index 73ee3c3c..23be9cd3 100644
--- a/src/components/ui/toggle/types.ts
+++ b/src/components/ui/toggle/types.ts
@@ -6,9 +6,9 @@ export const toggleVariants = cva(
   {
     variants: {
       size: {
-        sm: 'lsd:h-8 lsd:min-w-8 lsd:px-2 lsd:py-[6px] lsd:text-[0.75rem]',
-        md: 'lsd:h-10 lsd:min-w-10 lsd:px-3 lsd:py-[6px]',
-        lg: 'lsd:h-12 lsd:min-w-12 lsd:px-4 lsd:py-[10px] lsd:text-[0.875rem]',
+        sm: 'lsd:h-8 lsd:min-w-8 lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-[0.75rem]',
+        md: 'lsd:h-10 lsd:min-w-10 lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)]',
+        lg: 'lsd:h-12 lsd:min-w-12 lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-small)] lsd:text-[0.875rem]',
       },
     },
     defaultVariants: {
diff --git a/src/styles/core.css b/src/styles/core.css
index 12283397..3a4307c4 100644
--- a/src/styles/core.css
+++ b/src/styles/core.css
@@ -77,7 +77,7 @@
   --lsd-spacing-base: 1rem;
   --lsd-spacing-large: 1.25rem;
   --lsd-spacing-larger: 1.5rem;
-  --lsd-spacing-largest: 1.875rem;
+  --lsd-spacing-largest: 1.75rem;
 
   /* LSD Design Tokens - Light Theme */
   --lsd-primary: #000000;