@tempots/beatui 0.22.0 → 0.24.0

package/dist/beatui.css

@@ -382,11 +382,19 @@ ol {
     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;
@@ -420,6 +428,15 @@ ol {
   --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);
@@ -500,17 +517,17 @@ ol {
   --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);
@@ -522,36 +539,80 @@ ol {
   --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);
 }
 
 
@@ -618,6 +679,10 @@ h5,
 h6 {
   font-size: inherit;
   font-weight: inherit;
+  font-family: var(
+    --default-heading-font-family,
+    var(--font-heading, var(--font-body, var(--font-family-sans)))
+  );
 }
 
 a {
@@ -889,7 +954,7 @@ input:where([type='button'], [type='reset'], [type='submit']),
 *: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 */
@@ -926,7 +991,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 */
@@ -937,7 +1002,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 {
@@ -949,7 +1014,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,
@@ -1011,9 +1076,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 */
@@ -1041,7 +1108,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;
   }
@@ -1102,7 +1169,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%;
 }
 
@@ -1136,33 +1203,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;
@@ -1177,18 +1244,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 */
@@ -1202,7 +1269,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;
 }
@@ -1216,7 +1283,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 {
@@ -1245,7 +1314,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 {
@@ -1253,7 +1322,7 @@ a:focus-visible {
   }
 
   .bc-auth-form__fields {
-    gap: var(--spacing-md);
+    gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
   }
 }
 
@@ -1273,7 +1342,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%;
 }
@@ -1287,7 +1356,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 {
@@ -1353,22 +1422,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 {
@@ -1420,6 +1496,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) {
@@ -1448,26 +1528,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);
 }
 
@@ -1520,7 +1602,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);
 }
 
@@ -1530,12 +1612,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 */
@@ -1546,7 +1628,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 */
@@ -1564,23 +1646,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 */
@@ -1596,94 +1678,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 {
@@ -1692,7 +1750,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;
 }
 
@@ -1713,7 +1773,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);
@@ -1722,10 +1782,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,
@@ -1735,7 +1811,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;
 }
 
@@ -1744,11 +1820,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 {
@@ -1786,7 +1864,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 */
@@ -1828,7 +1906,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 */
@@ -1856,8 +1934,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;
@@ -1871,9 +1949,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;
 }
@@ -1883,12 +1963,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);
 }
 
@@ -1902,7 +1982,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%;
 }
 
@@ -1949,7 +2029,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);
 }
 
@@ -1962,12 +2042,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);
 }
 
@@ -2111,14 +2191,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 */
@@ -2139,14 +2219,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;
 }
 
@@ -2165,7 +2245,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);
 }
 
@@ -2179,11 +2259,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 {
@@ -2191,7 +2271,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 */
@@ -2199,10 +2279,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 */
@@ -2482,7 +2564,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 {
@@ -2517,7 +2599,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;
 }
@@ -2569,7 +2651,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;
@@ -2605,7 +2687,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 {
@@ -2622,7 +2706,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);
 }
 
@@ -2653,8 +2737,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;
 }
@@ -2679,7 +2765,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 {
@@ -2717,24 +2803,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 {
@@ -2823,16 +2914,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;
 }
 
@@ -2852,17 +2945,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;
 }
 
@@ -2873,12 +2968,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 */
@@ -2907,7 +3002,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 {
@@ -2943,7 +3038,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 {
@@ -2952,7 +3047,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;
@@ -2969,12 +3064,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 {
@@ -3014,8 +3111,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);
 }
@@ -3072,7 +3169,6 @@ Checkmark icon .bc-checkbox-input__checkbox::after {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--spacing-md);
 }
 
 .bc-group--direction-column {
@@ -3112,19 +3208,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 {
@@ -3182,7 +3278,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;
 }
 
@@ -3190,9 +3286,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 */
@@ -3203,7 +3301,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;
 }
 
@@ -3221,7 +3319,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;
 }
 
@@ -3232,18 +3330,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;
 }
 
@@ -3329,7 +3427,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;
 }
 
@@ -3346,7 +3444,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 {
@@ -3370,13 +3468,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 {
@@ -3432,7 +3530,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 */
@@ -3440,7 +3538,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 */
@@ -3453,7 +3551,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 */
@@ -3475,14 +3573,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;
 }
 
@@ -3518,7 +3616,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);
 }
 
@@ -3532,11 +3630,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 {
@@ -3544,7 +3642,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 {
@@ -3557,7 +3655,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 {
@@ -3705,19 +3803,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 {
@@ -3725,31 +3823,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 {
@@ -3763,7 +3861,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 {
@@ -3771,17 +3869,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 {
@@ -3797,9 +3899,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 */
@@ -3811,8 +3913,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 */
@@ -3822,7 +3924,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);
 }
@@ -3911,8 +4015,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;
@@ -3936,11 +4040,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);
@@ -4133,13 +4239,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 {
@@ -4204,12 +4311,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) */
@@ -4454,7 +4563,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;
@@ -4735,7 +4844,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 {
@@ -4847,7 +4956,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 {
@@ -4877,13 +4988,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 > * {
@@ -4895,23 +5008,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);
 }
 
@@ -4936,72 +5049,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%;
 }
 
@@ -5021,13 +5134,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 {
@@ -5050,7 +5168,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 {
@@ -5066,7 +5184,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 {
@@ -5085,16 +5203,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 {
@@ -5136,12 +5256,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 {
@@ -5163,7 +5285,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 {
@@ -5179,7 +5301,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 {
@@ -5277,9 +5399,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;
 }
 
@@ -5288,7 +5411,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 {
@@ -5311,7 +5434,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 {
@@ -5345,8 +5470,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);
@@ -5360,23 +5485,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 */
@@ -5384,10 +5509,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;
 }
 
@@ -5404,9 +5531,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 {
@@ -5472,14 +5605,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);
 }
 
@@ -5511,7 +5648,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 {
@@ -5557,10 +5694,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);
 }
 
@@ -5600,8 +5739,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);
@@ -5627,7 +5766,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 {
@@ -5665,7 +5806,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 {
@@ -5674,7 +5815,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 */
@@ -5697,7 +5838,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 {
@@ -5706,7 +5847,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 */
@@ -5729,7 +5870,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 {
@@ -5738,12 +5879,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;
 }
 
@@ -5751,25 +5892,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);
 }
 
@@ -5822,21 +5974,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);
 }
@@ -5844,21 +6002,19 @@ span.bc-sidebar-link {
 .bc-stack {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   scroll-behavior: smooth;
-  gap: 0;
 }
 
 .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 {
@@ -5886,15 +6042,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 {
@@ -5937,12 +6099,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);
 }
 
@@ -5983,7 +6147,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 {
@@ -5996,7 +6160,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 */
@@ -6004,8 +6168,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 */
@@ -6044,8 +6213,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);
 }
@@ -6057,7 +6232,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 */
@@ -6066,7 +6241,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;
 }
 
@@ -6084,10 +6261,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;
@@ -6105,11 +6302,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;
 }
 
@@ -6218,12 +6419,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 {
@@ -6231,12 +6432,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 */
@@ -6294,18 +6495,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 */
@@ -6361,7 +6569,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 {
@@ -6404,12 +6614,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;
 }
@@ -6501,7 +6713,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;
@@ -6518,7 +6730,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 {
@@ -6575,9 +6787,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 {
@@ -6608,10 +6822,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%;
 }
@@ -6660,7 +6874,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 */
@@ -6699,13 +6913,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,
@@ -6735,9 +6951,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);
 }
@@ -6784,10 +7000,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 {
@@ -6805,9 +7021,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 {