// ========== 亮色模式（默认） ==========
:root {
  // 覆盖 Element Plus 主色
  // ---- 主色 ----
  --el-color-primary: #8077ff;

  // ---- 亮色 light 梯度（与白色混合） ----
  --el-color-primary-light-1: #8d85ff; // 10%
  --el-color-primary-light-2: #9992ff; // 20%
  --el-color-primary-light-3: #a6a0ff; // 30% ← hover 边框
  --el-color-primary-light-4: #b3adff; // 40%
  --el-color-primary-light-5: #c0bbff; // 50% ← 禁用背景
  --el-color-primary-light-6: #ccc9ff; // 60%
  --el-color-primary-light-7: #d9d6ff; // 70% ← input hover 边框
  --el-color-primary-light-8: #e6e4ff; // 80% ← hover 背景
  --el-color-primary-light-9: #f2f1ff; // 90% ← 极浅背景

  // ---- 暗色（按下/激活：与黑色混合 20%） ----
  --el-color-primary-dark-2: #665fcc;

  // 自定义渐变按钮变量
  --btn-primary-gradient: linear-gradient(91deg, #5f53ff -40.99%, #8d53ff 88.34%);
  --btn-primary-gradient-hover: linear-gradient(95deg, #8d22ff -9.99%, #ae00ff 91.44%);
  --btn-primary-shadow: rgba(102, 126, 234, 0.4);

  // 页面级自定义变量
  --admin-bg: #f0f2f5;
  --admin-sidebar-bg: #ffffff;
  --admin-header-bg: #ffffff;
  --admin-card-bg: #ffffff;
  --admin-text-primary: #303133;
  --admin-text-secondary: #909399;
  --admin-border-color: #e4e7ed;
  --admin-table-header-bg: #f5f7fa;
}

// ========== 暗色模式 ==========
html.dark {
  // 覆盖 Element Plus 暗色下的主色（可选调整）
  // ---- 主色保持不变 ----
  --el-color-primary: #8077ff;
  // ---- 暗色 light 梯度（与 #141414 混合） ----
  --el-color-primary-light-1: #756de8; // 10%
  --el-color-primary-light-2: #6a63d0; // 20%
  --el-color-primary-light-3: #6059b9; // 30% ← 暗色边框
  --el-color-primary-light-4: #554fa1; // 40%
  --el-color-primary-light-5: #4a468a; // 50% ← 暗色禁用
  --el-color-primary-light-6: #3f3c72; // 60%
  --el-color-primary-light-7: #34325b; // 70% ← 暗色 hover 背景
  --el-color-primary-light-8: #2a2843; // 80% ← 暗色浅背景
  --el-color-primary-light-9: #1f1e2c; // 90% ← 暗色极浅背景
  // ---- 暗色下 hover 变亮（与白色混合 20%） ----
  --el-color-primary-dark-2: #9992ff;
  --el-color-primary-dark: rgba(255, 255, 255, 0.08);

  // 暗色下的渐变按钮
  --btn-primary-gradient: linear-gradient(135deg, #5a6fe0 0%, #6a3f9a 100%);
  --btn-primary-gradient-hover: linear-gradient(135deg, #6a3f9a 0%, #5a6fe0 100%);
  --btn-primary-shadow: rgba(90, 111, 224, 0.3);

  // 页面级自定义变量
  --admin-bg: #050505;
  --admin-sidebar-bg: #050505;
  --admin-header-bg: #050505;
  --admin-card-bg: #1d1e1f;
  --admin-text-primary: #e5eaf3;
  --admin-text-secondary: #a3a6ad;
  --admin-border-color: rgba(255, 255, 255, 0.1);
  --admin-table-header-bg: #1d1e1f;
}

// 全局平滑过渡（主题切换时）
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}
