@tempots/beatui 0.87.3 → 0.88.0

package/dist/beatui.css

@@ -346,36 +346,36 @@ ol {
   --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;
@@ -410,11 +410,11 @@ ol {
   --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);
@@ -456,6 +456,40 @@ ol {
   --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;
 }
 
 :root {
@@ -580,12 +614,12 @@ ol {
   --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);
@@ -606,12 +640,12 @@ ol {
   --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);
@@ -637,7 +671,7 @@ html,
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
   font-family: var(
-    --default-font-family,
+    --font-family-default,
     ui-sans-serif,
     system-ui,
     sans-serif,
@@ -646,8 +680,11 @@ html,
     'Segoe UI Symbol',
     'Noto Color Emoji'
   );
-  font-feature-settings: var(--default-font-feature-settings, normal);
-  font-variation-settings: var(--default-font-variation-settings, normal);
+  font-feature-settings: var(--font-family-default-feature-settings, normal);
+  font-variation-settings: var(
+    --font-family-default-variation-settings,
+    normal
+  );
   font-size: var(--font-size-base, 1rem);
   color: var(--text-normal-light, var(--color-neutral-900));
   background-color: var(--bg-background-light, var(--color-white));
@@ -665,7 +702,7 @@ body {
 hr {
   height: 0;
   color: inherit;
-  border-top-width: 1px;
+  border-top-width: var(--border-width-thin);
 }
 
 abbr:where([title]) {
@@ -682,7 +719,7 @@ h6 {
   font-size: inherit;
   font-weight: inherit;
   font-family: var(
-    --default-heading-font-family,
+    --font-family-default-heading,
     var(--font-heading, var(--font-body, var(--font-family-sans)))
   );
 }
@@ -703,7 +740,7 @@ kbd,
 samp,
 pre {
   font-family: var(
-    --default-mono-font-family,
+    --font-family-default-mono,
     ui-monospace,
     SFMono-Regular,
     Menlo,
@@ -713,8 +750,14 @@ pre {
     'Courier New',
     monospace
   );
-  font-feature-settings: var(--default-mono-font-feature-settings, normal);
-  font-variation-settings: var(--default-mono-font-variation-settings, normal);
+  font-feature-settings: var(
+    --font-family-default-mono-feature-settings,
+    normal
+  );
+  font-variation-settings: var(
+    --font-family-default-mono-variation-settings,
+    normal
+  );
   font-size: 1em;
 }
 
@@ -853,7 +896,7 @@ textarea {
 }
 
 ::-webkit-calendar-picker-indicator {
-  line-height: 1;
+  line-height: var(--line-height-none);
 }
 
 :-moz-ui-invalid {
@@ -993,7 +1036,8 @@ input:where([type='button'], [type='reset'], [type='submit']),
 
 .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;
@@ -1147,7 +1191,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 */
@@ -1288,7 +1332,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;
   }
 
@@ -1310,7 +1354,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);
@@ -1630,7 +1674,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 {
@@ -1703,7 +1747,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 */
@@ -1716,7 +1760,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 */
@@ -1790,7 +1834,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;
 }
 
@@ -1806,7 +1850,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 {
@@ -1814,7 +1858,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));
   }
 }
 
@@ -1834,8 +1878,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%;
 }
 
@@ -1848,7 +1892,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 {
@@ -1857,7 +1901,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 {
@@ -1878,7 +1922,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 */
@@ -2039,7 +2083,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);
 }
 
@@ -2068,7 +2112,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 {
@@ -2178,7 +2222,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 {
@@ -2247,7 +2291,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;
@@ -2266,7 +2310,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;
 }
@@ -2282,32 +2326,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);
 }
 
@@ -2328,7 +2372,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);
 }
 
@@ -2352,7 +2396,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 */
@@ -2384,12 +2428,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);
   }
 }
 
@@ -2415,13 +2459,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);
@@ -2433,40 +2477,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);
 }
 
