/**
 * 主题变量定义文件
 * 支持亮色、暗色和赛博朋克主题切换
 */

// 默认主题（暗色主题）
:root {
  // 主色调
  --primary-color: #2681ff;
  --primary-color-hover: #409eff;
  --primary-hover-color: #409eff;
  --primary-active-color: #1c5dbf;
  --primary-light-color: rgba(38, 129, 255, 0.2);
  --primary-lighter-color: rgba(38, 129, 255, 0.1);
  
  // 辅助色
  --info-color: #00baff;
  --info-text-color: #8eeeff;
  --info-light-color: rgba(0, 186, 255, 0.19);
  --info-lighter-color: rgba(0, 192, 222, 0.1);
  
  // 成功色
  --success-color: #67c23a;
  --success-light-color: rgba(103, 194, 58, 0.2);
  
  // 警告色
  --warning-color: #e6a23c;
  --warning-light-color: rgba(230, 162, 60, 0.2);
  
  // 错误色
  --error-color: #f56c6c;
  --error-light-color: rgba(245, 108, 108, 0.2);
  
  // 文本颜色
  --text-color-primary: #ffffff;
  --text-color-regular: #d8d8d8;
  --text-color-secondary: #bcc9d4;
  --text-color-placeholder: #859094;
  --text-color-disabled: #8d8d8f;
  --text-color-light: rgba(255, 255, 255, 0.82);
  --text-color-lighter: rgba(255, 255, 255, 0.52);
  
  // 背景颜色
  --bg-color-primary: #202023;
  --bg-color-secondary: #18181c;
  --bg-color-tertiary: #1d262e;
  --bg-color-quaternary: #1f262d;
  --bg-color-page: #1c232c;
  --bg-color-mask: rgba(0, 0, 0, 0.2);
  --bg-color-hover: rgba(143, 225, 255, 0.1);
  --bg-color-active: rgba(255, 255, 255, 0.4);
  --bg-color-disabled: #2a2a2b;
  --bg-color-input: #27343e;
  --bg-color-card: #313132;
  --bg-color-menu: #36373b;
  --bg-color-light: #373739;
  --bg-color-component: rgb(40, 44, 52);
  
  // 边框颜色
  --border-color-base: #3a4659;
  --border-color-light: #373739;
  --border-color-lighter: #282e3a;
  --border-color-extra-light: #1e1e1f;
  --border-color-dark: #2d2d2d;
  --border-color-darker: #1b1f25;
  --border-color-input: #666;
  --border-color-hover: #4f9eff;
  
  // 阴影颜色
  --shadow-color: rgba(0, 0, 0, 0.2);
  --shadow-color-light: rgba(0, 0, 0, 0.1);
  --shadow-color-dark: #000;
  
  // 渐变色
  --gradient-primary: linear-gradient(-90deg, var(--info-light-color) 0%, rgba(38, 129, 255, 0.89) 100%);
  --gradient-info: linear-gradient(120deg, #54b6d0 16%, #3f8bdb, #3f8bdb);
  --gradient-grid: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 0px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 0px);
  
  // 滚动条颜色
  --scrollbar-thumb-color: hsla(220, 4%, 58%, 0.3);
  --scrollbar-track-color: transparent;
  
  // 特殊颜色
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  --color-inherit: inherit;
  
  // 特殊效果色
  --grid-line-color: rgba(255, 255, 255, 0.1);
  --bg-color-overlay: rgba(0, 0, 0, 0.2);
  --color-overlay: rgba(0, 0, 0, 0.8);
  
  // 组件特定颜色
  --form-bg-color: rgba(0, 192, 222, 0.1);
  --form-border-color: rgba(36, 134, 185, 0.16);
  --form-border-hover-color: rgba(36, 134, 185, 0.2);
  --form-input-bg-color: rgba(255, 255, 255, 0.09);
  --form-input-focus-bg-color: rgba(255, 255, 255, 0.12);
  --menu-drag-color: #18181c;
  --menu-drag-hover-color: var(--primary-color);
  --select-bg-color: #2f3f62;
  --dotted-border-color: var(--primary-hover-color);
}

