:root {
  /* 颜色变量 - 主色调 */
  --primary-color: #165DFF;
  --primary-hover: #0E47D9;
  --primary-active: #0A38B7;
  --primary-light: #E8F3FF;
  --primary-dark: #0D3B9E;
  --primary-rgb: 22, 93, 255;
  --primary: #165DFF;

  /* 颜色变量 - 辅助色 */
  --secondary-color: #0FC6C2;
  --secondary-hover: #0DB8B4;
  --secondary-active: #0CA09D;
  --secondary-light: #E6FFFE;
  --secondary-dark: #0A8C89;

  /* 颜色变量 - 功能色 */
  --success-color: #52C41A;
  --success-hover: #43A017;
  --success-active: #388514;
  --success-light: #F6FFED;
  --success-dark: #2F6D12;

  --warning-color: #FAAD14;
  --warning-hover: #D99000;
  --warning-active: #B37600;
  --warning-light: #FFFBE6;
  --warning-dark: #8C5E00;

  --danger-color: #FF4D4F;
  --danger-hover: #CF1322;
  --danger-active: #A8071A;
  --danger-light: #FFF1F0;
  --danger-dark: #820014;

  --info-color: #8B9AAF;
  --info-hover: #728197;
  --info-active: #59677D;
  --info-light: #F7F8FA;
  --info-dark: #404D63;

  /* 颜色变量 - 中性色 */
  --dark-color: #1D2129;
  --dark-1: #4E5969;
  --dark-2: #86909C;
  --dark-3: #C9CDD4;
  --light-color: #f8f9fa;
  --light-1: #F2F3F5;
  --light-2: #E5E6EB;
  --light-3: #C9CDD4;

  /* 颜色变量 - 背景色 */
  --background-color: #ffffff;
  --background-1: #F7F8FA;
  --background-2: #F2F3F5;
  --background-3: #E5E6EB;
  --bg-primary: #ffffff;
  --bg-secondary: #F7F8FA;
  --form-bg: #ffffff;
  --header-bg: #ffffff;
  --card-bg: #ffffff;
  --table-header-bg: #F7F8FA;
  --table-row-hover: #F2F3F5;

  /* 颜色变量 - 文本色 */
  --text-color: #333333;
  --text-1: #4E5969;
  --text-2: #86909C;
  --text-3: #C9CDD4;
  --text-inverse: #ffffff;
  --text-primary: #333333;
  --text-secondary: #86909C;
  --text-muted: #C9CDD4;

  /* 颜色变量 - 边框色 */
  --border-color: #dee2e6;
  --border-1: #E5E6EB;
  --border-2: #C9CDD4;
  --border-3: #86909C;

  /* 颜色变量 - 特殊用途 */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --overlay-color: rgba(0, 0, 0, 0.5);
  --disabled-color: #C9CDD4;
  --focus-color: rgba(22, 93, 255, 0.2);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-90: rgba(255, 255, 255, 0.9);
  --white-95: rgba(255, 255, 255, 0.95);
  --white-100: rgba(255, 255, 255, 1);

  /* 字体变量 */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-xs: 1.2;
  --line-height-sm: 1.3;
  --line-height-base: 1.5;
  --line-height-lg: 1.6;
  --line-height-xl: 1.8;

  /* 间距变量 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;

  /* 内边距变量 */
  --padding-xs: 4px;
  --padding-sm: 8px;
  --padding-md: 12px;
  --padding-lg: 16px;
  --padding-xl: 20px;
  --padding-2xl: 24px;
  --padding-3xl: 32px;
  --padding-4xl: 40px;
  --padding-5xl: 48px;

  /* 外边距变量 */
  --margin-xs: 4px;
  --margin-sm: 8px;
  --margin-md: 12px;
  --margin-lg: 16px;
  --margin-xl: 20px;
  --margin-2xl: 24px;
  --margin-3xl: 32px;
  --margin-4xl: 40px;
  --margin-5xl: 48px;

  /* 布局变量 */
  --container-width: 1200px;
  --container-max-width: 1400px;
  --sidebar-width: 140px;
  --sidebar-collapsed: 70px;
  --header-height: 64px;
  --footer-height: 48px;

  /* 边框变量 */
  --border-radius: 10px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;

  --border-width: 1px;
  --border-width-sm: 2px;
  --border-width-lg: 3px;

  /* 阴影变量 */
  --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  --box-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
  --box-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.2);

  /* 动画变量 */
  --transition: all 0.3s ease;
  --transition-fast: all 0.2s ease;
  --transition-slow: all 0.5s ease;
  --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-linear: all 0.3s linear;

  /* Z-index变量 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-overlay: 1080;

  /* 断点变量 - 响应式设计 */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* 特殊变量 */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);

  /* 暗色主题变量 - 可通过JS切换 */
  --dark-bg: #1A1A1A;
  --dark-bg-1: #2D2D2D;
  --dark-bg-2: #3D3D3D;
  --dark-text: #FFFFFF;
  --dark-text-1: #E8E8E8;
  --dark-text-2: #D0D0D0;
  --dark-border: #404040;
}