@@ -2479,23 +2520,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 */
@@ -2506,9 +2559,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;
@@ -2520,15 +2573,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 {
@@ -2538,9 +2591,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 {
@@ -2564,7 +2617,7 @@ a:focus-visible {
 /* Accessibility adjustments */
 @media (prefers-contrast: high) {
   .bc-badge {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -2578,13 +2631,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;
@@ -2607,7 +2660,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 {
@@ -2740,7 +2793,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;
 }
 
@@ -2749,7 +2802,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;
@@ -2774,7 +2827,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;
 }
 
@@ -2787,7 +2840,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 */
@@ -2872,16 +2925,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))
@@ -2896,7 +2950,7 @@ a:focus-visible {
 }
 
 .bc-button > span {
-  min-height: 10px;
+  min-height: var(--spacing-md);
 }
 
 .bc-button:hover:not(:disabled) {
@@ -2968,7 +3022,7 @@ a:focus-visible {
 /* Accessibility adjustments */
 @media (prefers-contrast: high) {
   .bc-button {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -2986,7 +3040,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);
@@ -3096,11 +3150,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 {
@@ -3153,8 +3207,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);
 }
 
@@ -3177,7 +3231,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;
 }
 
@@ -3228,7 +3282,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 {
@@ -3242,7 +3296,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%;
 }
 
@@ -3282,7 +3336,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;
 }
 
@@ -3297,7 +3351,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 {
@@ -3326,7 +3380,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'] {
@@ -3336,7 +3390,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 */
@@ -3351,7 +3405,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;
@@ -3375,9 +3429,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 {
@@ -3402,22 +3456,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);
@@ -3428,8 +3482,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)
@@ -3482,11 +3536,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 */
@@ -3530,8 +3584,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);
@@ -3540,12 +3594,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;
@@ -3555,7 +3609,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)
@@ -3630,7 +3684,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 */
@@ -3666,7 +3720,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 {
@@ -3695,13 +3749,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));
   }
 }
 
@@ -3717,43 +3771,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 {
@@ -3817,14 +3871,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 */
@@ -3895,7 +3949,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;
@@ -3909,7 +3963,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;
@@ -3962,7 +4016,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;
@@ -3974,7 +4028,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;
@@ -3986,11 +4040,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 */
@@ -4063,7 +4117,7 @@ a:focus-visible {
 @media (prefers-contrast: high) {
   .bc-divider,
   .bc-divider__line {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -4342,7 +4396,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;
 }
@@ -4355,7 +4409,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;
 }
@@ -4364,16 +4418,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);
 }
 
@@ -4396,10 +4450,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;
 }
@@ -4421,7 +4475,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;
@@ -4438,8 +4492,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);
 }
 
@@ -4447,11 +4501,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;
@@ -4479,7 +4533,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;
@@ -4583,7 +4637,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;
 }
 
@@ -4614,7 +4668,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))
@@ -4629,7 +4683,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;
 }
 
@@ -4639,11 +4693,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 {
@@ -4658,7 +4712,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 {
@@ -4674,22 +4728,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:
@@ -4717,10 +4771,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);
@@ -4730,24 +4784,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 {
@@ -4785,8 +4839,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;
@@ -4803,7 +4857,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;
 }
 
@@ -4814,9 +4868,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);
@@ -4835,7 +4889,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;
 }
 
@@ -4880,7 +4934,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 {
@@ -4921,16 +4975,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;
@@ -4940,8 +4994,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;
@@ -4973,8 +5027,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);
@@ -4994,14 +5048,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 {
@@ -5010,7 +5064,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;
 }
 
@@ -5020,10 +5074,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 {
@@ -5037,15 +5091,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
@@ -5063,17 +5117,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 {
@@ -5104,8 +5158,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;
@@ -5122,7 +5176,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;
 }
 
@@ -5384,7 +5438,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);
@@ -5460,19 +5514,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 {
@@ -5482,7 +5536,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)))
   );
 }
@@ -5497,7 +5551,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);
@@ -5736,7 +5790,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;
 }
 
@@ -5812,10 +5866,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;
 }
