@tempots/beatui 0.87.4 → 0.88.0

package/dist/beatui.tailwind.css

@@ -265,36 +265,36 @@
   --spacing-3xl: calc(var(--spacing-base) * 12);
   --spacing-4xl: calc(var(--spacing-base) * 16);
   --spacing-full: 2000px;
-  --base-font-size: 1rem;
-  --font-size-3xs: calc(var(--base-font-size) * 0.5);
-  --font-size-3xs-lh: calc(var(--base-font-size) * 0.75);
-  --font-size-2xs: calc(var(--base-font-size) * 0.625);
-  --font-size-2xs-lh: calc(var(--base-font-size) * 0.75);
-  --font-size-xs: calc(var(--base-font-size) * 0.75);
-  --font-size-xs-lh: var(--base-font-size);
-  --font-size-sm: calc(var(--base-font-size) * 0.875);
-  --font-size-sm-lh: calc(var(--base-font-size) * 1.25);
-  --font-size-md: var(--base-font-size);
-  --font-size-md-lh: calc(var(--base-font-size) * 1.5);
-  --font-size-lg: calc(var(--base-font-size) * 1.125);
-  --font-size-lg-lh: calc(var(--base-font-size) * 1.75);
-  --font-size-xl: calc(var(--base-font-size) * 1.25);
-  --font-size-xl-lh: calc(var(--base-font-size) * 1.75);
-  --font-size-2xl: calc(var(--base-font-size) * 1.5);
-  --font-size-2xl-lh: calc(var(--base-font-size) * 2);
-  --font-size-3xl: calc(var(--base-font-size) * 1.875);
-  --font-size-3xl-lh: calc(var(--base-font-size) * 2.25);
-  --font-size-4xl: calc(var(--base-font-size) * 2.25);
-  --font-size-4xl-lh: calc(var(--base-font-size) * 2.5);
-  --font-size-5xl: calc(var(--base-font-size) * 3);
+  --font-size-base: 1rem;
+  --font-size-3xs: calc(var(--font-size-base) * 0.5);
+  --font-size-3xs-lh: calc(var(--font-size-base) * 0.75);
+  --font-size-2xs: calc(var(--font-size-base) * 0.625);
+  --font-size-2xs-lh: calc(var(--font-size-base) * 0.75);
+  --font-size-xs: calc(var(--font-size-base) * 0.75);
+  --font-size-xs-lh: var(--font-size-base);
+  --font-size-sm: calc(var(--font-size-base) * 0.875);
+  --font-size-sm-lh: calc(var(--font-size-base) * 1.25);
+  --font-size-md: var(--font-size-base);
+  --font-size-md-lh: calc(var(--font-size-base) * 1.5);
+  --font-size-lg: calc(var(--font-size-base) * 1.125);
+  --font-size-lg-lh: calc(var(--font-size-base) * 1.75);
+  --font-size-xl: calc(var(--font-size-base) * 1.25);
+  --font-size-xl-lh: calc(var(--font-size-base) * 1.75);
+  --font-size-2xl: calc(var(--font-size-base) * 1.5);
+  --font-size-2xl-lh: calc(var(--font-size-base) * 2);
+  --font-size-3xl: calc(var(--font-size-base) * 1.875);
+  --font-size-3xl-lh: calc(var(--font-size-base) * 2.25);
+  --font-size-4xl: calc(var(--font-size-base) * 2.25);
+  --font-size-4xl-lh: calc(var(--font-size-base) * 2.5);
+  --font-size-5xl: calc(var(--font-size-base) * 3);
   --font-size-5xl-lh: 1;
-  --font-size-6xl: calc(var(--base-font-size) * 3.75);
+  --font-size-6xl: calc(var(--font-size-base) * 3.75);
   --font-size-6xl-lh: 1;
-  --font-size-7xl: calc(var(--base-font-size) * 4.5);
+  --font-size-7xl: calc(var(--font-size-base) * 4.5);
   --font-size-7xl-lh: 1;
-  --font-size-8xl: calc(var(--base-font-size) * 6);
+  --font-size-8xl: calc(var(--font-size-base) * 6);
   --font-size-8xl-lh: 1;
-  --font-size-9xl: calc(var(--base-font-size) * 8);
+  --font-size-9xl: calc(var(--font-size-base) * 8);
   --font-size-9xl-lh: 1;
   --font-weight-thin: 100;
   --font-weight-extralight: 200;
@@ -329,11 +329,11 @@
   --breakpoint-xl: 80rem;
   --breakpoint-2xl: 96rem;
   --radius-none: 0;
-  --radius-xs: calc(var(--spacing-base) / 2);
-  --radius-sm: var(--spacing-base);
-  --radius-md: calc(var(--spacing-base) * 1.5);
-  --radius-lg: calc(var(--spacing-base) * 2);
-  --radius-xl: calc(var(--spacing-base) * 3);
+  --radius-xs: var(--spacing-xs);
+  --radius-sm: var(--spacing-sm);
+  --radius-md: var(--spacing-smh);
+  --radius-lg: var(--spacing-md);
+  --radius-xl: var(--spacing-mdh);
   --radius-full: 9999px;
   --shadow-none: none;
   --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
@@ -375,6 +375,40 @@
   --z-index-popover: 80;
   --z-index-notification: 90;
   --z-index-maximum: 100;
+  --border-width-none: 0;
+  --border-width-thin: 1px;
+  --border-width-default: 1.5px;
+  --border-width-medium: 2px;
+  --border-width-thick: 3px;
+  --outline-width-none: 0;
+  --outline-width-default: 1px;
+  --outline-width-focus: 2px;
+  --control-height-xs: calc(var(--spacing-base) * 7);
+  --control-height-sm: calc(var(--spacing-base) * 8);
+  --control-height-md: calc(var(--spacing-base) * 10);
+  --control-height-lg: calc(var(--spacing-base) * 12);
+  --control-height-xl: calc(var(--spacing-base) * 14);
+  --control-padding-block-xs: var(--spacing-xs);
+  --control-padding-block-sm: var(--spacing-sm);
+  --control-padding-block-md: var(--spacing-md);
+  --control-padding-block-lg: var(--spacing-mdh);
+  --control-padding-block-xl: var(--spacing-lg);
+  --control-padding-inline-xs: var(--spacing-md);
+  --control-padding-inline-sm: var(--spacing-mdh);
+  --control-padding-inline-md: var(--spacing-lg);
+  --control-padding-inline-lg: var(--spacing-lgh);
+  --control-padding-inline-xl: var(--spacing-xl);
+  --control-gap-xs: var(--spacing-xs);
+  --control-gap-sm: var(--spacing-sm);
+  --control-gap-md: var(--spacing-smh);
+  --control-gap-lg: var(--spacing-md);
+  --control-gap-xl: var(--spacing-mdh);
+  --overlay-width-xs: min(20rem, 90vw);
+  --overlay-width-sm: min(25rem, 90vw);
+  --overlay-width-md: min(37.5rem, 90vw);
+  --overlay-width-lg: min(50rem, 90vw);
+  --overlay-width-xl: min(62.5rem, 90vw);
+  --overlay-width-min-width: 12rem;
 }
 
 }
@@ -501,12 +535,12 @@
   --font-mono: var(--font-family-mono);
   --font-ui: var(--font-family-sans);
   --font-prose: var(--font-family-serif);
-  --default-font-family: var(--font-body);
-  --default-heading-font-family: var(--font-heading);
-  --default-display-font-family: var(--font-display);
-  --default-ui-font-family: var(--font-ui);
-  --default-prose-font-family: var(--font-prose);
-  --default-mono-font-family: var(--font-mono);
+  --font-family-default: var(--font-body);
+  --font-family-default-heading: var(--font-heading);
+  --font-family-default-display: var(--font-display);
+  --font-family-default-ui: var(--font-ui);
+  --font-family-default-prose: var(--font-prose);
+  --font-family-default-mono: var(--font-mono);
   --radius-control: var(--radius-md);
   --radius-control-sm: var(--radius-sm);
   --radius-control-xs: var(--radius-xs);
@@ -527,12 +561,12 @@
   --motion-transition-overlay: var(--motion-duration-relaxed);
   --motion-transition-emphasis: var(--motion-duration-fast);
   --motion-easing-emphasis: var(--motion-easing-emphasized);
-  --spacing-stack-2xs: calc(var(--spacing-base) / 2);
-  --spacing-stack-xs: calc(var(--spacing-base) * 1);
-  --spacing-stack-sm: calc(var(--spacing-base) * 2);
-  --spacing-stack-md: calc(var(--spacing-base) * 3);
-  --spacing-stack-lg: calc(var(--spacing-base) * 4);
-  --spacing-stack-xl: calc(var(--spacing-base) * 6);
+  --spacing-stack-2xs: var(--spacing-xs);
+  --spacing-stack-xs: var(--spacing-sm);
+  --spacing-stack-sm: var(--spacing-md);
+  --spacing-stack-md: var(--spacing-mdh);
+  --spacing-stack-lg: var(--spacing-lg);
+  --spacing-stack-xl: var(--spacing-xl);
   --text-shadow-button-filled: var(--text-shadow-sm);
   --text-shadow-button-light: var(--text-shadow-xs);
   --text-shadow-button-default: var(--text-shadow-2xs);
