/**
 * 智能错题本 - 主题：活力青春风
 * 设计理念：采用明亮活力的珊瑚红/黄色系，年轻活泼，充满学习动力
 */

:root[data-theme="vibrant"] {
  /* 主色 - 珊瑚红 */
  --color-primary: #FF6B6B;
  --color-primary-light: #FF8E8E;
  --color-primary-dark: #E85555;
  --color-primary-50: #FFF0F0;
  --color-primary-100: #FFE0E0;
  
  /* 强调色 - 明亮黄 */
  --color-accent: #FFE66D;
  --color-accent-light: #FFF0A0;
  --color-accent-dark: #FFD93D;
  
  /* 辅助色 */
  --color-secondary: #4ECDC4;
  --color-success: #52C41A;
  --color-warning: #FAAD14;
  --color-error: #FF4D4F;
  
  /* 背景色 */
  --bg-primary: #FFFFFF;
  --bg-secondary: #FFF8F8;
  --bg-tertiary: #FFF0F0;
  --bg-warm: #FFFBF0;
  --bg-hover: #FFF5F5;
  
  /* 文字颜色 */
  --text-primary: #2D3748;
  --text-secondary: #718096;
  --text-tertiary: #A0AEC0;
  --text-inverse: #FFFFFF;
  
  /* 边框 */
  --border-color: #FED7D7;
  --border-color-hover: #FEB2B2;
  
  /* 阴影 - 彩色阴影 */
  --shadow-sm: 0 2px 4px rgba(255, 107, 107, 0.1);
  --shadow-md: 0 4px 12px rgba(255, 107, 107, 0.15);
  --shadow-lg: 0 8px 24px rgba(255, 107, 107, 0.2);
  --shadow-xl: 0 16px 40px rgba(255, 107, 107, 0.25);
  --shadow-colored: 0 4px 14px rgba(255, 107, 107, 0.3);
  --shadow-accent: 0 4px 14px rgba(255, 230, 109, 0.4);
  --shadow-focus: 0 0 0 4px rgba(255, 107, 107, 0.2);
  
  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  --gradient-header: linear-gradient(135deg, #FFFFFF 0%, #FFF8F8 100%);
}

/* Header 样式 - 活力青春风 */
[data-theme="vibrant"] .header {
  background: var(--gradient-header);
  border-bottom: 2px solid var(--border-color);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

[data-theme="vibrant"] .logo {
  color: var(--color-primary);
}

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

/* Button 样式 - 活力青春风 */
[data-theme="vibrant"] .btn-primary {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-colored);
}

[data-theme="vibrant"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

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

[data-theme="vibrant"] .btn-secondary:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-50);
}

/* Card 样式 - 活力青春风 */
[data-theme="vibrant"] .card {
  background-color: white;
  border: 2px solid var(--border-color);
}

[data-theme="vibrant"] .card:hover {
  border-color: var(--color-primary-100);
  box-shadow: var(--shadow-lg);
}

[data-theme="vibrant"] .feature-card {
  background: var(--card-background);
  border: 2px solid var(--border-color);
}

[data-theme="vibrant"] .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary);
}

[data-theme="vibrant"] .welcome-card {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: var(--shadow-colored);
}

/* 底部导航 - 活力青春风 */
[data-theme="vibrant"] .bottom-nav {
  background: var(--bg-primary);
  border-top: 2px solid var(--border-color);
}

[data-theme="vibrant"] .nav-item.active {
  color: var(--color-primary);
}

/* 主题切换器样式 - 活力模式 */
[data-theme="vibrant"] .theme-switcher {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow-colored);
}