// 亮色主题
[data-theme="light"] {
  // 主色调
  --primary-color: #2681ff;
  --primary-color-hover: #409eff;
  --primary-hover-color: #409eff;
  --primary-active-color: #1c5dbf;
  --primary-light-color: rgba(38, 129, 255, 0.1);
  --primary-lighter-color: rgba(38, 129, 255, 0.05);
  
  // 辅助色
  --info-color: #00baff;
  --info-text-color: #0099cc;
  --info-light-color: rgba(0, 186, 255, 0.1);
  --info-lighter-color: rgba(0, 192, 222, 0.05);
  
  // 成功色
  --success-color: #67c23a;
  --success-light-color: rgba(103, 194, 58, 0.1);
  
  // 警告色
  --warning-color: #e6a23c;
  --warning-light-color: rgba(230, 162, 60, 0.1);
  
  // 错误色
  --error-color: #f56c6c;
  --error-light-color: rgba(245, 108, 108, 0.1);
  
  // 文本颜色
  --text-color-primary: #303133;
  --text-color-regular: #606266;
  --text-color-secondary: #909399;
  --text-color-placeholder: #c0c4cc;
  --text-color-disabled: #c0c4cc;
  --text-color-light: rgba(0, 0, 0, 0.82);
  --text-color-lighter: rgba(0, 0, 0, 0.52);
  
  // 背景颜色
  --bg-color-primary: #ffffff;
  --bg-color-secondary: #f5f7fa;
  --bg-color-tertiary: #ebeef5;
  --bg-color-quaternary: #e4e7ed;
  --bg-color-page: #f0f2f5;
  --bg-color-mask: rgba(0, 0, 0, 0.1);
  --bg-color-hover: rgba(64, 158, 255, 0.1);
  --bg-color-active: rgba(0, 0, 0, 0.1);
  --bg-color-disabled: #f5f7fa;
  --bg-color-input: #ffffff;
  --bg-color-card: #ffffff;
  --bg-color-menu: #ffffff;
  --bg-color-light: #f8f9fa;
  --bg-color-component: #ffffff;
  
  // 边框颜色
  --border-color-base: #dcdfe6;
  --border-color-light: #e4e7ed;
  --border-color-lighter: #ebeef5;
  --border-color-extra-light: #f2f6fc;
  --border-color-dark: #d3d4d6;
  --border-color-darker: #c0c4cc;
  --border-color-input: #dcdfe6;
  --border-color-hover: var(--primary-color);
  
  // 阴影颜色
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-light: rgba(0, 0, 0, 0.05);
  --shadow-color-dark: rgba(0, 0, 0, 0.2);
  
  // 渐变色
  --gradient-primary: linear-gradient(-90deg, var(--info-light-color) 0%, rgba(38, 129, 255, 0.2) 100%);
  --gradient-info: linear-gradient(120deg, #54b6d0 16%, #3f8bdb, #3f8bdb);
  --gradient-grid: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 0px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 0px);
  
  // 滚动条颜色
  --scrollbar-thumb-color: rgba(144, 147, 153, 0.3);
  --scrollbar-track-color: transparent;
  
  // 特殊颜色
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  --color-inherit: inherit;
  
  // 特殊效果色
  --grid-line-color: rgba(0, 0, 0, 0.1);
  --bg-color-overlay: rgba(0, 0, 0, 0.4);
  --color-overlay: rgba(0, 0, 0, 0.6);
  
  // 组件特定颜色
  --form-bg-color: rgba(64, 158, 255, 0.05);
  --form-border-color: rgba(64, 158, 255, 0.1);
  --form-border-hover-color: rgba(64, 158, 255, 0.2);
  --form-input-bg-color: #ffffff;
  --form-input-focus-bg-color: #ffffff;
  --menu-drag-color: #f0f2f5;
  --menu-drag-hover-color: var(--primary-color);
  --select-bg-color: #ffffff;
  --dotted-border-color: var(--primary-hover-color);
}

