/**
 * 智能错题本 - 主题：深色科技风
 * 设计理念：采用深色背景配合亮色点缀，科技感十足，护眼舒适，适合夜间使用
 */

:root[data-theme="dark"] {
  /* 主色调 - 青色/蓝色霓虹系 */
  --primary-50: #e6fffb;
  --primary-100: #b5f5ec;
  --primary-200: #87e8de;
  --primary-300: #5cdbd3;
  --primary-400: #36cfc9;
  --primary-500: #13c2c2;
  --primary-600: #08979c;
  --primary-700: #006d75;
  --primary-800: #00474f;
  --primary-900: #002329;
  
  /* 强调色 - 紫色/粉色霓虹 */
  --accent-purple: #a855f7;
  --accent-pink: #ec4899;
  --accent-cyan: #06b6d4;
  --accent-blue: #3b82f6;
  --accent-green: #10b981;
  --accent-orange: #f59e0b;
  --accent-red: #ef4444;
  
  /* 深色背景系 */
  --dark-0: #000000;
  --dark-50: #0a0a0f;
  --dark-100: #12121a;
  --dark-150: #1a1a25;
  --dark-200: #22222e;
  --dark-250: #2a2a38;
  --dark-300: #323242;
  --dark-400: #444456;
  --dark-500: #565668;
  --dark-600: #78788a;
  --dark-700: #9a9aac;
  --dark-800: #bcbcce;
  --dark-900: #dedeef;
  --dark-1000: #ffffff;
  
  /* 语义化颜色 */
  --color-primary: var(--primary-400);
  --color-primary-light: var(--primary-300);
  --color-primary-dark: var(--primary-500);
  --color-success: var(--accent-green);
  --color-warning: var(--accent-orange);
  --color-error: var(--accent-red);
  
  /* 背景色 */
  --bg-primary: var(--dark-100);
  --bg-secondary: var(--dark-150);
  --bg-tertiary: var(--dark-200);
  --bg-hover: var(--dark-200);
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-glass: rgba(26, 26, 37, 0.8);
  
  /* 文字颜色 */
  --text-primary: var(--dark-900);
  --text-secondary: var(--dark-700);
  --text-tertiary: var(--dark-600);
  --text-inverse: var(--dark-0);
  
  /* 边框 */
  --border-color: var(--dark-300);
  --border-color-hover: var(--dark-400);
  
  /* 阴影 - 霓虹风格 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-glow-primary: 0 0 20px rgba(19, 194, 194, 0.4);
  --shadow-focus: 0 0 0 3px rgba(19, 194, 194, 0.3);
  
  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  --gradient-header: linear-gradient(180deg, var(--dark-100) 0%, rgba(18, 18, 26, 0.95) 100%);
}

/* Header 样式 - 深色科技风 */
[data-theme="dark"] .header {
  background: var(--gradient-header);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-md), 0 1px 0 0 rgba(19, 194, 194, 0.1);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
}

[data-theme="dark"] .logo {
  color: var(--primary-300);
  text-shadow: 0 0 20px rgba(19, 194, 194, 0.5);
}

[data-theme="dark"] .slogan {
  color: var(--text-secondary);
}

/* Button 样式 - 深色科技风 */
[data-theme="dark"] .btn-primary {
  background: var(--gradient-primary);
  box-shadow: 0 0 15px rgba(19, 194, 194, 0.3);
}

[data-theme="dark"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
  box-shadow: 0 0 25px rgba(19, 194, 194, 0.5);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-secondary {
  background-color: var(--dark-200);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
  background-color: var(--dark-250);
  border-color: var(--primary-600);
  color: var(--primary-300);
  box-shadow: 0 0 10px rgba(19, 194, 194, 0.15);
}

/* Card 样式 - 深色科技风 */
[data-theme="dark"] .card {
  background: linear-gradient(145deg, var(--dark-150), var(--dark-200));
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .card:hover {
  border-color: var(--primary-600);
  box-shadow: 0 0 30px rgba(19, 194, 194, 0.15), var(--shadow-lg);
  transform: translateY(-2px);
}

[data-theme="dark"] .feature-card {
  background: linear-gradient(145deg, var(--dark-150), var(--dark-200));
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(19, 194, 194, 0.2);
  border-color: var(--primary-600);
}

[data-theme="dark"] .welcome-card {
  background: linear-gradient(135deg, var(--primary-500), var(--accent-purple));
  box-shadow: var(--shadow-glow-primary);
}

/* 底部导航 - 深色科技风 */
[data-theme="dark"] .bottom-nav {
  background: var(--dark-150);
  border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .nav-item.active {
  color: var(--primary-300);
  text-shadow: 0 0 10px rgba(19, 194, 194, 0.5);
}

/* 主题切换器样式 - 深色模式 */
[data-theme="dark"] .theme-switcher {
  background: rgba(26, 26, 37, 0.95);
  border: 1px solid var(--border-color);
}