/* 蓝色主题 */
body.theme-blue {
  --primary-color: #165DFF;
  --primary-hover: #0E47D9;
  --primary-active: #0A38B7;
  --primary-light: #E8F3FF;
  --primary-dark: #0D3B9E;
  --primary: #165DFF;
  --background-gradient: linear-gradient(135deg, #165DFF 0%, #0D3B9E 100%);
  --background-color: #ffffff;
  --background-1: #F7FAFF;
  --background-2: #F0F5FF;
  --background-3: #E8F3FF;
  --text-color: #1D2129;
  --text-1: #4E5969;
  --text-2: #86909C;
  --border-color: #E8F3FF;
  --border-1: #D9E8FF;
  --border-2: #C9DFFF;
  --text-primary: #1D2129;
  --text-secondary: #4E5969;
  --bg-primary: #ffffff;
  --bg-secondary: #F7FAFF;
  --form-bg: #ffffff;
  --header-bg: #ffffff;
  --card-bg: #ffffff;
  --table-header-bg: #F7FAFF;
  --table-row-hover: #F0F5FF;
}

/* 绿色主题 */
body.theme-green {
  --primary-color: #52C41A;
  --primary-hover: #43A017;
  --primary-active: #388514;
  --primary-light: #F6FFED;
  --primary-dark: #2F6D12;
  --background-gradient: linear-gradient(135deg, #52C41A 0%, #2F6D12 100%);
  --background-color: #ffffff;
  --background-1: #F7FFF9;
  --background-2: #F0FFF4;
  --background-3: #E6FFED;
  --text-color: #1D2129;
  --text-1: #4E5969;
  --text-2: #86909C;
  --border-color: #F6FFED;
  --border-1: #E6FFE6;
  --border-2: #D9FFEC;
}

/* 橙色主题 */
body.theme-orange {
  --primary-color: #FAAD14;
  --primary-hover: #D99000;
  --primary-active: #B37600;
  --primary-light: #FFFBE6;
  --primary-dark: #8C5E00;
  --background-gradient: linear-gradient(135deg, #FAAD14 0%, #8C5E00 100%);
  --background-color: #ffffff;
  --background-1: #FFFCF7;
  --background-2: #FFFBF0;
  --background-3: #FFF7E6;
  --text-color: #1D2129;
  --text-1: #4E5969;
  --text-2: #86909C;
  --border-color: #FFFBE6;
  --border-1: #FFF7E6;
  --border-2: #FFF3CC;
}

/* 暗色主题 */
body.theme-dark {
  --primary-color: #888888;
  --primary-hover: #999999;
  --primary-active: #AAAAAA;
  --primary-light: #2E2E2E;
  --primary-dark: #1E1E1E;
  --secondary-color: #666666;
  --secondary-hover: #777777;
  --secondary-active: #888888;
  --secondary-light: #2E2E2E;
  --secondary-dark: #1E1E1E;
  --success-color: #4CAF50;
  --success-hover: #45a049;
  --success-active: #3d8b40;
  --success-light: #2e7d32;
  --success-dark: #1b5e20;
  --warning-color: #ff9800;
  --warning-hover: #f57c00;
  --warning-active: #ef6c00;
  --warning-light: #e65100;
  --warning-dark: #bf360c;
  --danger-color: #f44336;
  --danger-hover: #d32f2f;
  --danger-active: #c62828;
  --danger-light: #b71c1c;
  --danger-dark: #880e4f;
  --info-color: #2196f3;
  --info-hover: #1976d2;
  --info-active: #1565c0;
  --info-light: #0d47a1;
  --info-dark: #0a2463;
  --background-gradient: linear-gradient(135deg, #1A1A1A 0%, #0D0D0D 100%);
  --background-color: #1A1A1A;
  --background-1: #252525;
  --background-2: #2D2D2D;
  --background-3: #353535;
  --text-color: #FFFFFF;
  --text-1: #E8E8E8;
  --text-2: #D0D0D0;
  --border-color: #404040;
  --border-1: #505050;
  --border-2: #606060;
  --light-color: var(--dark-bg-1);
  --light-1: var(--dark-bg-2);
  --light-2: #4D4D4D;
  --light-3: #606060;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --overlay-color: rgba(0, 0, 0, 0.7);
}

/* 响应式字体大小 */
@media (max-width: 768px) {
  :root {
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
  }
}

/* 响应式侧边栏宽度 */
@media (min-width: 1441px) {
  :root {
    --sidebar-width: 196px;
    --sidebar-collapsed: 70px;
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  :root {
    --sidebar-width: 168px;
    --sidebar-collapsed: 65px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  :root {
    --sidebar-width: 140px;
    --sidebar-collapsed: 60px;
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  :root {
    --sidebar-width: 126px;
    --sidebar-collapsed: 55px;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 182px;
    --header-height: 56px;
    --container-padding: 12px;
  }
}

@media (max-width: 576px) {
  :root {
    --sidebar-width: 168px;
  }
}

/* 兼容旧版暗色主题 */
[data-theme="dark"] {
  --background-color: var(--dark-bg);
  --background-1: var(--dark-bg-1);
  --background-2: var(--dark-bg-2);
  --text-color: #FFFFFF;
  --text-1: #E8E8E8;
  --text-2: #D0D0D0;
  --border-color: var(--dark-border);
  --border-1: #505050;
  --border-2: #606060;
  --light-color: var(--dark-bg-1);
  --light-1: var(--dark-bg-2);
  --light-2: #4D4D4D;
  --light-3: #606060;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --overlay-color: rgba(0, 0, 0, 0.7);
}

/* 通用下拉选项样式 - 暗色主题 */
body.theme-dark select {
  background-color: var(--background-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

body.theme-dark select option {
  background-color: var(--background-1);
  color: var(--text-color);
}

body.theme-dark select option:hover {
  background-color: var(--primary-color);
  color: var(--text-inverse);
}

body.theme-dark select option:checked {
  background-color: var(--primary-color);
  color: var(--text-inverse);
}

/* 兼容旧版暗色主题下拉选项 */
[data-theme="dark"] select {
  background-color: var(--background-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

[data-theme="dark"] select option {
  background-color: var(--background-1);
  color: var(--text-color);
}

[data-theme="dark"] select option:hover {
  background-color: var(--primary-color);
  color: var(--text-inverse);
}

[data-theme="dark"] select option:checked {
  background-color: var(--primary-color);
  color: var(--text-inverse);
}