@chenzy-design/tokens 0.1.0

package/dist/tokens.css

@@ -0,0 +1,844 @@
+/* AUTO-GENERATED by @chenzy-design/tokens build — do not edit */
+:root {
+  /* --- Global --- */
+  --cd-color-grey-0: #f9f9f9;
+  --cd-color-grey-1: #e6e8ea;
+  --cd-color-grey-2: #c6cacd;
+  --cd-color-grey-3: #a7abb0;
+  --cd-color-grey-4: #888d92;
+  --cd-color-grey-5: #6b7075;
+  --cd-color-grey-6: #555b61;
+  --cd-color-grey-7: #41464c;
+  --cd-color-grey-8: #2e3238;
+  --cd-color-grey-9: #1c1f23;
+  --cd-color-blue-0: #eaf5ff;
+  --cd-color-blue-1: #cbe7fe;
+  --cd-color-blue-2: #98cdfd;
+  --cd-color-blue-3: #65b2fc;
+  --cd-color-blue-4: #3295fb;
+  --cd-color-blue-5: #0064fa;
+  --cd-color-blue-6: #0062d6;
+  --cd-color-blue-7: #004fb3;
+  --cd-color-blue-8: #003d8f;
+  --cd-color-blue-9: #002c6b;
+  --cd-color-green-0: #ecf7ec;
+  --cd-color-green-1: #d0f0d1;
+  --cd-color-green-2: #a4e0a7;
+  --cd-color-green-3: #7dd182;
+  --cd-color-green-4: #5ac262;
+  --cd-color-green-5: #3bb346;
+  --cd-color-green-6: #30953b;
+  --cd-color-green-7: #25772f;
+  --cd-color-green-8: #1b5924;
+  --cd-color-green-9: #113c18;
+  --cd-color-red-0: #fef2ed;
+  --cd-color-red-1: #feddd2;
+  --cd-color-red-2: #fdb7a5;
+  --cd-color-red-3: #fb9078;
+  --cd-color-red-4: #fa664c;
+  --cd-color-red-5: #f93920;
+  --cd-color-red-6: #d52515;
+  --cd-color-red-7: #b2140c;
+  --cd-color-red-8: #8e0805;
+  --cd-color-red-9: #6a0103;
+  --cd-color-orange-0: #fff8ea;
+  --cd-color-orange-1: #feeecc;
+  --cd-color-orange-2: #fed998;
+  --cd-color-orange-3: #fdc165;
+  --cd-color-orange-4: #fda633;
+  --cd-color-orange-5: #fc8800;
+  --cd-color-orange-6: #d26700;
+  --cd-color-orange-7: #a84a00;
+  --cd-color-orange-8: #7e3100;
+  --cd-color-orange-9: #541d00;
+  --cd-spacing-1: 4px;
+  --cd-spacing-2: 8px;
+  --cd-spacing-3: 12px;
+  --cd-spacing-4: 16px;
+  --cd-spacing-5: 20px;
+  --cd-spacing-6: 24px;
+  --cd-spacing-8: 32px;
+  --cd-spacing-10: 40px;
+  --cd-spacing-12: 48px;
+  --cd-radius-1: 3px;
+  --cd-radius-2: 6px;
+  --cd-radius-3: 12px;
+  --cd-radius-full: 9999px;
+  --cd-font-size-1: 12px;
+  --cd-font-size-2: 14px;
+  --cd-font-size-3: 16px;
+  --cd-font-size-4: 20px;
+  --cd-font-size-5: 24px;
+  --cd-font-size-6: 32px;
+  --cd-font-weight-regular: 400;
+  --cd-font-weight-medium: 500;
+  --cd-font-weight-semibold: 600;
+  --cd-line-height-tight: 1.3;
+  --cd-line-height-normal: 1.5;
+  --cd-line-height-loose: 1.7;
+  --cd-shadow-1: 0 1px 2px rgba(0,0,0,.08);
+  --cd-shadow-2: 0 4px 12px rgba(0,0,0,.12);
+  --cd-shadow-3: 0 8px 24px rgba(0,0,0,.16);
+  --cd-motion-duration-fast: 120ms;
+  --cd-motion-duration-mid: 200ms;
+  --cd-motion-duration-slow: 320ms;
+  --cd-motion-ease-standard: cubic-bezier(.4,0,.2,1);
+  --cd-z-affix: 10;
+  --cd-z-sticky: 900;
+  --cd-z-dropdown: 1050;
+  --cd-z-modal: 1000;
+  --cd-z-popover: 1030;
+  --cd-z-toast: 1080;
+  --cd-z-tooltip: 1070;
+  --cd-breakpoint-sm: 576px;
+  --cd-breakpoint-md: 768px;
+  --cd-breakpoint-lg: 992px;
+  --cd-breakpoint-xl: 1200px;
+  --cd-breakpoint-xxl: 1600px;
+  /* --- Alias (semantic) --- */
+  --cd-color-primary: #0064fa;
+  --cd-color-primary-hover: #0062d6;
+  --cd-color-primary-active: #004fb3;
+  --cd-color-success: #3bb346;
+  --cd-color-warning: #fc8800;
+  --cd-color-danger: #f93920;
+  --cd-color-info: #0064fa;
+  --cd-color-link: #0064fa;
+  --cd-color-text-0: #1c1f23;
+  --cd-color-text-1: rgba(28, 31, 35, 0.8);
+  --cd-color-text-2: rgba(28, 31, 35, 0.62);
+  --cd-color-text-3: rgba(28, 31, 35, 0.35);
+  --cd-color-text-inverse: #ffffff;
+  --cd-color-bg-0: #ffffff;
+  --cd-color-bg-1: #f9f9f9;
+  --cd-color-bg-2: #e6e8ea;
+  --cd-color-bg-3: #c6cacd;
+  --cd-color-border: #e6e8ea;
+  --cd-color-fill-0: rgba(46, 50, 56, 0.05);
+  --cd-color-fill-1: rgba(46, 50, 56, 0.09);
+  --cd-color-focus: #0064fa;
+  --cd-focus-ring: 0 0 0 2px #98cdfd;
+  /* --- Component --- */
+  --cd-button-height-default: 32px;
+  --cd-button-height-small: 24px;
+  --cd-button-height-large: 40px;
+  --cd-button-padding-x: var(--cd-spacing-4);
+  --cd-button-radius: var(--cd-radius-2);
+  --cd-button-font-size: var(--cd-font-size-2);
+  --cd-button-color-bg-primary: var(--cd-color-primary);
+  --cd-button-color-text-primary: var(--cd-color-text-inverse);
+  --cd-icon-size-extra-small: 12px;
+  --cd-icon-size-small: 14px;
+  --cd-icon-size-default: 16px;
+  --cd-icon-size-large: 20px;
+  --cd-icon-size-extra-large: 24px;
+  --cd-icon-color: currentColor;
+  --cd-icon-color-warning: var(--cd-color-warning);
+  --cd-icon-color-error: var(--cd-color-danger);
+  --cd-icon-color-success: var(--cd-color-success);
+  --cd-icon-color-info: var(--cd-color-info);
+  --cd-icon-spin-duration: 1s;
+  --cd-icon-spin-timing: linear;
+  --cd-divider-color: var(--cd-color-border);
+  --cd-divider-thickness: 1px;
+  --cd-divider-spacing: var(--cd-spacing-4);
+  --cd-divider-text-color: var(--cd-color-text-2);
+  --cd-divider-text-font-size: var(--cd-font-size-2);
+  --cd-divider-text-gap: var(--cd-spacing-4);
+  --cd-space-tight: var(--cd-spacing-2);
+  --cd-space-medium: var(--cd-spacing-3);
+  --cd-space-loose: var(--cd-spacing-4);
+  --cd-typography-color: var(--cd-color-text-0);
+  --cd-typography-color-secondary: var(--cd-color-text-1);
+  --cd-typography-color-tertiary: var(--cd-color-text-2);
+  --cd-typography-color-link: var(--cd-color-primary);
+  --cd-typography-color-link-hover: var(--cd-color-primary-hover);
+  --cd-typography-mark-bg: var(--cd-color-warning);
+  --cd-typography-code-bg: var(--cd-color-fill-1);
+  --cd-typography-code-font-size: var(--cd-font-size-1);
+  --cd-typography-font-size-small: var(--cd-font-size-1);
+  --cd-typography-font-size-default: var(--cd-font-size-2);
+  --cd-typography-font-size-large: var(--cd-font-size-3);
+  --cd-grid-columns: 24;
+  --cd-grid-gutter-x: 0px;
+  --cd-grid-gutter-y: 0px;
+  --cd-layout-bg: var(--cd-color-bg-0);
+  --cd-layout-header-bg: var(--cd-color-bg-1);
+  --cd-layout-header-height: 60px;
+  --cd-layout-header-z: var(--cd-z-sticky);
+  --cd-layout-footer-bg: var(--cd-color-bg-1);
+  --cd-layout-footer-color: var(--cd-color-text-2);
+  --cd-layout-content-bg: var(--cd-color-bg-0);
+  --cd-layout-content-padding: var(--cd-spacing-6);
+  --cd-layout-sider-bg: var(--cd-color-bg-1);
+  --cd-layout-sider-width: 200px;
+  --cd-layout-sider-collapsed-width: 60px;
+  --cd-layout-sider-border: var(--cd-color-border);
+  --cd-layout-sider-trigger-bg: var(--cd-color-bg-2);
+  --cd-layout-sider-trigger-color: var(--cd-color-text-1);
+  --cd-layout-sider-trigger-hover-bg: var(--cd-color-fill-1);
+  --cd-layout-motion-duration: var(--cd-motion-duration-mid);
+  --cd-layout-motion-ease: var(--cd-motion-ease-standard);
+  --cd-input-height-default: 32px;
+  --cd-input-height-small: 24px;
+  --cd-input-height-large: 40px;
+  --cd-input-padding-x: var(--cd-spacing-3);
+  --cd-input-border: var(--cd-color-border);
+  --cd-input-radius: var(--cd-radius-2);
+  --cd-input-color-bg: var(--cd-color-bg-0);
+  --cd-input-color-text: var(--cd-color-text-0);
+  --cd-input-color-placeholder: var(--cd-color-text-3);
+  --cd-input-border-active: var(--cd-color-primary);
+  --cd-input-border-warning: var(--cd-color-warning);
+  --cd-input-border-error: var(--cd-color-danger);
+  --cd-input-font-size: var(--cd-font-size-2);
+  --cd-switch-height-default: 22px;
+  --cd-switch-height-small: 16px;
+  --cd-switch-height-large: 28px;
+  --cd-switch-width-default: 40px;
+  --cd-switch-width-small: 28px;
+  --cd-switch-width-large: 52px;
+  --cd-switch-bg-off: var(--cd-color-fill-1);
+  --cd-switch-bg-on: var(--cd-color-primary);
+  --cd-switch-knob-bg: var(--cd-color-bg-0);
+  --cd-switch-radius: var(--cd-radius-full);
+  --cd-checkbox-size-default: 16px;
+  --cd-checkbox-size-small: 14px;
+  --cd-checkbox-size-large: 18px;
+  --cd-checkbox-radius: var(--cd-radius-1);
+  --cd-checkbox-border: var(--cd-color-border);
+  --cd-checkbox-bg: var(--cd-color-bg-0);
+  --cd-checkbox-bg-checked: var(--cd-color-primary);
+  --cd-checkbox-border-checked: var(--cd-color-primary);
+  --cd-checkbox-mark-color: var(--cd-color-text-inverse);
+  --cd-checkbox-label-gap: var(--cd-spacing-2);
+  --cd-checkbox-card-padding: var(--cd-spacing-3) var(--cd-spacing-4);
+  --cd-checkbox-card-radius: var(--cd-radius-2);
+  --cd-checkbox-card-bg: var(--cd-color-bg-0);
+  --cd-checkbox-card-bg-hover: var(--cd-color-bg-1);
+  --cd-checkbox-card-border: var(--cd-color-border);
+  --cd-checkbox-card-border-checked: var(--cd-color-primary);
+  --cd-radio-size-default: 16px;
+  --cd-radio-size-small: 14px;
+  --cd-radio-size-large: 18px;
+  --cd-radio-border: var(--cd-color-border);
+  --cd-radio-bg: var(--cd-color-bg-0);
+  --cd-radio-color-checked: var(--cd-color-primary);
+  --cd-radio-dot-color: var(--cd-color-bg-0);
+  --cd-radio-color-warning: var(--cd-color-warning);
+  --cd-radio-color-error: var(--cd-color-danger);
+  --cd-radio-label-gap: var(--cd-spacing-2);
+  --cd-radio-button-height: var(--cd-control-height-md, 32px);
+  --cd-radio-button-height-small: var(--cd-control-height-sm, 24px);
+  --cd-radio-button-height-large: var(--cd-control-height-lg, 40px);
+  --cd-radio-card-radius: var(--cd-radius-medium, var(--cd-radius-2));
+  --cd-radio-card-border-checked: var(--cd-color-primary);
+  --cd-rating-size-default: 20px;
+  --cd-rating-size-small: 16px;
+  --cd-rating-size-large: 24px;
+  --cd-rating-gap: var(--cd-spacing-1);
+  --cd-rating-color-active: var(--cd-color-warning);
+  --cd-rating-color-inactive: var(--cd-color-fill-1);
+  --cd-slider-rail-height: 4px;
+  --cd-slider-rail-bg: var(--cd-color-fill-1);
+  --cd-slider-track-bg: var(--cd-color-primary);
+  --cd-slider-handle-size: 14px;
+  --cd-slider-handle-bg: var(--cd-color-bg-0);
+  --cd-slider-handle-border: var(--cd-color-primary);
+  --cd-slider-mark-color: var(--cd-color-text-2);
+  --cd-slider-radius: var(--cd-radius-full);
+  --cd-slider-status-warning: var(--cd-color-warning);
+  --cd-slider-status-error: var(--cd-color-danger);
+  --cd-form-item-gap: var(--cd-spacing-4);
+  --cd-form-label-color: var(--cd-color-text-0);
+  --cd-form-label-gap: var(--cd-spacing-2);
+  --cd-form-required-color: var(--cd-color-danger);
+  --cd-form-optional-color: var(--cd-color-text-2);
+  --cd-form-extra-color: var(--cd-color-text-2);
+  --cd-form-error-color: var(--cd-color-danger);
+  --cd-form-warning-color: var(--cd-color-warning);
+  --cd-form-error-font-size: var(--cd-font-size-1);
+  --cd-form-section-gap: var(--cd-spacing-4);
+  --cd-select-height-default: 32px;
+  --cd-select-height-small: 24px;
+  --cd-select-height-large: 40px;
+  --cd-select-padding-x: var(--cd-spacing-3);
+  --cd-select-border: var(--cd-color-border);
+  --cd-select-border-active: var(--cd-color-primary);
+  --cd-select-border-error: var(--cd-color-danger);
+  --cd-select-radius: var(--cd-radius-2);
+  --cd-select-bg: var(--cd-color-bg-0);
+  --cd-select-font-size: var(--cd-font-size-2);
+  --cd-select-dropdown-bg: var(--cd-color-bg-0);
+  --cd-select-dropdown-shadow: var(--cd-shadow-2);
+  --cd-select-dropdown-radius: var(--cd-radius-2);
+  --cd-select-dropdown-z: var(--cd-z-dropdown);
+  --cd-select-option-padding: var(--cd-spacing-2) var(--cd-spacing-3);
+  --cd-select-option-bg-hover: var(--cd-color-fill-0);
+  --cd-select-option-bg-active: var(--cd-color-fill-1);
+  --cd-select-option-color-selected: var(--cd-color-primary);
+  --cd-color-picker-trigger-size: 28px;
+  --cd-color-picker-trigger-radius: var(--cd-radius-2);
+  --cd-color-picker-trigger-border: var(--cd-color-border);
+  --cd-color-picker-status-warning: var(--cd-color-warning);
+  --cd-color-picker-status-error: var(--cd-color-danger);
+  --cd-color-picker-panel-bg: var(--cd-color-bg-0);
+  --cd-color-picker-panel-shadow: var(--cd-shadow-2);
+  --cd-color-picker-panel-radius: var(--cd-radius-3);
+  --cd-color-picker-panel-z: var(--cd-z-popover);
+  --cd-color-picker-panel-width: 240px;
+  --cd-color-picker-saturation-height: 140px;
+  --cd-color-picker-slider-height: 10px;
+  --cd-color-picker-handle-size: 12px;
+  --cd-color-picker-handle-border: var(--cd-color-bg-0);
+  --cd-color-picker-swatch-size: 20px;
+  --cd-date-picker-panel-bg: var(--cd-color-bg-0);
+  --cd-date-picker-panel-shadow: var(--cd-shadow-2);
+  --cd-date-picker-panel-radius: var(--cd-radius-3);
+  --cd-date-picker-panel-z: var(--cd-z-popover);
+  --cd-date-picker-cell-size: 32px;
+  --cd-date-picker-cell-radius: var(--cd-radius-2);
+  --cd-date-picker-cell-bg-hover: var(--cd-color-fill-0);
+  --cd-date-picker-cell-bg-selected: var(--cd-color-primary);
+  --cd-date-picker-cell-color-selected: var(--cd-color-text-inverse);
+  --cd-date-picker-cell-color-muted: var(--cd-color-text-3);
+  --cd-date-picker-header-color: var(--cd-color-text-0);
+  --cd-date-picker-weekday-color: var(--cd-color-text-2);
+  --cd-date-picker-time-col-width: 56px;
+  --cd-date-picker-time-item-height: 28px;
+  --cd-tree-node-height: 32px;
+  --cd-tree-node-padding-x: var(--cd-spacing-3);
+  --cd-tree-node-bg-hover: var(--cd-color-fill-0);
+  --cd-tree-node-bg-active: var(--cd-color-fill-1);
+  --cd-tree-node-color-selected: var(--cd-color-primary);
+  --cd-tree-indent: var(--cd-spacing-4);
+  --cd-tree-expand-icon-color: var(--cd-color-text-2);
+  --cd-tree-node-height-small: 28px;
+  --cd-tree-node-height-large: 36px;
+  --cd-tree-node-color: var(--cd-color-text-0);
+  --cd-tree-node-color-disabled: var(--cd-color-text-2);
+  --cd-tree-node-bg-selected: var(--cd-color-primary-light-default);
+  --cd-tree-search-highlight-bg: var(--cd-color-warning-light-default);
+  --cd-tree-search-highlight-color: var(--cd-color-warning);
+  --cd-tree-focus-ring: var(--cd-color-primary);
+  --cd-tree-border-color: var(--cd-color-border);
+  --cd-tree-border-color-warning: var(--cd-color-warning);
+  --cd-tree-border-color-error: var(--cd-color-danger);
+  --cd-cascader-column-width: 160px;
+  --cd-cascader-column-border: var(--cd-color-border);
+  --cd-transfer-panel-width: 200px;
+  --cd-transfer-panel-height: 240px;
+  --cd-transfer-panel-border: var(--cd-color-border);
+  --cd-transfer-panel-radius: var(--cd-radius-2);
+  --cd-transfer-panel-header-bg: var(--cd-color-fill-0);
+  --cd-transfer-item-height: 32px;
+  --cd-transfer-item-bg-hover: var(--cd-color-fill-0);
+  --cd-transfer-gap: var(--cd-spacing-3);
+  --cd-upload-dragger-border: var(--cd-color-border);
+  --cd-upload-dragger-border-active: var(--cd-color-primary);
+  --cd-upload-dragger-bg: var(--cd-color-fill-0);
+  --cd-upload-dragger-radius: var(--cd-radius-2);
+  --cd-upload-item-bg-hover: var(--cd-color-fill-0);
+  --cd-upload-item-color-error: var(--cd-color-danger);
+  --cd-upload-border-warning: var(--cd-color-warning);
+  --cd-upload-border-error: var(--cd-color-danger);
+  --cd-breadcrumb-color: var(--cd-color-text-2);
+  --cd-breadcrumb-color-active: var(--cd-color-text-0);
+  --cd-breadcrumb-color-link: var(--cd-color-primary);
+  --cd-breadcrumb-separator-color: var(--cd-color-text-3);
+  --cd-breadcrumb-gap: var(--cd-spacing-2);
+  --cd-breadcrumb-font-size: var(--cd-font-size-2);
+  --cd-pagination-item-size: 32px;
+  --cd-pagination-item-radius: var(--cd-radius-2);
+  --cd-pagination-item-border: var(--cd-color-border);
+  --cd-pagination-item-bg-active: var(--cd-color-primary);
+  --cd-pagination-item-color-active: var(--cd-color-text-inverse);
+  --cd-pagination-item-bg-hover: var(--cd-color-fill-0);
+  --cd-pagination-gap: var(--cd-spacing-2);
+  --cd-steps-icon-size: 28px;
+  --cd-steps-icon-bg: var(--cd-color-fill-1);
+  --cd-steps-icon-bg-process: var(--cd-color-primary);
+  --cd-steps-icon-bg-finish: var(--cd-color-primary);
+  --cd-steps-icon-bg-error: var(--cd-color-danger);
+  --cd-steps-icon-color: var(--cd-color-text-2);
+  --cd-steps-icon-color-active: var(--cd-color-text-inverse);
+  --cd-steps-title-color: var(--cd-color-text-0);
+  --cd-steps-desc-color: var(--cd-color-text-2);
+  --cd-steps-line-color: var(--cd-color-border);
+  --cd-steps-line-color-finish: var(--cd-color-primary);
+  --cd-tabs-tab-color: var(--cd-color-text-1);
+  --cd-tabs-tab-color-active: var(--cd-color-primary);
+  --cd-tabs-tab-color-disabled: var(--cd-color-text-3);
+  --cd-tabs-tab-padding: var(--cd-spacing-2) var(--cd-spacing-4);
+  --cd-tabs-tab-font-size: var(--cd-font-size-2);
+  --cd-tabs-ink-color: var(--cd-color-primary);
+  --cd-tabs-ink-height: 2px;
+  --cd-tabs-bar-border: var(--cd-color-border);
+  --cd-tabs-card-bg: var(--cd-color-fill-0);
+  --cd-tabs-card-bg-active: var(--cd-color-bg-0);
+  --cd-tabs-card-radius: var(--cd-radius-2);
+  --cd-tabs-button-bg: var(--cd-color-fill-0);
+  --cd-tabs-button-bg-hover: var(--cd-color-fill-1);
+  --cd-tabs-button-bg-active: var(--cd-color-primary);
+  --cd-tabs-button-color-active: var(--cd-color-white, #fff);
+  --cd-tabs-button-gap: 2px;
+  --cd-tabs-button-pad: 2px;
+  --cd-dropdown-bg: var(--cd-color-bg-0);
+  --cd-dropdown-shadow: var(--cd-shadow-2);
+  --cd-dropdown-radius: var(--cd-radius-2);
+  --cd-dropdown-z: var(--cd-z-dropdown);
+  --cd-dropdown-min-width: 120px;
+  --cd-dropdown-item-padding: var(--cd-spacing-2) var(--cd-spacing-3);
+  --cd-dropdown-item-bg-hover: var(--cd-color-fill-0);
+  --cd-dropdown-item-color-disabled: var(--cd-color-text-3);
+  --cd-menu-bg: var(--cd-color-bg-0);
+  --cd-menu-item-height: 40px;
+  --cd-menu-item-padding: var(--cd-spacing-3);
+  --cd-menu-item-color: var(--cd-color-text-1);
+  --cd-menu-item-color-selected: var(--cd-color-primary);
+  --cd-menu-item-color-disabled: var(--cd-color-text-3);
+  --cd-menu-item-bg-hover: var(--cd-color-fill-0);
+  --cd-menu-item-bg-selected: var(--cd-color-fill-0);
+  --cd-menu-item-indicator: var(--cd-color-primary);
+  --cd-menu-submenu-arrow-color: var(--cd-color-text-2);
+  --cd-anchor-link-color: var(--cd-color-text-2);
+  --cd-anchor-link-color-active: var(--cd-color-primary);
+  --cd-anchor-link-padding: var(--cd-spacing-1) var(--cd-spacing-3);
+  --cd-anchor-rail-color: var(--cd-color-border);
+  --cd-anchor-ink-color: var(--cd-color-primary);
+  --cd-anchor-ink-width: 2px;
+  --cd-tag-height-default: 24px;
+  --cd-tag-height-small: 20px;
+  --cd-tag-height-large: 28px;
+  --cd-tag-padding-x: var(--cd-spacing-2);
+  --cd-tag-radius: var(--cd-radius-1);
+  --cd-tag-font-size: var(--cd-font-size-1);
+  --cd-tag-gap: var(--cd-spacing-1);
+  --cd-avatar-size-extra-small: 20px;
+  --cd-avatar-size-small: 28px;
+  --cd-avatar-size-default: 36px;
+  --cd-avatar-size-large: 44px;
+  --cd-avatar-size-extra-large: 56px;
+  --cd-avatar-bg: var(--cd-color-fill-1);
+  --cd-avatar-color: var(--cd-color-text-1);
+  --cd-avatar-radius: var(--cd-radius-2);
+  --cd-badge-size: 18px;
+  --cd-badge-size-small: 14px;
+  --cd-badge-dot-size: 8px;
+  --cd-badge-bg: var(--cd-color-danger);
+  --cd-badge-color: var(--cd-color-text-inverse);
+  --cd-badge-font-size: var(--cd-font-size-1);
+  --cd-card-bg: var(--cd-color-bg-0);
+  --cd-card-border: var(--cd-color-border);
+  --cd-card-radius: var(--cd-radius-3);
+  --cd-card-padding: var(--cd-spacing-4);
+  --cd-card-padding-small: var(--cd-spacing-3);
+  --cd-card-header-border: var(--cd-color-border);
+  --cd-card-title-color: var(--cd-color-text-0);
+  --cd-card-shadow: var(--cd-shadow-1);
+  --cd-card-shadow-hover: var(--cd-shadow-2);
+  --cd-tooltip-bg-dark: var(--cd-color-text-0);
+  --cd-tooltip-color-dark: var(--cd-color-text-inverse);
+  --cd-tooltip-bg-light: var(--cd-color-bg-0);
+  --cd-tooltip-color-light: var(--cd-color-text-0);
+  --cd-tooltip-radius: var(--cd-radius-2);
+  --cd-tooltip-padding: var(--cd-spacing-1) var(--cd-spacing-2);
+  --cd-tooltip-font-size: var(--cd-font-size-1);
+  --cd-tooltip-shadow: var(--cd-shadow-2);
+  --cd-tooltip-z: var(--cd-z-tooltip);
+  --cd-tooltip-arrow-size: 6px;
+  --cd-tooltip-status-warning: var(--cd-color-warning);
+  --cd-tooltip-status-error: var(--cd-color-danger);
+  --cd-popover-bg: var(--cd-color-bg-0);
+  --cd-popover-color: var(--cd-color-text-0);
+  --cd-popover-radius: var(--cd-radius-3);
+  --cd-popover-padding: var(--cd-spacing-3) var(--cd-spacing-4);
+  --cd-popover-padding-small: var(--cd-spacing-2) var(--cd-spacing-3);
+  --cd-popover-padding-default: var(--cd-spacing-3) var(--cd-spacing-4);
+  --cd-popover-padding-large: var(--cd-spacing-4) var(--cd-spacing-5);
+  --cd-popover-shadow: var(--cd-shadow-3);
+  --cd-popover-z: var(--cd-z-popover);
+  --cd-popover-title-color: var(--cd-color-text-0);
+  --cd-popover-title-border: var(--cd-color-border);
+  --cd-popover-arrow-size: 8px;
+  --cd-popover-motion-duration: var(--cd-motion-duration-fast);
+  --cd-popover-motion-easing: var(--cd-motion-ease-standard);
+  --cd-empty-image-color: var(--cd-color-fill-1);
+  --cd-empty-title-color: var(--cd-color-text-1);
+  --cd-empty-desc-color: var(--cd-color-text-2);
+  --cd-empty-gap: var(--cd-spacing-3);
+  --cd-descriptions-label-color: var(--cd-color-text-2);
+  --cd-descriptions-value-color: var(--cd-color-text-0);
+  --cd-descriptions-border: var(--cd-color-border);
+  --cd-descriptions-label-bg: var(--cd-color-fill-0);
+  --cd-descriptions-cell-padding: var(--cd-spacing-2) var(--cd-spacing-3);
+  --cd-descriptions-row-gap: var(--cd-spacing-3);
+  --cd-collapse-header-padding: var(--cd-spacing-3) var(--cd-spacing-4);
+  --cd-collapse-header-color: var(--cd-color-text-0);
+  --cd-collapse-header-bg-hover: var(--cd-color-fill-0);
+  --cd-collapse-content-padding: var(--cd-spacing-3) var(--cd-spacing-4);
+  --cd-collapse-content-color: var(--cd-color-text-1);
+  --cd-collapse-border: var(--cd-color-border);
+  --cd-collapse-arrow-color: var(--cd-color-text-2);
+  --cd-collapse-motion-duration: var(--cd-motion-duration-mid);
+  --cd-timeline-dot-size: 10px;
+  --cd-timeline-dot-color: var(--cd-color-primary);
+  --cd-timeline-line-color: var(--cd-color-border);
+  --cd-timeline-content-color: var(--cd-color-text-0);
+  --cd-timeline-time-color: var(--cd-color-text-2);
+  --cd-timeline-gap: var(--cd-spacing-4);
+  --cd-list-bg: var(--cd-color-bg-0);
+  --cd-list-border: var(--cd-color-border);
+  --cd-list-radius: var(--cd-radius-2);
+  --cd-list-item-padding: var(--cd-spacing-3) var(--cd-spacing-4);
+  --cd-list-item-padding-small: var(--cd-spacing-2) var(--cd-spacing-3);
+  --cd-list-split-color: var(--cd-color-border);
+  --cd-list-header-color: var(--cd-color-text-0);
+  --cd-list-item-color: var(--cd-color-text-1);
+  --cd-image-bg: var(--cd-color-fill-0);
+  --cd-image-radius: var(--cd-radius-2);
+  --cd-image-placeholder-color: var(--cd-color-text-3);
+  --cd-image-mask-bg: rgba(0, 0, 0, 0.5);
+  --cd-image-mask-color: var(--cd-color-text-inverse);
+  --cd-image-preview-overlay: rgba(0, 0, 0, 0.7);
+  --cd-image-preview-z: var(--cd-z-modal);
+  --cd-highlight-bg: var(--cd-color-warning);
+  --cd-highlight-color: var(--cd-color-text-0);
+  --cd-virtual-list-bg: var(--cd-color-bg-0);
+  --cd-virtual-list-scrollbar: var(--cd-color-fill-1);
+  --cd-carousel-radius: var(--cd-radius-3);
+  --cd-carousel-indicator-color: rgba(255, 255, 255, 0.5);
+  --cd-carousel-indicator-color-active: var(--cd-color-bg-0);
+  --cd-carousel-indicator-gap: var(--cd-spacing-2);
+  --cd-carousel-arrow-bg: rgba(0, 0, 0, 0.4);
+  --cd-carousel-arrow-color: var(--cd-color-bg-0);
+  --cd-carousel-arrow-size: 32px;
+  --cd-table-bg: var(--cd-color-bg-0);
+  --cd-table-header-bg: var(--cd-color-bg-1);
+  --cd-table-header-text: var(--cd-color-text-0);
+  --cd-table-cell-text: var(--cd-color-text-0);
+  --cd-table-border-color: var(--cd-color-border);
+  --cd-table-row-hover-bg: var(--cd-color-fill-0);
+  --cd-table-row-selected-bg: var(--cd-color-primary-light-default);
+  --cd-table-row-stripe-bg: var(--cd-color-fill-0);
+  --cd-table-cell-padding-y: var(--cd-spacing-3);
+  --cd-table-cell-padding-x: var(--cd-spacing-4);
+  --cd-table-cell-padding-y-small: var(--cd-spacing-2);
+  --cd-table-cell-padding-y-large: var(--cd-spacing-4);
+  --cd-table-sort-active-color: var(--cd-color-primary);
+  --cd-table-sort-icon-color: var(--cd-color-text-3);
+  --cd-table-loading-mask: var(--cd-color-bg-0);
+  --cd-table-empty-color: var(--cd-color-text-2);
+  --cd-table-radius: var(--cd-radius-2);
+  --cd-calendar-bg: var(--cd-color-bg-0);
+  --cd-calendar-border: var(--cd-color-border);
+  --cd-calendar-header-bg: var(--cd-color-bg-1);
+  --cd-calendar-text: var(--cd-color-text-0);
+  --cd-calendar-text-secondary: var(--cd-color-text-2);
+  --cd-calendar-today-bg: var(--cd-color-primary-light-default);
+  --cd-calendar-today-fg: var(--cd-color-primary);
+  --cd-calendar-selected-border: var(--cd-color-primary);
+  --cd-calendar-range-bg: var(--cd-color-primary-light-default);
+  --cd-calendar-range-edge-bg: var(--cd-color-primary-light-default);
+  --cd-calendar-week-cell-min-h: 240px;
+  --cd-calendar-weekend-bg: var(--cd-color-bg-1);
+  --cd-calendar-cell-bg-hover: var(--cd-color-fill-0);
+  --cd-calendar-event-default-bg: var(--cd-color-primary);
+  --cd-calendar-event-fg: var(--cd-color-bg-0);
+  --cd-calendar-disabled-bg: var(--cd-color-fill-0);
+  --cd-calendar-more-color: var(--cd-color-text-2);
+  --cd-calendar-cell-min-h: 96px;
+  --cd-calendar-radius: var(--cd-radius-2);
+  --cd-scrolllist-item-height: 36px;
+  --cd-scrolllist-item-height-small: 28px;
+  --cd-scrolllist-item-height-large: 44px;
+  --cd-scrolllist-color-text: var(--cd-color-text-0);
+  --cd-scrolllist-color-text-adjacent: var(--cd-color-text-2);
+  --cd-scrolllist-color-text-disabled: var(--cd-color-text-3);
+  --cd-scrolllist-mask-bg: var(--cd-color-bg-1);
+  --cd-scrolllist-mask-border: var(--cd-color-border);
+  --cd-scrolllist-gradient-color: var(--cd-color-bg-0);
+  --cd-scrolllist-border-color: var(--cd-color-border);
+  --cd-scrolllist-radius: var(--cd-radius-2);
+  --cd-scrolllist-transition: var(--cd-motion-duration-mid);
+  --cd-overflow-list-gap: var(--cd-spacing-2);
+  --cd-overflow-list-gap-small: var(--cd-spacing-1);
+  --cd-overflow-list-gap-large: var(--cd-spacing-3);
+  --cd-overflow-list-overflow-color: var(--cd-color-text-2);
+  --cd-overflow-list-overflow-color-hover: var(--cd-color-text-0);
+  --cd-overflow-list-overflow-bg: transparent;
+  --cd-overflow-list-overflow-bg-hover: var(--cd-color-fill-0);
+  --cd-overflow-list-overflow-radius: var(--cd-radius-2);
+  --cd-overflow-list-focus-ring: var(--cd-color-primary);
+  --cd-spin-color: var(--cd-color-primary);
+  --cd-spin-track-color: var(--cd-color-fill-1);
+  --cd-spin-size-small: 14px;
+  --cd-spin-size-default: 20px;
+  --cd-spin-size-large: 32px;
+  --cd-spin-duration: 1s;
+  --cd-spin-duration-reduced: 1.5s;
+  --cd-spin-tip-gap: var(--cd-spacing-2);
+  --cd-spin-tip-color: var(--cd-color-text-1);
+  --cd-spin-mask-bg: rgba(255, 255, 255, 0.8);
+  --cd-spin-z: 10;
+  --cd-spin-z-fullscreen: 1000;
+  --cd-spin-fade-duration: var(--cd-motion-duration-fast);
+  --cd-progress-track-color: var(--cd-color-fill-0);
+  --cd-progress-stroke-normal: var(--cd-color-primary);
+  --cd-progress-stroke-success: var(--cd-color-success);
+  --cd-progress-stroke-error: var(--cd-color-danger);
+  --cd-progress-stroke-warning: var(--cd-color-warning);
+  --cd-progress-info-color: var(--cd-color-text-0);
+  --cd-progress-info-success-color: var(--cd-color-success);
+  --cd-progress-height-small: 4px;
+  --cd-progress-height-default: 8px;
+  --cd-progress-height-large: 12px;
+  --cd-progress-circle-size-small: 80px;
+  --cd-progress-circle-size-default: 120px;
+  --cd-progress-circle-size-large: 160px;
+  --cd-progress-transition: var(--cd-motion-duration-mid) var(--cd-motion-ease-standard);
+  --cd-skeleton-color-bg: var(--cd-color-fill-0);
+  --cd-skeleton-color-highlight: var(--cd-color-fill-1);
+  --cd-skeleton-radius: var(--cd-radius-2);
+  --cd-skeleton-radius-pill: var(--cd-radius-full);
+  --cd-skeleton-gap: var(--cd-spacing-3);
+  --cd-skeleton-title-height: 16px;
+  --cd-skeleton-paragraph-height: 14px;
+  --cd-skeleton-anim-duration: 1.4s;
+  --cd-skeleton-anim-timing: var(--cd-motion-ease-standard);
+  --cd-banner-radius: var(--cd-radius-2);
+  --cd-banner-padding-y: var(--cd-spacing-3);
+  --cd-banner-padding-x: var(--cd-spacing-4);
+  --cd-banner-gap: var(--cd-spacing-3);
+  --cd-banner-icon-size: 20px;
+  --cd-banner-title-color: var(--cd-color-text-0);
+  --cd-banner-desc-color: var(--cd-color-text-1);
+  --cd-banner-title-size: var(--cd-font-size-2);
+  --cd-banner-desc-size: var(--cd-font-size-1);
+  --cd-banner-accent-width: 4px;
+  --cd-banner-info-bg: var(--cd-color-primary-light-default);
+  --cd-banner-info-accent: var(--cd-color-primary);
+  --cd-banner-success-bg: color-mix(in srgb, var(--cd-color-success) 12%, transparent);
+  --cd-banner-success-accent: var(--cd-color-success);
+  --cd-banner-warning-bg: var(--cd-color-warning-light-default);
+  --cd-banner-warning-accent: var(--cd-color-warning);
+  --cd-banner-danger-bg: color-mix(in srgb, var(--cd-color-danger) 12%, transparent);
+  --cd-banner-danger-accent: var(--cd-color-danger);
+  --cd-banner-close-color: var(--cd-color-text-2);
+  --cd-banner-close-hover-bg: var(--cd-color-fill-1);
+  --cd-banner-motion-duration: var(--cd-motion-duration-fast);
+  --cd-modal-radius: var(--cd-radius-3);
+  --cd-modal-bg: var(--cd-color-bg-0);
+  --cd-modal-shadow: var(--cd-shadow-3);
+  --cd-modal-mask-bg: rgba(0, 0, 0, 0.45);
+  --cd-modal-padding: var(--cd-spacing-6);
+  --cd-modal-header-gap: var(--cd-spacing-3);
+  --cd-modal-footer-gap: var(--cd-spacing-2);
+  --cd-modal-title-color: var(--cd-color-text-0);
+  --cd-modal-title-size: var(--cd-font-size-3);
+  --cd-modal-body-color: var(--cd-color-text-1);
+  --cd-modal-close-color: var(--cd-color-text-2);
+  --cd-modal-close-hover-bg: var(--cd-color-fill-1);
+  --cd-modal-z: 1000;
+  --cd-modal-motion-duration: var(--cd-motion-duration-mid);
+  --cd-drawer-bg: var(--cd-color-bg-0);
+  --cd-drawer-color-text: var(--cd-color-text-0);
+  --cd-drawer-color-title: var(--cd-color-text-0);
+  --cd-drawer-border: var(--cd-color-border);
+  --cd-drawer-mask-bg: rgba(0, 0, 0, 0.45);
+  --cd-drawer-shadow: var(--cd-shadow-3);
+  --cd-drawer-width: 448px;
+  --cd-drawer-width-small: 320px;
+  --cd-drawer-width-large: 720px;
+  --cd-drawer-height: 320px;
+  --cd-drawer-height-small: 240px;
+  --cd-drawer-height-large: 480px;
+  --cd-drawer-header-padding: var(--cd-spacing-5);
+  --cd-drawer-body-padding: var(--cd-spacing-5);
+  --cd-drawer-footer-padding: var(--cd-spacing-4) var(--cd-spacing-5);
+  --cd-drawer-title-color: var(--cd-color-text-0);
+  --cd-drawer-title-size: var(--cd-font-size-3);
+  --cd-drawer-close-color: var(--cd-color-text-2);
+  --cd-drawer-close-color-hover: var(--cd-color-text-0);
+  --cd-drawer-close-hover-bg: var(--cd-color-fill-1);
+  --cd-drawer-z: 1000;
+  --cd-drawer-motion-duration: var(--cd-motion-duration-mid);
+  --cd-sidesheet-bg: var(--cd-color-bg-0);
+  --cd-sidesheet-color: var(--cd-color-text-0);
+  --cd-sidesheet-mask-bg: rgba(0, 0, 0, 0.6);
+  --cd-sidesheet-border: var(--cd-color-border);
+  --cd-sidesheet-radius: var(--cd-radius-3);
+  --cd-sidesheet-shadow: var(--cd-shadow-3);
+  --cd-sidesheet-padding: var(--cd-spacing-5);
+  --cd-sidesheet-header-padding: var(--cd-spacing-4) var(--cd-spacing-5);
+  --cd-sidesheet-footer-padding: var(--cd-spacing-4) var(--cd-spacing-5);
+  --cd-sidesheet-title-color: var(--cd-color-text-0);
+  --cd-sidesheet-title-size: var(--cd-font-size-3);
+  --cd-sidesheet-close-color: var(--cd-color-text-2);
+  --cd-sidesheet-close-color-hover: var(--cd-color-text-0);
+  --cd-sidesheet-close-hover-bg: var(--cd-color-fill-1);
+  --cd-sidesheet-width-small: 448px;
+  --cd-sidesheet-width: 60%;
+  --cd-sidesheet-width-large: 90%;
+  --cd-sidesheet-height-small: 40%;
+  --cd-sidesheet-height: 60%;
+  --cd-sidesheet-height-large: 90%;
+  --cd-sidesheet-z: 1000;
+  --cd-sidesheet-motion-duration: var(--cd-motion-duration-mid);
+  --cd-popconfirm-bg: var(--cd-color-bg-0);
+  --cd-popconfirm-color-text: var(--cd-color-text-0);
+  --cd-popconfirm-color-text-secondary: var(--cd-color-text-1);
+  --cd-popconfirm-border: var(--cd-color-border);
+  --cd-popconfirm-shadow: var(--cd-shadow-3);
+  --cd-popconfirm-radius: var(--cd-radius-2);
+  --cd-popconfirm-padding: var(--cd-spacing-4);
+  --cd-popconfirm-icon-color-danger: var(--cd-color-danger);
+  --cd-popconfirm-icon-color-warning: var(--cd-color-warning);
+  --cd-popconfirm-icon-color-info: var(--cd-color-primary);
+  --cd-popconfirm-title-color: var(--cd-color-text-0);
+  --cd-popconfirm-title-size: var(--cd-font-size-2);
+  --cd-popconfirm-content-size: var(--cd-font-size-1);
+  --cd-popconfirm-max-width: 280px;
+  --cd-popconfirm-z: 1000;
+  --cd-popconfirm-gap-footer: var(--cd-spacing-2);
+  --cd-popconfirm-arrow-size: 8px;
+  --cd-popconfirm-motion-duration: var(--cd-motion-duration-fast);
+  --cd-popconfirm-motion-easing: var(--cd-motion-ease-standard);
+  --cd-toast-bg: var(--cd-color-bg-0);
+  --cd-toast-color-text: var(--cd-color-text-0);
+  --cd-toast-color-icon-info: var(--cd-color-primary);
+  --cd-toast-color-icon-success: var(--cd-color-success);
+  --cd-toast-color-icon-warning: var(--cd-color-warning);
+  --cd-toast-color-icon-error: var(--cd-color-danger);
+  --cd-toast-color-close: var(--cd-color-text-2);
+  --cd-toast-color-close-hover: var(--cd-color-text-0);
+  --cd-toast-radius: var(--cd-radius-2);
+  --cd-toast-shadow: var(--cd-shadow-3);
+  --cd-toast-padding: var(--cd-spacing-3) var(--cd-spacing-4);
+  --cd-toast-gap: var(--cd-spacing-2);
+  --cd-toast-font-size: var(--cd-font-size-2);
+  --cd-toast-max-width: 420px;
+  --cd-toast-min-width: 240px;
+  --cd-toast-stack-gap: var(--cd-spacing-2);
+  --cd-toast-z: 1100;
+  --cd-toast-motion-duration: var(--cd-motion-duration-fast);
+  --cd-toast-bg-dark: var(--cd-color-text-0);
+  --cd-toast-color-text-dark: var(--cd-color-bg-0);
+  --cd-toast-color-close-dark: var(--cd-color-bg-2);
+  --cd-toast-color-close-hover-dark: var(--cd-color-bg-0);
+  --cd-notification-width: 360px;
+  --cd-notification-bg: var(--cd-color-bg-0);
+  --cd-notification-color-title: var(--cd-color-text-0);
+  --cd-notification-color-content: var(--cd-color-text-1);
+  --cd-notification-border: var(--cd-color-border);
+  --cd-notification-radius: var(--cd-radius-3);
+  --cd-notification-shadow: var(--cd-shadow-3);
+  --cd-notification-padding: var(--cd-spacing-4);
+  --cd-notification-gap: var(--cd-spacing-3);
+  --cd-notification-icon-success: var(--cd-color-success);
+  --cd-notification-icon-info: var(--cd-color-primary);
+  --cd-notification-icon-warning: var(--cd-color-warning);
+  --cd-notification-icon-error: var(--cd-color-danger);
+  --cd-notification-close-color: var(--cd-color-text-2);
+  --cd-notification-close-color-hover: var(--cd-color-text-0);
+  --cd-notification-title-size: var(--cd-font-size-2);
+  --cd-notification-content-size: var(--cd-font-size-1);
+  --cd-notification-z: 1100;
+  --cd-notification-offset: var(--cd-spacing-6);
+  --cd-notification-motion-duration: var(--cd-motion-duration-mid);
+  --cd-notification-progress-height: 3px;
+  --cd-notification-progress-color: var(--cd-color-primary);
+  --cd-notification-bg-dark: var(--cd-color-text-0);
+  --cd-notification-border-dark: var(--cd-color-text-0);
+  --cd-notification-color-title-dark: var(--cd-color-bg-0);
+  --cd-notification-color-content-dark: var(--cd-color-bg-1);
+  --cd-notification-close-color-dark: var(--cd-color-bg-2);
+  --cd-notification-close-color-hover-dark: var(--cd-color-bg-0);
+  --cd-backtop-size: 40px;
+  --cd-backtop-size-small: 32px;
+  --cd-backtop-size-large: 48px;
+  --cd-backtop-bg: var(--cd-color-bg-2);
+  --cd-backtop-bg-hover: var(--cd-color-bg-3);
+  --cd-backtop-bg-active: var(--cd-color-fill-1);
+  --cd-backtop-color: var(--cd-color-text-0);
+  --cd-backtop-border: var(--cd-color-border);
+  --cd-backtop-shadow: var(--cd-shadow-3);
+  --cd-backtop-radius: var(--cd-radius-full);
+  --cd-backtop-z: 900;
+  --cd-backtop-focus-ring: var(--cd-color-primary);
+  --cd-backtop-motion-duration: var(--cd-motion-duration-fast);
+  --cd-lottieicon-size: 20px;
+  --cd-lottieicon-size-small: 16px;
+  --cd-lottieicon-size-large: 24px;
+  --cd-lottieicon-color: var(--cd-color-text-0);
+  --cd-lottieicon-color-hover: var(--cd-color-primary);
+  --cd-lottieicon-bg-skeleton: var(--cd-color-bg-1);
+  --cd-lottieicon-radius: var(--cd-radius-1);
+  --cd-lottieicon-error-color: var(--cd-color-danger);
+  --cd-lottieicon-valign: -0.125em;
+}
+
+[data-theme='dark'] {
+  --cd-color-text-0: #f9f9f9;
+  --cd-color-text-1: rgba(249, 249, 249, 0.8);
+  --cd-color-text-2: rgba(249, 249, 249, 0.6);
+  --cd-color-text-3: rgba(249, 249, 249, 0.35);
+  --cd-color-text-inverse: #ffffff;
+  --cd-color-primary: #54a9ff;
+  --cd-color-primary-hover: #3295fb;
+  --cd-color-primary-active: #65b2fc;
+  --cd-color-info: #54a9ff;
+  --cd-color-link: #54a9ff;
+  --cd-color-success: #5dc264;
+  --cd-color-warning: #ffae43;
+  --cd-color-danger: #fc725a;
+  --cd-color-bg-0: #16161a;
+  --cd-color-bg-1: #232429;
+  --cd-color-bg-2: #2e3238;
+  --cd-color-bg-3: #41464c;
+  --cd-color-border: #41464c;
+  --cd-color-fill-0: rgba(249, 249, 249, 0.08);
+  --cd-color-fill-1: rgba(249, 249, 249, 0.12);
+}
+
+/* Base：把页面背景/前景绑到主题 token，使暗色模式开箱即用（对齐 Semi —— Semi 同样
+   在 body 上应用主题背景）。消费方若要自管 body 背景，可不引入此规则（见 base 单独导出）
+   或用更高优先级覆盖。过渡令亮/暗切换平滑，prefers-reduced-motion 下自动归零。 */
+body {
+  background-color: var(--cd-color-bg-0);
+  color: var(--cd-color-text-0);
+  transition:
+    background-color var(--cd-motion-duration-mid) var(--cd-motion-ease-standard),
+    color var(--cd-motion-duration-mid) var(--cd-motion-ease-standard);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --cd-motion-duration-fast: 0ms;
+    --cd-motion-duration-mid: 0ms;
+    --cd-motion-duration-slow: 0ms;
+  }
+}
+
+/* JS 驱动的全局降级标记：ConfigProvider reducedMotion 显式开启时由 JS 写入，
+   优先于系统媒体查询，令依赖 motion-duration token 的动画退化为 0ms。 */
+[data-reduced-motion] {
+  --cd-motion-duration-fast: 0ms;
+  --cd-motion-duration-mid: 0ms;
+  --cd-motion-duration-slow: 0ms;
+}
+
+/* 屏幕阅读器专用文本工具类（a11y.spec §全局规则）：
+   视觉隐藏但屏幕阅读器可读。不可用 display:none / visibility:hidden，
+   否则辅助技术也读不到。WCAG 1.4.1 等场景下令颜色/图标非唯一信息载体。 */
+.cd-sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}