@@ -665,7 +699,8 @@
 
 .b-rtl blockquote,
 .b-ltr blockquote {
-  border-inline-start: 4px solid var(--color-base-300);
+  border-inline-start: calc(2 * var(--border-width-medium)) solid
+    var(--color-base-300);
   border-inline-end: none;
   padding-inline-start: 1rem;
   padding-inline-end: 0;
@@ -822,7 +857,7 @@ a:focus-visible {
     padding: var(--spacing-md);
 
     /* Border */
-    border: 2px solid var(--action-card-border);
+    border: var(--border-width-medium) solid var(--action-card-border);
     border-radius: var(--radius-lg);
 
     /* Background */
@@ -963,7 +998,7 @@ a:focus-visible {
 
   /* Focus styles for accessibility */
   .bc-action-card--clickable:focus-visible {
-    outline: 2px solid var(--color-primary-500);
+    outline: var(--outline-width-focus) solid var(--color-primary-500);
     outline-offset: 2px;
   }
 
@@ -985,7 +1020,7 @@ a:focus-visible {
   --animation-easing: cubic-bezier(0.2, 0, 0, 1);
   --scale-factor: 0.95;
   --transform-origin: center;
-  --slide-distance: calc(var(--spacing-base) * 6);
+  --slide-distance: var(--spacing-xl);
 
   transition-property: opacity, transform;
   transition-duration: var(--animation-duration);
@@ -1305,7 +1340,7 @@ a:focus-visible {
 /* High contrast mode support */
 @media (prefers-contrast: high) {
   .bc-auth-container--styled {
-    border: 2px solid var(--border-default);
+    border: var(--border-width-medium) solid var(--border-default);
   }
 
   .dark .bc-auth-container--styled {
@@ -1378,7 +1413,7 @@ a:focus-visible {
 .bc-auth-form__social {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
+  gap: var(--spacing-stack-md, var(--spacing-mdh));
 }
 
 /* Form fields */
@@ -1391,7 +1426,7 @@ a:focus-visible {
 .bc-auth-form__fields {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
+  gap: var(--spacing-stack-lg, var(--spacing-lg));
 }
 
 /* Remember me checkbox */
@@ -1465,7 +1500,7 @@ a:focus-visible {
 }
 
 .bc-auth-form__link:focus-visible {
-  outline: 2px solid var(--interactive-focus);
+  outline: var(--outline-width-focus) solid var(--interactive-focus);
   outline-offset: 2px;
 }
 
@@ -1481,7 +1516,7 @@ a:focus-visible {
 /* Responsive adjustments */
 @media (width < 40rem) {
   .bc-auth-form {
-    gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
+    gap: var(--spacing-stack-lg, var(--spacing-lg));
   }
 
   .bc-auth-form__title {
@@ -1489,7 +1524,7 @@ a:focus-visible {
   }
 
   .bc-auth-form__fields {
-    gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
+    gap: var(--spacing-stack-md, var(--spacing-mdh));
   }
 }
 
@@ -1509,8 +1544,8 @@ a:focus-visible {
 }
 
 .bc-social-login-buttons.bc-stack {
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
-  padding-inline: calc(var(--spacing-base) * 8);
+  gap: var(--spacing-stack-sm, var(--spacing-md));
+  padding-inline: var(--spacing-2xl);
   width: 100%;
 }
 
@@ -1523,7 +1558,7 @@ a:focus-visible {
   align-items: center;
   justify-content: center;
   width: 100%;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 .bc-social-login-button__icon {
@@ -1532,7 +1567,7 @@ a:focus-visible {
   justify-content: center;
   background-color: var(--color-white);
   border-radius: var(--radius-full);
-  padding: calc(var(--spacing-base) * 1);
+  padding: var(--spacing-sm);
 }
 
 .dark .bc-social-login-button__icon {
@@ -1553,7 +1588,7 @@ a:focus-visible {
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding-inline: calc(var(--spacing-base) * 4);
+  padding-inline: var(--spacing-lg);
 }
 
 /* Provider-specific icon backgrounds and colors */
@@ -1714,7 +1749,7 @@ a:focus-visible {
 .bc-two-factor__methods {
   display: flex;
   gap: var(--spacing-sm);
-  border-bottom: 1px solid var(--color-neutral-200);
+  border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
   padding-bottom: var(--spacing-sm);
 }
 
@@ -1743,7 +1778,7 @@ a:focus-visible {
 .bc-two-factor__method-button--active {
   color: var(--color-primary-600);
   font-weight: var(--font-weight-semibold);
-  border-bottom: 2px solid var(--color-primary-600);
+  border-bottom: var(--border-width-medium) solid var(--color-primary-600);
 }
 
 .dark .bc-two-factor__method-button:hover {
@@ -1853,7 +1888,7 @@ a:focus-visible {
   padding: var(--spacing-sm) var(--spacing-md);
   background-color: var(--color-neutral-50);
   border-radius: var(--radius-md);
-  border: 1px solid var(--color-neutral-200);
+  border: var(--border-width-thin) solid var(--color-neutral-200);
 }
 
 .dark .bc-passkey-item {
@@ -1922,7 +1957,7 @@ a:focus-visible {
   background-color: var(--avatar-bg);
   color: var(--avatar-text);
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
   user-select: none;
@@ -1941,7 +1976,7 @@ a:focus-visible {
 /* Initials text */
 .bc-avatar__initials {
   font-weight: var(--font-weight-semibold);
-  line-height: 1;
+  line-height: var(--line-height-none);
   text-align: center;
   text-transform: uppercase;
 }
@@ -1957,32 +1992,32 @@ a:focus-visible {
 
 /* Size variants */
 .bc-avatar--size-xs {
-  width: calc(var(--spacing-base) * 6);
-  height: calc(var(--spacing-base) * 6);
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
   font-size: var(--font-size-xs);
 }
 
 .bc-avatar--size-sm {
-  width: calc(var(--spacing-base) * 8);
-  height: calc(var(--spacing-base) * 8);
+  width: var(--spacing-2xl);
+  height: var(--spacing-2xl);
   font-size: var(--font-size-sm);
 }
 
 .bc-avatar--size-md {
-  width: calc(var(--spacing-base) * 10);
-  height: calc(var(--spacing-base) * 10);
+  width: var(--spacing-2xlh);
+  height: var(--spacing-2xlh);
   font-size: var(--font-size-md);
 }
 
 .bc-avatar--size-lg {
-  width: calc(var(--spacing-base) * 12);
-  height: calc(var(--spacing-base) * 12);
+  width: var(--spacing-3xl);
+  height: var(--spacing-3xl);
   font-size: var(--font-size-lg);
 }
 
 .bc-avatar--size-xl {
-  width: calc(var(--spacing-base) * 16);
-  height: calc(var(--spacing-base) * 16);
+  width: var(--spacing-4xl);
+  height: var(--spacing-4xl);
   font-size: var(--font-size-xl);
 }
 
@@ -2003,7 +2038,7 @@ a:focus-visible {
 
 /* Bordered variant */
 .bc-avatar--bordered {
-  border: 2px solid var(--color-white);
+  border: var(--border-width-medium) solid var(--color-white);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
@@ -2027,7 +2062,7 @@ a:focus-visible {
 /* Add border to overlapping avatars for better separation */
 .bc-avatar-group--spacing-tight > .bc-avatar,
 .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
-  border: 2px solid var(--color-white);
+  border: var(--border-width-medium) solid var(--color-white);
 }
 
 /* Normal spacing - standard gap */
@@ -2059,12 +2094,12 @@ a:focus-visible {
 /* Accessibility adjustments */
 @media (prefers-contrast: high) {
   .bc-avatar--bordered {
-    border-width: 3px;
+    border-width: var(--border-width-thick);
   }
 
   .bc-avatar-group--spacing-tight > .bc-avatar,
   .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
-    border-width: 3px;
+    border-width: var(--border-width-thick);
   }
 }
 
@@ -2090,13 +2125,13 @@ a:focus-visible {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1.5px solid var(--badge-border);
+  border: var(--border-width-default) solid var(--badge-border);
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
   font-size: inherit;
-  line-height: 1;
+  line-height: var(--line-height-none);
   border-radius: var(--radius-badge, var(--radius-control, var(--radius-md)));
   transition: all var(--motion-transition-fast) var(--motion-easing-standard);
   background-color: var(--badge-bg);
@@ -2108,40 +2143,37 @@ a:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(
-    --badge-gap,
-    var(--spacing-stack-2xs, calc(var(--spacing-base) / 2))
-  );
+  gap: var(--badge-gap, var(--control-gap-md));
 }
 
 /* Size variants */
 .bc-badge--size-xs {
   font-size: var(--font-size-xs);
-  padding: calc(var(--spacing-base) * 0.5) calc(var(--spacing-base) * 1);
+  padding: var(--spacing-xs) var(--spacing-sm);
   --badge-gap: calc(var(--spacing-base) * 0.25);
 }
 
 .bc-badge--size-sm {
   font-size: var(--font-size-sm);
-  padding: calc(var(--spacing-base) * 0.75) calc(var(--spacing-base) * 1.5);
-  --badge-gap: calc(var(--spacing-base) * 0.5);
+  padding: calc(var(--spacing-base) * 0.75) var(--spacing-smh);
+  --badge-gap: var(--spacing-xs);
 }
 
 .bc-badge--size-md {
   font-size: var(--font-size-md);
-  padding: var(--spacing-base) calc(var(--spacing-base) * 2);
+  padding: var(--spacing-sm) var(--spacing-md);
   --badge-gap: calc(var(--spacing-base) * 0.75);
 }
 
 .bc-badge--size-lg {
   font-size: var(--font-size-lg);
   padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 2.5);
-  --badge-gap: var(--spacing-base);
+  --badge-gap: var(--spacing-sm);
 }
 
 .bc-badge--size-xl {
   font-size: var(--font-size-xl);
-  padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 3);
+  padding: var(--spacing-smh) var(--spacing-mdh);
   --badge-gap: calc(var(--spacing-base) * 1.25);
 }
 
@@ -2154,23 +2186,35 @@ a:focus-visible {
 }
 
 .bc-badge--circle.bc-badge--size-xs {
-  min-width: calc(var(--font-size-xs) + var(--spacing-base) * 1 + 3px);
+  min-width: calc(
+    var(--font-size-xs) + var(--spacing-base) * 1 + var(--border-width-thick)
+  );
 }
 
 .bc-badge--circle.bc-badge--size-sm {
-  min-width: calc(var(--font-size-sm) + var(--spacing-base) * 1.5 + 3px);
+  min-width: calc(
+    var(--font-size-sm) + var(--spacing-base) * 1.5 + var(--border-width-thick)
+  );
 }
 
 .bc-badge--circle.bc-badge--size-md {
-  min-width: calc(var(--font-size-md) + var(--spacing-base) * 2 + 3px);
+  min-width: calc(
+    var(--font-size-md) + var(--spacing-base) * 2 + var(--border-width-thick)
+  );
 }
 
 .bc-badge--circle.bc-badge--size-lg {
-  min-width: calc(var(--font-size-lg) * 1.2 + var(--spacing-base) * 2.5 + 3px);
+  min-width: calc(
+    var(--font-size-lg) * 1.2 + var(--spacing-base) * 2.5 +
+      var(--border-width-thick)
+  );
 }
 
 .bc-badge--circle.bc-badge--size-xl {
-  min-width: calc(var(--font-size-xl) * 1.2 + var(--spacing-base) * 3 + 3px);
+  min-width: calc(
+    var(--font-size-xl) * 1.2 + var(--spacing-base) * 3 +
+      var(--border-width-thick)
+  );
 }
 
 /* Full width variant */
@@ -2181,9 +2225,9 @@ a:focus-visible {
 
 /* Dot variant - small colored circle indicator */
 .bc-badge--dot {
-  width: calc(var(--spacing-base) * 2);
-  height: calc(var(--spacing-base) * 2);
-  min-width: calc(var(--spacing-base) * 2);
+  width: var(--spacing-md);
+  height: var(--spacing-md);
+  min-width: var(--spacing-md);
   padding: 0;
   border-radius: 50%;
   border: none;
@@ -2195,15 +2239,15 @@ a:focus-visible {
 
 /* Dot variant size adjustments */
 .bc-badge--dot.bc-badge--size-xs {
-  width: calc(var(--spacing-base) * 1.5);
-  height: calc(var(--spacing-base) * 1.5);
-  min-width: calc(var(--spacing-base) * 1.5);
+  width: var(--spacing-smh);
+  height: var(--spacing-smh);
+  min-width: var(--spacing-smh);
 }
 
 .bc-badge--dot.bc-badge--size-sm {
-  width: calc(var(--spacing-base) * 2);
-  height: calc(var(--spacing-base) * 2);
-  min-width: calc(var(--spacing-base) * 2);
+  width: var(--spacing-md);
+  height: var(--spacing-md);
+  min-width: var(--spacing-md);
 }
 
 .bc-badge--dot.bc-badge--size-md {
@@ -2213,9 +2257,9 @@ a:focus-visible {
 }
 
 .bc-badge--dot.bc-badge--size-lg {
-  width: calc(var(--spacing-base) * 3);
-  height: calc(var(--spacing-base) * 3);
-  min-width: calc(var(--spacing-base) * 3);
+  width: var(--spacing-mdh);
+  height: var(--spacing-mdh);
+  min-width: var(--spacing-mdh);
 }
 
 .bc-badge--dot.bc-badge--size-xl {
@@ -2239,7 +2283,7 @@ a:focus-visible {
 /* Accessibility adjustments */
 @media (prefers-contrast: high) {
   .bc-badge {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -2253,13 +2297,13 @@ a:focus-visible {
 .bc-block-command-palette {
   width: 280px;
   background: var(--color-white);
-  border: 1px solid var(--color-base-200);
+  border: var(--border-width-thin) solid var(--color-base-200);
   border-radius: var(--radius-lg, 8px);
   box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
   overflow: hidden;
   z-index: var(--z-index-popover, 1000);
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
   animation: block-command-enter 120ms ease-out;
@@ -2282,7 +2326,7 @@ a:focus-visible {
   align-items: center;
   gap: 6px;
   padding: 8px 12px;
-  border-bottom: 1px solid var(--color-base-200);
+  border-bottom: var(--border-width-thin) solid var(--color-base-200);
 }
 
 .bc-block-command-palette__search-prefix {
@@ -2415,7 +2459,7 @@ a:focus-visible {
 .bc-breadcrumbs__item {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
+  gap: var(--spacing-stack-2xs, var(--spacing-xs));
   list-style: none;
 }
 
@@ -2424,7 +2468,7 @@ a:focus-visible {
 .bc-breadcrumbs__button {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
+  gap: var(--spacing-stack-2xs, var(--spacing-xs));
   color: var(--text-muted);
   text-decoration: none;
   cursor: pointer;
@@ -2449,7 +2493,7 @@ a:focus-visible {
 
 .bc-breadcrumbs__link:focus-visible,
 .bc-breadcrumbs__button:focus-visible {
-  outline: 2px solid var(--color-primary-500);
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: 2px;
 }
 
@@ -2462,7 +2506,7 @@ a:focus-visible {
 .bc-breadcrumbs__text {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
+  gap: var(--spacing-stack-2xs, var(--spacing-xs));
 }
 
 /* Current page styling */
@@ -2547,16 +2591,17 @@ a:focus-visible {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
-  border: 1.5px var(--button-border-style) var(--button-border);
+  gap: var(--control-gap-md);
+  border: var(--border-width-default) var(--button-border-style)
+    var(--button-border);
   cursor: pointer;
   font-weight: var(--font-weight-semibold);
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
   font-size: inherit;
-  line-height: 1;
+  line-height: var(--line-height-none);
   border-radius: var(--radius-button, var(--radius-control, var(--radius-md)));
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
@@ -2571,7 +2616,7 @@ a:focus-visible {
 }
 
 .bc-button > span {
-  min-height: 10px;
+  min-height: var(--spacing-md);
 }
 
 .bc-button:hover:not(:disabled) {
@@ -2643,7 +2688,7 @@ a:focus-visible {
 /* Accessibility adjustments */
 @media (prefers-contrast: high) {
   .bc-button {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -2661,7 +2706,7 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   border-radius: var(--radius-surface, var(--radius-lg));
-  border: 1px solid var(--card-border);
+  border: var(--border-width-thin) solid var(--card-border);
   padding: var(--spacing-lg);
   box-shadow: var(--shadow-surface, var(--shadow-md));
   background-color: var(--card-bg);
@@ -2771,11 +2816,11 @@ a:focus-visible {
 }
 
 .bc-center--gap-md {
-  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
+  gap: var(--spacing-stack-md, var(--spacing-mdh));
 }
 
 .bc-center--gap-lg {
-  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
+  gap: var(--spacing-stack-lg, var(--spacing-lg));
 }
 
 .bc-center--gap-xl {
@@ -2828,8 +2873,8 @@ a:focus-visible {
 
 .bc-checkbox-input__checkbox:focus-visible,
 .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
-  outline: 1px solid var(--interactive-focus);
-  outline-offset: -1px;
+  outline: var(--outline-width-default) solid var(--interactive-focus);
+  outline-offset: calc(-1 * var(--outline-width-default));
   border-radius: var(--radius-lg);
 }
 
@@ -2852,7 +2897,7 @@ a:focus-visible {
 
 .dark .bc-checkbox-input__checkbox:focus-visible,
 .dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
-  outline: 2px solid var(--interactive-focus);
+  outline: var(--outline-width-focus) solid var(--interactive-focus);
   outline-offset: 2px;
 }
 
@@ -2903,7 +2948,7 @@ a:focus-visible {
   border-radius: var(--radius-control, var(--radius-md));
   overflow: visible;
   cursor: pointer;
-  border: 1px solid var(--color-neutral-300);
+  border: var(--border-width-thin) solid var(--color-neutral-300);
 }
 
 .bc-input-container .bc-color-input__swatch-container {
@@ -2917,7 +2962,7 @@ a:focus-visible {
   width: 1.8rem;
   height: 1.8rem;
   cursor: pointer;
-  border: 1px solid var(--color-neutral-300);
+  border: var(--border-width-thin) solid var(--color-neutral-300);
   border-radius: 100%;
 }
 
@@ -2957,7 +3002,7 @@ a:focus-visible {
 }
 
 .bc-color-swatch-input__control:focus-within {
-  outline: 2px solid var(--interactive-focus);
+  outline: var(--outline-width-focus) solid var(--interactive-focus);
   outline-offset: 2px;
 }
 
@@ -2972,7 +3017,7 @@ a:focus-visible {
 }
 
 .bc-input-container--error .bc-color-swatch-input__control:focus-within {
-  outline: 2px solid var(--color-danger-600);
+  outline: var(--outline-width-focus) solid var(--color-danger-600);
 }
 
 .bc-color-swatch-input__native {
@@ -3001,7 +3046,7 @@ a:focus-visible {
 
 .bc-color-swatch-input__alpha {
   width: 5rem;
-  margin-inline-start: calc(var(--spacing-base) * 2);
+  margin-inline-start: var(--spacing-md);
 }
 
 .bc-color-input input[type='text'] {
@@ -3011,7 +3056,7 @@ a:focus-visible {
 
 /* Dark mode */
 .dark .bc-input-container--error .bc-color-swatch-input__control:focus-within {
-  outline: 2px solid var(--color-danger-400);
+  outline: var(--outline-width-focus) solid var(--color-danger-400);
 }
 
 /* Responsive styles */
@@ -3026,7 +3071,7 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   background: var(--bg-surface);
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-xl);
   overflow: hidden;
@@ -3050,9 +3095,9 @@ a:focus-visible {
 .bc-command-palette__header {
   display: flex;
   align-items: center;
-  gap: calc(var(--spacing-base) * 2);
-  padding: calc(var(--spacing-base) * 3) calc(var(--spacing-base) * 4);
-  border-bottom: 1px solid var(--border-default);
+  gap: var(--spacing-md);
+  padding: var(--spacing-mdh) var(--spacing-lg);
+  border-bottom: var(--border-width-thin) solid var(--border-default);
 }
 
 .bc-command-palette__search-icon {
@@ -3077,22 +3122,22 @@ a:focus-visible {
 
 .bc-command-palette__body {
   overflow-y: auto;
-  padding: calc(var(--spacing-base) * 2);
+  padding: var(--spacing-md);
 }
 
 .bc-command-palette__empty {
-  padding: calc(var(--spacing-base) * 6) calc(var(--spacing-base) * 4);
+  padding: var(--spacing-xl) var(--spacing-lg);
   text-align: center;
   color: var(--text-muted);
   font-size: var(--font-size-sm);
 }
 
 .bc-command-palette__section + .bc-command-palette__section {
-  margin-top: calc(var(--spacing-base) * 2);
+  margin-top: var(--spacing-md);
 }
 
 .bc-command-palette__section-title {
-  padding: var(--spacing-base) calc(var(--spacing-base) * 2);
+  padding: var(--spacing-base) var(--spacing-md);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   color: var(--text-muted);
@@ -3103,8 +3148,8 @@ a:focus-visible {
 .bc-command-palette__item {
   display: flex;
   align-items: center;
-  gap: calc(var(--spacing-base) * 2);
-  padding: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: background-color var(--motion-transition-fast)
@@ -3157,11 +3202,11 @@ a:focus-visible {
   outline: none;
   font: inherit;
   color: inherit;
-  padding: var(--spacing-base) calc(var(--spacing-base) * 2);
+  padding: var(--spacing-base) var(--spacing-md);
   margin: 0;
   background-color: var(--color-gray-50);
   border-radius: 0;
-  border-bottom: 1px solid var(--color-gray-300);
+  border-bottom: var(--border-width-thin) solid var(--color-gray-300);
 }
 
 /* Dark mode */
@@ -3205,8 +3250,8 @@ a:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--spacing-base) * 6);
-  height: calc(var(--spacing-base) * 6);
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
   flex-shrink: 0;
   margin-inline-start: var(--spacing-sm);
   margin-inline-end: calc(var(--spacing-base) * -1.25);
@@ -3215,12 +3260,12 @@ a:focus-visible {
 /* Listbox (dropdown) */
 .bc-dropdown__listbox {
   background-color: var(--color-white);
-  border: 1px solid var(--color-base-200);
+  border: var(--border-width-thin) solid var(--color-base-200);
   border-radius: var(--radius-popover, var(--radius-md));
   box-shadow: var(--shadow-popover, var(--shadow-lg));
   padding: var(--spacing-xs) 0;
   z-index: var(--z-index-navigation);
-  min-width: 12rem;
+  min-width: var(--overlay-min-width);
   max-height: 20rem;
   overflow-y: auto;
   outline: none;
@@ -3230,7 +3275,7 @@ a:focus-visible {
 .bc-dropdown__option {
   display: flex;
   align-items: center;
-  padding: calc(var(--spacing-base) * 1.75) calc(var(--spacing-base) * 3);
+  padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
   border-radius: 0;
   cursor: pointer;
   transition: background-color var(--motion-transition-fast)
@@ -3305,7 +3350,7 @@ a:focus-visible {
 .bc-dropdown__separator {
   margin: var(--spacing-xs) 0;
   border: none;
-  border-top: 1px solid var(--color-gray-200);
+  border-top: var(--border-width-thin) solid var(--color-gray-200);
 }
 
 /* Dark mode styles */
@@ -3341,7 +3386,7 @@ a:focus-visible {
 /* Responsive styles */
 @media (width >= 40rem) {
   .bc-dropdown__option {
-    padding: calc(var(--spacing-base) * 1.75) calc(var(--spacing-base) * 3);
+    padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
   }
 
   .bc-dropdown__listbox {
@@ -3370,13 +3415,13 @@ a:focus-visible {
 /* High contrast mode support */
 @media (prefers-contrast: high) {
   .bc-dropdown__option--focused {
-    outline: 2px solid currentColor;
-    outline-offset: -2px;
+    outline: var(--outline-width-focus) solid currentColor;
+    outline-offset: calc(-1 * var(--outline-width-focus));
   }
 
   .bc-dropdown__option--selected {
-    outline: 2px solid currentColor;
-    outline-offset: -2px;
+    outline: var(--outline-width-focus) solid currentColor;
+    outline-offset: calc(-1 * var(--outline-width-focus));
   }
 }
 
@@ -3392,43 +3437,43 @@ a:focus-visible {
 }
 
 .bc-control--padding-xs {
-  padding: var(--spacing-xs);
+  padding: var(--control-padding-block-xs) var(--control-padding-inline-xs);
 }
 
 .bc-control--padding-sm {
-  padding: var(--spacing-sm);
+  padding: var(--control-padding-block-sm) var(--control-padding-inline-sm);
 }
 
 .bc-control--padding-md {
-  padding: var(--spacing-md);
+  padding: var(--control-padding-block-md) var(--control-padding-inline-md);
 }
 
 .bc-control--padding-lg {
-  padding: var(--spacing-lg);
+  padding: var(--control-padding-block-lg) var(--control-padding-inline-lg);
 }
 
 .bc-control--padding-xl {
-  padding: var(--spacing-xl);
+  padding: var(--control-padding-block-xl) var(--control-padding-inline-xl);
 }
 
 .bc-control--padding-xs:has(> .bc-icon:only-child) {
-  padding: var(--spacing-xs);
+  padding: var(--control-padding-block-xs);
 }
 
 .bc-control--padding-sm:has(> .bc-icon:only-child) {
-  padding: var(--spacing-sm);
+  padding: var(--control-padding-block-sm);
 }
 
 .bc-control--padding-md:has(> .bc-icon:only-child) {
-  padding: var(--spacing-md);
+  padding: var(--control-padding-block-md);
 }
 
 .bc-control--padding-lg:has(> .bc-icon:only-child) {
-  padding: var(--spacing-lg);
+  padding: var(--control-padding-block-lg);
 }
 
 .bc-control--padding-xl:has(> .bc-icon:only-child) {
-  padding: var(--spacing-xl);
+  padding: var(--control-padding-block-xl);
 }
 
 .bc-control--rounded-none {
@@ -3492,14 +3537,14 @@ a:focus-visible {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 /* Label container */
 .bc-control-input-wrapper__label {
   display: flex;
   align-items: center;
-  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
+  gap: var(--spacing-stack-2xs, var(--spacing-xs));
 }
 
 /* Label text styles */
@@ -3570,7 +3615,7 @@ a:focus-visible {
 /* Divider Component */
 .bc-divider {
   border: 0;
-  border-top: 1px solid var(--border-divider);
+  border-top: var(--border-width-thin) solid var(--border-divider);
   margin: 0;
   height: 0;
   background: transparent;
@@ -3584,7 +3629,7 @@ a:focus-visible {
 .bc-divider--vertical {
   border-top: none;
   border-top-width: 0;
-  border-left: 1px solid var(--border-divider);
+  border-left: var(--border-width-thin) solid var(--border-divider);
   width: auto;
   height: auto;
   align-self: stretch;
@@ -3637,7 +3682,7 @@ a:focus-visible {
 .bc-divider__line {
   flex: 1;
   border: 0;
-  border-top: 1px solid var(--border-default);
+  border-top: var(--border-width-thin) solid var(--border-default);
   height: 0;
   background: transparent;
   margin: 0;
@@ -3649,7 +3694,7 @@ a:focus-visible {
 .bc-divider--vertical .bc-divider__line {
   border-top: none;
   border-top-width: 0;
-  border-left: 1px solid var(--border-divider);
+  border-left: var(--border-width-thin) solid var(--border-divider);
   width: 0;
   flex: 1;
   min-height: 1rem;
@@ -3661,11 +3706,11 @@ a:focus-visible {
   font-weight: var(--font-weight-medium);
   color: var(--text-muted);
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
   white-space: nowrap;
-  line-height: 1;
+  line-height: var(--line-height-none);
 }
 
 /* Label alignment */
@@ -3738,7 +3783,7 @@ a:focus-visible {
 @media (prefers-contrast: high) {
   .bc-divider,
   .bc-divider__line {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -4017,7 +4062,7 @@ a:focus-visible {
   align-items: center;
   justify-content: space-between;
   padding: var(--spacing-md);
-  border-bottom: 1px solid var(--color-base-300);
+  border-bottom: var(--border-width-thin) solid var(--color-base-300);
   background-color: var(--color-base-50);
   flex-shrink: 0;
 }
@@ -4030,7 +4075,7 @@ a:focus-visible {
 
 .bc-drawer__footer {
   padding: var(--spacing-md);
-  border-top: 1px solid var(--color-base-300);
+  border-top: var(--border-width-thin) solid var(--color-base-300);
   background-color: var(--color-base-50);
   flex-shrink: 0;
 }
@@ -4039,16 +4084,16 @@ a:focus-visible {
 .dark .bc-drawer {
   background-color: var(--bg-surface);
   color: var(--text-normal);
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
 }
 
 .dark .bc-drawer__header {
-  border-bottom: 1px solid var(--border-divider);
+  border-bottom: var(--border-width-thin) solid var(--border-divider);
   background-color: var(--bg-elevated);
 }
 
 .dark .bc-drawer__footer {
-  border-top: 1px solid var(--border-divider);
+  border-top: var(--border-width-thin) solid var(--border-divider);
   background-color: var(--bg-elevated);
 }
 
@@ -4071,10 +4116,10 @@ a:focus-visible {
 
 /* Editable Text Component */
 .bc-editable-text {
-  border-bottom: 1px dashed var(--color-gray-300);
+  border-bottom: var(--border-width-thin) dashed var(--color-gray-300);
   display: flex;
   flex-direction: row;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
   align-items: flex-start;
   cursor: pointer;
 }
@@ -4096,7 +4141,7 @@ a:focus-visible {
 /* Input state */
 .bc-editable-text__input {
   outline: none;
-  padding: 0 calc(var(--spacing-base) / 2);
+  padding: 0 var(--spacing-xs);
   background: transparent;
   border: none;
   font: inherit;
@@ -4113,8 +4158,8 @@ a:focus-visible {
 
 /* Draw the focus on the display container similar to other inputs via focus-within */
 .bc-editable-text:focus-within {
-  outline: 2px solid var(--interactive-focus);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--interactive-focus);
+  outline-offset: calc(-1 * var(--outline-width-focus));
   border-radius: var(--radius-sm);
 }
 
@@ -4122,11 +4167,11 @@ a:focus-visible {
 .bc-editable-text__display {
   display: flex;
   flex-direction: row;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  padding: 0 calc(var(--spacing-base) / 2);
+  padding: 0 var(--spacing-xs);
   white-space: nowrap;
   flex-grow: 1;
   overflow: hidden;
@@ -4154,7 +4199,7 @@ a:focus-visible {
   background: transparent;
   border: none;
   cursor: pointer;
-  padding: calc(var(--spacing-base) / 2);
+  padding: var(--spacing-xs);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4258,7 +4303,7 @@ a:focus-visible {
 }
 
 .bc-empty-state--size-lg {
-  padding: var(--spacing-2xl, calc(var(--spacing-base) * 10));
+  padding: var(--spacing-2xl, var(--spacing-2xlh));
   max-width: 500px;
 }
 
@@ -4289,7 +4334,7 @@ a:focus-visible {
 .bc-file-input__drop-zone {
   width: 100%;
   min-height: 120px;
-  border: 2px dashed var(--color-gray-300);
+  border: var(--border-width-medium) dashed var(--color-gray-300);
   border-radius: var(--radius-control, var(--radius-md));
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
@@ -4304,7 +4349,7 @@ a:focus-visible {
 }
 
 .bc-file-input__drop-zone:focus-within {
-  outline: 2px solid var(--color-primary-500);
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: 2px;
 }
 
@@ -4314,11 +4359,11 @@ a:focus-visible {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: calc(var(--spacing-base) * 6);
+  padding: var(--spacing-xl);
   height: 100%;
   min-height: 120px;
   text-align: center;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 .bc-file-input__drop-zone-content--empty {
@@ -4333,7 +4378,7 @@ a:focus-visible {
 .bc-file-input__drop-zone-content--has-files {
   color: var(--color-gray-500);
   min-height: 80px;
-  padding: calc(var(--spacing-base) * 4);
+  padding: var(--spacing-lg);
 }
 
 .bc-file-input__drop-zone-text {
@@ -4349,22 +4394,22 @@ a:focus-visible {
 }
 
 .bc-file-input__file-list {
-  margin-top: calc(var(--spacing-base) * 3);
-  border-top: 1px solid var(--color-gray-200);
-  padding-top: calc(var(--spacing-base) * 3);
+  margin-top: var(--spacing-mdh);
+  border-top: var(--border-width-thin) solid var(--color-gray-200);
+  padding-top: var(--spacing-mdh);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
-  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
+  gap: var(--spacing-stack-md, var(--spacing-mdh));
 }
 
 .bc-file-input__file-item {
   display: flex;
   align-items: center;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
-  padding: calc(var(--spacing-base) * 2);
-  border: 1px solid var(--color-gray-200);
+  gap: var(--spacing-stack-sm, var(--spacing-md));
+  padding: var(--spacing-md);
+  border: var(--border-width-thin) solid var(--color-gray-200);
   border-radius: var(--radius-sm);
   background-color: var(--color-white);
   transition:
@@ -4392,10 +4437,10 @@ a:focus-visible {
 
 /* Thumbnail Styles */
 .bc-file-input__thumbnail-container {
-  min-width: calc(var(--spacing-base) * 12);
-  max-width: calc(var(--spacing-base) * 12);
-  min-height: calc(var(--spacing-base) * 12);
-  max-height: calc(var(--spacing-base) * 12);
+  min-width: var(--spacing-3xl);
+  max-width: var(--spacing-3xl);
+  min-height: var(--spacing-3xl);
+  max-height: var(--spacing-3xl);
   border-radius: var(--radius-sm);
   overflow: hidden;
   background-color: var(--color-gray-100);
@@ -4405,24 +4450,24 @@ a:focus-visible {
 }
 
 .bc-file-input__file-icon .bc-icon {
-  min-width: calc(var(--spacing-base) * 12);
-  max-width: calc(var(--spacing-base) * 12);
-  min-height: calc(var(--spacing-base) * 12);
-  max-height: calc(var(--spacing-base) * 12);
+  min-width: var(--spacing-3xl);
+  max-width: var(--spacing-3xl);
+  min-height: var(--spacing-3xl);
+  max-height: var(--spacing-3xl);
 }
 
 .bc-file-input__compact-value-item .bc-icon {
-  min-width: calc(var(--spacing-base) * 6);
-  max-width: calc(var(--spacing-base) * 6);
-  min-height: calc(var(--spacing-base) * 6);
-  max-height: calc(var(--spacing-base) * 6);
+  min-width: var(--spacing-xl);
+  max-width: var(--spacing-xl);
+  min-height: var(--spacing-xl);
+  max-height: var(--spacing-xl);
 }
 
 .bc-file-input__compact-value-item .bc-file-input__thumbnail-container {
-  min-width: calc(var(--spacing-base) * 6);
-  max-width: calc(var(--spacing-base) * 6);
-  min-height: calc(var(--spacing-base) * 6);
-  max-height: calc(var(--spacing-base) * 6);
+  min-width: var(--spacing-xl);
+  max-width: var(--spacing-xl);
+  min-height: var(--spacing-xl);
+  max-height: var(--spacing-xl);
 }
 
 .bc-file-input__thumbnail {
@@ -4460,8 +4505,8 @@ a:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--spacing-base) * 6);
-  height: calc(var(--spacing-base) * 6);
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
   border: none;
   border-radius: var(--radius-sm);
   background-color: transparent;
@@ -4478,7 +4523,7 @@ a:focus-visible {
 }
 
 .bc-file-input__remove-button:focus {
-  outline: 2px solid var(--color-danger-500);
+  outline: var(--outline-width-focus) solid var(--color-danger-500);
   outline-offset: 2px;
 }
 
@@ -4489,9 +4534,9 @@ a:focus-visible {
 
 .bc-file-input__clear-all-button {
   display: block;
-  margin: calc(var(--spacing-base) * 2) auto 0;
-  padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 3);
-  border: 1px solid var(--color-gray-300);
+  margin: var(--spacing-md) auto 0;
+  padding: var(--spacing-smh) var(--spacing-mdh);
+  border: var(--border-width-thin) solid var(--color-gray-300);
   border-radius: var(--radius-sm);
   background-color: var(--color-white);
   color: var(--color-gray-600);
@@ -4510,7 +4555,7 @@ a:focus-visible {
 }
 
 .bc-file-input__clear-all-button:focus {
-  outline: 2px solid var(--color-danger-500);
+  outline: var(--outline-width-focus) solid var(--color-danger-500);
   outline-offset: 2px;
 }
 
@@ -4555,7 +4600,7 @@ a:focus-visible {
   .bc-file-input__file-item {
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+    gap: var(--spacing-stack-sm, var(--spacing-md));
   }
 
   .bc-file-input__remove-button {
@@ -4596,16 +4641,16 @@ a:focus-visible {
   text-overflow: ellipsis;
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
+  gap: var(--spacing-stack-xs, var(--spacing-sm));
 }
 
 .bc-file-input__compact-value-item {
   background-color: var(--color-gray-100);
   border-radius: var(--radius-sm);
-  padding: calc(var(--spacing-base) / 2) calc(var(--spacing-base) * 2);
+  padding: var(--spacing-xs) var(--spacing-md);
   display: flex;
   align-items: center;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
   flex-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -4615,8 +4660,8 @@ a:focus-visible {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--spacing-base) * 6);
-  height: calc(var(--spacing-base) * 6);
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
   border: none;
   border-radius: var(--radius-sm);
   background-color: transparent;
@@ -4648,8 +4693,8 @@ a:focus-visible {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--spacing-base) * 6);
-  height: calc(var(--spacing-base) * 6);
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
   border-radius: var(--radius-xs);
   overflow: hidden;
   background-color: var(--color-gray-100);
@@ -4669,14 +4714,14 @@ a:focus-visible {
 .bc-file-input__compact-drop-zone {
   width: 100%;
   min-height: 100px;
-  border: 2px dashed var(--color-gray-300);
+  border: var(--border-width-medium) dashed var(--color-gray-300);
   border-radius: var(--radius-control, var(--radius-md));
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   cursor: pointer;
   position: relative;
-  padding: calc(var(--spacing-base) * 3);
+  padding: var(--spacing-mdh);
 }
 
 .bc-file-input__compact-drop-zone:hover {
@@ -4685,7 +4730,7 @@ a:focus-visible {
 }
 
 .bc-file-input__compact-drop-zone:focus-within {
-  outline: 2px solid var(--color-primary-500);
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: 2px;
 }
 
@@ -4695,10 +4740,10 @@ a:focus-visible {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
   color: var(--color-gray-600);
   text-align: center;
-  padding: calc(var(--spacing-base) * 2);
+  padding: var(--spacing-md);
 }
 
 .bc-file-input__compact-placeholder-text {
@@ -4712,15 +4757,15 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   justify-items: center;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
   overflow-y: auto;
 }
 
 .bc-file-input__compact-file-item {
   display: flex;
   align-items: center;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
-  padding: calc(var(--spacing-base) * 1.5);
+  gap: var(--spacing-stack-sm, var(--spacing-md));
+  padding: var(--spacing-smh);
   border-radius: var(--radius-sm);
   background-color: var(--color-gray-50);
   transition: background-color
@@ -4738,17 +4783,17 @@ a:focus-visible {
 }
 
 .bc-file-input__compact-file-icon .bc-icon {
-  min-width: calc(var(--spacing-base) * 8);
-  max-width: calc(var(--spacing-base) * 8);
-  min-height: calc(var(--spacing-base) * 8);
-  max-height: calc(var(--spacing-base) * 8);
+  min-width: var(--spacing-2xl);
+  max-width: var(--spacing-2xl);
+  min-height: var(--spacing-2xl);
+  max-height: var(--spacing-2xl);
 }
 
 .bc-file-input__compact-file-icon .bc-file-input__thumbnail-container {
-  min-width: calc(var(--spacing-base) * 8);
-  max-width: calc(var(--spacing-base) * 8);
-  min-height: calc(var(--spacing-base) * 8);
-  max-height: calc(var(--spacing-base) * 8);
+  min-width: var(--spacing-2xl);
+  max-width: var(--spacing-2xl);
+  min-height: var(--spacing-2xl);
+  max-height: var(--spacing-2xl);
 }
 
 .bc-file-input__compact-file-info {
@@ -4779,8 +4824,8 @@ a:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--spacing-base) * 6);
-  height: calc(var(--spacing-base) * 6);
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
   border: none;
   border-radius: var(--radius-sm);
   background-color: transparent;
@@ -4797,7 +4842,7 @@ a:focus-visible {
 }
 
 .bc-file-input__compact-remove-button:focus {
-  outline: 2px solid var(--color-danger-500);
+  outline: var(--outline-width-focus) solid var(--color-danger-500);
   outline-offset: 2px;
 }
 
@@ -5059,7 +5104,7 @@ a:focus-visible {
 .bc-flyout {
   /* Base flyout styles */
   background-color: var(--color-neutral-50);
-  border: 1px solid var(--color-neutral-200);
+  border: var(--border-width-thin) solid var(--color-neutral-200);
   border-radius: var(--radius-popover, var(--radius-md));
   box-shadow: var(--shadow-popover, var(--shadow-lg));
   padding: var(--spacing-sm);
@@ -5135,19 +5180,19 @@ a:focus-visible {
 }
 
 .bc-group--gap-1 {
-  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
+  gap: var(--spacing-stack-xs, var(--spacing-sm));
 }
 
 .bc-group--gap-2 {
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 .bc-group--gap-4 {
-  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
+  gap: var(--spacing-stack-lg, var(--spacing-lg));
 }
 
 .bc-group--gap-md {
-  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
+  gap: var(--spacing-stack-md, var(--spacing-mdh));
 }
 
 .bc-group--grow {
@@ -5157,7 +5202,7 @@ a:focus-visible {
 /* History Timeline */
 .bc-history-timeline {
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
 }
@@ -5172,7 +5217,7 @@ a:focus-visible {
 
 .bc-history-timeline__filter {
   padding: 4px 12px;
-  border: 1px solid var(--color-base-200);
+  border: var(--border-width-thin) solid var(--color-base-200);
   border-radius: var(--radius-full, 9999px);
   background: transparent;
   font-size: var(--font-size-xs);
@@ -5411,7 +5456,7 @@ a:focus-visible {
   color: var(--color-neutral-500);
   white-space: nowrap;
   user-select: none;
-  line-height: 1;
+  line-height: var(--line-height-none);
   align-self: stretch;
 }
 
@@ -5487,10 +5532,10 @@ a:focus-visible {
 .bc-input-container {
   width: 100%;
   /* Add a transparent border to match button height math */
-  border: 1.5px solid transparent;
+  border: var(--border-width-default) solid transparent;
   border-radius: var(--radius-control, var(--radius-md));
   box-shadow: var(--shadow-xs);
-  line-height: 1;
+  line-height: var(--line-height-none);
   transition: all var(--motion-transition-fast) var(--motion-easing-standard);
   align-items: stretch;
 }
@@ -5503,8 +5548,8 @@ a:focus-visible {
 
 .bc-input-container--default {
   background-color: var(--color-white);
-  outline: 1px solid var(--border-divider);
-  outline-offset: -1px;
+  outline: var(--outline-width-default) solid var(--border-divider);
+  outline-offset: calc(-1 * var(--outline-width-default));
 }
 
 .bc-base-input-container ::placeholder,
@@ -5521,26 +5566,26 @@ a:focus-visible {
 
 .bc-input-container--disabled {
   background-color: var(--color-neutral-200);
-  outline: 2px solid var(--border-divider);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--border-divider);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 /* Focus within state */
 .bc-input-container:focus-within {
   z-index: var(--z-index-navigation);
-  outline: 2px solid var(--interactive-focus);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--interactive-focus);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 /* Error state */
 .bc-input-container--error {
-  outline: 2px solid var(--color-danger-600);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--color-danger-600);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 .bc-input-container--error:focus-within {
-  outline: 2px solid var(--color-danger-600);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--color-danger-600);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 /* Before and after elements */
@@ -5560,7 +5605,7 @@ a:focus-visible {
   align-items: center;
   min-width: 0;
   /* Horizontal padding only; vertical padding comes from size classes */
-  padding-inline: calc(var(--spacing-base) * 4);
+  padding-inline: var(--spacing-lg);
 }
 
 .bc-input-container__input--grow {
@@ -5583,10 +5628,9 @@ a:focus-visible {
 /* Normalize native element heights for consistent input container sizing */
 .bc-input-container input,
 .bc-input-container select {
-  min-height: 19px;
   padding: 0;
-  padding-block: 1.5px;
-  line-height: 1;
+  padding-block: var(--spacing-px);
+  line-height: var(--line-height-none);
 }
 
 /* Password toggle button */
@@ -5662,11 +5706,11 @@ a:focus-visible {
 .dark .bc-input-container--default {
   background-color: var(--bg-surface);
   color: var(--text-normal);
-  outline: 2px solid var(--border-default);
+  outline: var(--outline-width-focus) solid var(--border-default);
 }
 
 .dark .bc-input-container--default:focus-within {
-  outline: 2px solid var(--interactive-focus);
+  outline: var(--outline-width-focus) solid var(--interactive-focus);
   background-color: var(--bg-elevated);
 }
 
@@ -5677,17 +5721,17 @@ a:focus-visible {
 
 .dark .bc-input-container--disabled {
   background-color: var(--bg-subtle);
-  outline: 2px solid var(--border-divider);
+  outline: var(--outline-width-focus) solid var(--border-divider);
   opacity: 0.6;
 }
 
 .dark .bc-input-container--error {
-  outline: 2px solid var(--color-danger-400);
+  outline: var(--outline-width-focus) solid var(--color-danger-400);
   background-color: var(--color-danger-950);
 }
 
 .dark .bc-input-container--error:focus-within {
-  outline: 2px solid var(--color-danger-400);
+  outline: var(--outline-width-focus) solid var(--color-danger-400);
   background-color: var(--color-danger-900);
 }
 
@@ -5718,7 +5762,7 @@ a:focus-visible {
 @media (width >= 40rem) {
   .bc-input-container {
     /* Do not force font-size; sizing classes control this */
-    line-height: 1;
+    line-height: var(--line-height-none);
   }
 }
 
@@ -5726,7 +5770,7 @@ a:focus-visible {
 @media (prefers-contrast: high) {
   .bc-input-container,
   .bc-input {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -5754,7 +5798,7 @@ a:focus-visible {
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
-  gap: var(--spacing-sm, calc(var(--spacing-base) * 4));
+  gap: var(--spacing-sm, var(--spacing-lg));
 }
 
 /* Horizontal with label on right */
@@ -5780,7 +5824,7 @@ a:focus-visible {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 /* Label section container */
@@ -5793,7 +5837,7 @@ a:focus-visible {
 .bc-input-wrapper__label {
   display: flex;
   align-items: center;
-  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
+  gap: var(--spacing-stack-2xs, var(--spacing-xs));
 }
 
 /* Label text styles */
@@ -5874,8 +5918,8 @@ a:focus-visible {
 }
 
 .bc-json-schema-object {
-  border-left: calc(var(--spacing-base) * 2) solid var(--color-base-200);
-  padding-inline-start: calc(var(--spacing-base) * 2);
+  border-left: var(--spacing-md) solid var(--color-base-200);
+  padding-inline-start: var(--spacing-md);
 }
 
 .dark .bc-json-schema-object {
@@ -5887,7 +5931,7 @@ a:focus-visible {
 }
 
 .bc-schema-grid--gap-4 {
-  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
+  gap: var(--spacing-stack-lg, var(--spacing-lg));
 }
 
 .bc-schema-grid--cols-1 {
@@ -6073,7 +6117,7 @@ a:focus-visible {
 
 .bc-object-helpers__row {
   display: grid;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
   grid-template-columns: 2fr 3fr min-content;
 }
 
@@ -6088,7 +6132,7 @@ a:focus-visible {
 }
 
 .bc-object-helpers__remove {
-  padding-top: calc(var(--spacing-base) * 3);
+  padding-top: var(--spacing-mdh);
   flex-shrink: 1;
 }
 
@@ -6112,7 +6156,7 @@ a:focus-visible {
 .bc-json-schema-display__object {
   display: grid;
   grid-template-columns: auto 1fr;
-  column-gap: calc(var(--spacing-base) * 3);
+  column-gap: var(--spacing-mdh);
 }
 
 /* Each field spans both parent columns and inherits their sizing via subgrid */
@@ -6135,7 +6179,7 @@ a:focus-visible {
 .bc-json-schema-display__label-row {
   display: flex;
   align-items: center;
-  gap: calc(var(--spacing-base) * 1);
+  gap: var(--spacing-sm);
   grid-column: 1;
   max-width: 16rem;
   overflow: hidden;
@@ -6172,7 +6216,7 @@ a:focus-visible {
   font-size: var(--font-size-xs);
   color: var(--color-warning-600);
   background-color: var(--color-warning-100);
-  padding: 0.1em calc(var(--spacing-base) * 1);
+  padding: 0.1em var(--spacing-sm);
   border-radius: var(--radius-sm);
   font-weight: var(--font-weight-medium);
 }
@@ -6220,7 +6264,7 @@ a:focus-visible {
 .bc-json-schema-display__value-context {
   font-size: var(--font-size-xs);
   color: var(--color-neutral-400);
-  margin-left: calc(var(--spacing-base) * 1);
+  margin-left: var(--spacing-sm);
 }
 
 .dark .bc-json-schema-display__value-context {
@@ -6250,7 +6294,7 @@ a:focus-visible {
 .bc-json-schema-display__color-display {
   display: inline-flex;
   align-items: center;
-  gap: calc(var(--spacing-base) * 1);
+  gap: var(--spacing-sm);
 }
 
 .bc-json-schema-display__color-swatch {
@@ -6258,7 +6302,7 @@ a:focus-visible {
   width: 1.25rem;
   height: 1.25rem;
   border-radius: var(--radius-sm);
-  border: 1px solid var(--color-neutral-300);
+  border: var(--border-width-thin) solid var(--color-neutral-300);
   vertical-align: middle;
 }
 
@@ -6279,9 +6323,9 @@ a:focus-visible {
   white-space: pre-wrap;
   word-break: break-word;
   background-color: var(--color-neutral-50);
-  padding: calc(var(--spacing-base) * 2);
+  padding: var(--spacing-md);
   border-radius: var(--radius-md);
-  border: 1px solid var(--color-neutral-200);
+  border: var(--border-width-thin) solid var(--color-neutral-200);
   margin: 0;
   overflow-x: auto;
 }
@@ -6296,7 +6340,7 @@ a:focus-visible {
   display: inline-block;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  padding: 0 calc(var(--spacing-base) * 1.5);
+  padding: 0 var(--spacing-smh);
   border-radius: var(--radius-full);
   line-height: 1.6;
 }
@@ -6323,8 +6367,8 @@ a:focus-visible {
 
 /* Object */
 .bc-json-schema-display__object {
-  border-left: calc(var(--spacing-base) * 2) solid var(--color-base-200);
-  padding-inline-start: calc(var(--spacing-base) * 2);
+  border-left: var(--spacing-md) solid var(--color-base-200);
+  padding-inline-start: var(--spacing-md);
 }
 
 .dark .bc-json-schema-display__object {
@@ -6334,8 +6378,8 @@ a:focus-visible {
 /* Extra properties */
 .bc-json-schema-display__extra-property {
   opacity: 0.7;
-  border-left: 2px dashed var(--color-warning-400);
-  padding-inline-start: calc(var(--spacing-base) * 2);
+  border-left: var(--border-width-medium) dashed var(--color-warning-400);
+  padding-inline-start: var(--spacing-md);
 }
 
 .dark .bc-json-schema-display__extra-property {
@@ -6350,7 +6394,7 @@ a:focus-visible {
 
 .bc-json-schema-display__array-item {
   display: flex;
-  gap: calc(var(--spacing-base) * 1.5);
+  gap: var(--spacing-smh);
   align-items: baseline;
 }
 
@@ -6388,11 +6432,11 @@ a:focus-visible {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   color: var(--color-primary-600);
-  padding: 0 calc(var(--spacing-base) * 1);
+  padding: 0 var(--spacing-sm);
   background-color: var(--color-primary-50);
   border-radius: var(--radius-sm);
   display: inline-block;
-  margin-bottom: calc(var(--spacing-base) * 1);
+  margin-bottom: var(--spacing-sm);
 }
 
 .dark .bc-json-schema-display__branch-label {
@@ -6424,13 +6468,13 @@ a:focus-visible {
 .bc-json-schema-display__mismatches {
   display: flex;
   flex-wrap: wrap;
-  gap: calc(var(--spacing-base) * 1);
+  gap: var(--spacing-sm);
 }
 
 .bc-json-schema-display__mismatch {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
-  padding: 0 calc(var(--spacing-base) * 1.5);
+  padding: 0 var(--spacing-smh);
   border-radius: var(--radius-full);
   line-height: 1.6;
 }
@@ -6469,7 +6513,7 @@ a:focus-visible {
   font-size: var(--font-size-xs);
   color: var(--color-danger-600);
   font-style: italic;
-  margin-left: calc(var(--spacing-base) * 1);
+  margin-left: var(--spacing-sm);
 }
 
 .dark .bc-json-schema-display__mismatch--type-mismatch,
@@ -6508,7 +6552,7 @@ a:focus-visible {
 .bc-json-structure-form {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
+  gap: var(--spacing-stack-md, var(--spacing-mdh));
 }
 
 /* =============================================================================
@@ -6516,18 +6560,18 @@ a:focus-visible {
    ============================================================================= */
 
 .bc-json-structure-object {
-  border-left: calc(var(--spacing-base) * 2) solid var(--color-base-200);
-  padding-inline-start: calc(var(--spacing-base) * 2);
+  border-left: var(--spacing-md) solid var(--color-base-200);
+  padding-inline-start: var(--spacing-md);
 }
 
 .bc-json-structure-object-fields {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
+  gap: var(--spacing-stack-md, var(--spacing-mdh));
 }
 
 .bc-json-structure-object--nested {
-  margin-top: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  margin-top: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 /* Additional properties */
@@ -6535,8 +6579,8 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-stack-xs, var(--spacing-base));
-  padding: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
-  border: 1px solid var(--color-base-200);
+  padding: var(--spacing-inline-sm, var(--spacing-md));
+  border: var(--border-width-thin) solid var(--color-base-200);
   border-radius: var(--radius-sm);
   background: var(--color-base-50);
 }
@@ -6545,11 +6589,11 @@ a:focus-visible {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-inline-sm, var(--spacing-md));
 }
 
 .bc-json-structure-additional-property-value {
-  padding-inline-start: calc(var(--spacing-base) * 2);
+  padding-inline-start: var(--spacing-md);
 }
 
 /* =============================================================================
@@ -6561,7 +6605,7 @@ a:focus-visible {
 .bc-json-structure-map {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 .bc-json-structure-array-items,
@@ -6569,7 +6613,7 @@ a:focus-visible {
 .bc-json-structure-map-entries {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 .bc-json-structure-array-item,
@@ -6577,7 +6621,7 @@ a:focus-visible {
 .bc-json-structure-map-entry {
   display: flex;
   align-items: flex-start;
-  gap: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-inline-sm, var(--spacing-md));
 }
 
 .bc-json-structure-array-item-content,
@@ -6602,7 +6646,7 @@ a:focus-visible {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-inline-sm, var(--spacing-md));
   margin-bottom: var(--spacing-stack-xs, var(--spacing-base));
 }
 
@@ -6613,7 +6657,7 @@ a:focus-visible {
 }
 
 .bc-json-structure-map-entry-value {
-  padding-inline-start: calc(var(--spacing-base) * 2);
+  padding-inline-start: var(--spacing-md);
 }
 
 /* Set error indicator */
@@ -6630,7 +6674,7 @@ a:focus-visible {
 .bc-json-structure-tuple {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 .bc-json-structure-tuple-label {
@@ -6648,7 +6692,7 @@ a:focus-visible {
 .bc-json-structure-tuple-elements {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 .bc-json-structure-tuple-element {
@@ -6676,7 +6720,7 @@ a:focus-visible {
 }
 
 .bc-json-structure-tuple-element-control {
-  padding-inline-start: calc(var(--spacing-base) * 2);
+  padding-inline-start: var(--spacing-md);
 }
 
 /* =============================================================================
@@ -6686,15 +6730,15 @@ a:focus-visible {
 .bc-json-structure-choice {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 .bc-json-structure-choice-selector {
-  margin-bottom: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  margin-bottom: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 .bc-json-structure-choice-options {
-  padding-inline-start: calc(var(--spacing-base) * 2);
+  padding-inline-start: var(--spacing-md);
 }
 
 /* =============================================================================
@@ -6706,7 +6750,7 @@ a:focus-visible {
 }
 
 .bc-structure-grid--gap-4 {
-  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
+  gap: var(--spacing-stack-lg, var(--spacing-lg));
 }
 
 .bc-structure-grid--cols-1 {
@@ -6843,7 +6887,7 @@ a:focus-visible {
   font-family: var(--font-family-mono);
   background: var(--color-base-100);
   padding: var(--spacing-inline-xs, calc(var(--spacing-base) * 0.5))
-    var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+    var(--spacing-inline-sm, var(--spacing-md));
   border-radius: var(--radius-sm);
   color: var(--color-base-600);
 }
@@ -6872,8 +6916,8 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-stack-xs, var(--spacing-base));
-  padding: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
-  border: 1px dashed var(--color-base-300);
+  padding: var(--spacing-inline-sm, var(--spacing-md));
+  border: var(--border-width-thin) dashed var(--color-base-300);
   border-radius: var(--radius-md);
   background: var(--color-base-50);
 }
@@ -6888,8 +6932,8 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-stack-xs, var(--spacing-base));
-  padding: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
-  border: 1px solid var(--color-warning-300);
+  padding: var(--spacing-inline-sm, var(--spacing-md));
+  border: var(--border-width-thin) solid var(--color-warning-300);
   border-radius: var(--radius-md);
   background: var(--color-warning-50);
   color: var(--color-warning-700);
@@ -6972,11 +7016,11 @@ a:focus-visible {
   justify-content: center;
   font-family: var(--font-family-mono);
   font-weight: var(--font-weight-medium);
-  line-height: 1;
+  line-height: var(--line-height-none);
   border-radius: var(--radius-xs);
   background-color: var(--bg-surface);
   color: var(--text-muted);
-  border: 1px solid var(--border-subtle);
+  border: var(--border-width-thin) solid var(--border-subtle);
   box-shadow: rgb(229, 229, 229) 0px 1px 0px;
   white-space: nowrap;
   vertical-align: middle;
@@ -6994,13 +7038,13 @@ a:focus-visible {
 
 .bc-kbd--size-sm {
   font-size: var(--font-size-sm);
-  padding: calc(var(--spacing-base) * 0.5) calc(var(--spacing-base) * 1.5);
+  padding: calc(var(--spacing-base) * 0.5) var(--spacing-smh);
   min-width: calc(var(--font-size-sm) + var(--spacing-base) * 2);
 }
 
 .bc-kbd--size-md {
   font-size: var(--font-size-md);
-  padding: calc(var(--spacing-base) * 0.5) calc(var(--spacing-base) * 2);
+  padding: calc(var(--spacing-base) * 0.5) var(--spacing-md);
   min-width: calc(var(--font-size-md) + var(--spacing-base) * 2.5);
 }
 
@@ -7016,7 +7060,7 @@ a:focus-visible {
 /* Accessibility adjustments */
 @media (prefers-contrast: high) {
   .bc-kbd {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -7030,7 +7074,7 @@ a:focus-visible {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
 }
@@ -7069,7 +7113,7 @@ a:focus-visible {
   .bc-lexical-editor-container {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--color-neutral-200);
+    border: var(--border-width-thin) solid var(--color-neutral-200);
     border-radius: var(--radius-control, var(--radius-md));
     background-color: var(--color-neutral-50);
     overflow: hidden;
@@ -7232,7 +7276,8 @@ a:focus-visible {
   .bc-lexical-editor blockquote {
     margin: 1rem 0;
     padding-left: 1rem;
-    border-left: 4px solid var(--color-neutral-300);
+    border-left: calc(2 * var(--border-width-medium)) solid
+      var(--color-neutral-300);
     color: var(--color-neutral-700);
     font-style: italic;
   }
@@ -7270,7 +7315,7 @@ a:focus-visible {
     background-color: var(--color-neutral-100);
     border-radius: var(--radius-md, 0.5rem);
     overflow-x: auto;
-    border: 1px solid var(--color-neutral-200);
+    border: var(--border-width-thin) solid var(--color-neutral-200);
   }
 
   .bc-lexical-editor pre code {
@@ -7295,7 +7340,7 @@ a:focus-visible {
   .bc-lexical-editor hr {
     margin: 1.5rem 0;
     border: none;
-    border-top: 2px solid var(--color-neutral-200);
+    border-top: var(--border-width-medium) solid var(--color-neutral-200);
   }
 
   .bc-lexical-editor strong,
@@ -7349,7 +7394,7 @@ a:focus-visible {
     top: 0.35em;
     width: 1em;
     height: 1em;
-    border: 2px solid var(--color-neutral-400);
+    border: var(--border-width-medium) solid var(--color-neutral-400);
     border-radius: var(--radius-xs, 0.25rem);
     cursor: pointer;
   }
@@ -7366,8 +7411,8 @@ a:focus-visible {
     top: 0.45em;
     width: 0.5em;
     height: 0.25em;
-    border-left: 2px solid white;
-    border-bottom: 2px solid white;
+    border-left: var(--border-width-medium) solid white;
+    border-bottom: var(--border-width-medium) solid white;
     transform: rotate(-45deg);
   }
 
@@ -7506,7 +7551,7 @@ a:focus-visible {
 
   @media (prefers-contrast: high) {
     .bc-lexical-editor-container {
-      border-width: 2px;
+      border-width: var(--border-width-medium);
     }
 
     .bc-lexical-editor-container:focus-within {
@@ -7524,7 +7569,7 @@ a:focus-visible {
 
   /* Toolbar positioned at top of editor container */
   .bc-lexical-toolbar {
-    border-bottom: 1px solid var(--color-neutral-200);
+    border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
     border-radius: 0;
     border: none;
     background-color: var(--color-neutral-50);
@@ -7538,7 +7583,7 @@ a:focus-visible {
 
   /* When toolbar is inside the editor container, add bottom border */
   .bc-lexical-editor-container > .bc-lexical-toolbar {
-    border-bottom: 1px solid var(--color-neutral-200);
+    border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
   }
 
   .dark .bc-lexical-editor-container > .bc-lexical-toolbar {
@@ -7548,7 +7593,7 @@ a:focus-visible {
   /* Bottom position variant */
   .bc-lexical-toolbar--bottom {
     border-bottom: none;
-    border-top: 1px solid var(--color-neutral-200);
+    border-top: var(--border-width-thin) solid var(--color-neutral-200);
   }
 
   .dark .bc-lexical-toolbar--bottom {
@@ -7564,7 +7609,7 @@ a:focus-visible {
   .bc-lexical-toolbar-select {
     height: 28px;
     padding: 0 var(--spacing-xs);
-    border: 1px solid var(--color-neutral-300);
+    border: var(--border-width-thin) solid var(--color-neutral-300);
     border-radius: var(--radius-sm);
     background-color: var(--bg-surface);
     color: var(--color-neutral-900);
@@ -7613,7 +7658,7 @@ a:focus-visible {
     font-size: 0.875rem;
     font-weight: 700;
     pointer-events: none;
-    line-height: 1;
+    line-height: var(--line-height-none);
   }
 
   .bc-lexical-toolbar-color-icon--highlight {
@@ -7645,7 +7690,7 @@ a:focus-visible {
     padding: var(--spacing-xs);
     border-radius: var(--radius-md);
     background-color: var(--color-white);
-    border: 1px solid var(--color-neutral-200);
+    border: var(--border-width-thin) solid var(--color-neutral-200);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
     z-index: 1000;
     animation: bc-floating-toolbar-enter 0.15s ease-out;
@@ -7677,7 +7722,7 @@ a:focus-visible {
     overflow-y: auto;
     border-radius: var(--radius-md);
     background-color: var(--color-white);
-    border: 1px solid var(--color-neutral-200);
+    border: var(--border-width-thin) solid var(--color-neutral-200);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
     padding: var(--spacing-xs);
     z-index: 1000;
@@ -7797,7 +7842,7 @@ a:focus-visible {
     justify-content: center;
     width: 24px;
     height: 24px;
-    border: 1px solid var(--color-neutral-200);
+    border: var(--border-width-thin) solid var(--color-neutral-200);
     border-radius: var(--radius-sm);
     background-color: var(--color-white);
     color: var(--color-neutral-400);
@@ -7844,12 +7889,12 @@ a:focus-visible {
   }
 
   .bc-lexical-table-row {
-    border-bottom: 1px solid var(--color-neutral-200);
+    border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
   }
 
   .bc-lexical-table-cell,
   .bc-lexical-table-cell-header {
-    border: 1px solid var(--color-neutral-200);
+    border: var(--border-width-thin) solid var(--color-neutral-200);
     padding: 0.5rem 0.75rem;
     position: relative;
     vertical-align: top;
@@ -7865,8 +7910,8 @@ a:focus-visible {
   /* Selected cell highlight */
   .bc-lexical-table-cell--selected {
     background-color: var(--color-primary-50);
-    outline: 2px solid var(--color-primary-500);
-    outline-offset: -2px;
+    outline: var(--outline-width-focus) solid var(--color-primary-500);
+    outline-offset: calc(-1 * var(--outline-width-focus));
   }
 
   /* Table context menu */
@@ -7948,7 +7993,7 @@ a:focus-visible {
   @media (prefers-contrast: high) {
     .bc-lexical-table-cell,
     .bc-lexical-table-cell-header {
-      border-width: 2px;
+      border-width: var(--border-width-medium);
     }
 
     .bc-lexical-table-cell--selected {
@@ -7966,7 +8011,7 @@ a:focus-visible {
     margin: 1rem 0;
     padding: 1rem;
     background-color: var(--color-neutral-50);
-    border: 1px solid var(--color-neutral-200);
+    border: var(--border-width-thin) solid var(--color-neutral-200);
     border-radius: var(--radius-md);
     overflow-x: auto;
     font-family:
@@ -8179,7 +8224,7 @@ a:focus-visible {
 
   @media (prefers-contrast: high) {
     .bc-lexical-code-block {
-      border-width: 2px;
+      border-width: var(--border-width-medium);
     }
   }
 }
@@ -8193,13 +8238,13 @@ a:focus-visible {
 .bc-list-item-controls--aside {
   flex-direction: row;
   align-items: center;
-  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
+  gap: var(--spacing-stack-xs, var(--spacing-sm));
 }
 
 /* Below layout: column, controls under content */
 .bc-list-item-controls--below {
   flex-direction: column;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 /* Content area */
@@ -8226,7 +8271,7 @@ a:focus-visible {
 /* Move buttons group */
 .bc-list-item-controls__move {
   display: flex;
-  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
+  gap: var(--spacing-stack-xs, var(--spacing-sm));
 }
 
 .bc-list-item-controls--aside .bc-list-item-controls__move {
@@ -8264,7 +8309,7 @@ a:focus-visible {
 }
 
 .bc-link:focus-visible {
-  outline: 2px solid currentColor;
+  outline: var(--outline-width-focus) solid currentColor;
   outline-offset: 2px;
   border-radius: var(--radius-xs);
 }
@@ -8311,7 +8356,7 @@ a:focus-visible {
 
   .bc-link--plain {
     text-decoration: none;
-    border-bottom: 2px solid currentColor;
+    border-bottom: var(--border-width-medium) solid currentColor;
   }
 
   .bc-link--hover {
@@ -8334,16 +8379,16 @@ a:focus-visible {
 /* Menu Component */
 .bc-menu {
   background-color: var(--color-white);
-  border: 1px solid var(--color-base-200);
+  border: var(--border-width-thin) solid var(--color-base-200);
   border-radius: var(--radius-popover, var(--radius-md));
   box-shadow: var(--shadow-popover, var(--shadow-lg));
   padding: var(--spacing-xs) 0;
   z-index: var(--z-index-popover);
-  min-width: 12rem;
+  min-width: var(--overlay-min-width);
   max-height: 20rem;
   overflow-y: auto;
   outline: none;
-  font-family: var(--default-ui-font-family, inherit);
+  font-family: var(--font-family-default-ui, inherit);
 }
 
 /* Dark mode styles */
@@ -8362,7 +8407,7 @@ a:focus-visible {
   display: flex;
   align-items: center;
   gap: var(--spacing-stack-md, var(--spacing-md));
-  padding: calc(var(--spacing-base) * 1.75) calc(var(--spacing-base) * 3);
+  padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
   border-radius: 0;
   cursor: pointer;
   transition: background-color
@@ -8454,7 +8499,8 @@ a:focus-visible {
 /* Menu Separator Component */
 .bc-menu-separator {
   margin: var(--spacing-xs) var(--spacing-sm);
-  border-top: 1px solid var(--border-divider, var(--color-base-200));
+  border-top: var(--border-width-thin) solid
+    var(--border-divider, var(--color-base-200));
   position: relative;
 }
 
@@ -8481,24 +8527,24 @@ a:focus-visible {
 
 /* Focus styles for accessibility */
 .bc-menu-item:focus-visible {
-  outline: 2px solid var(--interactive-focus);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--interactive-focus);
+  outline-offset: calc(-1 * var(--outline-width-focus));
   border-radius: var(--radius-sm);
 }
 
 /* High contrast mode support */
 @media (prefers-contrast: high) {
   .bc-menu {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 
   .bc-menu-item--focused {
-    outline: 2px solid currentColor;
-    outline-offset: -2px;
+    outline: var(--outline-width-focus) solid currentColor;
+    outline-offset: calc(-1 * var(--outline-width-focus));
   }
 
   .bc-menu-separator {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -8516,7 +8562,7 @@ a:focus-visible {
 }
 
 .bc-menu--size-sm .bc-menu-item {
-  padding: var(--spacing-xs) calc(var(--spacing-base) * 2);
+  padding: var(--spacing-xs) var(--spacing-md);
   font-size: var(--font-size-xs);
 }
 
@@ -8526,7 +8572,7 @@ a:focus-visible {
 }
 
 .bc-menu--size-lg .bc-menu-item {
-  padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3.5);
+  padding: var(--spacing-md) calc(var(--spacing-base) * 3.5);
   font-size: var(--font-size-md);
 }
 
@@ -8587,7 +8633,7 @@ a:focus-visible {
 @media (hover: none) and (pointer: coarse) {
   .bc-menu-item {
     min-height: 44px; /* Minimum touch target */
-    padding: calc(var(--spacing-base) * 1.75) calc(var(--spacing-base) * 3);
+    padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
   }
 
   .bc-menu-item:hover {
@@ -8630,7 +8676,7 @@ a:focus-visible {
   border-radius: var(--radius-overlay, var(--radius-lg));
   box-shadow: var(--shadow-overlay, var(--shadow-xl));
   background-color: var(--color-base-100);
-  border: 3px solid var(--color-base-300);
+  border: var(--border-width-thick) solid var(--color-base-300);
   overflow: hidden;
   transition: all var(--motion-transition-overlay) var(--motion-easing-emphasis);
 }
@@ -8664,7 +8710,7 @@ a:focus-visible {
 
 /* Modal positioning - Top */
 .bc-modal--position-top.bc-modal--container-body {
-  top: calc(var(--spacing-base) * 8);
+  top: var(--spacing-2xl);
   left: 50%;
   transform: translateX(-50%);
 }
@@ -8677,7 +8723,7 @@ a:focus-visible {
 
 /* Modal positioning - Bottom */
 .bc-modal--position-bottom.bc-modal--container-body {
-  bottom: calc(var(--spacing-base) * 8);
+  bottom: var(--spacing-2xl);
   left: 50%;
   transform: translateX(-50%);
 }
@@ -8691,7 +8737,7 @@ a:focus-visible {
 /* Modal positioning - Left */
 .bc-modal--position-left.bc-modal--container-body {
   top: 50%;
-  left: calc(var(--spacing-base) * 8);
+  left: var(--spacing-2xl);
   transform: translateY(-50%);
 }
 
@@ -8704,7 +8750,7 @@ a:focus-visible {
 /* Modal positioning - Right */
 .bc-modal--position-right.bc-modal--container-body {
   top: 50%;
-  right: calc(var(--spacing-base) * 8);
+  right: var(--spacing-2xl);
   transform: translateY(-50%);
 }
 
@@ -8716,8 +8762,8 @@ a:focus-visible {
 
 /* Modal positioning - Top Left */
 .bc-modal--position-top-start.bc-modal--container-body {
-  top: calc(var(--spacing-base) * 8);
-  left: calc(var(--spacing-base) * 8);
+  top: var(--spacing-2xl);
+  left: var(--spacing-2xl);
 }
 
 .bc-modal--position-top-start.bc-modal--container-element {
@@ -8727,8 +8773,8 @@ a:focus-visible {
 
 /* Modal positioning - Top Right */
 .bc-modal--position-top-end.bc-modal--container-body {
-  top: calc(var(--spacing-base) * 8);
-  right: calc(var(--spacing-base) * 8);
+  top: var(--spacing-2xl);
+  right: var(--spacing-2xl);
 }
 
 .bc-modal--position-top-end.bc-modal--container-element {
@@ -8738,8 +8784,8 @@ a:focus-visible {
 
 /* Modal positioning - Bottom Left */
 .bc-modal--position-bottom-start.bc-modal--container-body {
-  bottom: calc(var(--spacing-base) * 8);
-  left: calc(var(--spacing-base) * 8);
+  bottom: var(--spacing-2xl);
+  left: var(--spacing-2xl);
 }
 
 .bc-modal--position-bottom-start.bc-modal--container-element {
@@ -8749,8 +8795,8 @@ a:focus-visible {
 
 /* Modal positioning - Bottom Right */
 .bc-modal--position-bottom-end.bc-modal--container-body {
-  bottom: calc(var(--spacing-base) * 8);
-  right: calc(var(--spacing-base) * 8);
+  bottom: var(--spacing-2xl);
+  right: var(--spacing-2xl);
 }
 
 .bc-modal--position-bottom-end.bc-modal--container-element {
@@ -8761,7 +8807,7 @@ a:focus-visible {
 /* Direction-aware modal positioning - Inline Start */
 .bc-modal--position-inline-start.bc-modal--container-body {
   top: 50%;
-  inset-inline-start: calc(var(--spacing-base) * 8);
+  inset-inline-start: var(--spacing-2xl);
   transform: translateY(-50%);
 }
 
@@ -8774,7 +8820,7 @@ a:focus-visible {
 /* Direction-aware modal positioning - Inline End */
 .bc-modal--position-inline-end.bc-modal--container-body {
   top: 50%;
-  inset-inline-end: calc(var(--spacing-base) * 8);
+  inset-inline-end: var(--spacing-2xl);
   transform: translateY(-50%);
 }
 
@@ -8786,8 +8832,8 @@ a:focus-visible {
 
 /* Direction-aware modal positioning - Top Inline Start */
 .bc-modal--position-top-inline-start.bc-modal--container-body {
-  top: calc(var(--spacing-base) * 8);
-  inset-inline-start: calc(var(--spacing-base) * 8);
+  top: var(--spacing-2xl);
+  inset-inline-start: var(--spacing-2xl);
 }
 
 .bc-modal--position-top-inline-start.bc-modal--container-element {
@@ -8797,8 +8843,8 @@ a:focus-visible {
 
 /* Direction-aware modal positioning - Top Inline End */
 .bc-modal--position-top-inline-end.bc-modal--container-body {
-  top: calc(var(--spacing-base) * 8);
-  inset-inline-end: calc(var(--spacing-base) * 8);
+  top: var(--spacing-2xl);
+  inset-inline-end: var(--spacing-2xl);
 }
 
 .bc-modal--position-top-inline-end.bc-modal--container-element {
@@ -8808,8 +8854,8 @@ a:focus-visible {
 
 /* Direction-aware modal positioning - Bottom Inline Start */
 .bc-modal--position-bottom-inline-start.bc-modal--container-body {
-  bottom: calc(var(--spacing-base) * 8);
-  inset-inline-start: calc(var(--spacing-base) * 8);
+  bottom: var(--spacing-2xl);
+  inset-inline-start: var(--spacing-2xl);
 }
 
 .bc-modal--position-bottom-inline-start.bc-modal--container-element {
@@ -8819,8 +8865,8 @@ a:focus-visible {
 
 /* Direction-aware modal positioning - Bottom Inline End */
 .bc-modal--position-bottom-inline-end.bc-modal--container-body {
-  bottom: calc(var(--spacing-base) * 8);
-  inset-inline-end: calc(var(--spacing-base) * 8);
+  bottom: var(--spacing-2xl);
+  inset-inline-end: var(--spacing-2xl);
 }
 
 .bc-modal--position-bottom-inline-end.bc-modal--container-element {
@@ -8830,19 +8876,19 @@ a:focus-visible {
 
 /* Modal sizes */
 .bc-modal--size-sm {
-  width: min(400px, 90vw);
+  width: var(--overlay-width-sm);
 }
 
 .bc-modal--size-md {
-  width: min(600px, 90vw);
+  width: var(--overlay-width-md);
 }
 
 .bc-modal--size-lg {
-  width: min(800px, 90vw);
+  width: var(--overlay-width-lg);
 }
 
 .bc-modal--size-xl {
-  width: min(1000px, 90vw);
+  width: var(--overlay-width-xl);
 }
 
 /* Modal content container */
@@ -8859,7 +8905,7 @@ a:focus-visible {
   align-items: center;
   justify-content: space-between;
   padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
-  border-bottom: 1px solid var(--color-base-300);
+  border-bottom: var(--border-width-thin) solid var(--color-base-300);
   flex-shrink: 0;
   background-color: var(--color-base-100);
 }
@@ -8879,7 +8925,7 @@ a:focus-visible {
   display: flex;
   gap: var(--spacing-stack-md);
   padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
-  border-top: 1px solid var(--color-base-300);
+  border-top: var(--border-width-thin) solid var(--color-base-300);
   flex-shrink: 0;
   background-color: var(--color-base-100);
   align-items: center;
@@ -8902,7 +8948,8 @@ a:focus-visible {
 .bc-overlay[data-status='start-opening'] .bc-modal--position-top,
 .bc-overlay[data-status='closing'] .bc-modal--position-top {
   opacity: 0;
-  transform: translateX(-50%) translateY(-20px) scale(0.95);
+  transform: translateX(-50%) translateY(calc(-1 * var(--spacing-lgh)))
+    scale(0.95);
 }
 
 .bc-overlay[data-status='opened'] .bc-modal--position-top,
@@ -8915,7 +8962,7 @@ a:focus-visible {
 .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom,
 .bc-overlay[data-status='closing'] .bc-modal--position-bottom {
   opacity: 0;
-  transform: translateX(-50%) translateY(20px) scale(0.95);
+  transform: translateX(-50%) translateY(var(--spacing-lgh)) scale(0.95);
 }
 
 .bc-overlay[data-status='opened'] .bc-modal--position-bottom,
@@ -8928,7 +8975,8 @@ a:focus-visible {
 .bc-overlay[data-status='start-opening'] .bc-modal--position-left,
 .bc-overlay[data-status='closing'] .bc-modal--position-left {
   opacity: 0;
-  transform: translateY(-50%) translateX(-20px) scale(0.95);
+  transform: translateY(-50%) translateX(calc(-1 * var(--spacing-lgh)))
+    scale(0.95);
 }
 
 .bc-overlay[data-status='opened'] .bc-modal--position-left,
@@ -8941,7 +8989,7 @@ a:focus-visible {
 .bc-overlay[data-status='start-opening'] .bc-modal--position-right,
 .bc-overlay[data-status='closing'] .bc-modal--position-right {
   opacity: 0;
-  transform: translateY(-50%) translateX(20px) scale(0.95);
+  transform: translateY(-50%) translateX(var(--spacing-lgh)) scale(0.95);
 }
 
 .bc-overlay[data-status='opened'] .bc-modal--position-right,
@@ -8979,7 +9027,8 @@ a:focus-visible {
 .bc-overlay[data-status='start-opening'] .bc-modal--position-inline-start,
 .bc-overlay[data-status='closing'] .bc-modal--position-inline-start {
   opacity: 0;
-  transform: translateY(-50%) translateX(-20px) scale(0.95);
+  transform: translateY(-50%) translateX(calc(-1 * var(--spacing-lgh)))
+    scale(0.95);
 }
 
 .bc-overlay[data-status='opened'] .bc-modal--position-inline-start,
@@ -8992,7 +9041,7 @@ a:focus-visible {
 .bc-overlay[data-status='start-opening'] .bc-modal--position-inline-end,
 .bc-overlay[data-status='closing'] .bc-modal--position-inline-end {
   opacity: 0;
-  transform: translateY(-50%) translateX(20px) scale(0.95);
+  transform: translateY(-50%) translateX(var(--spacing-lgh)) scale(0.95);
 }
 
 .bc-overlay[data-status='opened'] .bc-modal--position-inline-end,
@@ -9053,12 +9102,12 @@ a:focus-visible {
 /* Dark mode styles */
 .dark .bc-modal {
   background-color: var(--bg-surface);
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
   color: var(--text-normal);
 }
 
 .dark .bc-modal__header {
-  border-bottom: 1px solid var(--border-divider);
+  border-bottom: var(--border-width-thin) solid var(--border-divider);
   background-color: var(--bg-elevated);
 }
 
@@ -9068,7 +9117,7 @@ a:focus-visible {
 }
 
 .dark .bc-modal__footer {
-  border-top: 1px solid var(--border-divider);
+  border-top: var(--border-width-thin) solid var(--border-divider);
   background-color: var(--bg-elevated);
 }
 
@@ -9086,22 +9135,22 @@ a:focus-visible {
 }
 
 .dark .bc-modal--confirm .bc-modal__footer {
-  border-top: 1px solid var(--color-base-700);
+  border-top: var(--border-width-thin) solid var(--color-base-700);
   background: var(--color-base-800);
 }
 
 /* High contrast mode support */
 @media (prefers-contrast: high) {
   .bc-modal {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 
   .bc-modal__header {
-    border-bottom-width: 2px;
+    border-bottom-width: var(--border-width-medium);
   }
 
   .bc-modal__footer {
-    border-top-width: 2px;
+    border-top-width: var(--border-width-medium);
   }
 }
 
@@ -9189,8 +9238,7 @@ a:focus-visible {
   display: flex;
   align-items: center;
   gap: calc(var(--spacing-base) * 2.5);
-  padding: calc(var(--spacing-base) * 5) calc(var(--spacing-base) * 6)
-    calc(var(--spacing-base) * 2.5);
+  padding: var(--spacing-lgh) var(--spacing-xl) calc(var(--spacing-base) * 2.5);
   border-bottom: none;
 }
 
@@ -9205,14 +9253,14 @@ a:focus-visible {
 }
 
 .bc-modal__confirm-body {
-  padding: 0 calc(var(--spacing-base) * 6) calc(var(--spacing-base) * 5);
+  padding: 0 var(--spacing-xl) var(--spacing-lgh);
   font-size: var(--font-size-sm);
   color: var(--color-base-600);
   line-height: var(--line-height-normal);
 }
 
 .bc-modal__confirm-consequences {
-  padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);
+  padding: var(--spacing-md) var(--spacing-mdh);
   border-radius: var(--radius-md);
   background: var(--color-base-50);
   font-size: var(--font-size-xs);
@@ -9220,12 +9268,12 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
-  margin-top: calc(var(--spacing-base) * 3);
+  margin-top: var(--spacing-mdh);
 }
 
 .bc-modal__confirm-consequences li {
   display: flex;
-  gap: calc(var(--spacing-base) * 1.5);
+  gap: var(--spacing-smh);
   list-style: none;
 }
 
@@ -9235,11 +9283,11 @@ a:focus-visible {
 }
 
 .bc-modal--confirm .bc-modal__footer {
-  padding: calc(var(--spacing-base) * 3) calc(var(--spacing-base) * 6);
-  border-top: 1px solid var(--color-base-200);
+  padding: var(--spacing-mdh) var(--spacing-xl);
+  border-top: var(--border-width-thin) solid var(--color-base-200);
   display: flex;
   justify-content: flex-end;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-md);
   background: var(--color-base-50);
 }
 
@@ -9345,10 +9393,10 @@ a:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
-  line-height: 1;
+  line-height: var(--line-height-none);
   border-radius: var(--radius-xs);
-  outline: 1px solid var(--color-gray-300);
-  outline-offset: -1px;
+  outline: var(--outline-width-default) solid var(--color-gray-300);
+  outline-offset: calc(-1 * var(--outline-width-default));
   cursor: pointer;
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
@@ -9431,12 +9479,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
 .bc-popover {
   background: var(--color-white);
-  border: 1px solid var(--color-base-200);
-  border-radius: var(--radius-md, 5px);
-  box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
-  min-width: 200px;
-  max-width: 400px;
-  padding: var(--spacing-md, 12px);
+  border: var(--border-width-thin) solid var(--color-base-200);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  min-width: var(--overlay-min-width);
+  max-width: var(--overlay-width-sm);
+  padding: var(--spacing-md);
   color: var(--color-base-700);
 }
 
@@ -9595,32 +9643,32 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .bc-panel--side-all {
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
 }
 
 .bc-panel--side-top {
-  border-top: 1px solid var(--border-default);
+  border-top: var(--border-width-thin) solid var(--border-default);
 }
 
 .bc-panel--side-bottom {
-  border-bottom: 1px solid var(--border-default);
+  border-bottom: var(--border-width-thin) solid var(--border-default);
 }
 
 .bc-panel--side-left {
-  border-left: 1px solid var(--border-default);
+  border-left: var(--border-width-thin) solid var(--border-default);
 }
 
 .bc-panel--side-right {
-  border-right: 1px solid var(--border-default);
+  border-right: var(--border-width-thin) solid var(--border-default);
 }
 
 /* Direction-aware panel borders */
 .bc-panel--side-inline-start {
-  border-inline-start: 1px solid var(--border-default);
+  border-inline-start: var(--border-width-thin) solid var(--border-default);
 }
 
 .bc-panel--side-inline-end {
-  border-inline-end: 1px solid var(--border-default);
+  border-inline-end: var(--border-width-thin) solid var(--border-default);
 }
 
 .bc-panel--shadow-sm {
@@ -9641,7 +9689,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   align-items: center;
   gap: var(--spacing-xs);
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
 }
@@ -9657,11 +9705,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: calc(var(--spacing-base) * 8);
-  height: calc(var(--spacing-base) * 8);
+  min-width: var(--spacing-2xl);
+  height: var(--spacing-2xl);
   padding: 0;
   cursor: pointer;
-  border: 1px solid transparent;
+  border: var(--border-width-thin) solid transparent;
   border-radius: var(--radius-control-sm, var(--radius-sm));
   background: transparent;
   color: var(--color-base-700);
@@ -9678,7 +9726,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .bc-pagination__item:focus-visible {
-  outline: 2px solid var(--color-primary-500);
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: 2px;
   z-index: 1;
 }
@@ -9713,8 +9761,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: calc(var(--spacing-base) * 8);
-  height: calc(var(--spacing-base) * 8);
+  min-width: var(--spacing-2xl);
+  height: var(--spacing-2xl);
   color: var(--color-base-500);
   font-size: var(--font-size-md);
   user-select: none;
@@ -9723,8 +9771,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* Size Variants */
 .bc-pagination--size-xs .bc-pagination__item,
 .bc-pagination--size-xs .bc-pagination__dots {
-  min-width: calc(var(--spacing-base) * 6);
-  height: calc(var(--spacing-base) * 6);
+  min-width: var(--spacing-xl);
+  height: var(--spacing-xl);
   font-size: var(--font-size-xs);
 }
 
@@ -9737,8 +9785,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
 .bc-pagination--size-md .bc-pagination__item,
 .bc-pagination--size-md .bc-pagination__dots {
-  min-width: calc(var(--spacing-base) * 8);
-  height: calc(var(--spacing-base) * 8);
+  min-width: var(--spacing-2xl);
+  height: var(--spacing-2xl);
   font-size: var(--font-size-md);
 }
 
@@ -9751,8 +9799,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
 .bc-pagination--size-xl .bc-pagination__item,
 .bc-pagination--size-xl .bc-pagination__dots {
-  min-width: calc(var(--spacing-base) * 10);
-  height: calc(var(--spacing-base) * 10);
+  min-width: var(--spacing-2xlh);
+  height: var(--spacing-2xlh);
   font-size: var(--font-size-xl);
 }
 
@@ -9795,7 +9843,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* High Contrast Mode Support */
 @media (prefers-contrast: high) {
   .bc-pagination__item {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 
   .bc-pagination__item--active {
@@ -10013,7 +10061,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 @media (prefers-contrast: high) {
   .bc-password-strength__bar,
   .bc-password-strength-bar {
-    border: 1px solid var(--border-default);
+    border: var(--border-width-thin) solid var(--border-default);
   }
 
   .dark .bc-password-strength__bar,
@@ -10084,7 +10132,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   line-height: 1.4;
   pointer-events: none;
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
 }
@@ -10115,7 +10163,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 .bc-progress-bar-wrapper {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--spacing-base) * 1);
+  gap: var(--spacing-sm);
   width: 100%;
 }
 
@@ -10155,11 +10203,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .bc-progress-bar--size-md {
-  height: calc(var(--spacing-base) * 2);
+  height: var(--spacing-md);
 }
 
 .bc-progress-bar--size-lg {
-  height: calc(var(--spacing-base) * 3);
+  height: var(--spacing-mdh);
 }
 
 /* Indeterminate state - animated sliding bar */
@@ -10185,13 +10233,13 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* Label text */
 .bc-progress-bar__label {
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
   font-size: var(--font-size-sm);
   color: var(--text-muted);
   text-align: right;
-  line-height: 1;
+  line-height: var(--line-height-none);
 }
 
 /* Dark mode styles */
@@ -10220,13 +10268,13 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* High contrast mode: add borders for better visibility */
 @media (prefers-contrast: high) {
   .bc-progress-bar__track {
-    outline: 1px solid currentColor;
-    outline-offset: -1px;
+    outline: var(--outline-width-default) solid currentColor;
+    outline-offset: calc(-1 * var(--outline-width-default));
   }
 
   .bc-progress-bar__fill {
-    outline: 1px solid var(--progress-fill);
-    outline-offset: -1px;
+    outline: var(--outline-width-default) solid var(--progress-fill);
+    outline-offset: calc(-1 * var(--outline-width-default));
   }
 }
 
@@ -10362,7 +10410,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   border-radius: var(--radius-pill, var(--radius-full));
   box-shadow: var(--shadow-surface, var(--shadow-sm));
   position: relative;
-  border: 1px solid var(--color-base-300);
+  border: var(--border-width-thin) solid var(--color-base-300);
   padding: var(--spacing-xs);
   display: inline-block;
 }
@@ -10406,7 +10454,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   z-index: 2;
   border-radius: var(--radius-pill, var(--radius-full));
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
 }
@@ -10465,7 +10513,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* Disabled state */
 .bc-segmented-input--disabled {
   background-color: var(--color-base-300);
-  border: 1px solid var(--color-base-300);
+  border: var(--border-width-thin) solid var(--color-base-300);
   cursor: not-allowed;
 }
 
@@ -10487,7 +10535,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* Dark mode styles */
 .dark .bc-segmented-input {
   background-color: var(--bg-subtle);
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
 }
 
 .dark .bc-segmented-input__indicator {
@@ -10528,7 +10576,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* Disabled state (dark) */
 .dark .bc-segmented-input--disabled {
   background-color: var(--bg-background);
-  border: 1px solid var(--border-divider);
+  border: var(--border-width-thin) solid var(--border-divider);
   opacity: 0.5;
 }
 
@@ -10566,13 +10614,13 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-  padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 2);
+  padding: var(--spacing-md) var(--spacing-md);
 }
 
 .bc-sidebar-group__header {
@@ -10600,8 +10648,8 @@ span.bc-sidebar-link {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--spacing-base) * 4);
-  height: calc(var(--spacing-base) * 4);
+  width: var(--spacing-lg);
+  height: var(--spacing-lg);
   color: var(--text-muted);
 }
 
@@ -10609,9 +10657,9 @@ span.bc-sidebar-link {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--spacing-base) * 6);
-  height: calc(var(--spacing-base) * 6);
-  border: 1px solid var(--border-default);
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
+  border: var(--border-width-thin) solid var(--border-default);
   border-radius: var(--radius-control, var(--radius-md));
   cursor: pointer;
   padding: var(--spacing-sm);
@@ -10632,9 +10680,9 @@ span.bc-sidebar-link {
 }
 
 .bc-sidebar-group--rail {
-  padding-inline-start: calc(var(--spacing-base) * 2);
+  padding-inline-start: var(--spacing-md);
   margin-left: 1px;
-  border-left: 1px solid var(--border-default);
+  border-left: var(--border-width-thin) solid var(--border-default);
 }
 
 .bc-sidebar-group-collapsible-indicator {
@@ -10683,7 +10731,7 @@ span.bc-sidebar-link {
 
 .bc-sidebar--dark-bg .bc-sidebar-link--action {
   color: var(--text-normal);
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
 }
 
 .bc-sidebar--dark-bg .bc-sidebar-link--action:hover {
@@ -10692,7 +10740,7 @@ span.bc-sidebar-link {
 }
 
 .bc-sidebar--dark-bg .bc-sidebar-group--rail {
-  border-inline-start: 1px solid var(--border-default);
+  border-inline-start: var(--border-width-thin) solid var(--border-default);
 }
 
 /* Dark background mode in dark theme - inverted back to light colors */
@@ -10702,8 +10750,8 @@ span.bc-sidebar-link {
 
 .bc-sidebar-separator {
   border: none;
-  border-top: 1px solid var(--border-default);
-  margin: calc(var(--spacing-base) * 2) 0;
+  border-top: var(--border-width-thin) solid var(--border-default);
+  margin: var(--spacing-md) 0;
 }
 
 /* Sink Component */
@@ -10711,7 +10759,7 @@ span.bc-sidebar-link {
   display: flex;
   flex-direction: column;
   border-radius: var(--radius-surface, var(--radius-lg));
-  border: 1px solid var(--color-base-300);
+  border: var(--border-width-thin) solid var(--color-base-300);
   padding: var(--spacing-md);
   box-shadow: var(
     --shadow-sink,
@@ -10740,7 +10788,7 @@ span.bc-sidebar-link {
 
 .bc-sink--flat {
   box-shadow: var(--shadow-sink-flat, none);
-  border: 1px solid var(--color-base-200);
+  border: var(--border-width-thin) solid var(--color-base-200);
 }
 
 /* Sink sizes */
@@ -10792,7 +10840,7 @@ span.bc-sidebar-link {
 /* Dark mode styles */
 .dark .bc-sink {
   background-color: var(--bg-background);
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
   box-shadow: var(--shadow-sink-dark, inset 0 2px 4px var(--shadow-color-dark));
   color: var(--text-normal);
 }
@@ -10813,7 +10861,7 @@ span.bc-sidebar-link {
 
 .dark .bc-sink--flat {
   box-shadow: var(--shadow-sink-dark-flat, none);
-  border: 1px solid var(--border-divider);
+  border: var(--border-width-thin) solid var(--border-divider);
   background-color: var(--bg-subtle);
 }
 
@@ -10873,7 +10921,7 @@ span.bc-sidebar-link {
 .bc-skeleton__lines-container {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--spacing-base) * 1.5);
+  gap: var(--spacing-smh);
   width: 100%;
 }
 
@@ -10903,8 +10951,8 @@ span.bc-sidebar-link {
 /* High contrast mode: add subtle border */
 @media (prefers-contrast: high) {
   .bc-skeleton {
-    outline: 1px solid currentColor;
-    outline-offset: -1px;
+    outline: var(--outline-width-default) solid currentColor;
+    outline-offset: calc(-1 * var(--outline-width-default));
   }
 }
 
@@ -10915,15 +10963,15 @@ span.bc-sidebar-link {
 }
 
 .bc-stack--gap-1 {
-  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
+  gap: var(--spacing-stack-xs, var(--spacing-sm));
 }
 
 .bc-stack--gap-2 {
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 .bc-stack--gap-4 {
-  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
+  gap: var(--spacing-stack-lg, var(--spacing-lg));
 }
 
 .bc-stack--align-center {
@@ -10953,17 +11001,17 @@ span.bc-sidebar-link {
   align-items: center;
   border-radius: var(--radius-pill, var(--radius-full));
   line-height: 1.2;
-  border: 1px solid var(--tag-border);
+  border: var(--border-width-thin) solid var(--tag-border);
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   font-size: var(--font-size-md);
-  padding: 0 calc(var(--spacing-base) * 2);
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  padding: 0 var(--spacing-md);
+  gap: var(--spacing-stack-sm, var(--spacing-md));
   background-color: var(--tag-bg);
   color: var(--tag-text);
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
 }
@@ -10975,12 +11023,12 @@ span.bc-sidebar-link {
 
 .bc-tag--xs {
   font-size: var(--font-size-xs);
-  padding: 0 calc(var(--spacing-base) * 1);
+  padding: 0 var(--spacing-sm);
 }
 
 .bc-tag--sm {
   font-size: var(--font-size-sm);
-  padding: 0 calc(var(--spacing-base) * 1.5);
+  padding: 0 var(--spacing-smh);
 }
 
 .bc-tag--lg {
@@ -10990,7 +11038,7 @@ span.bc-sidebar-link {
 
 .bc-tag--xl {
   font-size: var(--font-size-xl);
-  padding: 0 calc(var(--spacing-base) * 3);
+  padding: 0 var(--spacing-mdh);
 }
 
 .bc-tag:has(.bc-tag__close) {
@@ -11006,13 +11054,13 @@ span.bc-sidebar-link {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--spacing-base) * 4);
-  height: calc(var(--spacing-base) * 4);
+  width: var(--spacing-lg);
+  height: var(--spacing-lg);
   border-radius: var(--radius-full);
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-  border: 1px solid transparent;
+  border: var(--border-width-thin) solid transparent;
 }
 
 .bc-tag__close:hover {
@@ -11070,7 +11118,7 @@ span.bc-sidebar-link {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+  gap: var(--spacing-stack-sm, var(--spacing-md));
 }
 
 /* Switch Component */
@@ -11129,7 +11177,7 @@ span.bc-sidebar-link {
   transition: background-color var(--motion-transition-fast)
     var(--motion-easing-standard);
   cursor: pointer;
-  padding: calc(var(--spacing-base)) var(--spacing-base);
+  padding: var(--spacing-sm) var(--spacing-base);
 }
 
 /* Switch track - off state */
@@ -11157,18 +11205,18 @@ span.bc-sidebar-link {
 .bc-switch__track-label--off {
   justify-content: flex-end;
   padding-inline-end: var(--spacing-base);
-  padding-inline-start: calc(var(--spacing-base) * 5);
+  padding-inline-start: var(--spacing-lgh);
   color: var(--color-gray-600);
-  line-height: 1;
+  line-height: var(--line-height-none);
 }
 
 /* On label positioning and styling */
 .bc-switch__track-label--on {
   justify-content: flex-start;
-  padding-inline-end: calc(var(--spacing-base) * 5);
+  padding-inline-end: var(--spacing-lgh);
   padding-inline-start: var(--spacing-base);
   color: var(--switch-track-on-label, var(--color-gray-100));
-  line-height: 1;
+  line-height: var(--line-height-none);
 }
 
 .bc-switch--size-xs .bc-switch__track-label {
@@ -11204,8 +11252,8 @@ span.bc-sidebar-link {
 .bc-switch__thumb {
   grid-area: stack;
   position: relative;
-  width: calc(var(--spacing-base) * 4); /* 16px equivalent */
-  height: calc(var(--spacing-base) * 4);
+  width: var(--spacing-lg); /* 16px equivalent */
+  height: var(--spacing-lg);
   border-radius: var(--radius-full);
   background-color: var(--color-white);
   box-shadow: var(
@@ -11224,23 +11272,23 @@ span.bc-sidebar-link {
    automatically via the logical property. calc(100% - thumbWidth) moves
    the thumb to the far end of the grid area regardless of track width. */
 .bc-switch__thumb--on {
-  inset-inline-start: calc(100% - var(--spacing-base) * 4);
+  inset-inline-start: calc(100% - var(--spacing-lg));
 }
 
 /* Size variants for track and thumb */
 .bc-switch--xs .bc-switch__thumb {
-  width: calc(var(--spacing-base) * 3); /* 12px equivalent */
-  height: calc(var(--spacing-base) * 3);
+  width: var(--spacing-mdh); /* 12px equivalent */
+  height: var(--spacing-mdh);
 }
 .bc-switch--xs .bc-switch__thumb--on {
-  inset-inline-start: calc(100% - var(--spacing-base) * 3);
+  inset-inline-start: calc(100% - var(--spacing-mdh));
 }
 .bc-switch--xs .bc-switch__track-label--off {
   padding-inline-end: var(--spacing-base);
-  padding-inline-start: calc(var(--spacing-base) * 4);
+  padding-inline-start: var(--spacing-lg);
 }
 .bc-switch--xs .bc-switch__track-label--on {
-  padding-inline-end: calc(var(--spacing-base) * 4);
+  padding-inline-end: var(--spacing-lg);
   padding-inline-start: var(--spacing-base);
 }
 .bc-switch--xs .bc-switch__track {
@@ -11256,10 +11304,10 @@ span.bc-sidebar-link {
 }
 .bc-switch--sm .bc-switch__track-label--off {
   padding-inline-end: var(--spacing-base);
-  padding-inline-start: calc(var(--spacing-base) * 5);
+  padding-inline-start: var(--spacing-lgh);
 }
 .bc-switch--sm .bc-switch__track-label--on {
-  padding-inline-end: calc(var(--spacing-base) * 5);
+  padding-inline-end: var(--spacing-lgh);
   padding-inline-start: var(--spacing-base);
 }
 .bc-switch--sm .bc-switch__track {
@@ -11267,18 +11315,18 @@ span.bc-sidebar-link {
 }
 
 .bc-switch--md .bc-switch__thumb {
-  width: calc(var(--spacing-base) * 4); /* 20px equivalent */
-  height: calc(var(--spacing-base) * 4);
+  width: var(--spacing-lg); /* 20px equivalent */
+  height: var(--spacing-lg);
 }
 .bc-switch--md .bc-switch__thumb--on {
-  inset-inline-start: calc(100% - var(--spacing-base) * 4);
+  inset-inline-start: calc(100% - var(--spacing-lg));
 }
 .bc-switch--md .bc-switch__track-label--off {
   padding-inline-end: var(--spacing-base);
-  padding-inline-start: calc(var(--spacing-base) * 6);
+  padding-inline-start: var(--spacing-xl);
 }
 .bc-switch--md .bc-switch__track-label--on {
-  padding-inline-end: calc(var(--spacing-base) * 6);
+  padding-inline-end: var(--spacing-xl);
   padding-inline-start: var(--spacing-base);
 }
 .bc-switch--md .bc-switch__track {
@@ -11286,11 +11334,11 @@ span.bc-sidebar-link {
 }
 
 .bc-switch--lg .bc-switch__thumb {
-  width: calc(var(--spacing-base) * 5); /* 20px equivalent */
-  height: calc(var(--spacing-base) * 5);
+  width: var(--spacing-lgh); /* 20px equivalent */
+  height: var(--spacing-lgh);
 }
 .bc-switch--lg .bc-switch__thumb--on {
-  inset-inline-start: calc(100% - var(--spacing-base) * 5);
+  inset-inline-start: calc(100% - var(--spacing-lgh));
 }
 .bc-switch--lg .bc-switch__track-label--off {
   padding-inline-end: var(--spacing-base);
@@ -11301,15 +11349,15 @@ span.bc-sidebar-link {
   padding-inline-start: var(--spacing-base);
 }
 .bc-switch--lg .bc-switch__track {
-  min-width: calc(var(--spacing-base) * 12);
+  min-width: var(--spacing-3xl);
 }
 
 .bc-switch--xl .bc-switch__thumb {
-  width: calc(var(--spacing-base) * 6); /* 24px equivalent */
-  height: calc(var(--spacing-base) * 6);
+  width: var(--spacing-xl); /* 24px equivalent */
+  height: var(--spacing-xl);
 }
 .bc-switch--xl .bc-switch__thumb--on {
-  inset-inline-start: calc(100% - var(--spacing-base) * 6);
+  inset-inline-start: calc(100% - var(--spacing-xl));
 }
 .bc-switch--xl .bc-switch__track-label--off {
   padding-inline-end: var(--spacing-base);
@@ -11326,19 +11374,19 @@ span.bc-sidebar-link {
 /* Match input height — adds vertical padding so the switch occupies the same
    height as text inputs at the corresponding size. */
 .bc-switch--match-input.bc-switch--xs {
-  padding-block: calc(var(--spacing-base) * 1.5);
+  padding-block: var(--spacing-smh);
 }
 .bc-switch--match-input.bc-switch--sm {
-  padding-block: calc(var(--spacing-base) * 2);
+  padding-block: var(--spacing-md);
 }
 .bc-switch--match-input.bc-switch--md {
   padding-block: calc(var(--spacing-base) * 1.75);
 }
 .bc-switch--match-input.bc-switch--lg {
-  padding-block: calc(var(--spacing-base) * 2);
+  padding-block: var(--spacing-md);
 }
 .bc-switch--match-input.bc-switch--xl {
-  padding-block: calc(var(--spacing-base) * 2);
+  padding-block: var(--spacing-md);
 }
 
 /* Focus styles are handled by the base focus system */
@@ -11360,12 +11408,13 @@ span.bc-sidebar-link {
 
 .dark .bc-switch__track--off {
   background-color: var(--bg-subtle);
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
 }
 
 .dark .bc-switch__track--on {
   background-color: var(--switch-track-on-bg-dark, var(--color-primary-600));
-  border: 1px solid var(--switch-track-on-border-dark, var(--color-primary-500));
+  border: var(--border-width-thin) solid
+    var(--switch-track-on-border-dark, var(--color-primary-500));
 }
 
 .dark .bc-switch__track-label--on {
@@ -11413,7 +11462,7 @@ span.bc-sidebar-link {
   background-color: var(--table-bg);
   color: var(--table-text);
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
   font-size: var(--font-size-md);
@@ -11467,7 +11516,7 @@ span.bc-sidebar-link {
 
 /* With table border */
 .bc-table-container--with-table-border {
-  border: 1px solid var(--table-border);
+  border: var(--border-width-thin) solid var(--table-border);
 }
 
 /* With row borders */
@@ -11477,7 +11526,7 @@ span.bc-sidebar-link {
 .bc-table--with-row-borders > tbody > tr > td,
 .bc-table--with-row-borders > tfoot > tr > th,
 .bc-table--with-row-borders > tfoot > tr > td {
-  border-bottom: 1px solid var(--table-border);
+  border-bottom: var(--border-width-thin) solid var(--table-border);
 }
 
 /* With column borders */
@@ -11487,7 +11536,7 @@ span.bc-sidebar-link {
 .bc-table--with-column-borders > tbody > tr > td,
 .bc-table--with-column-borders > tfoot > tr > th,
 .bc-table--with-column-borders > tfoot > tr > td {
-  border-right: 1px solid var(--table-border);
+  border-right: var(--border-width-thin) solid var(--table-border);
 }
 
 .bc-table--with-column-borders > thead > tr > th:last-child,
@@ -11529,7 +11578,7 @@ span.bc-sidebar-link {
 .bc-table--size-sm > tbody > tr > td,
 .bc-table--size-sm > tfoot > tr > th,
 .bc-table--size-sm > tfoot > tr > td {
-  padding: calc(var(--spacing-base) * 1.5);
+  padding: var(--spacing-smh);
   font-size: var(--font-size-sm);
 }
 
@@ -11548,7 +11597,7 @@ span.bc-sidebar-link {
 .bc-table--size-xl > tbody > tr > td,
 .bc-table--size-xl > tfoot > tr > th,
 .bc-table--size-xl > tfoot > tr > td {
-  padding: calc(var(--spacing-base) * 5);
+  padding: var(--spacing-lgh);
   font-size: var(--font-size-lg);
 }
 
@@ -11567,7 +11616,7 @@ span.bc-sidebar-link {
 .bc-table__footer {
   background-color: var(--table-header-bg);
   font-weight: var(--font-weight-semibold);
-  border-top: 2px solid var(--table-border);
+  border-top: var(--border-width-medium) solid var(--table-border);
 }
 
 /* Dark mode styles */
@@ -11621,7 +11670,7 @@ span.bc-sidebar-link {
   display: flex;
   position: relative;
   background-color: var(--color-base-100);
-  border-bottom: 2px solid var(--color-base-200);
+  border-bottom: var(--border-width-medium) solid var(--color-base-200);
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
@@ -11637,7 +11686,7 @@ span.bc-sidebar-link {
 .bc-tabs--vertical .bc-tabs__list {
   flex-direction: column;
   border-bottom: none;
-  border-right: 2px solid var(--color-base-200);
+  border-right: var(--border-width-medium) solid var(--color-base-200);
   min-width: 200px;
   overflow-x: hidden;
   overflow-y: auto;
@@ -11652,7 +11701,7 @@ span.bc-sidebar-link {
   border: none;
   cursor: pointer;
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
   font-weight: var(--font-weight-medium);
@@ -11708,8 +11757,8 @@ span.bc-sidebar-link {
 }
 
 .bc-tab:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline-offset: calc(-1 * var(--outline-width-focus));
   z-index: 1;
 }
 
@@ -11778,8 +11827,8 @@ span.bc-sidebar-link {
 }
 
 .bc-tabs__panel:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 /* Responsive Design */
@@ -11825,7 +11874,7 @@ span.bc-sidebar-link {
 /* High contrast mode support */
 @media (prefers-contrast: high) {
   .bc-tabs__list {
-    border-width: 3px;
+    border-width: var(--border-width-thick);
   }
 
   .bc-tab--active::after {
@@ -11921,8 +11970,8 @@ span.bc-sidebar-link {
 }
 .bc-tabs--variant-outline .bc-tab {
   background-color: var(--color-base-50);
-  border: 1px solid var(--color-base-300);
-  border-bottom: 1px solid var(--color-base-300);
+  border: var(--border-width-thin) solid var(--color-base-300);
+  border-bottom: var(--border-width-thin) solid var(--color-base-300);
   border-radius: var(--radius-control-sm, var(--radius-sm))
     var(--radius-control-sm, var(--radius-sm)) 0 0;
 }
@@ -11980,7 +12029,7 @@ span.bc-sidebar-link {
 /* Underline variant: minimal, clean underline style */
 .bc-tabs--variant-underline .bc-tabs__list {
   background-color: transparent;
-  border-bottom: 1px solid var(--color-base-200);
+  border-bottom: var(--border-width-thin) solid var(--color-base-200);
 }
 
 .bc-tabs--variant-underline .bc-tab {
@@ -12050,7 +12099,7 @@ span.bc-sidebar-link {
 }
 
 .bc-tabs--variant-pill .bc-tab--sm {
-  padding: var(--spacing-base) calc(var(--spacing-base) * 3);
+  padding: var(--spacing-base) var(--spacing-mdh);
 }
 
 .bc-tabs--variant-pill .bc-tab--md {
@@ -12058,11 +12107,11 @@ span.bc-sidebar-link {
 }
 
 .bc-tabs--variant-pill .bc-tab--lg {
-  padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 4);
+  padding: var(--spacing-smh) var(--spacing-lg);
 }
 
 .bc-tabs--variant-pill .bc-tab--xl {
-  padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 5);
+  padding: var(--spacing-md) var(--spacing-lgh);
 }
 
 .bc-tabs--variant-pill
@@ -12135,7 +12184,7 @@ span.bc-sidebar-link {
   align-items: center;
   gap: 4px;
   padding: 4px 8px;
-  border: 1px solid var(--color-base-300);
+  border: var(--border-width-thin) solid var(--color-base-300);
   border-radius: var(--radius-md, 5px);
   background: var(--color-white);
   min-height: 34px;
@@ -12221,7 +12270,7 @@ span.bc-sidebar-link {
   padding: 0;
   margin-left: 2px;
   font-size: 14px;
-  line-height: 1;
+  line-height: var(--line-height-none);
   color: var(--color-base-400);
   opacity: 0.5;
   transition: opacity 120ms ease;
@@ -12276,7 +12325,7 @@ span.bc-sidebar-link {
   font-size: var(--font-size-sm);
   line-height: var(--font-size-sm-lh);
   font-weight: var(--font-weight-medium);
-  max-width: 200px;
+  max-width: var(--overlay-width-xs);
   word-wrap: break-word;
   z-index: var(--z-index-tooltip);
   box-shadow: var(--shadow-popover, var(--shadow-md));
@@ -12352,7 +12401,7 @@ span.bc-sidebar-link {
 .dark .bc-tooltip {
   background-color: var(--bg-elevated);
   color: var(--text-normal);
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
   box-shadow: var(
     --shadow-tooltip-dark,
     0 10px 15px -3px var(--shadow-color-dark),
@@ -12369,11 +12418,11 @@ span.bc-sidebar-link {
 /* High contrast mode */
 @media (prefers-contrast: high) {
   .bc-tooltip {
-    border: 1px solid var(--color-neutral-600);
+    border: var(--border-width-thin) solid var(--color-neutral-600);
   }
 
   .dark .bc-tooltip {
-    border: 1px solid var(--color-neutral-400);
+    border: var(--border-width-thin) solid var(--color-neutral-400);
   }
 }
 
@@ -12390,7 +12439,7 @@ span.bc-sidebar-link {
   align-items: center;
   gap: var(--spacing-stack-sm);
   padding: var(--spacing-sm);
-  border: 1px solid var(--color-neutral-200);
+  border: var(--border-width-thin) solid var(--color-neutral-200);
   border-radius: var(--radius-control, var(--radius-md));
   background-color: var(--color-neutral-50);
   width: 100%;
@@ -12409,7 +12458,7 @@ span.bc-sidebar-link {
 
 .bc-toolbar__divider {
   width: 1px;
-  height: calc(var(--spacing-base) * 6);
+  height: var(--spacing-xl);
   background-color: var(--color-neutral-300);
   margin: 0 var(--spacing-xs);
 }
@@ -12438,9 +12487,9 @@ span.bc-sidebar-link {
 
 .bc-toolbar .bc-input-container {
   /* Reduce horizontal padding in toolbar but keep vertical from size */
-  padding-inline: calc(var(--spacing-base) * 3);
+  padding-inline: var(--spacing-mdh);
   outline-width: 1px;
-  outline-offset: -1px;
+  outline-offset: calc(-1 * var(--outline-width-default));
   width: auto;
   box-shadow: var(--shadow-none, none);
 }
@@ -12453,7 +12502,7 @@ span.bc-sidebar-link {
   }
 
   .bc-toolbar__divider {
-    height: calc(var(--spacing-base) * 4);
+    height: var(--spacing-lg);
     margin: 0 var(--spacing-xs);
   }
 
@@ -12582,7 +12631,7 @@ span.bc-sidebar-link {
   background: var(--color-white);
   border-radius: var(--radius-lg);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  border: 1px solid var(--color-base-200);
+  border: var(--border-width-thin) solid var(--color-base-200);
   width: auto;
 }
 
@@ -12613,7 +12662,7 @@ span.bc-sidebar-link {
 
 .bc-toolbar--floating .bc-toolbar__divider {
   width: 1px;
-  height: calc(var(--spacing-base) * 5);
+  height: var(--spacing-lgh);
   background: var(--color-base-200);
   margin: 0 calc(var(--spacing-base) * 0.5);
   flex-shrink: 0;
@@ -12748,7 +12797,7 @@ span.bc-sidebar-link {
   background: oklch(0.95 0 0);
   border-radius: var(--radius-sm);
   font-weight: 500;
-  line-height: 1;
+  line-height: var(--line-height-none);
   display: inline-flex;
   align-items: center;
 }
@@ -12798,8 +12847,8 @@ span.bc-sidebar-link {
 
 /* Focus styles for keyboard navigation */
 .bc-tree-item__row:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 .dark .bc-tree-item__row:focus-visible {
@@ -12809,7 +12858,7 @@ span.bc-sidebar-link {
 /* Rating Input Component */
 .bc-rating-input {
   display: inline-flex;
-  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
+  gap: var(--spacing-stack-xs, var(--spacing-sm));
 }
 
 .bc-rating-input__icon-container {
@@ -12883,12 +12932,12 @@ span.bc-sidebar-link {
 
 /* Custom radio indicator */
 .bc-radio-group__indicator {
-  width: calc(var(--spacing-base) * 5);
-  height: calc(var(--spacing-base) * 5);
-  min-width: calc(var(--spacing-base) * 5);
-  min-height: calc(var(--spacing-base) * 5);
+  width: var(--spacing-lgh);
+  height: var(--spacing-lgh);
+  min-width: var(--spacing-lgh);
+  min-height: var(--spacing-lgh);
   border-radius: 50%;
-  border: 1px solid var(--color-base-400);
+  border: var(--border-width-thin) solid var(--color-base-400);
   background-color: --color-white;
   flex-shrink: 0;
   position: relative;
@@ -12908,8 +12957,8 @@ span.bc-sidebar-link {
 .bc-radio-group__input:checked + .bc-radio-group__indicator::after {
   content: '';
   position: absolute;
-  width: calc(var(--spacing-base) * 2);
-  height: calc(var(--spacing-base) * 2);
+  width: var(--spacing-md);
+  height: var(--spacing-md);
   border-radius: 50%;
   background-color: var(--color-primary-500);
   transition: all var(--motion-duration-fast) var(--motion-easing-standard);
@@ -12917,7 +12966,7 @@ span.bc-sidebar-link {
 
 /* Focus state */
 .bc-radio-group__input:focus-visible + .bc-radio-group__indicator {
-  outline: 2px solid var(--interactive-focus);
+  outline: var(--outline-width-focus) solid var(--interactive-focus);
   outline-offset: 2px;
 }
 
@@ -12966,8 +13015,8 @@ span.bc-sidebar-link {
 .bc-radio-group__item--size-xs
   .bc-radio-group__input:checked
   + .bc-radio-group__indicator::after {
-  width: calc(var(--spacing-base) * 1.5);
-  height: calc(var(--spacing-base) * 1.5);
+  width: var(--spacing-smh);
+  height: var(--spacing-smh);
 }
 
 .bc-radio-group__item--size-xs .bc-radio-group__label {
@@ -12979,10 +13028,10 @@ span.bc-sidebar-link {
 }
 
 .bc-radio-group__item--size-sm .bc-radio-group__indicator {
-  width: calc(var(--spacing-base) * 4);
-  height: calc(var(--spacing-base) * 4);
-  min-width: calc(var(--spacing-base) * 4);
-  min-height: calc(var(--spacing-base) * 4);
+  width: var(--spacing-lg);
+  height: var(--spacing-lg);
+  min-width: var(--spacing-lg);
+  min-height: var(--spacing-lg);
 }
 
 .bc-radio-group__item--size-sm
@@ -13003,10 +13052,10 @@ span.bc-sidebar-link {
 /* md is default */
 
 .bc-radio-group__item--size-lg .bc-radio-group__indicator {
-  width: calc(var(--spacing-base) * 5);
-  height: calc(var(--spacing-base) * 5);
-  min-width: calc(var(--spacing-base) * 5);
-  min-height: calc(var(--spacing-base) * 5);
+  width: var(--spacing-lgh);
+  height: var(--spacing-lgh);
+  min-width: var(--spacing-lgh);
+  min-height: var(--spacing-lgh);
 }
 
 .bc-radio-group__item--size-lg
@@ -13079,7 +13128,7 @@ span.bc-sidebar-link {
 .bc-notice {
   display: flex;
   flex-direction: row;
-  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
+  gap: var(--spacing-stack-md, var(--spacing-mdh));
   align-items: start;
   border-radius: var(--radius-control, var(--radius-md));
   padding: var(--spacing-md);
@@ -13102,12 +13151,12 @@ span.bc-sidebar-link {
 
 /* Tones */
 .bc-notice--tone-subtle {
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
   background-color: var(--bg-surface);
 }
 
 .bc-notice--tone-prominent {
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
 }
 
 /* Variants base color variables per tone */
@@ -13246,7 +13295,7 @@ span.bc-sidebar-link {
     border-radius: var(--notification-radius);
     background-color: var(--notification-bg);
     color: var(--notification-text-color);
-    border: 1px solid var(--notification-border-color);
+    border: var(--border-width-thin) solid var(--notification-border-color);
     box-shadow: var(--shadow-md);
   }
 
@@ -13373,12 +13422,12 @@ span.bc-sidebar-link {
   display: flex;
   flex-direction: column;
   background: var(--color-white);
-  border: 1px solid var(--color-base-200);
+  border: var(--border-width-thin) solid var(--color-base-200);
   border-radius: var(--radius-lg, 8px);
   box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
   overflow: hidden;
   font-family: var(
-    --default-ui-font-family,
+    --font-family-default-ui,
     var(--font-ui, var(--font-body, var(--font-family-sans)))
   );
 }
@@ -13389,7 +13438,7 @@ span.bc-sidebar-link {
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid var(--color-base-200);
+  border-bottom: var(--border-width-thin) solid var(--color-base-200);
   flex-shrink: 0;
 }
 
@@ -13670,7 +13719,7 @@ span.bc-sidebar-link {
   bottom: 0;
   overflow: hidden;
   opacity: 0.2;
-  line-height: 1;
+  line-height: var(--line-height-none);
   text-align: initial;
   forced-color-adjust: none;
   transform-origin: 0 0;
@@ -13797,7 +13846,7 @@ span.bc-sidebar-link {
   .buttonWidgetAnnotation.radioButton
   input {
   background-image: none;
-  border: 1px solid transparent;
+  border: var(--border-width-thin) solid transparent;
   box-sizing: border-box;
   font: calc(9px * var(--scale-factor)) sans-serif;
   height: 100%;
@@ -13830,7 +13879,7 @@ span.bc-sidebar-link {
   .buttonWidgetAnnotation.radioButton
   input[disabled] {
   background: none;
-  border: 1px solid transparent;
+  border: var(--border-width-thin) solid transparent;
   cursor: not-allowed;
 }
 
@@ -13843,14 +13892,14 @@ span.bc-sidebar-link {
 .bc-pdf-page-viewer__annotation-layer
   .buttonWidgetAnnotation.radioButton
   input:hover {
-  border: 1px solid rgba(0, 0, 0, 1);
+  border: var(--border-width-thin) solid rgba(0, 0, 0, 1);
 }
 
 .bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation input:focus,
 .bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation textarea:focus,
 .bc-pdf-page-viewer__annotation-layer .choiceWidgetAnnotation select:focus {
   background: none;
-  border: 1px solid transparent;
+  border: var(--border-width-thin) solid transparent;
 }
 
 .bc-pdf-page-viewer__annotation-layer
@@ -13961,7 +14010,7 @@ span.bc-sidebar-link {
 }
 
 .bc-pdf-page-viewer__annotation-layer .popupContent {
-  border-top: 1px solid rgba(51, 51, 51, 1);
+  border-top: var(--border-width-thin) solid rgba(51, 51, 51, 1);
   margin-top: calc(2px * var(--scale-factor));
   padding-top: calc(2px * var(--scale-factor));
 }
@@ -14059,7 +14108,7 @@ span.bc-sidebar-link {
 }
 
 .bc-dialog__consequences {
-  padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);
+  padding: var(--spacing-md) var(--spacing-mdh);
   border-radius: var(--radius-md);
   background: var(--bg-subtle);
   font-size: var(--font-size-xs);
@@ -14067,13 +14116,13 @@ span.bc-sidebar-link {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
-  margin: calc(var(--spacing-base) * 3) 0 0;
+  margin: var(--spacing-mdh) 0 0;
   list-style: none;
 }
 
 .bc-dialog__consequences li {
   display: flex;
-  gap: calc(var(--spacing-base) * 1.5);
+  gap: var(--spacing-smh);
 }
 
 .bc-dialog__consequences li::before {
@@ -14085,23 +14134,24 @@ span.bc-sidebar-link {
 .bc-dialog__actions {
   display: flex;
   justify-content: flex-end;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-md);
   width: 100%;
 }
 
 .bc-dialog__input {
   display: block;
   width: 100%;
-  padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);
-  margin-top: calc(var(--spacing-base) * 3);
-  border: 1px solid var(--border-input);
+  padding: var(--spacing-md) var(--spacing-mdh);
+  margin-top: var(--spacing-mdh);
+  border: var(--border-width-thin) solid var(--border-input);
   border-radius: var(--radius-md);
   background: var(--bg-background);
   color: var(--text-normal);
   font-size: var(--font-size-sm);
   font-family: inherit;
   outline: none;
-  transition: border-color 0.15s ease;
+  transition: border-color var(--motion-duration-fast)
+    var(--motion-easing-standard);
 }
 
 .bc-dialog__input::placeholder {
@@ -14195,7 +14245,8 @@ span.bc-sidebar-link {
 /* High contrast */
 @media (prefers-contrast: more) {
   .bc-ribbon {
-    outline: 1px solid var(--border-border-light, var(--color-neutral-500));
+    outline: var(--outline-width-default) solid
+      var(--border-border-light, var(--color-neutral-500));
   }
 }
 
@@ -14215,13 +14266,13 @@ span.bc-sidebar-link {
 
 /* Default variant: bordered list */
 .bc-accordion--default {
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
   border-radius: var(--radius-md);
   overflow: hidden;
 }
 
 .bc-accordion--default .bc-accordion__item + .bc-accordion__item {
-  border-top: 1px solid var(--border-default);
+  border-top: var(--border-width-thin) solid var(--border-default);
 }
 
 /* Separated variant: cards with gaps */
@@ -14230,7 +14281,7 @@ span.bc-sidebar-link {
 }
 
 .bc-accordion--separated .bc-accordion__item {
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
   border-radius: var(--radius-md);
   overflow: hidden;
 }
@@ -14266,8 +14317,8 @@ span.bc-sidebar-link {
 }
 
 .bc-accordion__header:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 .bc-accordion__header:disabled {
@@ -14297,8 +14348,8 @@ span.bc-sidebar-link {
   display: inline-block;
   width: 0.5em;
   height: 0.5em;
-  border-right: 2px solid currentColor;
-  border-bottom: 2px solid currentColor;
+  border-right: var(--border-width-medium) solid currentColor;
+  border-bottom: var(--border-width-medium) solid currentColor;
   transform: rotate(45deg);
   margin-top: -0.15em;
 }
@@ -14398,7 +14449,7 @@ span.bc-sidebar-link {
   display: inline-flex;
   flex-direction: column;
   background-color: var(--bg-background);
-  border: 1px solid var(--border-default);
+  border: var(--border-width-thin) solid var(--border-default);
   border-radius: var(--radius-md);
   padding: var(--spacing-md);
   user-select: none;
@@ -14423,14 +14474,14 @@ span.bc-sidebar-link {
   align-items: center;
   justify-content: center;
   background: none;
-  border: 1px solid transparent;
+  border: var(--border-width-thin) solid transparent;
   border-radius: var(--radius-sm);
   cursor: pointer;
   color: var(--text-normal);
   font-weight: var(--font-weight-semibold);
   transition: background-color var(--motion-transition-fast)
     var(--motion-easing-standard);
-  line-height: 1;
+  line-height: var(--line-height-none);
 }
 
 .bc-calendar__nav-btn:hover:not(:disabled) {
@@ -14438,8 +14489,8 @@ span.bc-sidebar-link {
 }
 
 .bc-calendar__nav-btn:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 .bc-calendar__nav-btn:disabled {
@@ -14478,8 +14529,8 @@ span.bc-sidebar-link {
 }
 
 .bc-calendar__title-btn:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 .bc-calendar__title-btn:disabled {
@@ -14532,8 +14583,8 @@ span.bc-sidebar-link {
 }
 
 .bc-calendar__day:focus-visible {
-  outline: 2px solid var(--cal-selected-bg);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--cal-selected-bg);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 .bc-calendar__day--outside {
@@ -14606,8 +14657,8 @@ span.bc-sidebar-link {
 }
 
 .bc-calendar__month-cell:focus-visible {
-  outline: 2px solid var(--cal-selected-bg);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--cal-selected-bg);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 .bc-calendar__month-cell--current {
@@ -14652,8 +14703,8 @@ span.bc-sidebar-link {
 }
 
 .bc-calendar__year-cell:focus-visible {
-  outline: 2px solid var(--cal-selected-bg);
-  outline-offset: -2px;
+  outline: var(--outline-width-focus) solid var(--cal-selected-bg);
+  outline-offset: calc(-1 * var(--outline-width-focus));
 }
 
 .bc-calendar__year-cell--current {
@@ -15007,7 +15058,7 @@ span.bc-sidebar-link {
 /* Thumb */
 .bc-advanced-slider__thumb {
   background-color: var(--color-white);
-  border: 2px solid var(--slider-color);
+  border: var(--border-width-medium) solid var(--slider-color);
   border-radius: var(--radius-full);
   cursor: grab;
   box-shadow: var(--shadow-sm);
@@ -15027,7 +15078,7 @@ span.bc-sidebar-link {
 }
 
 .bc-advanced-slider__thumb:focus-visible {
-  outline: 2px solid var(--color-primary-500);
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: 2px;
 }
 
@@ -15045,7 +15096,7 @@ span.bc-sidebar-link {
 }
 
 .bc-advanced-slider__thumb-custom:focus-visible {
-  outline: 2px solid var(--color-primary-500);
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: 2px;
 }
 
@@ -15059,7 +15110,7 @@ span.bc-sidebar-link {
   font-weight: var(--font-weight-semibold);
   pointer-events: none;
   text-align: center;
-  line-height: 1;
+  line-height: var(--line-height-none);
 }
 
 /* Ticks container */
@@ -15285,7 +15336,7 @@ span.bc-sidebar-link {
   font-variant-numeric: tabular-nums;
   color: var(--text-normal);
   background-color: var(--bg-background);
-  border: 1.5px solid var(--border-default);
+  border: var(--border-width-default) solid var(--border-default);
   border-radius: var(--radius-md);
   outline: none;
   caret-color: var(--otp-focus-color);
@@ -15393,14 +15444,15 @@ span.bc-sidebar-link {
   align-items: center;
   justify-content: center;
   gap: var(--spacing-stack-2xs);
-  border: 1.5px var(--toggle-border-style) var(--toggle-border);
+  border: var(--border-width-default) var(--toggle-border-style)
+    var(--toggle-border);
   cursor: pointer;
   font-family: inherit;
   font-weight: var(--font-weight-semibold);
   background-color: var(--toggle-bg);
   color: var(--toggle-text);
   text-shadow: var(--toggle-text-shadow);
-  line-height: 1;
+  line-height: var(--line-height-none);
   transition: all var(--motion-transition-fast) var(--motion-easing-standard);
   user-select: none;
 }
@@ -15421,7 +15473,7 @@ span.bc-sidebar-link {
 }
 
 .bc-toggle-button:focus-visible {
-  outline: 2px solid var(--color-primary-500);
+  outline: var(--outline-width-focus) solid var(--color-primary-500);
   outline-offset: 2px;
 }
 
@@ -15438,8 +15490,8 @@ span.bc-sidebar-link {
 /* Size variants */
 .bc-toggle-button--size-xs {
   font-size: var(--font-size-xs);
-  min-height: calc(var(--spacing-base) * 6);
-  min-width: calc(var(--spacing-base) * 6);
+  min-height: var(--spacing-xl);
+  min-width: var(--spacing-xl);
 }
 
 .bc-toggle-button--size-sm {
@@ -15450,20 +15502,20 @@ span.bc-sidebar-link {
 
 .bc-toggle-button--size-md {
   font-size: var(--font-size-md);
-  min-height: calc(var(--spacing-base) * 8);
-  min-width: calc(var(--spacing-base) * 8);
+  min-height: var(--spacing-2xl);
+  min-width: var(--spacing-2xl);
 }
 
 .bc-toggle-button--size-lg {
   font-size: var(--font-size-lg);
-  min-height: calc(var(--spacing-base) * 10);
-  min-width: calc(var(--spacing-base) * 10);
+  min-height: var(--spacing-2xlh);
+  min-width: var(--spacing-2xlh);
 }
 
 .bc-toggle-button--size-xl {
   font-size: var(--font-size-xl);
-  min-height: calc(var(--spacing-base) * 12);
-  min-width: calc(var(--spacing-base) * 12);
+  min-height: var(--spacing-3xl);
+  min-width: var(--spacing-3xl);
 }
 
 /* Dark mode */
@@ -15489,7 +15541,7 @@ span.bc-sidebar-link {
 /* High contrast */
 @media (prefers-contrast: high) {
   .bc-toggle-button {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }