/* 易学社区主题系统 - 支持深色和浅色模式切换 */

/* 颜色变量定义 */
:root {
  /* 默认为深色主题 */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2a2a2a;
  --bg-tertiary: #333333;
  --text-primary: #ffffff;
  --text-secondary: #bbbbbb;
  --text-tertiary: #888888;
  --accent-color: #D4AF37;
  --accent-color-light: rgba(212, 175, 55, 0.2);
  --accent-color-hover: #e5c76b;
  --highlight-color: #ff5a3a;
  --highlight-gradient: linear-gradient(to right, #ff2b55, #ff5a3a);
  --shadow-color: rgba(0, 0, 0, 0.2);
  --border-color: #333333;
  --success-color: #4ade80;
  --warning-color: #facc15;
  --error-color: #f87171;
  --divider-color: #333333;
}

/* 浅色主题变量 */
[data-theme="light"] {
  --bg-primary: #f8f8f8;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f0f0;
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --accent-color: #D4AF37;
  --accent-color-light: rgba(212, 175, 55, 0.15);
  --accent-color-hover: #c6a030;
  --highlight-color: #ff5a3a;
  --highlight-gradient: linear-gradient(to right, #ff2b55, #ff5a3a);
  --shadow-color: rgba(0, 0, 0, 0.08);
  --border-color: #e0e0e0;
  --success-color: #22c55e;
  --warning-color: #eab308;
  --error-color: #ef4444;
  --divider-color: #e5e5e5;
}

/* 主题过渡效果 */
body, * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 浅色模式文本颜色覆盖 */
[data-theme="light"] .text-primary {
  color: #333333 !important;
}

[data-theme="light"] .text-secondary {
  color: #666666 !important;
}

[data-theme="light"] .text-tertiary {
  color: #999999 !important;
}

[data-theme="light"] h1, 
[data-theme="light"] h2, 
[data-theme="light"] h3, 
[data-theme="light"] h4, 
[data-theme="light"] h5, 
[data-theme="light"] h6 {
  color: #333333 !important;
}

[data-theme="light"] p {
  color: #666666 !important;
}

/* 保持特殊文本颜色 */
[data-theme="light"] .text-accent {
  color: var(--accent-color) !important;
}

[data-theme="light"] .text-highlight {
  color: var(--highlight-color) !important;
}

[data-theme="light"] .text-white {
  color: #ffffff !important;
}

/* 底部导航活跃样式 */
.nav-item.active {
  font-weight: bold;
  color: var(--accent-color) !important;
}

/* 底部导航活跃图标样式 */
.nav-item.active i {
  color: var(--accent-color) !important;
}

/* 背景颜色类 */
.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.bg-tertiary {
  background-color: var(--bg-tertiary);
}

.bg-accent {
  background-color: var(--accent-color);
}

.bg-accent-light {
  background-color: var(--accent-color-light);
}

.bg-highlight {
  background-color: var(--highlight-color);
}

.bg-highlight-gradient {
  background: var(--highlight-gradient);
}

/* 文本颜色类 */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-accent {
  color: var(--accent-color);
}

.text-highlight {
  color: var(--highlight-color);
}

/* 边框颜色 */
.border-color {
  border-color: var(--border-color);
}

/* 阴影 */
.shadow-theme {
  box-shadow: 0 1px 3px var(--shadow-color);
}

.shadow-theme-lg {
  box-shadow: 0 4px 6px var(--shadow-color);
}

/* 状态颜色 */
.text-success {
  color: var(--success-color);
}

.text-warning {
  color: var(--warning-color);
}

.text-error {
  color: var(--error-color);
}

.bg-success {
  background-color: var(--success-color);
}

.bg-warning {
  background-color: var(--warning-color);
}

.bg-error {
  background-color: var(--error-color);
}

/* 主题切换开关样式 */
.theme-switch {
  position: fixed;
  bottom: 70px;
  right: 20px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px var(--shadow-color);
  z-index: 1000;
  cursor: pointer;
}

.theme-switch i {
  color: var(--accent-color);
  font-size: 20px;
}

/* 暗黑模式开启时隐藏月亮图标，显示太阳图标 */
.theme-switch .fa-moon {
  display: none;
}

.theme-switch .fa-sun {
  display: block;
}

/* 浅色模式开启时隐藏太阳图标，显示月亮图标 */
[data-theme="light"] .theme-switch .fa-moon {
  display: block;
}

[data-theme="light"] .theme-switch .fa-sun {
  display: none;
}