@tempots/beatui 0.23.0 → 0.24.0

package/dist/beatui.tailwind.css

@@ -301,11 +301,19 @@
     system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-sans:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-family-serif:
     ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
   --font-family-mono:
     ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
     monospace;
+  --font-mono:
+    ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
+    monospace;
   --breakpoint-sm: 40rem;
   --breakpoint-md: 48rem;
   --breakpoint-lg: 64rem;
@@ -339,6 +347,15 @@
   --shadow-top-xl:
     0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --shadow-top-2xl: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
+  --motion-duration-instant: 0s;
+  --motion-duration-fast: 120ms;
+  --motion-duration-base: 200ms;
+  --motion-duration-slow: 320ms;
+  --motion-duration-relaxed: 480ms;
+  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-easing-emphasized: cubic-bezier(0.33, 1, 0.68, 1);
+  --motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
+  --motion-easing-exit: cubic-bezier(0.8, 0, 0.6, 1);
   --text-shadow-none: none;
   --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
   --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
@@ -421,17 +438,17 @@
   --color-warning-800: var(--color-amber-800);
   --color-warning-900: var(--color-amber-900);
   --color-warning-950: var(--color-amber-950);
-  --color-error-50: var(--color-red-50);
-  --color-error-100: var(--color-red-100);
-  --color-error-200: var(--color-red-200);
-  --color-error-300: var(--color-red-300);
-  --color-error-400: var(--color-red-400);
-  --color-error-500: var(--color-red-500);
-  --color-error-600: var(--color-red-600);
-  --color-error-700: var(--color-red-700);
-  --color-error-800: var(--color-red-800);
-  --color-error-900: var(--color-red-900);
-  --color-error-950: var(--color-red-950);
+  --color-danger-50: var(--color-red-50);
+  --color-danger-100: var(--color-red-100);
+  --color-danger-200: var(--color-red-200);
+  --color-danger-300: var(--color-red-300);
+  --color-danger-400: var(--color-red-400);
+  --color-danger-500: var(--color-red-500);
+  --color-danger-600: var(--color-red-600);
+  --color-danger-700: var(--color-red-700);
+  --color-danger-800: var(--color-red-800);
+  --color-danger-900: var(--color-red-900);
+  --color-danger-950: var(--color-red-950);
   --color-info-50: var(--color-blue-50);
   --color-info-100: var(--color-blue-100);
   --color-info-200: var(--color-blue-200);
@@ -443,36 +460,80 @@
   --color-info-800: var(--color-blue-800);
   --color-info-900: var(--color-blue-900);
   --color-info-950: var(--color-blue-950);
-  --bg-background-light: var(--color-gray-50);
-  --bg-surface-light: var(--color-gray-100);
-  --bg-subtle-light: var(--color-gray-200);
-  --bg-elevated-light: var(--color-gray-300);
-  --bg-raised-light: var(--color-gray-400);
-  --bg-overlay-light: var(--color-gray-500);
-  --bg-background-dark: var(--color-gray-950);
-  --bg-surface-dark: var(--color-gray-900);
-  --bg-subtle-dark: var(--color-gray-800);
-  --bg-elevated-dark: var(--color-gray-700);
-  --bg-raised-dark: var(--color-gray-600);
-  --bg-overlay-dark: var(--color-gray-500);
-  --text-normal-light: var(--color-gray-900);
-  --text-muted-light: var(--color-gray-600);
-  --text-inverted-light: var(--color-gray-100);
-  --text-normal-dark: var(--color-gray-100);
-  --text-muted-dark: var(--color-gray-400);
-  --text-inverted-dark: var(--color-gray-900);
-  --border-border-light: var(--color-gray-200);
-  --border-divider-light: var(--color-gray-300);
-  --border-inverted-light: var(--color-gray-100);
-  --border-border-dark: var(--color-gray-700);
-  --border-divider-dark: var(--color-gray-600);
-  --border-inverted-dark: var(--color-gray-900);
-  --interactive-focus-light: var(--color-blue-700);
-  --interactive-hover-light: var(--color-gray-100);
-  --interactive-active-light: var(--color-gray-200);
-  --interactive-focus-dark: var(--color-blue-300);
-  --interactive-hover-dark: var(--color-gray-800);
-  --interactive-active-dark: var(--color-gray-700);
+  --bg-background-light: var(--color-base-50);
+  --bg-surface-light: var(--color-base-100);
+  --bg-subtle-light: var(--color-base-200);
+  --bg-elevated-light: var(--color-base-300);
+  --bg-raised-light: var(--color-base-400);
+  --bg-overlay-light: var(--color-base-500);
+  --bg-background-dark: var(--color-base-950);
+  --bg-surface-dark: var(--color-base-900);
+  --bg-subtle-dark: var(--color-base-800);
+  --bg-elevated-dark: var(--color-base-700);
+  --bg-raised-dark: var(--color-base-600);
+  --bg-overlay-dark: var(--color-base-500);
+  --text-normal-light: var(--color-base-900);
+  --text-muted-light: var(--color-base-600);
+  --text-inverted-light: var(--color-base-100);
+  --text-normal-dark: var(--color-base-100);
+  --text-muted-dark: var(--color-base-400);
+  --text-inverted-dark: var(--color-base-900);
+  --border-border-light: var(--color-base-200);
+  --border-divider-light: var(--color-base-300);
+  --border-inverted-light: var(--color-base-100);
+  --border-border-dark: var(--color-base-700);
+  --border-divider-dark: var(--color-base-600);
+  --border-inverted-dark: var(--color-base-900);
+  --interactive-focus-light: var(--color-primary-700);
+  --interactive-hover-light: var(--color-base-100);
+  --interactive-active-light: var(--color-base-200);
+  --interactive-focus-dark: var(--color-primary-300);
+  --interactive-hover-dark: var(--color-base-800);
+  --interactive-active-dark: var(--color-base-700);
+  --font-body: var(--font-family-sans);
+  --font-heading: var(--font-family-sans);
+  --font-display: var(--font-family-sans);
+  --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);
+  --radius-control: var(--radius-md);
+  --radius-control-sm: var(--radius-sm);
+  --radius-control-xs: var(--radius-xs);
+  --radius-button: var(--radius-md);
+  --radius-surface: var(--radius-lg);
+  --radius-overlay: var(--radius-lg);
+  --radius-popover: var(--radius-md);
+  --radius-pill: var(--radius-full);
+  --radius-focus: var(--radius-sm);
+  --shadow-surface: var(--shadow-sm);
+  --shadow-surface-elevated: var(--shadow-md);
+  --shadow-popover: var(--shadow-lg);
+  --shadow-overlay: var(--shadow-xl);
+  --shadow-button: var(--shadow-xs);
+  --motion-transition-fast: var(--motion-duration-fast);
+  --motion-transition-medium: var(--motion-duration-base);
+  --motion-transition-slow: var(--motion-duration-slow);
+  --motion-transition-overlay: var(--motion-duration-relaxed);
+  --motion-transition-emphasis: var(--motion-duration-fast);
+  --motion-easing-standard: var(--motion-easing-standard);
+  --motion-easing-emphasis: var(--motion-easing-emphasized);
+  --motion-easing-entrance: var(--motion-easing-entrance);
+  --motion-easing-exit: var(--motion-easing-exit);
+  --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);
+  --text-shadow-button-filled: var(--text-shadow-sm);
+  --text-shadow-button-light: var(--text-shadow-xs);
+  --text-shadow-button-default: var(--text-shadow-2xs);
 }
 
 }
@@ -567,7 +628,7 @@
 *:focus-visible {
   outline: 2px solid var(--interactive-focus-light);
   outline-offset: -2px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-focus, var(--radius-sm));
 }
 
 /* Dark mode focus styles */
@@ -604,7 +665,7 @@ select:focus-visible,
 /* Link elements */
 a:focus-visible {
   outline-offset: -2px;
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius-focus, var(--radius-xs));
 }
 
 /* Custom component focus styles */
