/**
 * 主题样式管理
 */

/* 默认主题 (明亮) */
:root {
  --primary-color: #4a6fa5;
  --secondary-color: #6c8bc7;
  --accent-color: #ff6b6b;
  --success-color: #51cf66;
  --warning-color: #ffd43b;
  --danger-color: #ff6b6b;
  
  --bg-color: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  
  --text-color: #212529;
  --text-secondary: #6c757d;
  --text-muted: #868e96;
  
  --border-color: #dee2e6;
  --border-radius: 8px;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  
  --font-family: 'Noto Sans SC', 'Segoe UI', system-ui, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* 暗黑主题 */
[data-theme="dark"] {
  --primary-color: #5c7cfa;
  --secondary-color: #748ffc;
  --accent-color: #ff6b6b;
  --success-color: #51cf66;
  --warning-color: #ffd43b;
  --danger-color: #ff6b6b;
  
  --bg-color: #212529;
  --bg-secondary: #343a40;
  --bg-tertiary: #495057;
  
  --text-color: #f8f9fa;
  --text-secondary: #ced4da;
  --text-muted: #adb5bd;
  
  --border-color: #495057;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --box-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* 复古主题 */
[data-theme="retro"] {
  --primary-color: #8b4513;
  --secondary-color: #a0522d;
  --accent-color: #daa520;
  --success-color: #228b22;
  --warning-color: #ff8c00;
  --danger-color: #dc143c;
  
  --bg-color: #f5e6d3;
  --bg-secondary: #e8d9c5;
  --bg-tertiary: #dccbb8;
  
  --text-color: #3d2b1f;
  --text-secondary: #5d4a3d;
  --text-muted: #7d6a5d;
  
  --border-color: #c9b8a5;
  --border-radius: 4px;
}

/* 蓝色主题 */
[data-theme="blue"] {
  --primary-color: #1864ab;
  --secondary-color: #1971c2;
  --accent-color: #1c7ed6;
  --success-color: #2b8a3e;
  --warning-color: #e67700;
  --danger-color: #c92a2a;
  
  --bg-color: #f0f9ff;
  --bg-secondary: #e0f2fe;
  --bg-tertiary: #bae6fd;
  
  --text-color: #0c4a6e;
  --text-secondary: #075985;
  --text-muted: #0369a1;
  
  --border-color: #7dd3fc;
}

/* 绿色主题 */
[data-theme="green"] {
  --primary-color: #2b8a3e;
  --secondary-color: #37b24d;
  --accent-color: #40c057;
  --success-color: #2b8a3e;
  --warning-color: #f59f00;
  --danger-color: #e03131;
  
  --bg-color: #f8f9fa;
  --bg-secondary: #ebfbee;
  --bg-tertiary: #d3f9d8;
  
  --text-color: #0c3b1e;
  --text-secondary: #1a7431;
  --text-muted: #2b8a3e;
  
  --border-color: #b2f2bb;
}

/* 紫色主题 */
[data-theme="purple"] {
  --primary-color: #7048e8;
  --secondary-color: #845ef7;
  --accent-color: #9c36b5;
  --success-color: #37b24d;
  --warning-color: #f59f00;
  --danger-color: #e03131;
  
  --bg-color: #f8f0fc;
  --bg-secondary: #f3d9fa;
  --bg-tertiary: #eebefa;
  
  --text-color: #3b0b5e;
  --text-secondary: #5c2081;
  --text-muted: #7c3aed;
  
  --border-color: #d0bfff;
}

/* 主题切换动画 */
.theme-transition * {
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

/* 主题指示器 */
.theme-indicator {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-color);
  border: 2px solid var(--border-color);
  box-shadow: var(--box-shadow);
  cursor: pointer;
  z-index: 1000;
  font-size: 1.5rem;
  transition: all var(--transition-base);
}

.theme-indicator:hover {
  transform: scale(1.1);
  box-shadow: var(--box-shadow-lg);
}

.theme-indicator::before {
  content: "🎨";
}

[data-theme="dark"] .theme-indicator::before {
  content: "🌙";
}

[data-theme="retro"] .theme-indicator::before {
  content: "📜";
}

[data-theme="blue"] .theme-indicator::before {
  content: "💧";
}

[data-theme="green"] .theme-indicator::before {
  content: "🌿";
}

[data-theme="purple"] .theme-indicator::before {
  content: "🔮";
}

/* 主题选择器弹窗 */
.theme-picker {
  position: fixed;
  bottom: 5rem;
  right: 1rem;
  background: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  box-shadow: var(--box-shadow-lg);
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 200px;
}

.theme-picker.show {
  display: flex;
  animation: slideUp 200ms ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.theme-option:hover {
  background: var(--bg-secondary);
}

.theme-option.active {
  background: var(--bg-secondary);
  border-left: 4px solid var(--primary-color);
}

.theme-preview {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--border-color);
}

.theme-option[data-theme="light"] .theme-preview {
  background: linear-gradient(135deg, #ffffff 50%, #4a6fa5 50%);
}

.theme-option[data-theme="dark"] .theme-preview {
  background: linear-gradient(135deg, #212529 50%, #5c7cfa 50%);
}

.theme-option[data-theme="retro"] .theme-preview {
  background: linear-gradient(135deg, #f5e6d3 50%, #8b4513 50%);
}

.theme-option[data-theme="blue"] .theme-preview {
  background: linear-gradient(135deg, #f0f9ff 50%, #1864ab 50%);
}

.theme-option[data-theme="green"] .theme-preview {
  background: linear-gradient(135deg, #f8f9fa 50%, #2b8a3e 50%);
}

.theme-option[data-theme="purple"] .theme-preview {
  background: linear-gradient(135deg, #f8f0fc 50%, #7048e8 50%);
}

.theme-name {
  font-weight: 500;
  color: var(--text-color);
}

/* 系统主题检测 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}