/**
 * 项目主题变量
 * 
 * 结构：
 * 1. SCSS 变量 - 布局尺寸（供 JS 导出和组件使用）
 * 2. CSS 变量 - 侧边栏/菜单主题色
 * 3. 主题模式 - 深蓝侧边栏、暗黑模式
 * 4. 无障碍模式 - 色弱模式
 */

// ============================================
// 1. SCSS 变量 - 布局尺寸
// ============================================

$sidebar-width: 210px;
$sidebar-width-collapsed: 54px;
$navbar-height: 50px;
$tags-view-height: 34px;

// ============================================
// 2. CSS 变量 - 默认主题（浅色 + 白色侧边栏）
// ============================================

:root {
  // 菜单
  --menu-background: #fff;
  --menu-text: #212121;
  --menu-active-text: var(--el-menu-active-color);
  --menu-hover: #e6f4ff;

  // 侧边栏 Logo
  --sidebar-logo-background: #f5f5f5;
  --sidebar-logo-text-color: #333;
}

// SCSS 变量映射（供组件使用）
$menu-background: var(--menu-background);
$menu-text: var(--menu-text);
$menu-active-text: var(--menu-active-text);
$menu-hover: var(--menu-hover);
$sidebar-logo-background: var(--sidebar-logo-background);
$sidebar-logo-text-color: var(--sidebar-logo-text-color);

// ============================================
// 3. 主题模式
// ============================================

// 浅色主题 - 深蓝色侧边栏
html.sidebar-color-blue {
  --menu-background: #304156;
  --menu-text: #bfcbd9;
  --menu-active-text: var(--el-menu-active-color);
  --menu-hover: #263445;
  --sidebar-logo-background: #2d3748;
  --sidebar-logo-text-color: #fff;
}

// 暗黑主题
html.dark {
  --menu-background: var(--el-bg-color-overlay);
  --menu-text: #fff;
  --menu-active-text: var(--el-menu-active-color);
  --menu-hover: rgb(0 0 0 / 20%);
  --sidebar-logo-background: rgb(0 0 0 / 20%);
  --sidebar-logo-text-color: #fff;

  // Element Plus 表格选中行背景色
  .el-table {
    --el-table-current-row-bg-color: var(--el-fill-color-light);
  }
}

// ============================================
// 4. 无障碍模式
// ============================================

// 色弱模式
html.color-weak {
  filter: invert(80%);
}