:root {
  // 主色
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-primary-bg: #eef2ff;

  // 语义色
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #6b7280;

  // 中性色
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-placeholder: #9ca3af;
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-bg-page: #f5f7fa;
  --color-bg-card: #ffffff;

  // 侧边栏（跟随主色）
  --sidebar-bg: var(--color-primary-dark);
  --sidebar-text: rgba(255, 255, 255, 0.75);
  --sidebar-active: #fff;
  --sidebar-width: 200px;
  --sidebar-collapsed-width: 64px;

  // 间距（8px 基准栅格）
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  // 头部 & 标签栏高度（tags+头像合并为一行）
  --header-height: 50px;
  --topbar-height: 40px;
  --tags-height: 0px;
  --content-padding-top: calc(var(--topbar-height) + 4px);
  --page-top-offset: var(--content-padding-top);

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

  // 阴影
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);

  // 字体
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;

  // 树面板（左右分栏布局）
  --tree-panel-width: 280px;
}

// 暗色模式
[data-theme="dark"] {
  --color-text-primary: #e5e7eb;
  --color-text-secondary: #9ca3af;
  --color-text-placeholder: #6b7280;
  --color-border: #374151;
  --color-border-light: #1f2937;
  --color-bg-page: #111827;
  --color-bg-card: #1f2937;

  --sidebar-bg: #0f172a;
  --sidebar-text: #94a3b8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);

  // Element Plus 暗色适配
  --el-bg-color: #1f2937;
  --el-bg-color-overlay: #374151;
  --el-bg-color-page: #111827;
  --el-text-color-primary: #e5e7eb;
  --el-text-color-regular: #d1d5db;
  --el-text-color-secondary: #9ca3af;
  --el-text-color-placeholder: #6b7280;
  --el-border-color: #374151;
  --el-border-color-light: #4b5563;
  --el-border-color-lighter: #374151;
  --el-border-color-extra-light: #1f2937;
  --el-fill-color: #374151;
  --el-fill-color-light: #1f2937;
  --el-fill-color-lighter: #111827;
  --el-fill-color-blank: #1f2937;
  --el-mask-color: rgba(0, 0, 0, 0.6);

  // 表格暗色
  --el-table-bg-color: var(--color-bg-card);
  --el-table-tr-bg-color: var(--color-bg-card);
  --el-table-header-bg-color: var(--color-bg-page);
  --el-table-row-hover-bg-color: #374151;
  --el-table-current-row-bg-color: #374151;
  --el-table-border-color: #374151;
  --el-table-text-color: var(--color-text-primary);
  --el-table-header-text-color: var(--color-text-secondary);
  // stripe 斑马纹（偶行比奇行略浅）
  --el-fill-color-lighter: #263345;
  --el-color-white: var(--color-bg-card);

  // 分页暗色
  --el-pagination-bg-color: transparent;
  --el-pagination-button-bg-color: #374151;
  --el-pagination-hover-color: var(--color-primary);

  // 对话框/抽屉暗色
  --el-dialog-bg-color: #1f2937;
  --el-drawer-bg-color: #1f2937;
}
