:root {
  /* 浅色模式变量 */
  /* 主色 */
  --primary-color: #165DFF;
  --primary-light: #E8F0FF;
  --primary-dark: #0E42D2;

  /* 辅助色 */
  --success-color: #00B42A;
  --warning-color: #FF7D00;
  --error-color: #F53F3F;
  --info-color: #86909C;

  /* 中性色 */
  --text-dark: #1D2129;
  --text-primary: #1D2129;
  --text-medium: #4E5969;
  --text-light: #86909C;
  --border-color: #C9CDD4;
  --bg-light: #F7F8FA;
  --bg-medium: #F2F3F5;
  --bg-white: #FFFFFF;

  /* 运行时布局变量默认值，避免首次渲染闪动 */
  --sidebar-width: 280px;
  --tree-toggle-width: 81px;

  /* 布局 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* 圆角 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

/* 深色模式变量 */
.dark-mode {
  /* 主色 */
  --primary-color: #4080FF;
  --primary-light: rgba(64, 128, 255, 0.2);
  --primary-dark: #6699FF;

  /* 辅助色 */
  --success-color: #33D17A;
  --warning-color: #FF9800;
  --error-color: #FF5252;
  --info-color: #9E9E9E;

  /* 中性色 */
  --text-dark: #F5F5F5;
  --text-primary: #F5F5F5;
  --text-medium: #DCDCDC;
  --text-light: #A9A9A9;
  --border-color: #333333;
  --bg-light: #121212;
  --bg-medium: #1E1E1E;
  --bg-white: #1E1E1E;

  /* 输入框和下拉列表 */
  --input-bg: #2D2D2D;
  --input-border: #333333;
  --input-text: #DCDCDC;
  --input-placeholder: #A9A9A9;
  --select-bg: #2D2D2D;
  --select-border: #333333;
  --select-text: #DCDCDC;
  --select-option-bg: #2D2D2D;
  --select-option-hover: #3A3A3A;

  /* 布局 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* Element Plus 组件级变量 — 消除 !important 覆盖 */
  --el-color-primary: var(--primary-color);
  --el-color-primary-light-9: var(--primary-light);
  --el-fill-color-blank: var(--bg-white);
  --el-fill-color-light: var(--select-option-hover);
  --el-bg-color-overlay: var(--select-option-bg);
  --el-text-color-primary: var(--text-dark);
  --el-text-color-regular: var(--text-medium);
  --el-text-color-secondary: var(--text-light);
  --el-text-color-placeholder: var(--input-placeholder);
  --el-border-color: var(--border-color);
  --el-border-color-light: var(--border-color);
  --el-mask-color: rgba(16, 18, 22, 0.72);

  --el-input-bg-color: var(--input-bg);
  --el-input-text-color: var(--input-text);
  --el-input-border-color: var(--input-border);
  --el-input-placeholder-color: var(--input-placeholder);

  --el-card-bg-color: var(--bg-white);
  --el-card-border-color: var(--border-color);

  --el-dialog-bg-color: var(--bg-white);

  --el-menu-bg-color: var(--bg-white);
  --el-menu-text-color: var(--text-medium);
  --el-menu-hover-bg-color: var(--bg-medium);
  --el-menu-hover-text-color: var(--primary-color);
  --el-menu-active-color: var(--primary-color);

  --el-switch-on-color: #3a7afe;
  --el-switch-off-color: #3a3a3a;

  --el-dropdown-menu-bg-color: var(--bg-white);
  --el-dropdown-menuItem-hover-fill: var(--select-option-hover);

  --el-messagebox-title-color: var(--text-dark);
  --el-messagebox-content-color: var(--text-dark);

  --el-loading-fill-color: rgba(16, 18, 22, 0.72);

  --hover-overlay: rgba(255, 255, 255, 0.08);
  --selected-overlay: rgba(64, 128, 255, 0.2);
  --loading-overlay: rgba(11, 17, 26, 0.72);
}