/* 黑暗模式样式 */
.dark-mode {
  /* 背景颜色 */
  --bg-primary: #1a202c;
  --bg-secondary: #2d3748;
  --bg-tertiary: #4a5568;
  
  /* 文本颜色 */
  --text-primary: #e2e8f0;
  --text-secondary: #cbd5e0;
  --text-tertiary: #a0aec0;
  
  /* 边框颜色 */
  --border-primary: #4a5568;
  --border-secondary: #2d3748;
  
  /* 强调色 */
  --accent-primary: #63b3ed;
  --accent-secondary: #4299e1;
  
  /* 按钮颜色 */
  --btn-primary-bg: #3182ce;
  --btn-primary-hover: #2b6cb0;
  --btn-secondary-bg: #4a5568;
  --btn-secondary-hover: #2d3748;
}

/* 应用黑暗模式 */
.dark-mode body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* 头部样式 */
.dark-mode header {
  background-color: var(--bg-secondary);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* 卡片样式 */
.dark-mode .bg-white,
.dark-mode .article-card,
.dark-mode .content-section,
.dark-mode #toc {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* 边框样式 */
.dark-mode .border,
.dark-mode .border-gray-300,
.dark-mode .article-card {
  border-color: var(--border-primary);
}

/* 文本颜色 */
.dark-mode .text-gray-500,
.dark-mode .text-gray-600,
.dark-mode .text-gray-700,
.dark-mode .text-gray-800 {
  color: var(--text-secondary);
}

.dark-mode .text-gray-400 {
  color: var(--text-tertiary);
}

/* 链接样式 */
.dark-mode a {
  color: var(--accent-primary);
}

.dark-mode a:hover {
  color: var(--accent-secondary);
}

/* 按钮样式 */
.dark-mode .bg-primary,
.dark-mode .btn-active {
  background-color: var(--btn-primary-bg);
}

.dark-mode .bg-primary:hover,
.dark-mode .btn-active:hover {
  background-color: var(--btn-primary-hover);
}

.dark-mode .bg-gray-200 {
  background-color: var(--btn-secondary-bg);
  color: var(--text-primary);
}

.dark-mode .bg-gray-200:hover {
  background-color: var(--btn-secondary-hover);
}

/* 输入框样式 */
.dark-mode input[type="text"],
.dark-mode input[type="search"] {
  background-color: var(--bg-tertiary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.dark-mode input[type="text"]::placeholder,
.dark-mode input[type="search"]::placeholder {
  color: var(--text-tertiary);
}

/* 代码块样式 */
.dark-mode pre {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* 页脚样式 */
.dark-mode footer {
  background-color: var(--bg-secondary);
  color: var(--text-tertiary);
}

/* 高亮样式 */
.dark-mode .bg-yellow-200 {
  background-color: #7c2d12;
  color: #fefcbf;
}

/* 分类标签标签样式 */
.dark-mode .bg-blue-100 {
  background-color: #2b4c7e;
  color: #90cdf4;
}

/* 摘要部分样式 */
.dark-mode .bg-blue-50 {
  background-color: #1a365d;
  color: #e2e8f0;
}

/* 可折叠区域样式 */
.dark-mode .collapsible-header {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.dark-mode .collapsible-content {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* 通知样式 */
.dark-mode .alert {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

/* 模式切换按钮样式 */
.mode-toggle {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.mode-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.dark-mode .mode-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 加载指示器样式 */
.dark-mode .animate-spin {
  border-color: var(--accent-primary);
  border-top-color: transparent;
}

/* 骨架屏样式 */
.dark-mode .skeleton {
  background-color: var(--bg-tertiary);
  background-image: linear-gradient(90deg, var(--bg-tertiary), var(--bg-secondary), var(--bg-tertiary));
}