:root {
    /* 基础主题变量 */
    --theme-primary: #409eff;
    --theme-secondary: #52c41a;
    --theme-background: #ffffff;
    --theme-text: #303133;
    
    /* Element Plus 基础变量 */
    --el-color-primary: var(--theme-primary);
    --el-bg-color: var(--theme-elBgColor);
    --el-text-color-primary: var(--theme-elTextColor);
    --el-border-color: var(--theme-elBorderColor);
    
    /* 文字颜色 */
    --el-text-color-regular: #606266;
    --el-text-color-secondary: #909399;
    --el-text-color-placeholder: #a8abb2;
    --el-text-color-disabled: #c0c4cc;
    
    /* 背景颜色 */
    --el-bg-color-page: #f2f3f5;
    --el-bg-color-overlay: #ffffff;
    
    /* 边框颜色 */
    --el-border-color-light: #e4e7ed;
    --el-border-color-lighter: #ebeef5;
    --el-border-color-extra-light: #f2f6fc;
    --el-border-color-dark: #d4d7de;
    --el-border-color-darker: #cdd0d6;
    
    /* 填充颜色 */
    --el-fill-color: #f0f2f5;
    --el-fill-color-light: #f5f7fa;
    --el-fill-color-lighter: #fafafa;
    --el-fill-color-extra-light: #fafcff;
    --el-fill-color-dark: #ebedf0;
    --el-fill-color-darker: #e6e8eb;
    --el-fill-color-blank: #ffffff;
    
    /* 组件变量 */
    /* Menu 组件 */
    --el-menu-active-color: var(--theme-primary);
    --el-menu-text-color: var(--theme-text);
    --el-menu-hover-text-color: var(--theme-primary);
    --el-menu-bg-color: var(--theme-background);
    --el-menu-hover-bg-color: var(--el-color-primary-light-9);
    --el-menu-item-height: 56px;
    
    /* Table 组件 */
    --el-table-header-bg-color: var(--el-fill-color-light);
    --el-table-header-text-color: var(--el-text-color-regular);
    --el-table-row-hover-bg-color: var(--el-fill-color-light);
    
    /* Card 组件 */
    --el-card-bg-color: var(--el-bg-color-overlay);
    
    /* Dialog 组件 */
    --el-dialog-bg-color: var(--el-bg-color-overlay);
    --el-dialog-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
    
    /* Popup 组件 */
    --el-popup-modal-bg-color: var(--el-mask-color);
    --el-popup-modal-opacity: 0.5;

    /* Button 相关变量 */
    --el-button-hover-bg-color: #79bbff;
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-border-color: #79bbff;
    --el-button-active-bg-color: #337ecc;
    --el-button-active-border-color: #337ecc;

    /* 主要按钮 */
    --el-button-primary-hover-bg-color: #66b1ff;
    --el-button-primary-hover-border-color: #66b1ff;
    --el-button-primary-active-bg-color: #3a8ee6;
    --el-button-primary-active-border-color: #3a8ee6;
}

/* Element Plus 暗色主题覆盖 */
html.dark {
    /* 基础变量覆盖 */
    --el-bg-color: var(--theme-elBgColor);
    --el-text-color-primary: var(--theme-elTextColor);
    --el-border-color: var(--theme-elBorderColor);
    
    /* 文字颜色 */
    --el-text-color-regular: #cfd3dc;
    --el-text-color-secondary: #a3a6ad;
    --el-text-color-placeholder: #8d9095;
    --el-text-color-disabled: #6c6e72;
    
    /* 背景颜色 */
    --el-bg-color-page: #0a0a0a;
    --el-bg-color-overlay: #1d1e1f;
    
    /* 边框颜色 */
    --el-border-color-light: #363637;
    --el-border-color-lighter: #2b2b2c;
    --el-border-color-extra-light: #242424;
    --el-border-color-dark: #414243;
    --el-border-color-darker: #4c4d4f;
    
    /* 填充颜色 */
    --el-fill-color: #303030;
    --el-fill-color-light: #262727;
    --el-fill-color-lighter: #1d1d1d;
    --el-fill-color-extra-light: #191919;
    --el-fill-color-dark: #39393a;
    --el-fill-color-darker: #424243;
    --el-fill-color-blank: transparent;
    
    /* 组件变量覆盖 */
    /* Menu 组件 */
    --el-menu-active-color: var(--theme-primary);
    --el-menu-text-color: #bbb;
    --el-menu-hover-text-color: #fff;
    --el-menu-bg-color: var(--theme-background);
    --el-menu-hover-bg-color: #1f1f1f;
    
    /* Table 组件 */
    --el-table-header-bg-color: #262727;
    --el-table-header-text-color: #a3a6ad;
    --el-table-row-hover-bg-color: #262727;
    
    /* Card 组件 */
    --el-card-bg-color: var(--el-bg-color-overlay);
    
    /* Dialog 组件 */
    --el-dialog-bg-color: var(--el-bg-color-overlay);
    --el-dialog-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
    
    /* Popup 组件 */
    --el-popup-modal-bg-color: var(--el-mask-color);
    --el-popup-modal-opacity: 0.7;
    
    /* 其他暗色主题变量 */
    --el-mask-color: rgba(0, 0, 0, 0.8);
    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px rgba(0, 0, 0, 0.72);

    /* Button 暗色主题变量 */
    --el-button-hover-bg-color: #4a4a4a;
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-border-color: #4a4a4a;
    --el-button-active-bg-color: #3d3d3d;
    --el-button-active-border-color: #3d3d3d;

    /* 主要按钮 */
    --el-button-primary-hover-bg-color: #4d97e3;
    --el-button-primary-hover-border-color: #4d97e3;
    --el-button-primary-active-bg-color: #2d7dd2;
    --el-button-primary-active-border-color: #2d7dd2;
}

/* 全局样式 */
body {
    background-color: var(--theme-background);
    color: var(--theme-text);
}

/* 过渡动画 */
* {
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* 使用主题变量的示例 */
body {
    background-color: var(--theme-background);
    color: var(--theme-text);
}

.primary-button {
    background-color: var(--theme-primary);
}

.secondary-button {
    background-color: var(--theme-secondary);
} 