@@ -5828,8 +5882,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,
@@ -5846,26 +5900,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 */
@@ -5885,7 +5939,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 {
@@ -5908,10 +5962,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 */
@@ -5987,11 +6040,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);
 }
 
@@ -6002,17 +6055,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);
 }
 
@@ -6043,7 +6096,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);
   }
 }
 
@@ -6051,7 +6104,7 @@ a:focus-visible {
 @media (prefers-contrast: high) {
   .bc-input-container,
   .bc-input {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -6079,7 +6132,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 */
@@ -6105,7 +6158,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 */
@@ -6118,7 +6171,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 */
@@ -6199,8 +6252,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 {
@@ -6212,7 +6265,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 {
@@ -6398,7 +6451,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;
 }
 
@@ -6413,7 +6466,7 @@ a:focus-visible {
 }
 
 .bc-object-helpers__remove {
-  padding-top: calc(var(--spacing-base) * 3);
+  padding-top: var(--spacing-mdh);
   flex-shrink: 1;
 }
 
@@ -6437,7 +6490,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 */
@@ -6460,7 +6513,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;
@@ -6497,7 +6550,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);
 }
@@ -6545,7 +6598,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 {
@@ -6575,7 +6628,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 {
@@ -6583,7 +6636,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;
 }
 
@@ -6604,9 +6657,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;
 }
@@ -6621,7 +6674,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;
 }
@@ -6648,8 +6701,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 {
@@ -6659,8 +6712,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 {
@@ -6675,7 +6728,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;
 }
 
@@ -6713,11 +6766,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 {
@@ -6749,13 +6802,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;
 }
@@ -6794,7 +6847,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,
@@ -6833,7 +6886,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));
 }
 
 /* =============================================================================
@@ -6841,18 +6894,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 */
@@ -6860,8 +6913,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);
 }
@@ -6870,11 +6923,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);
 }
 
 /* =============================================================================
@@ -6886,7 +6939,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,
@@ -6894,7 +6947,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,
@@ -6902,7 +6955,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,
@@ -6927,7 +6980,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));
 }
 
@@ -6938,7 +6991,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 */
@@ -6955,7 +7008,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 {
@@ -6973,7 +7026,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 {
@@ -7001,7 +7054,7 @@ a:focus-visible {
 }
 
 .bc-json-structure-tuple-element-control {
-  padding-inline-start: calc(var(--spacing-base) * 2);
+  padding-inline-start: var(--spacing-md);
 }
 
 /* =============================================================================
@@ -7011,15 +7064,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);
 }
 
 /* =============================================================================
@@ -7031,7 +7084,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 {
@@ -7168,7 +7221,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);
 }
@@ -7197,8 +7250,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);
 }
@@ -7213,8 +7266,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);
@@ -7297,11 +7350,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;
@@ -7319,13 +7372,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);
 }
 
@@ -7341,7 +7394,7 @@ a:focus-visible {
 /* Accessibility adjustments */
 @media (prefers-contrast: high) {
   .bc-kbd {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }
 
@@ -7355,7 +7408,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)))
   );
 }
@@ -7394,7 +7447,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;
@@ -7557,7 +7610,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;
   }
@@ -7595,7 +7649,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 {
@@ -7620,7 +7674,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,
@@ -7674,7 +7728,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;
   }
@@ -7691,8 +7745,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);
   }
 
@@ -7831,7 +7885,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 {
@@ -7849,7 +7903,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);
@@ -7863,7 +7917,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 {
@@ -7873,7 +7927,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 {
@@ -7889,7 +7943,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);
@@ -7938,7 +7992,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 {
@@ -7970,7 +8024,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;
@@ -8002,7 +8056,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;
@@ -8122,7 +8176,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);
@@ -8169,12 +8223,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;
@@ -8190,8 +8244,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 */
@@ -8273,7 +8327,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 {
@@ -8291,7 +8345,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:
@@ -8504,7 +8558,7 @@ a:focus-visible {
 
   @media (prefers-contrast: high) {
     .bc-lexical-code-block {
-      border-width: 2px;
+      border-width: var(--border-width-medium);
     }
   }
 }
@@ -8518,13 +8572,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 */
@@ -8551,7 +8605,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 {
@@ -8589,7 +8643,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);
 }
@@ -8636,7 +8690,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 {
@@ -8659,16 +8713,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 */
@@ -8687,7 +8741,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
@@ -8779,7 +8833,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;
 }
 
@@ -8806,24 +8861,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);
   }
 }
 
