:root {
    --el-color-primary: #409EFF;
    --el-color-primary-light-3: #79BBFF;
    --el-color-primary-light-5: #A0CFFF;
    --el-color-primary-light-9: #ECF5FF;
    --el-color-primary-dark-2: #337ECC;
    --el-color-success: #67C23A;
    --el-color-warning: #E6A23C;
    --el-color-danger: #F56C6C;
    --el-color-info: #909399;
    --el-text-color-primary: #303133;
    --el-text-color-regular: #606266;
    --el-text-color-secondary: #909399;
    --el-text-color-placeholder: #A8ABB2;
    --el-border-color-base: #DCDFE6;
    --el-border-color-light: #E4E7ED;
    --el-border-color-lighter: #EBEEF5;
    --el-bg-color-page: #F2F3F5;
    --el-bg-color: #FFFFFF;
    --el-fill-color-light: #F5F7FA;

    --bf-primary: var(--el-color-primary);
    --bf-primary-hover: var(--el-color-primary-light-3);
    --bf-primary-active: var(--el-color-primary-dark-2);
    --bf-primary-soft: var(--el-color-primary-light-9);
    --bf-success: var(--el-color-success);
    --bf-warning: var(--el-color-warning);
    --bf-danger: var(--el-color-danger);
    --bf-info: var(--el-color-info);

    --bf-bg-page: var(--el-bg-color-page);
    --bf-bg-surface: #ffffff;
    --bf-bg-subtle: var(--el-fill-color-light);
    --bf-bg-muted: #EBEEF5;

    --bf-text: var(--el-text-color-primary);
    --bf-text-secondary: var(--el-text-color-regular);
    --bf-text-muted: var(--el-text-color-secondary);
    --bf-text-placeholder: var(--el-text-color-placeholder);
    --bf-text-inverse: #ffffff;

    --bf-border: var(--el-border-color-base);
    --bf-border-light: var(--el-border-color-light);
    --bf-border-lighter: var(--el-border-color-lighter);
    --bf-border-strong: #C0C4CC;
    --bf-focus: rgba(64, 158, 255, 0.24);

    --bf-radius-none: 0;
    --bf-radius-sm: 2px;
    --bf-radius-md: 4px;
    --bf-radius-lg: 6px;

    --bf-space-mini: 4px;
    --bf-space-small: 8px;
    --bf-space-base: 16px;
    --bf-space-large: 24px;
    --bf-space-extra-large: 32px;
    --bf-space-2xs: var(--bf-space-mini);
    --bf-space-xs: var(--bf-space-small);
    --bf-space-sm: var(--bf-space-small);
    --bf-space-md: var(--bf-space-base);
    --bf-space-lg: var(--bf-space-large);
    --bf-space-xl: var(--bf-space-large);
    --bf-space-2xl: var(--bf-space-extra-large);
    --bf-space-3xl: var(--bf-space-extra-large);

    --bf-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    --bf-font-size-xs: 12px;
    --bf-font-size-sm: 13px;
    --bf-font-size-md: 14px;
    --bf-font-size-lg: 16px;
    --bf-font-size-xl: 18px;
    --bf-font-size-2xl: 20px;
    --bf-line-height-none: 1;
    --bf-line-height-compact: 1.3;
    --bf-line-height: 1.5;
    --bf-line-height-loose: 1.7;

    --bf-shadow-sm: 0 1px 2px rgba(15, 31, 51, 0.06);
    --bf-shadow-md: 0 8px 24px rgba(15, 31, 51, 0.08);
    --bf-sidebar-width: 244px;
    --bf-header-height: 56px;

    --bf-admin-primary: var(--bf-primary);
    --bf-admin-primary-hover: var(--bf-primary-hover);
    --bf-admin-primary-active: var(--bf-primary-active);
    --bf-admin-success: var(--bf-success);
    --bf-admin-warning: var(--bf-warning);
    --bf-admin-danger: var(--bf-danger);
    --bf-admin-info: var(--bf-info);
    --bf-admin-bg-page: var(--bf-bg-page);
    --bf-admin-bg-surface: var(--bf-bg-surface);
    --bf-admin-bg-subtle: var(--bf-bg-subtle);
    --bf-admin-bg-muted: var(--bf-bg-muted);
    --bf-admin-text: var(--bf-text);
    --bf-admin-text-secondary: var(--bf-text-secondary);
    --bf-admin-text-muted: var(--bf-text-muted);
    --bf-admin-text-placeholder: var(--bf-text-placeholder);
    --bf-admin-border: var(--bf-border);
    --bf-admin-border-light: var(--bf-border-light);
    --bf-admin-border-lighter: var(--bf-border-lighter);
    --bf-admin-border-strong: var(--bf-border-strong);
    --bf-admin-focus: var(--bf-focus);
    --bf-admin-radius-sm: var(--bf-radius-sm);
    --bf-admin-radius-md: var(--bf-radius-md);
    --bf-admin-radius-lg: var(--bf-radius-lg);
    --bf-admin-shadow-sm: var(--bf-shadow-sm);
    --bf-admin-shadow-md: var(--bf-shadow-md);
    --bf-admin-sidebar-width: var(--bf-sidebar-width);
    --bf-admin-header-height: var(--bf-header-height);
    --bf-admin-space-mini: var(--bf-space-mini);
    --bf-admin-space-small: var(--bf-space-small);
    --bf-admin-space-base: var(--bf-space-base);
    --bf-admin-space-large: var(--bf-space-large);
    --bf-admin-space-extra-large: var(--bf-space-extra-large);
    --bf-admin-grid-gutter: var(--bf-space-base);
    --bf-admin-font-family: var(--bf-font-family);
    --bf-admin-font-size-xs: var(--bf-font-size-xs);
    --bf-admin-font-size-sm: var(--bf-font-size-sm);
    --bf-admin-font-size-md: var(--bf-font-size-md);
    --bf-admin-font-size-lg: var(--bf-font-size-lg);
    --bf-admin-font-size-xl: var(--bf-font-size-xl);
    --bf-admin-font-size-2xl: var(--bf-font-size-2xl);
    --bf-admin-font-size-base: var(--bf-font-size-md);
    --bf-admin-font-size-title-sm: var(--bf-font-size-lg);
    --bf-admin-font-size-title: var(--bf-font-size-xl);
    --bf-admin-font-size-page-title: var(--bf-font-size-2xl);
    --bf-admin-line-height-none: var(--bf-line-height-none);
    --bf-admin-line-height-compact: var(--bf-line-height-compact);
    --bf-admin-line-height: var(--bf-line-height);
    --bf-admin-line-height-loose: var(--bf-line-height-loose);

    /* Customer-facing shop theme aliases. Keep these in the same file so C-end pages
       can adopt the theme without introducing a second token system. */
    --bf-shop-primary: var(--bf-primary);
    --bf-shop-primary-hover: var(--bf-primary-hover);
    --bf-shop-primary-active: var(--bf-primary-active);
    --bf-shop-accent: #ff6a00;
    --bf-shop-accent-hover: #ff8533;
    --bf-shop-success: var(--bf-success);
    --bf-shop-warning: var(--bf-warning);
    --bf-shop-danger: var(--bf-danger);

    --bf-shop-bg-page: #f6f8fb;
    --bf-shop-bg-surface: var(--bf-bg-surface);
    --bf-shop-bg-muted: #f1f5f9;
    --bf-shop-text: var(--bf-text);
    --bf-shop-text-secondary: var(--bf-text-secondary);
    --bf-shop-text-muted: var(--bf-text-muted);
    --bf-shop-border: var(--bf-border);

    --bf-shop-radius-card: var(--bf-radius-lg);
    --bf-shop-radius-control: var(--bf-radius-md);
    --bf-shop-space-card: var(--bf-space-lg);
    --bf-shop-space-section: var(--bf-space-2xl);
    --bf-shop-font-family: var(--bf-font-family);
    --bf-shop-header-height: 56px;
}