// 赛博朋克主题
[data-theme="cyberpunk"] {
  // 主色调 - 霓虹蓝
  --primary-color: #00ffff;
  --primary-color-hover: #33ffff;
  --primary-hover-color: #66ffff;
  --primary-active-color: #00cccc;
  --primary-light-color: rgba(0, 255, 255, 0.3);
  --primary-lighter-color: rgba(0, 255, 255, 0.15);
  
  // 辅助色 - 霓虹紫
  --info-color: #ff00ff;
  --info-text-color: #ff66ff;
  --info-light-color: rgba(255, 0, 255, 0.3);
  --info-lighter-color: rgba(255, 0, 255, 0.15);
  
  // 成功色 - 霓虹绿
  --success-color: #00ff00;
  --success-light-color: rgba(0, 255, 0, 0.3);
  
  // 警告色 - 霓虹橙
  --warning-color: #ffaa00;
  --warning-light-color: rgba(255, 170, 0, 0.3);
  
  // 错误色 - 霓虹红
  --error-color: #ff0040;
  --error-light-color: rgba(255, 0, 64, 0.3);
  
  // 文本颜色 - 高对比度
  --text-color-primary: #00ffff;
  --text-color-regular: #ffffff;
  --text-color-secondary: #cccccc;
  --text-color-placeholder: #888888;
  --text-color-disabled: #666666;
  --text-color-light: rgba(0, 255, 255, 0.9);
  --text-color-lighter: rgba(255, 255, 255, 0.7);
  
  // 背景颜色 - 深色科技感
  --bg-color-primary: #0a0a0a;
  --bg-color-secondary: #1a0a1a;
  --bg-color-tertiary: #0a1a1a;
  --bg-color-quaternary: #1a1a0a;
  --bg-color-page: #050505;
  --bg-color-mask: rgba(255, 0, 255, 0.1);
  --bg-color-hover: rgba(0, 255, 255, 0.2);
  --bg-color-active: rgba(255, 0, 255, 0.3);
  --bg-color-disabled: #2a2a2a;
  --bg-color-input: #1a1a2a;
  --bg-color-card: #2a1a2a;
  --bg-color-menu: #1a2a1a;
  --bg-color-light: #2a2a1a;
  --bg-color-component: #1a1a1a;
  
  // 边框颜色 - 霓虹效果
  --border-color-base: #00ffff;
  --border-color-light: #ff00ff;
  --border-color-lighter: #00ff00;
  --border-color-extra-light: #ffaa00;
  --border-color-dark: #666666;
  --border-color-darker: #333333;
  --border-color-input: #00cccc;
  --border-color-hover: #66ffff;
  
  // 阴影颜色 - 霓虹发光
  --shadow-color: rgba(0, 255, 255, 0.5);
  --shadow-color-light: rgba(255, 0, 255, 0.3);
  --shadow-color-dark: rgba(0, 0, 0, 0.8);
  
  // 渐变色 - 霓虹渐变
  --gradient-primary: linear-gradient(-90deg, #00ffff 0%, #ff00ff 50%, #00ff00 100%);
  --gradient-info: linear-gradient(120deg, #ff00ff 0%, #00ffff 50%, #ff00ff 100%);
  --gradient-grid: linear-gradient(rgba(0, 255, 255, 0.3) 1px, transparent 0px), linear-gradient(90deg, rgba(255, 0, 255, 0.3) 1px, transparent 0px);
  
  // 滚动条颜色
  --scrollbar-thumb-color: rgba(0, 255, 255, 0.6);
  --scrollbar-track-color: rgba(255, 0, 255, 0.2);
  
  // 特殊颜色
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  --color-inherit: inherit;
  
  // 特殊效果色 - 霓虹特效
  --grid-line-color: rgba(0, 255, 255, 0.4);
  --bg-color-overlay: rgba(0, 0, 0, 0.7);
  --color-overlay: rgba(255, 0, 255, 0.3);
  
  // 组件特定颜色
  --form-bg-color: rgba(0, 255, 255, 0.1);
  --form-border-color: rgba(0, 255, 255, 0.5);
  --form-border-hover-color: rgba(0, 255, 255, 0.8);
  --form-input-bg-color: rgba(0, 0, 0, 0.8);
  --form-input-focus-bg-color: rgba(0, 255, 255, 0.1);
  --menu-drag-color: #1a0a1a;
  --menu-drag-hover-color: var(--primary-color);
  --select-bg-color: rgba(255, 0, 255, 0.2);
  --dotted-border-color: var(--primary-hover-color);
} 