@@ -615,7 +676,7 @@ a:focus-visible {
 .bc-switch:focus-visible .bc-switch__track {
   outline: 2px solid var(--interactive-focus-light);
   outline-offset: -2px;
-  border-radius: var(--radius-full);
+  border-radius: var(--radius-pill, var(--radius-full));
 }
 
 .b-dark .bc-switch:focus-visible .bc-switch__track {
@@ -627,7 +688,7 @@ a:focus-visible {
 .bc-radio-input__radio:focus-visible {
   outline: 2px solid var(--interactive-focus-light);
   outline-offset: 2px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-focus, var(--radius-sm));
 }
 
 .b-dark .bc-checkbox-input__checkbox:focus-visible,
@@ -690,9 +751,11 @@ a:focus-visible {
   margin: 0 auto;
   padding: var(--spacing-2xl);
   background-color: var(--bg-surface-light);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  transition: all 0.2s ease-in-out;
+  border-radius: var(--radius-surface, var(--radius-lg));
+  box-shadow: var(--shadow-surface, var(--shadow-md));
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 /* Dark mode */
@@ -720,7 +783,7 @@ a:focus-visible {
     margin: 0;
     padding: var(--spacing-lg);
     border-radius: 0;
-    box-shadow: none;
+    box-shadow: var(--shadow-none, none);
     min-height: 100vh;
     justify-content: center;
   }
@@ -781,7 +844,7 @@ a:focus-visible {
 .bc-auth-form {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xl);
+  gap: var(--spacing-stack-xl, var(--spacing-xl));
   width: 100%;
 }
 
@@ -815,33 +878,33 @@ a:focus-visible {
 .bc-auth-form__social {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
+  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
 }
 
 /* Form fields */
 .bc-auth-form__form {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xl);
+  gap: var(--spacing-stack-xl, var(--spacing-xl));
 }
 
 .bc-auth-form__fields {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-lg);
+  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
 }
 
 /* Remember me checkbox */
 .bc-auth-form__remember-me {
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-stack-sm, var(--spacing-sm));
 }
 
 .bc-auth-form__checkbox-label {
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-stack-sm, var(--spacing-sm));
   font-size: var(--font-size-sm);
   color: var(--text-normal-light);
   cursor: pointer;
@@ -856,18 +919,18 @@ a:focus-visible {
 .bc-auth-form__terms {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-stack-xs, var(--spacing-xs));
 }
 
 /* Field error */
 .bc-auth-form__field-error {
   font-size: var(--font-size-xs);
-  color: var(--color-error-600);
+  color: var(--color-danger-600);
   margin-top: var(--spacing-xs);
 }
 
 .b-dark .bc-auth-form__field-error {
-  color: var(--color-error-400);
+  color: var(--color-danger-400);
 }
 
 /* Submit button */
@@ -881,7 +944,7 @@ a:focus-visible {
 .bc-auth-form__footer {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-stack-sm, var(--spacing-sm));
   align-items: center;
   text-align: center;
 }
@@ -895,7 +958,9 @@ a:focus-visible {
   cursor: pointer;
   padding: var(--spacing-xs);
   border-radius: var(--radius-sm);
-  transition: all 0.2s ease-in-out;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .bc-auth-form__link:hover {
@@ -924,7 +989,7 @@ a:focus-visible {
 /* Responsive adjustments */
 @media (width < 40rem) {
   .bc-auth-form {
-    gap: var(--spacing-lg);
+    gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
   }
 
   .bc-auth-form__title {
@@ -932,7 +997,7 @@ a:focus-visible {
   }
 
   .bc-auth-form__fields {
-    gap: var(--spacing-md);
+    gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
   }
 }
 
@@ -952,7 +1017,7 @@ a:focus-visible {
 }
 
 .bc-social-login-buttons.bc-stack {
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   padding-inline: calc(var(--spacing-base) * 8);
   width: 100%;
 }
@@ -966,7 +1031,7 @@ a:focus-visible {
   align-items: center;
   justify-content: center;
   width: 100%;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
 }
 
 .bc-social-login-button__icon {
@@ -1032,22 +1097,29 @@ a:focus-visible {
   --button-border: transparent;
   --button-border-dark: transparent;
   --button-hover-decoration: none;
+  --button-text-shadow: var(--text-shadow-none);
+  --button-text-shadow-dark: var(--text-shadow-none);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: calc(var(--spacing-base) / 2);
+  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
   border: 1.5px solid var(--button-border);
   cursor: pointer;
   font-weight: var(--font-weight-semibold);
-  font-family: inherit;
+  font-family: var(
+    --default-ui-font-family,
+    var(--font-ui, var(--font-body, var(--font-family-sans)))
+  );
   font-size: inherit;
   line-height: 1;
-  border-radius: var(--radius-md);
-  transition: all 0.2s ease-in-out;
-  text-transform: capitalize;
+  border-radius: var(--radius-button, 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));
   background-color: var(--button-bg);
   color: var(--button-text);
+  text-shadow: var(--button-text-shadow, var(--text-shadow-none));
 }
 
 .bc-button > span {
@@ -1099,6 +1171,10 @@ a:focus-visible {
   background-color: var(--button-bg-dark);
   color: var(--button-text-dark);
   border-color: var(--button-border-dark);
+  text-shadow: var(
+    --button-text-shadow-dark,
+    var(--button-text-shadow, var(--text-shadow-none))
+  );
 }
 
 .b-dark .bc-button:hover:not(:disabled) {
@@ -1127,26 +1203,28 @@ a:focus-visible {
 .bc-card {
   display: flex;
   flex-direction: column;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-surface, var(--radius-lg));
   border: 1px solid var(--color-base-200);
   padding: var(--spacing-md);
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-surface, var(--shadow-md));
   background-color: var(--color-base-50);
-  transition: all 0.2s ease-in-out;
+  transition: transform
+    var(--motion-transition-medium, var(--motion-duration-base, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 /* Card variants */
 .bc-card--elevated {
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-surface-elevated, var(--shadow-lg));
 }
 
 .bc-card--flat {
-  box-shadow: none;
+  box-shadow: var(--shadow-none, none);
   border: 1px solid var(--color-base-200);
 }
 
 .bc-card--outlined {
-  box-shadow: none;
+  box-shadow: var(--shadow-none, none);
   border: 2px solid var(--color-base-300);
 }
 
@@ -1199,7 +1277,7 @@ a:focus-visible {
 /* Dark mode styles */
 .b-dark .bc-card {
   background-color: var(--bg-surface-dark);
-  border: 1px solid var(--border-dark);
+  border: 1px solid var(--border-border-dark);
   color: var(--text-normal-dark);
 }
 
@@ -1209,12 +1287,12 @@ a:focus-visible {
 
 .b-dark .bc-card--flat {
   border: 1px solid var(--border-divider-dark);
-  box-shadow: none;
+  box-shadow: var(--shadow-none, none);
 }
 
 .b-dark .bc-card--outlined {
-  border: 2px solid var(--border-dark);
-  box-shadow: none;
+  border: 2px solid var(--border-border-dark);
+  box-shadow: var(--shadow-none, none);
 }
 
 /* Center Component */
@@ -1225,7 +1303,7 @@ a:focus-visible {
   justify-content: center;
   height: 100%;
   width: 100%;
-  gap: var(--spacing-lg);
+  gap: var(--spacing-stack-lg, var(--spacing-lg));
 }
 
 /* Center Horizontal Only */
@@ -1243,23 +1321,23 @@ a:focus-visible {
 }
 
 .bc-center--gap-xs {
-  gap: var(--spacing-xs);
+  gap: var(--spacing-stack-xs, var(--spacing-xs));
 }
 
 .bc-center--gap-sm {
-  gap: var(--spacing-sm);
+  gap: var(--spacing-stack-sm, var(--spacing-sm));
 }
 
 .bc-center--gap-md {
-  gap: var(--spacing-md);
+  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
 }
 
 .bc-center--gap-lg {
-  gap: var(--spacing-lg);
+  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
 }
 
 .bc-center--gap-xl {
-  gap: var(--spacing-xl);
+  gap: var(--spacing-stack-xl, var(--spacing-xl));
 }
 
 /* Center content wrapper */
@@ -1275,94 +1353,70 @@ a:focus-visible {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
 }
 
-/* Checkbox element - custom styled */
 .bc-checkbox-input__checkbox {
-  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: calc(var(--spacing-base) * 7);
   height: calc(var(--spacing-base) * 7);
-  background-color: var(--color-sky-600);
-  --svg: url('https://api.iconify.design/akar-icons/box.svg');
-  -webkit-mask-image: var(--svg);
-  mask-image: var(--svg);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+  color: var(--color-base-400);
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  transition: color
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   flex-shrink: 0;
+  line-height: 0;
 }
 
-/* Focus styles are handled by the base focus system */
-
-/* Checked state */
 .bc-checkbox-input__checkbox--checked {
-  --svg: url('https://api.iconify.design/akar-icons/check-box-fill.svg');
-}
-
-Checkmark icon .bc-checkbox-input__checkbox::after {
-  content: '';
-  position: absolute;
-  width: calc(var(--spacing-base) * 2);
-  height: calc(var(--spacing-base) * 1);
-  border: 2px solid transparent;
-  border-left: 2px solid var(--color-white);
-  border-bottom: 2px solid var(--color-white);
-  transform: rotate(-45deg) scale(0);
-  transition: transform 0.15s ease-in-out;
+  color: var(--color-primary-600);
 }
 
-.bc-checkbox-input__checkbox--checked::after {
-  transform: rotate(-45deg) scale(1);
+.bc-checkbox-input__checkbox--unchecked {
+  color: var(--color-base-400);
 }
 
-/* Disabled state */
 .bc-checkbox-input__checkbox--disabled {
-  background-color: var(--bg-subtle-light);
-  border-color: var(--border-divider-light);
   cursor: not-allowed;
+  color: var(--text-muted-light);
   opacity: 0.6;
 }
 
-.bc-checkbox-input__checkbox--disabled::after {
-  border-left-color: var(--text-muted-light);
-  border-bottom-color: var(--text-muted-light);
+.bc-checkbox-input__checkbox:focus-visible,
+.bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
+  outline: 1px solid var(--interactive-focus-light);
+  outline-offset: -1px;
+  border-radius: var(--radius-lg);
 }
 
-/* Checkbox label */
 .bc-checkbox-input__label {
   cursor: pointer;
   user-select: none;
 }
 
-/* Dark mode styles */
 .b-dark .bc-checkbox-input__checkbox {
-  background-color: var(--bg-surface-dark);
-  border-color: var(--border-dark);
+  color: var(--color-base-500);
 }
 
 .b-dark .bc-checkbox-input__checkbox--checked {
-  background-color: var(--color-indigo-500);
-  border-color: var(--color-indigo-500);
+  color: var(--color-primary-400);
+}
+
+.b-dark .bc-checkbox-input__checkbox--unchecked {
+  color: var(--color-base-500);
 }
 
 .b-dark .bc-checkbox-input__checkbox--disabled {
-  background-color: var(--bg-subtle-dark);
-  border-color: var(--border-divider-dark);
-  opacity: 0.5;
+  color: var(--text-muted-dark);
 }
 
-.b-dark .bc-checkbox-input__checkbox--disabled::after {
-  border-left-color: var(--text-muted-dark);
-  border-bottom-color: var(--text-muted-dark);
+.b-dark .bc-checkbox-input__checkbox:focus-visible,
+.b-dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
+  outline: 2px solid var(--interactive-focus-dark);
+  outline-offset: 2px;
 }
 
 .b-dark .bc-checkbox-input__label {
@@ -1371,7 +1425,9 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 
 .bc-collapse {
   overflow: hidden;
-  transition: height 0.4s ease-in-out;
+  transition: height
+    var(--motion-transition-slow, var(--motion-duration-slow, 0.4s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   --collapse-height: auto;
 }
 
@@ -1392,7 +1448,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .bc-color-input__control {
   position: relative;
   display: inline-block;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-control, var(--radius-md));
   overflow: visible;
   cursor: pointer;
   border: 1px solid var(--color-neutral-300);
@@ -1401,10 +1457,26 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .bc-color-input__control--alpha {
   /* subtle checkerboard background to visualize transparency */
   background-image:
-    linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%),
-    linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.08) 75%),
-    linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.08) 75%);
+    linear-gradient(
+      45deg,
+      color-mix(in srgb, var(--color-black) 8%, transparent) 25%,
+      transparent 25%
+    ),
+    linear-gradient(
+      -45deg,
+      color-mix(in srgb, var(--color-black) 8%, transparent) 25%,
+      transparent 25%
+    ),
+    linear-gradient(
+      45deg,
+      transparent 75%,
+      color-mix(in srgb, var(--color-black) 8%, transparent) 75%
+    ),
+    linear-gradient(
+      -45deg,
+      transparent 75%,
+      color-mix(in srgb, var(--color-black) 8%, transparent) 75%
+    );
   background-size: 10px 10px;
   background-position:
     0 0,
@@ -1414,7 +1486,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .bc-color-input__control:focus-within {
-  outline: 2px solid var(--color-sky-600);
+  outline: 2px solid var(--interactive-focus-light);
   outline-offset: 2px;
 }
 
@@ -1423,11 +1495,13 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   width: 100%;
   height: 100%;
   pointer-events: none; /* ensure clicks go to the native input */
-  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+  filter: drop-shadow(
+    0 1px 1px color-mix(in srgb, var(--color-black) 10%, transparent)
+  );
 }
 
 .bc-input-container--error .bc-color-input__control:focus-within {
-  outline: 2px solid var(--color-red-600);
+  outline: 2px solid var(--color-danger-600);
 }
 
 .bc-color-input__native {
@@ -1465,7 +1539,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .b-dark .bc-input-container--error .bc-color-input__control:focus-within {
-  outline: 2px solid var(--color-red-400);
+  outline: 2px solid var(--color-danger-400);
 }
 
 /* Responsive styles */
@@ -1507,7 +1581,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
 }
 
 /* Display area for selected value */
@@ -1535,8 +1609,8 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .bc-dropdown__listbox {
   background-color: var(--color-white);
   border: 1px solid var(--color-gray-300);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
+  border-radius: var(--radius-popover, var(--radius-md));
+  box-shadow: var(--shadow-popover, var(--shadow-lg));
   padding: 0;
   z-index: var(--z-index-popover);
   min-width: 12rem;
@@ -1550,9 +1624,11 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   display: flex;
   align-items: center;
   padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-control-sm, var(--radius-sm));
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  transition: background-color
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   color: var(--color-gray-900);
   background-color: transparent;
 }
@@ -1562,12 +1638,12 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .bc-dropdown__option--focused {
-  background-color: var(--color-sky-100);
-  color: var(--color-sky-900);
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-900);
 }
 
 .bc-dropdown__option--selected {
-  background-color: var(--color-sky-600);
+  background-color: var(--color-primary-600);
   color: var(--color-white);
 }
 
@@ -1581,7 +1657,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .bc-dropdown__option-content {
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-stack-sm, var(--spacing-sm));
   width: 100%;
 }
 
@@ -1628,7 +1704,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 /* Dark mode styles */
 .b-dark .bc-dropdown__listbox {
   background-color: var(--bg-surface-dark);
-  border-color: var(--border-dark);
+  border-color: var(--border-border-dark);
   color: var(--text-normal-dark);
 }
 
@@ -1641,12 +1717,12 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .b-dark .bc-dropdown__option--focused {
-  background-color: var(--color-sky-900);
-  color: var(--color-sky-100);
+  background-color: var(--color-primary-900);
+  color: var(--color-primary-100);
 }
 
 .b-dark .bc-dropdown__option--selected {
-  background-color: var(--color-sky-600);
+  background-color: var(--color-primary-500);
   color: var(--color-white);
 }
 
@@ -1790,14 +1866,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
 }
 
 /* Label container */
 .bc-control-input-wrapper__label {
   display: flex;
   align-items: center;
-  gap: calc(var(--spacing-base) / 2);
+  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
 }
 
 /* Label text styles */
@@ -1818,14 +1894,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .bc-control-input-wrapper__label-text--error {
-  color: var(--color-red-600);
+  color: var(--color-danger-600);
   font-weight: var(--font-weight-normal);
 }
 
 /* Required symbol */
 .bc-control-input-wrapper__required {
   font-size: var(--font-size-xs);
-  color: var(--color-red-600);
+  color: var(--color-danger-600);
   vertical-align: top;
 }
 
@@ -1844,7 +1920,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 /* Error message */
 .bc-control-input-wrapper__error {
   font-size: var(--font-size-sm);
-  color: var(--color-red-500);
+  color: var(--color-danger-500);
   line-height: var(--line-height-normal);
 }
 
@@ -1858,11 +1934,11 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .b-dark .bc-control-input-wrapper__label-text--error {
-  color: var(--color-red-300);
+  color: var(--color-danger-300);
 }
 
 .b-dark .bc-control-input-wrapper__required {
-  color: var(--color-red-400);
+  color: var(--color-danger-400);
 }
 
 .b-dark .bc-control-input-wrapper__description {
@@ -1870,7 +1946,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .b-dark .bc-control-input-wrapper__error {
-  color: var(--color-red-400);
+  color: var(--color-danger-400);
 }
 
 /* Drawer Component */
@@ -1878,10 +1954,12 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   z-index: var(--z-index-modal);
   display: flex;
   flex-direction: column;
-  box-shadow: var(--shadow-xl);
+  box-shadow: var(--shadow-overlay, var(--shadow-xl));
   background-color: var(--color-base-100);
   overflow: hidden;
-  transition: transform 0.3s ease-in-out;
+  transition: transform
+    var(--motion-transition-overlay, var(--motion-duration-slow, 0.3s))
+    var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
 }
 
 /* Animation states for drawer sliding - specific transforms are defined per side below */
@@ -2161,7 +2239,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .b-dark .bc-drawer {
   background-color: var(--bg-surface-dark);
   color: var(--text-normal-dark);
-  border: 1px solid var(--border-dark);
+  border: 1px solid var(--border-border-dark);
 }
 
 .b-dark .bc-drawer__header {
@@ -2196,7 +2274,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   border-bottom: 1px dashed var(--color-gray-300);
   display: flex;
   flex-direction: row;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   align-items: flex-start;
   cursor: pointer;
 }
@@ -2248,7 +2326,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .bc-editable-text__display {
   display: flex;
   flex-direction: row;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
@@ -2284,7 +2362,9 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.2s ease-in-out;
+  transition: background-color
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .bc-editable-text__edit-button:focus-visible {
@@ -2301,7 +2381,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 
 /* Dark mode styles */
 .b-dark .bc-editable-text {
-  border-bottom-color: var(--border-dark);
+  border-bottom-color: var(--border-border-dark);
   color: var(--text-normal-dark);
 }
 
@@ -2332,8 +2412,10 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   width: 100%;
   min-height: 120px;
   border: 2px dashed var(--color-gray-300);
-  border-radius: var(--radius-md);
-  transition: all 0.2s ease-in-out;
+  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;
 }
@@ -2358,7 +2440,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   height: 100%;
   min-height: 120px;
   text-align: center;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
 }
 
 .bc-file-input__drop-zone-content--empty {
@@ -2396,24 +2478,29 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
-  gap: calc(var(--spacing-base) * 3);
+  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
 }
 
 .bc-file-input__file-item {
   display: flex;
   align-items: center;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   padding: calc(var(--spacing-base) * 2);
   border: 1px solid var(--color-gray-200);
   border-radius: var(--radius-sm);
   background-color: var(--color-white);
-  transition: all 0.2s ease-in-out;
+  transition:
+    border-color
+      var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+    box-shadow var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   width: 18rem;
 }
 
 .bc-file-input__file-item:hover {
   border-color: var(--color-gray-300);
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-surface, var(--shadow-sm));
 }
 
 .bc-file-input__file-item:last-child {
@@ -2502,16 +2589,18 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   background-color: transparent;
   color: var(--color-gray-400);
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .bc-file-input__remove-button:hover {
-  background-color: var(--color-red-50);
-  color: var(--color-red-500);
+  background-color: var(--color-danger-50);
+  color: var(--color-danger-500);
 }
 
 .bc-file-input__remove-button:focus {
-  outline: 2px solid var(--color-red-500);
+  outline: 2px solid var(--color-danger-500);
   outline-offset: 2px;
 }
 
@@ -2531,17 +2620,19 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .bc-file-input__clear-all-button:hover {
-  border-color: var(--color-red-300);
-  background-color: var(--color-red-50);
-  color: var(--color-red-600);
+  border-color: var(--color-danger-300);
+  background-color: var(--color-danger-50);
+  color: var(--color-danger-600);
 }
 
 .bc-file-input__clear-all-button:focus {
-  outline: 2px solid var(--color-red-500);
+  outline: 2px solid var(--color-danger-500);
   outline-offset: 2px;
 }
 
@@ -2552,12 +2643,12 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 
 /* Error State */
 .bc-base-input-container--error .bc-file-input__drop-zone {
-  border-color: var(--color-red-300);
+  border-color: var(--color-danger-300);
 }
 
 .bc-base-input-container--error .bc-file-input__drop-zone:hover {
-  border-color: var(--color-red-400);
-  background-color: var(--color-red-50);
+  border-color: var(--color-danger-400);
+  background-color: var(--color-danger-50);
 }
 
 /* Disabled State */
@@ -2586,7 +2677,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   .bc-file-input__file-item {
     flex-direction: column;
     align-items: flex-start;
-    gap: calc(var(--spacing-base) * 2);
+    gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   }
 
   .bc-file-input__remove-button {
@@ -2622,7 +2713,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   text-overflow: ellipsis;
   display: flex;
   flex-wrap: wrap;
-  gap: calc(var(--spacing-base));
+  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
 }
 
 .bc-file-input__compact-value-item {
@@ -2631,7 +2722,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   padding: calc(var(--spacing-base) / 2) calc(var(--spacing-base) * 2);
   display: flex;
   align-items: center;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   flex-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2648,12 +2739,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   background-color: transparent;
   color: var(--color-gray-400);
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .bc-file-input__compact-clear:hover {
-  background-color: var(--color-red-50);
-  color: var(--color-red-500);
+  background-color: var(--color-danger-50);
+  color: var(--color-danger-500);
 }
 
 .bc-file-input__compact-clear:disabled {
@@ -2693,8 +2786,8 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   /* Base flyout styles */
   background-color: var(--color-neutral-50);
   border: 1px solid var(--color-neutral-200);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
+  border-radius: var(--radius-popover, var(--radius-md));
+  box-shadow: var(--shadow-popover, var(--shadow-lg));
   padding: var(--spacing-sm);
   z-index: var(--z-index-popover);
 }
@@ -2790,19 +2883,19 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .bc-group--gap-1 {
-  gap: calc(var(--spacing-base) * 1);
+  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
 }
 
 .bc-group--gap-2 {
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
 }
 
 .bc-group--gap-4 {
-  gap: calc(var(--spacing-base) * 4);
+  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
 }
 
 .bc-group--gap-md {
-  gap: var(--spacing-md);
+  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
 }
 
 .bc-group--grow {
@@ -2860,7 +2953,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   overflow: hidden;
 }
 
@@ -2868,9 +2961,11 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   width: 100%;
   padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 4);
   border: 0;
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-sm);
-  transition: all 0.2s ease-in-out;
+  border-radius: var(--radius-control, var(--radius-md));
+  box-shadow: var(--shadow-surface, var(--shadow-sm));
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 /* Default state */
@@ -2881,7 +2976,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 
 .bc-input-container--default {
   background-color: var(--color-white);
-  outline: 1px solid var(--color-gray-300);
+  outline: 1px solid var(--border-divider-light);
   outline-offset: -1px;
 }
 
@@ -2899,7 +2994,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 
 .bc-input-container--disabled {
   background-color: var(--color-gray-200);
-  outline: 2px solid var(--color-gray-300);
+  outline: 2px solid var(--border-divider-light);
   outline-offset: -2px;
 }
 
@@ -2910,18 +3005,18 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 /* Focus within state */
 .bc-input-container:focus-within {
   z-index: 10;
-  outline: 2px solid var(--color-sky-600);
+  outline: 2px solid var(--interactive-focus-light);
   outline-offset: -2px;
 }
 
 /* Error state */
 .bc-input-container--error {
-  outline: 2px solid var(--color-error-600);
+  outline: 2px solid var(--color-danger-600);
   outline-offset: -2px;
 }
 
 .bc-input-container--error:focus-within {
-  outline: 2px solid var(--color-red-600);
+  outline: 2px solid var(--color-danger-600);
   outline-offset: -2px;
 }
 
@@ -3007,7 +3102,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   align-items: center;
 }
 
@@ -3024,7 +3119,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .b-dark .bc-input-container--default {
   background-color: var(--bg-surface-dark);
   color: var(--text-normal-dark);
-  outline: 2px solid var(--border-dark);
+  outline: 2px solid var(--border-border-dark);
 }
 
 .b-dark .bc-input-container--default:focus-within {
@@ -3048,13 +3143,13 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .b-dark .bc-input-container--error {
-  outline: 2px solid var(--color-red-400);
-  background-color: var(--color-red-950);
+  outline: 2px solid var(--color-danger-400);
+  background-color: var(--color-danger-950);
 }
 
 .b-dark .bc-input-container--error:focus-within {
-  outline: 2px solid var(--color-red-400);
-  background-color: var(--color-red-900);
+  outline: 2px solid var(--color-danger-400);
+  background-color: var(--color-danger-900);
 }
 
 .b-dark .bc-input-container__password-toggle {
@@ -3110,7 +3205,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .bc-input-wrapper--horizontal {
   flex-direction: row;
   align-items: center;
-  gap: calc(var(--spacing-base) * 4);
+  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
 }
 
 /* Label header container */
@@ -3118,7 +3213,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
 }
 
 /* Label section container */
@@ -3131,7 +3226,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .bc-input-wrapper__label {
   display: flex;
   align-items: center;
-  gap: calc(var(--spacing-base) / 2);
+  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
 }
 
 /* Label text styles */
@@ -3153,14 +3248,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .bc-input-wrapper__label-text--error {
-  color: var(--color-red-600);
+  color: var(--color-danger-600);
   font-weight: var(--font-weight-normal);
 }
 
 /* Required symbol */
 .bc-input-wrapper__required {
   font-size: var(--font-size-xs);
-  color: var(--color-red-600);
+  color: var(--color-danger-600);
   vertical-align: top;
 }
 
@@ -3196,7 +3291,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 /* Error message */
 .bc-input-wrapper__error {
   font-size: var(--font-size-sm);
-  color: var(--color-red-500);
+  color: var(--color-danger-500);
   line-height: var(--line-height-normal);
 }
 
@@ -3210,11 +3305,11 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .b-dark .bc-input-wrapper__label-text--error {
-  color: var(--color-red-300);
+  color: var(--color-danger-300);
 }
 
 .b-dark .bc-input-wrapper__required {
-  color: var(--color-red-400);
+  color: var(--color-danger-400);
 }
 
 .b-dark .bc-input-wrapper__description {
@@ -3222,7 +3317,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .b-dark .bc-input-wrapper__error {
-  color: var(--color-red-400);
+  color: var(--color-danger-400);
 }
 
 .bc-json-schema-object {
@@ -3235,7 +3330,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .bc-schema-grid--gap-4 {
-  gap: calc(var(--spacing-base) * 4);
+  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
 }
 
 .bc-schema-grid--cols-1 {
@@ -3383,19 +3478,19 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .bc-array-control__indicator--error {
-  color: var(--color-red-600);
+  color: var(--color-danger-600);
 }
 
 .bc-array-control__indicator--success {
-  color: var(--color-green-600);
+  color: var(--color-success-600);
 }
 
 .b-dark .bc-array-control__indicator--error {
-  color: var(--color-red-400);
+  color: var(--color-danger-400);
 }
 
 .b-dark .bc-array-control__indicator--success {
-  color: var(--color-green-400);
+  color: var(--color-success-400);
 }
 
 .bc-array-control__summary {
@@ -3403,31 +3498,31 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .bc-array-control__summary--success {
-  color: var(--color-green-600);
+  color: var(--color-success-600);
 }
 
 .bc-array-control__summary--error {
-  color: var(--color-red-600);
+  color: var(--color-danger-600);
   font-weight: var(--font-weight-medium);
 }
 
 .b-dark .bc-array-control__summary--success {
-  color: var(--color-green-300);
+  color: var(--color-success-300);
 }
 
 .b-dark .bc-array-control__summary--error {
-  color: var(--color-red-300);
+  color: var(--color-danger-300);
 }
 
 .bc-object-helpers__row {
   display: grid;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   grid-template-columns: 2fr 3fr min-content;
 }
 
 .bc-object-helpers__error {
   font-size: var(--font-size-sm);
-  color: var(--color-red-600);
+  color: var(--color-danger-600);
 }
 
 .bc-object-helpers__description {
@@ -3441,7 +3536,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .b-dark .bc-object-helpers__error {
-  color: var(--color-red-400);
+  color: var(--color-danger-400);
 }
 
 .b-dark .bc-object-helpers__description {
@@ -3449,17 +3544,21 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 }
 
 .bc-json-schema-form__error {
-  color: var(--color-red-600);
+  color: var(--color-danger-600);
   font-size: var(--font-size-sm);
 }
 
 .b-dark .bc-json-schema-form__error {
-  color: var(--color-red-400);
+  color: var(--color-danger-400);
 }
 
 .bc-label {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
+  font-family: var(
+    --default-ui-font-family,
+    var(--font-ui, var(--font-body, var(--font-family-sans)))
+  );
 }
 
 .bc-label--emphasis {
@@ -3475,9 +3574,9 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   opacity: 0.5;
 }
 
-.bc-label--error {
+.bc-label--danger {
   font-weight: var(--font-weight-medium);
-  color: var(--color-error-500);
+  color: var(--color-danger-500);
 }
 
 /* Dark mode styles */
@@ -3489,8 +3588,8 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   color: var(--text-muted-dark);
 }
 
-.b-dark .bc-label--error {
-  color: var(--color-error-400);
+.b-dark .bc-label--danger {
+  color: var(--color-danger-400);
 }
 
 /* Link Component */
@@ -3500,7 +3599,9 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   --link-hover-color: var(--link-color);
   --link-hover-color-dark: var(--link-color-dark);
 
-  transition: color 0.2s ease-in-out;
+  transition: color
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   cursor: pointer;
   color: var(--link-color);
 }
@@ -3589,8 +3690,8 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .bc-menu {
   background-color: var(--color-neutral-50);
   border: 1px solid var(--color-neutral-200);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
+  border-radius: var(--radius-popover, var(--radius-md));
+  box-shadow: var(--shadow-popover, var(--shadow-lg));
   padding: var(--spacing-xs);
   z-index: var(--z-index-popover);
   min-width: 12rem;
@@ -3614,11 +3715,13 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .bc-menu-item {
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-stack-sm, var(--spacing-sm));
   padding: var(--spacing-xs) var(--spacing-sm);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-control-sm, var(--radius-sm));
   cursor: pointer;
-  transition: all 0.15s ease-in-out;
+  transition: background-color
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.15s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   color: var(--text-normal-light);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
@@ -3811,13 +3914,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   .bc-menu {
     min-width: 100%;
     max-width: 100vw;
-    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    border-radius: var(--radius-popover, var(--radius-lg))
+      var(--radius-popover, var(--radius-lg)) 0 0;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     max-height: 50vh;
-    box-shadow: var(--shadow-xl);
+    box-shadow: var(--shadow-overlay, var(--shadow-xl));
   }
 
   .bc-menu-item {
@@ -3882,12 +3986,14 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   width: 100%;
   display: flex;
   flex-direction: column;
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
+  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);
   overflow: hidden;
-  transition: all 0.3s ease-in-out;
+  transition: all
+    var(--motion-transition-overlay, var(--motion-duration-slow, 0.3s))
+    var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
 }
 
 /* Modal anchored to body (default) */
@@ -4132,7 +4238,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 /* Modal footer */
 .bc-modal__footer {
   display: flex;
-  gap: var(--spacing-md);
+  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
   padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
   border-top: 1px solid var(--color-base-300);
   flex-shrink: 0;
@@ -4413,7 +4519,7 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
 .bc-modal__actions {
   display: flex;
   justify-content: flex-end;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
 }
 
 .bc-native-select {
@@ -4525,7 +4631,9 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   outline: 1px solid var(--color-gray-300);
   outline-offset: -1px;
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .bc-number-input-steppers-button .bc-icon {
@@ -4555,13 +4663,15 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   width: 100%;
   height: 100%;
   z-index: var(--z-index-overlay);
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color
+    var(--motion-transition-overlay, var(--motion-duration-relaxed, 0.3s))
+    var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
 }
 
 .bc-overlay[data-status='start-opening'],
 .bc-overlay[data-status='closing'] {
   backdrop-filter: blur(0);
-  background-color: rgba(0, 0, 0, 0);
+  background-color: transparent;
 }
 
 .bc-overlay > * {
@@ -4573,23 +4683,23 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .bc-overlay--effect-transparent {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: color-mix(in srgb, var(--color-black) 5%, transparent);
 }
 
 .bc-overlay--effect-opaque[data-status='opened'],
 .bc-overlay--effect-opaque[data-status='opening'] {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: color-mix(in srgb, var(--color-black) 50%, transparent);
   backdrop-filter: blur(2px);
 }
 
 /* Dark mode styles */
 .b-dark .bc-overlay--effect-transparent {
-  background-color: rgba(255, 255, 255, 0.02);
+  background-color: color-mix(in srgb, var(--color-white) 2%, transparent);
 }
 
 .b-dark .bc-overlay--effect-opaque[data-status='opened'],
 .b-dark .bc-overlay--effect-opaque[data-status='opening'] {
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: color-mix(in srgb, var(--color-black) 80%, transparent);
   backdrop-filter: blur(4px);
 }
 
@@ -4614,72 +4724,72 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .bc-panel--side-all {
-  border: 1px solid var(--border-light);
+  border: 1px solid var(--border-border-light);
 }
 
 .bc-panel--side-top {
-  border-top: 1px solid var(--border-light);
+  border-top: 1px solid var(--border-border-light);
 }
 
 .bc-panel--side-bottom {
-  border-bottom: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-border-light);
 }
 
 .bc-panel--side-left {
-  border-left: 1px solid var(--border-light);
+  border-left: 1px solid var(--border-border-light);
 }
 
 .bc-panel--side-right {
-  border-right: 1px solid var(--border-light);
+  border-right: 1px solid var(--border-border-light);
 }
 
 /* Direction-aware panel borders */
 .bc-panel--side-inline-start {
-  border-inline-start: 1px solid var(--border-light);
+  border-inline-start: 1px solid var(--border-border-light);
 }
 
 .bc-panel--side-inline-end {
-  border-inline-end: 1px solid var(--border-light);
+  border-inline-end: 1px solid var(--border-border-light);
 }
 
 .bc-panel--shadow-sm {
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-surface, var(--shadow-sm));
 }
 
 .bc-panel--shadow-md {
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-surface-elevated, var(--shadow-md));
 }
 
 .bc-panel--shadow-lg {
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-overlay, var(--shadow-lg));
 }
 
 /* Dark mode styles */
 .b-dark .bc-panel--side-all {
-  border: 1px solid var(--border-dark);
+  border: 1px solid var(--border-border-dark);
 }
 
 .b-dark .bc-panel--side-top {
-  border-top: 1px solid var(--border-dark);
+  border-top: 1px solid var(--border-border-dark);
 }
 
 .b-dark .bc-panel--side-bottom {
-  border-bottom: 1px solid var(--border-dark);
+  border-bottom: 1px solid var(--border-border-dark);
 }
 
 .b-dark .bc-panel--side-left {
-  border-left: 1px solid var(--border-dark);
+  border-left: 1px solid var(--border-border-dark);
 }
 
 .b-dark .bc-panel--side-right {
-  border-right: 1px solid var(--border-dark);
+  border-right: 1px solid var(--border-border-dark);
 }
 
 /* Password Strength Indicator Component */
 .bc-password-strength {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-stack-sm, var(--spacing-sm));
   width: 100%;
 }
 
@@ -4699,13 +4809,18 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 .bc-password-strength__fill {
   height: 100%;
   border-radius: var(--radius-full);
-  transition: all 0.3s ease-in-out;
-  background-color: var(--color-error-500);
+  transition:
+    background-color
+      var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
+      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+    width var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
+      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  background-color: var(--color-danger-500);
 }
 
 /* Strength levels */
 .bc-password-strength--weak .bc-password-strength__fill {
-  background-color: var(--color-error-500);
+  background-color: var(--color-danger-500);
 }
 
 .bc-password-strength--fair .bc-password-strength__fill {
@@ -4728,7 +4843,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .bc-password-strength--weak .bc-password-strength__label {
-  color: var(--color-error-600);
+  color: var(--color-danger-600);
 }
 
 .bc-password-strength--fair .bc-password-strength__label {
@@ -4744,7 +4859,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .b-dark .bc-password-strength--weak .bc-password-strength__label {
-  color: var(--color-error-400);
+  color: var(--color-danger-400);
 }
 
 .b-dark .bc-password-strength--fair .bc-password-strength__label {
@@ -4763,16 +4878,18 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 .bc-password-strength__requirements {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-stack-xs, var(--spacing-xs));
 }
 
 .bc-password-strength__requirement {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-stack-xs, var(--spacing-xs));
   font-size: var(--font-size-xs);
   color: var(--text-muted-light);
-  transition: color 0.2s ease-in-out;
+  transition: color
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .b-dark .bc-password-strength__requirement {
@@ -4814,12 +4931,14 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 .bc-password-strength-bar__fill {
   height: 100%;
   border-radius: var(--radius-full);
-  transition: all 0.3s ease-in-out;
-  background-color: var(--color-error-500);
+  transition: all
+    var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  background-color: var(--color-danger-500);
 }
 
 .bc-password-strength-bar--weak .bc-password-strength-bar__fill {
-  background-color: var(--color-error-500);
+  background-color: var(--color-danger-500);
 }
 
 .bc-password-strength-bar--fair .bc-password-strength-bar__fill {
@@ -4841,7 +4960,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .bc-password-strength-text--weak {
-  color: var(--color-error-600);
+  color: var(--color-danger-600);
 }
 
 .bc-password-strength-text--fair {
@@ -4857,7 +4976,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .b-dark .bc-password-strength-text--weak {
-  color: var(--color-error-400);
+  color: var(--color-danger-400);
 }
 
 .b-dark .bc-password-strength-text--fair {
@@ -4955,9 +5074,10 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   width: 100%;
   height: 20px;
   position: absolute;
-  transition: all;
-  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  transition-duration: 0.5s;
+  transition: box-shadow
+    var(--motion-transition-slow, var(--motion-duration-slow, 0.5s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  box-shadow: var(--shadow-scrollable-panel-idle, 0 0 0 transparent);
   background-color: transparent;
 }
 
@@ -4966,7 +5086,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .bc-scrollable-panel--scrolled-down .bc-scrollable-panel--header-shadow > div {
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-surface-elevated, var(--shadow-md));
 }
 
 .bc-scrollable-panel--footer-shadow > div {
@@ -4989,7 +5109,9 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 .bc-scrollable-panel__body::-webkit-scrollbar-thumb {
   background: var(--color-base-400);
   border-radius: var(--radius-sm);
-  transition: background-color 0.2s ease-in-out;
+  transition: background-color
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
@@ -5023,8 +5145,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 /* Segmented Control Component */
 .bc-segmented-control {
   background-color: var(--color-base-200);
-  border-radius: var(--radius-full);
-  box-shadow: var(--shadow-sm);
+  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);
   padding: var(--spacing-sm);
@@ -5038,23 +5160,23 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 }
 
 .bc-segmented-control--size-xs .bc-segmented-control__container {
-  gap: var(--spacing-xs);
+  gap: var(--spacing-stack-xs, var(--spacing-xs));
 }
 
 .bc-segmented-control--size-sm .bc-segmented-control__container {
-  gap: var(--spacing-sm);
+  gap: var(--spacing-stack-sm, var(--spacing-sm));
 }
 
 .bc-segmented-control--size-md .bc-segmented-control__container {
-  gap: var(--spacing-md);
+  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
 }
 
 .bc-segmented-control--size-lg .bc-segmented-control__container {
-  gap: var(--spacing-lg);
+  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
 }
 
 .bc-segmented-control--size-xl .bc-segmented-control__container {
-  gap: var(--spacing-xl);
+  gap: var(--spacing-stack-xl, var(--spacing-xl));
 }
 
 /* Sliding indicator */
@@ -5062,10 +5184,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   position: absolute;
   height: 100%;
   background-color: var(--color-base-50);
-  transition: all 0.2s ease-in-out;
+  transition: transform
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   transform: translateX(0);
-  border-radius: var(--radius-full);
-  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius-pill, var(--radius-full));
+  box-shadow: var(--shadow-surface, var(--shadow-sm));
   z-index: 1;
 }
 
@@ -5082,9 +5206,15 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   font-weight: var(--font-weight-semibold);
   text-transform: capitalize;
   color: var(--color-base-700);
-  transition: color 0.2s ease-in-out;
+  transition: color
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   z-index: 2;
-  border-radius: var(--radius-full);
+  border-radius: var(--radius-pill, var(--radius-full));
+  font-family: var(
+    --default-ui-font-family,
+    var(--font-ui, var(--font-body, var(--font-family-sans)))
+  );
 }
 
 .bc-segmented-control--size-xs .bc-segmented-control__segment {
@@ -5150,14 +5280,18 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
 .b-dark .bc-segmented-control__indicator {
   background-color: var(--bg-elevated-dark);
-  box-shadow:
+  box-shadow: var(
+    --shadow-segmented-control-indicator-dark,
     0 1px 3px var(--shadow-color-dark),
-    0 0 0 1px var(--shadow-highlight-dark);
+    0 0 0 1px var(--shadow-highlight-dark)
+  );
 }
 
 .b-dark .bc-segmented-control__segment {
   color: var(--text-muted-dark);
-  transition: all 0.2s ease-in-out;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   border-radius: var(--radius-full);
 }
 
@@ -5189,7 +5323,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
 
 .b-dark .bc-segmented-control--disabled .bc-segmented-control__indicator {
   background-color: var(--bg-subtle-dark);
-  box-shadow: none;
+  box-shadow: var(--shadow-none, none);
 }
 
 .b-dark .bc-segmented-control--disabled .bc-segmented-control__segment {
@@ -5235,10 +5369,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-  transition: all 0.2s ease-in-out;
+  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);
 }
 
@@ -5278,8 +5414,8 @@ span.bc-sidebar-link {
   justify-content: center;
   width: calc(var(--spacing-base) * 6);
   height: calc(var(--spacing-base) * 6);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
+  border: 1px solid var(--border-border-light);
+  border-radius: var(--radius-control, var(--radius-md));
   cursor: pointer;
   padding: var(--spacing-sm);
   color: var(--text-normal-light);
@@ -5305,7 +5441,9 @@ span.bc-sidebar-link {
 }
 
 .bc-sidebar-group-collapsible-indicator {
-  transition: all 0.2s ease-in-out;
+  transition: transform
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .bc-sidebar-group-collapsible--open .bc-sidebar-group-collapsible-indicator {
@@ -5343,7 +5481,7 @@ span.bc-sidebar-link {
 
 .b-dark .bc-sidebar-link--action {
   color: var(--text-normal-dark);
-  border: 1px solid var(--border-dark);
+  border: 1px solid var(--border-border-dark);
 }
 
 .b-dark .bc-sidebar-link--action:hover {
@@ -5352,7 +5490,7 @@ span.bc-sidebar-link {
 }
 
 .b-dark .bc-sidebar-group--rail {
-  border-inline-start: 1px solid var(--border-dark);
+  border-inline-start: 1px solid var(--border-border-dark);
 }
 
 /* Dark background mode styles - inverted colors in light theme */
@@ -5375,7 +5513,7 @@ span.bc-sidebar-link {
 
 .bc-sidebar--dark-bg .bc-sidebar-link--action {
   color: var(--text-normal-dark);
-  border: 1px solid var(--border-dark);
+  border: 1px solid var(--border-border-dark);
 }
 
 .bc-sidebar--dark-bg .bc-sidebar-link--action:hover {
@@ -5384,7 +5522,7 @@ span.bc-sidebar-link {
 }
 
 .bc-sidebar--dark-bg .bc-sidebar-group--rail {
-  border-inline-start: 1px solid var(--border-dark);
+  border-inline-start: 1px solid var(--border-border-dark);
 }
 
 /* Dark background mode in dark theme - inverted back to light colors */
@@ -5407,7 +5545,7 @@ span.bc-sidebar-link {
 
 .b-dark .bc-sidebar--dark-bg .bc-sidebar-link--action {
   color: var(--text-normal-light);
-  border: 1px solid var(--border-light);
+  border: 1px solid var(--border-border-light);
 }
 
 .b-dark .bc-sidebar--dark-bg .bc-sidebar-link--action:hover {
@@ -5416,12 +5554,12 @@ span.bc-sidebar-link {
 }
 
 .b-dark .bc-sidebar--dark-bg .bc-sidebar-group--rail {
-  border-inline-start: 1px solid var(--border-light);
+  border-inline-start: 1px solid var(--border-border-light);
 }
 
 .bc-sidebar-separator {
   border: none;
-  border-top: 1px solid var(--border-light);
+  border-top: 1px solid var(--border-border-light);
   margin: calc(var(--spacing-base) * 2) 0;
 }
 
@@ -5429,25 +5567,36 @@ span.bc-sidebar-link {
 .bc-sink {
   display: flex;
   flex-direction: column;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-surface, var(--radius-lg));
   border: 1px solid var(--color-base-300);
   padding: var(--spacing-md);
-  box-shadow: inset 0 0 0.25rem rgba(0, 0, 0, 0.2);
+  box-shadow: var(
+    --shadow-sink,
+    inset 0 0 0.25rem color-mix(in srgb, var(--color-black) 20%, transparent)
+  );
   background-color: var(--color-base-50);
-  transition: all 0.2s ease-in-out;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 /* Sink variants */
 .bc-sink--deep {
-  box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.3);
+  box-shadow: var(
+    --shadow-sink-deep,
+    inset 0 0 0.5rem color-mix(in srgb, var(--color-black) 30%, transparent)
+  );
 }
 
 .bc-sink--shallow {
-  box-shadow: inset 0 0 0.125rem rgba(0, 0, 0, 0.1);
+  box-shadow: var(
+    --shadow-sink-shallow,
+    inset 0 0 0.125rem color-mix(in srgb, var(--color-black) 10%, transparent)
+  );
 }
 
 .bc-sink--flat {
-  box-shadow: none;
+  box-shadow: var(--shadow-sink-flat, none);
   border: 1px solid var(--color-base-200);
 }
 
@@ -5500,21 +5649,27 @@ span.bc-sidebar-link {
 /* Dark mode styles */
 .b-dark .bc-sink {
   background-color: var(--bg-background-dark);
-  border: 1px solid var(--border-dark);
-  box-shadow: inset 0 2px 4px var(--shadow-color-dark);
+  border: 1px solid var(--border-border-dark);
+  box-shadow: var(--shadow-sink-dark, inset 0 2px 4px var(--shadow-color-dark));
   color: var(--text-normal-dark);
 }
 
 .b-dark .bc-sink--deep {
-  box-shadow: inset 0 4px 8px var(--shadow-color-dark);
+  box-shadow: var(
+    --shadow-sink-dark-deep,
+    inset 0 4px 8px var(--shadow-color-dark)
+  );
 }
 
 .b-dark .bc-sink--shallow {
-  box-shadow: inset 0 1px 2px var(--shadow-color-dark);
+  box-shadow: var(
+    --shadow-sink-dark-shallow,
+    inset 0 1px 2px var(--shadow-color-dark)
+  );
 }
 
 .b-dark .bc-sink--flat {
-  box-shadow: none;
+  box-shadow: var(--shadow-sink-dark-flat, none);
   border: 1px solid var(--border-divider-dark);
   background-color: var(--bg-subtle-dark);
 }
@@ -5526,15 +5681,15 @@ span.bc-sidebar-link {
 }
 
 .bc-stack--gap-1 {
-  gap: calc(var(--spacing-base) * 1);
+  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
 }
 
 .bc-stack--gap-2 {
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
 }
 
 .bc-stack--gap-4 {
-  gap: calc(var(--spacing-base) * 4);
+  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
 }
 
 .bc-stack--align-center {
@@ -5562,15 +5717,21 @@ span.bc-sidebar-link {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  border-radius: var(--radius-full);
+  border-radius: var(--radius-pill, var(--radius-full));
   line-height: 1.2;
   border: 1px solid var(--tag-border);
-  transition: all 0.2s ease-in-out;
+  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-base);
   padding: 0 calc(var(--spacing-base) * 2);
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   background-color: var(--tag-bg);
   color: var(--tag-text);
+  font-family: var(
+    --default-ui-font-family,
+    var(--font-ui, var(--font-body, var(--font-family-sans)))
+  );
 }
 
 .bc-tag:hover {
@@ -5613,12 +5774,14 @@ span.bc-sidebar-link {
   width: calc(var(--spacing-base) * 4);
   height: calc(var(--spacing-base) * 4);
   border-radius: var(--radius-full);
-  transition: all 0.2s ease-in-out;
+  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;
 }
 
 .bc-tag__close:hover {
-  color: white;
+  color: var(--color-white);
   border-color: var(--color-gray-300);
 }
 
@@ -5659,7 +5822,7 @@ span.bc-sidebar-link {
 
 .b-dark .bc-tag__close:hover:not(:disabled) {
   color: var(--text-normal-dark);
-  border-color: var(--border-dark);
+  border-color: var(--border-border-dark);
 }
 
 .bc-input-container__tags-selector {
@@ -5672,7 +5835,7 @@ span.bc-sidebar-link {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
 }
 
 /* Switch Component */
@@ -5680,8 +5843,13 @@ span.bc-sidebar-link {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  gap: calc(var(--spacing-base) * 2);
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
   cursor: pointer;
+  --switch-track-on-bg: var(--color-primary-500);
+  --switch-track-on-label: var(--color-gray-100);
+  --switch-track-on-bg-dark: var(--color-primary-600);
+  --switch-track-on-label-dark: var(--text-normal-dark);
+  --switch-track-on-border-dark: var(--color-primary-500);
 }
 
 /* Switch label */
@@ -5720,8 +5888,14 @@ span.bc-sidebar-link {
   display: grid;
   grid-template-areas: 'stack';
   border-radius: var(--radius-full);
-  box-shadow: inset 0 0 calc(var(--spacing-base)) rgba(0, 0, 0, 0.2);
-  transition: all 0.2s ease-in-out;
+  box-shadow: var(
+    --shadow-switch-track,
+    inset 0 0 calc(var(--spacing-base))
+      color-mix(in srgb, var(--color-black) 20%, transparent)
+  );
+  transition: background-color
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   cursor: pointer;
   padding: calc(var(--spacing-base)) var(--spacing-base);
 }
@@ -5733,7 +5907,7 @@ span.bc-sidebar-link {
 
 /* Switch track - on state */
 .bc-switch__track--on {
-  background-color: var(--color-primary-500);
+  background-color: var(--switch-track-on-bg, var(--color-primary-500));
 }
 
 /* Switch labels inside track */
@@ -5742,7 +5916,9 @@ span.bc-sidebar-link {
   display: flex;
   align-items: center;
   z-index: 1;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity
+    var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   pointer-events: none;
 }
 
@@ -5760,10 +5936,30 @@ span.bc-sidebar-link {
   justify-content: flex-start;
   padding-inline-end: calc(var(--spacing-base) * 5);
   padding-inline-start: var(--spacing-base);
-  color: var(--color-gray-100);
+  color: var(--switch-track-on-label, var(--color-gray-100));
   line-height: 1;
 }
 
+.bc-switch--size-xs .bc-switch__track-label {
+  font-size: var(--font-size-2xs);
+}
+
+.bc-switch--size-sm .bc-switch__track-label {
+  font-size: var(--font-size-xs);
+}
+
+.bc-switch--size-md .bc-switch__track-label {
+  font-size: var(--font-size-sm);
+}
+
+.bc-switch--size-lg .bc-switch__track-label {
+  font-size: var(--font-size-md);
+}
+
+.bc-switch--size-xl .bc-switch__track-label {
+  font-size: var(--font-size-lg);
+}
+
 /* Label visibility states */
 .bc-switch__track-label--visible {
   opacity: 1;
@@ -5781,11 +5977,15 @@ span.bc-sidebar-link {
   /* margin-top: calc(var(--spacing-base) / 2); */
   border-radius: var(--radius-full);
   background-color: var(--color-white);
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(
+    --shadow-switch-thumb,
+    0 1px 3px 0 color-mix(in srgb, var(--color-black) 10%, transparent),
+    0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent)
+  );
   z-index: 1;
-  transition: transform 0.2s ease-in-out;
+  transition: transform
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   pointer-events: none;
 }
 
@@ -5894,12 +6094,12 @@ span.bc-sidebar-link {
 
 .b-dark .bc-switch__track--off {
   background-color: var(--bg-subtle-dark);
-  border: 1px solid var(--border-dark);
+  border: 1px solid var(--border-border-dark);
 }
 
 .b-dark .bc-switch__track--on {
-  background-color: var(--color-primary-600);
-  border: 1px solid var(--color-primary-500);
+  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));
 }
 
 .b-dark .bc-switch__track-label--off {
@@ -5907,12 +6107,12 @@ span.bc-sidebar-link {
 }
 
 .b-dark .bc-switch__track-label--on {
-  color: var(--text-normal-dark);
+  color: var(--switch-track-on-label-dark, var(--text-normal-dark));
 }
 
 .b-dark .bc-switch__thumb {
   background-color: var(--text-normal-dark);
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-switch-thumb-dark, var(--shadow-md));
 }
 
 /* Tabs Component */
@@ -5970,18 +6170,25 @@ span.bc-sidebar-link {
   background: none;
   border: none;
   cursor: pointer;
-  font-family: inherit;
+  font-family: var(
+    --default-ui-font-family,
+    var(--font-ui, var(--font-body, var(--font-family-sans)))
+  );
   font-weight: var(--font-weight-medium);
   color: var(--color-base-600);
-  transition: all 0.2s ease-in-out;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   white-space: nowrap;
   position: relative;
-  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  border-radius: var(--radius-control-sm, var(--radius-sm))
+    var(--radius-control-sm, var(--radius-sm)) 0 0;
 }
 
 .bc-tabs--vertical .bc-tab {
   justify-content: flex-start;
-  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+  border-radius: var(--radius-control-sm, var(--radius-sm)) 0 0
+    var(--radius-control-sm, var(--radius-sm));
 }
 
 /* Tab Sizes */
@@ -6037,7 +6244,9 @@ span.bc-sidebar-link {
   content: '';
   position: absolute;
   background-color: var(--color-primary-500);
-  transition: all 0.2s ease-in-out;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .bc-tabs--horizontal .bc-tab--active::after {
@@ -6080,12 +6289,14 @@ span.bc-sidebar-link {
 .bc-tabs__panel {
   padding: var(--spacing-lg);
   background-color: var(--color-white);
-  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  border-radius: 0 0 var(--radius-popover, var(--radius-md))
+    var(--radius-popover, var(--radius-md));
   min-height: 200px;
 }
 
 .bc-tabs--vertical .bc-tabs__panel {
-  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  border-radius: 0 var(--radius-popover, var(--radius-md))
+    var(--radius-popover, var(--radius-md)) 0;
   height: 100%;
   overflow-y: auto;
 }
@@ -6177,7 +6388,7 @@ span.bc-sidebar-link {
   max-width: 200px;
   word-wrap: break-word;
   z-index: var(--z-index-tooltip);
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-popover, var(--shadow-md));
 
   /* Ensure tooltip text doesn't interfere with pointer events */
   pointer-events: none;
@@ -6194,7 +6405,7 @@ span.bc-sidebar-link {
 .bc-tooltip__arrow svg {
   width: 100%;
   height: 100%;
-  filter: drop-shadow(var(--shadow-md));
+  filter: drop-shadow(var(--shadow-popover, var(--shadow-md)));
 }
 
 .bc-tooltip__arrow svg path {
@@ -6251,9 +6462,11 @@ span.bc-sidebar-link {
   background-color: var(--bg-elevated-dark);
   color: var(--text-normal-dark);
   border: 1px solid var(--border-border-dark);
-  box-shadow:
+  box-shadow: var(
+    --shadow-tooltip-dark,
     0 10px 15px -3px var(--shadow-color-dark),
-    0 4px 6px -2px var(--shadow-color-dark);
+    0 4px 6px -2px var(--shadow-color-dark)
+  );
 }
 
 .b-dark .bc-tooltip__arrow svg path {
@@ -6284,10 +6497,10 @@ span.bc-sidebar-link {
 .bc-toolbar {
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-stack-sm, var(--spacing-sm));
   padding: var(--spacing-sm);
   border: 1px solid var(--color-neutral-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-control, var(--radius-md));
   background-color: var(--color-neutral-50);
   width: 100%;
 }
@@ -6336,7 +6549,7 @@ span.bc-sidebar-link {
   outline-width: 1px;
   outline-offset: -1px;
   width: auto;
-  box-shadow: none;
+  box-shadow: var(--shadow-none, none);
 }
 
 /* Container queries for responsive behavior */
@@ -6375,13 +6588,15 @@ span.bc-sidebar-link {
 /* Rating Input Component */
 .bc-rating-input {
   display: inline-flex;
-  gap: calc(var(--spacing-base) * 1);
+  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
 }
 
 .bc-rating-input__icon-container {
   position: relative;
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  transition: all
+    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
+    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .bc-rating-input__icon-empty,
@@ -6411,9 +6626,9 @@ span.bc-sidebar-link {
 .bc-notice {
   display: flex;
   flex-direction: row;
-  gap: var(--spacing-md);
+  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
   align-items: start;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-control, var(--radius-md));
   padding: var(--spacing-md);
   font-size: var(--font-size-sm);
 }
@@ -6460,10 +6675,10 @@ span.bc-sidebar-link {
   color: var(--color-warning-900);
 }
 
-.bc-notice--error.bc-notice--tone-prominent {
-  background-color: var(--color-error-50);
-  border-color: var(--color-error-200);
-  color: var(--color-error-900);
+.bc-notice--danger.bc-notice--tone-prominent {
+  background-color: var(--color-danger-50);
+  border-color: var(--color-danger-200);
+  color: var(--color-danger-900);
 }
 
 .bc-notice--info.bc-notice--tone-subtle {
@@ -6481,9 +6696,9 @@ span.bc-sidebar-link {
   color: var(--color-warning-800);
 }
 
-.bc-notice--error.bc-notice--tone-subtle {
+.bc-notice--danger.bc-notice--tone-subtle {
   background-color: var(--bg-surface-light);
-  color: var(--color-error-800);
+  color: var(--color-danger-800);
 }
 
 .bc-notice__body {