@@ -8841,7 +8896,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);
 }
 
@@ -8851,7 +8906,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);
 }
 
@@ -8912,7 +8967,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 {
@@ -8955,7 +9010,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);
 }
@@ -8989,7 +9044,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%);
 }
@@ -9002,7 +9057,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%);
 }
@@ -9016,7 +9071,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%);
 }
 
@@ -9029,7 +9084,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%);
 }
 
@@ -9041,8 +9096,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 {
@@ -9052,8 +9107,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 {
@@ -9063,8 +9118,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 {
@@ -9074,8 +9129,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 {
@@ -9086,7 +9141,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%);
 }
 
@@ -9099,7 +9154,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%);
 }
 
@@ -9111,8 +9166,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 {
@@ -9122,8 +9177,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 {
@@ -9133,8 +9188,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 {
@@ -9144,8 +9199,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 {
@@ -9155,19 +9210,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 */
@@ -9184,7 +9239,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);
 }
@@ -9204,7 +9259,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;
@@ -9227,7 +9282,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,
@@ -9240,7 +9296,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,
@@ -9253,7 +9309,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,
@@ -9266,7 +9323,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,
@@ -9304,7 +9361,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,
@@ -9317,7 +9375,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,
@@ -9378,12 +9436,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);
 }
 
@@ -9393,7 +9451,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);
 }
 
@@ -9411,22 +9469,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);
   }
 }
 
@@ -9514,8 +9572,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;
 }
 
@@ -9530,14 +9587,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);
@@ -9545,12 +9602,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;
 }
 
@@ -9560,11 +9617,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);
 }
 
@@ -9670,10 +9727,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))
@@ -9756,12 +9813,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);
 }
 
@@ -9920,32 +9977,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 {
@@ -9966,7 +10023,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)))
   );
 }
@@ -9982,11 +10039,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);
@@ -10003,7 +10060,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;
 }
@@ -10038,8 +10095,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;
@@ -10048,8 +10105,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);
 }
 
@@ -10062,8 +10119,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);
 }
 
@@ -10076,8 +10133,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);
 }
 
@@ -10120,7 +10177,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 {
@@ -10338,7 +10395,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,
@@ -10409,7 +10466,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)))
   );
 }
@@ -10440,7 +10497,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%;
 }
 
@@ -10480,11 +10537,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 */
@@ -10510,13 +10567,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 */
@@ -10545,13 +10602,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));
   }
 }
 
@@ -10687,7 +10744,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;
 }
@@ -10731,7 +10788,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)))
   );
 }
@@ -10790,7 +10847,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;
 }
 
@@ -10812,7 +10869,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 {
@@ -10853,7 +10910,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;
 }
 
@@ -10891,13 +10948,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 {
@@ -10925,8 +10982,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);
 }
 
@@ -10934,9 +10991,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);
@@ -10957,9 +11014,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 {
@@ -11008,7 +11065,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 {
@@ -11017,7 +11074,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 */
@@ -11027,8 +11084,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 */
@@ -11036,7 +11093,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,
@@ -11065,7 +11122,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 */
@@ -11117,7 +11174,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);
 }
@@ -11138,7 +11195,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);
 }
 
@@ -11198,7 +11255,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%;
 }
 
@@ -11228,8 +11285,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));
   }
 }
 
@@ -11240,15 +11297,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 {
@@ -11278,17 +11335,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)))
   );
 }
@@ -11300,12 +11357,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 {
@@ -11315,7 +11372,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) {
@@ -11331,13 +11388,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 {
@@ -11395,7 +11452,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 */
@@ -11454,7 +11511,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 */
@@ -11482,18 +11539,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 {
@@ -11529,8 +11586,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(
@@ -11549,23 +11606,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 {
@@ -11581,10 +11638,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 {
@@ -11592,18 +11649,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 {
@@ -11611,11 +11668,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);
@@ -11626,15 +11683,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);
@@ -11651,19 +11708,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 */
@@ -11685,12 +11742,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 {
@@ -11738,7 +11796,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);
@@ -11792,7 +11850,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 */
@@ -11802,7 +11860,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 */
@@ -11812,7 +11870,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,
@@ -11854,7 +11912,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);
 }
 
@@ -11873,7 +11931,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);
 }
 
@@ -11892,7 +11950,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 */
@@ -11946,7 +12004,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;
@@ -11962,7 +12020,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;
@@ -11977,7 +12035,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);
@@ -12033,8 +12091,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;
 }
 
@@ -12103,8 +12161,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 */
@@ -12150,7 +12208,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 {
@@ -12246,8 +12304,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;
 }
@@ -12305,7 +12363,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 {
@@ -12375,7 +12433,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 {
@@ -12383,11 +12441,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
@@ -12460,7 +12518,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;
@@ -12546,7 +12604,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;
@@ -12601,7 +12659,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));
@@ -12677,7 +12735,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),
@@ -12694,11 +12752,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);
   }
 }
 
@@ -12715,7 +12773,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%;
@@ -12734,7 +12792,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);
 }
@@ -12763,9 +12821,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);
 }
@@ -12778,7 +12836,7 @@ span.bc-sidebar-link {
   }
 
   .bc-toolbar__divider {
-    height: calc(var(--spacing-base) * 4);
+    height: var(--spacing-lg);
     margin: 0 var(--spacing-xs);
   }
 
@@ -12907,7 +12965,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;
 }
 
@@ -12938,7 +12996,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;
@@ -13073,7 +13131,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;
 }
@@ -13123,8 +13181,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 {
@@ -13134,7 +13192,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 {
@@ -13208,12 +13266,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;
@@ -13233,8 +13291,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);
@@ -13242,7 +13300,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;
 }
 
@@ -13291,8 +13349,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 {
@@ -13304,10 +13362,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
@@ -13328,10 +13386,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
@@ -13404,7 +13462,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);
@@ -13427,12 +13485,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 */
@@ -13571,7 +13629,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);
   }
 
@@ -13698,12 +13756,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)))
   );
 }
@@ -13714,7 +13772,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;
 }
 
@@ -13995,7 +14053,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;
@@ -14122,7 +14180,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%;
@@ -14155,7 +14213,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;
 }
 
@@ -14168,14 +14226,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
@@ -14286,7 +14344,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));
 }
@@ -14384,7 +14442,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);
@@ -14392,13 +14450,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 {
@@ -14410,23 +14468,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 {
@@ -14520,7 +14579,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));
   }
 }
 
@@ -14540,13 +14600,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 */
@@ -14555,7 +14615,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;
 }
@@ -14591,8 +14651,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 {
@@ -14622,8 +14682,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;
 }
@@ -14723,7 +14783,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;
@@ -14748,14 +14808,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) {
@@ -14763,8 +14823,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 {
@@ -14803,8 +14863,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 {
@@ -14857,8 +14917,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 {
@@ -14931,8 +14991,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 {
@@ -14977,8 +15037,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 {
@@ -15332,7 +15392,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);
@@ -15352,7 +15412,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;
 }
 
@@ -15370,7 +15430,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;
 }
 
@@ -15384,7 +15444,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 */
@@ -15610,7 +15670,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);
@@ -15718,14 +15778,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;
 }
@@ -15746,7 +15807,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;
 }
 
@@ -15763,8 +15824,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 {
@@ -15775,20 +15836,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 */
@@ -15814,7 +15875,7 @@ span.bc-sidebar-link {
 /* High contrast */
 @media (prefers-contrast: high) {
   .bc-toggle-button {
-    border-width: 2px;
+    border-width: var(--border-width-medium);
   }
 }