/* ===== 白白百宝箱文章页公共主题 =====
 * 引入方式: <link rel="stylesheet" href="/wenzhang/assets/theme.css">
 * 亮色默认 + 暗色(prefers-color-scheme)自动 + body.light 手动切换
 * 新文章页只需引入本文件即自动适配白天/黑夜
 */
:root {
  --brand-primary: #7c3aed;
  --brand-gradient-start: #a78bfa;
  --brand-gradient-end: #7c3aed;
  --bg-primary: #f8f9fb;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-code: #f1f5f9;
  --text-primary: #1a1a2e;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --content-width: 720px;
  --content-width-wide: 900px;
}

/* 手动亮色(body.light)覆盖 —— 与默认一致 */
body.light {
  --bg-primary: #f8f9fb;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-code: #f1f5f9;
  --text-primary: #1a1a2e;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

/* 系统偏好暗色 */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-card: #1e1e32;
    --bg-code: #2d2d44;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #2d2d44;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.4);
  }
}

/* 手动暗色(body 无 light 类时的暗色变量，供非 prefers 场景) */
body:not(.light):not(:root) {
  /* 实际暗色由 media 查询控制；此处兜底 */
}

/* 手动暗色(body.dark)覆盖 —— 强制暗色, 不依赖系统偏好
 * 主页手动切黑夜时 localStorage['theme']='dark', theme.js 加 body.dark */
body.dark {
  --bg-primary: #0f0f1a;
  --bg-secondary: #1a1a2e;
  --bg-card: #1e1e32;
  --bg-code: #2d2d44;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: #2d2d44;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.4);
  background: #0f0f1a;
  color: #f1f5f9;
}

/* body.dark 子元素细节(与 body.light 块对应) */
body.dark .topbar { background: rgba(15,15,26,0.9); border-bottom-color: rgba(255,255,255,0.08); }
body.dark .topbar a { color: #cbd5e1; }
body.dark .topbar .brand { color: #f1f5f9; }
body.dark .article-card { background: #1e1e32; border-color: rgba(255,255,255,0.08); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.4); }
body.dark .breadcrumb { color: #94a3b8; }
body.dark .breadcrumb a { color: #a78bfa; }
body.dark .art-title { color: #f1f5f9; }
body.dark .art-meta { color: #94a3b8; }
body.dark .art-body { color: #d1d5db; }
body.dark .art-body h1, body.dark .art-body h2 { color: #f1f5f9; }
body.dark .art-body h2 { color: #a78bfa !important; }
body.dark .art-body h3 { color: #f1f5f9; }
body.dark .art-body strong { color: #a78bfa; }
body.dark .art-body blockquote { background: rgba(124,58,237,0.15); color: #cbd5e1; border-left-color: #a78bfa; }
body.dark .art-body hr::after { background: #1a1a2e; color: #94a3b8; }
body.dark .art-body table th { background: rgba(124,58,237,0.2); color: #f1f5f9; }
body.dark .art-body td { border-color: #2d2d44; color: #d1d5db; }
body.dark .art-body tr:nth-child(even) { background: rgba(255,255,255,0.03); }
body.dark .art-body img { opacity: 0.9; }
body.dark .back-home { background: #1e1e32; border-color: #2d2d44; color: #a78bfa; }
body.dark .back-home:hover { background: rgba(124,58,237,0.2); }
body.dark .theme-toggle { background: rgba(124,58,237,0.2); border-color: rgba(167,139,250,0.3); color: #a78bfa; }

/* 主题切换按钮 */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 1000;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 1.15em;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
}
.theme-toggle:hover {
  transform: scale(1.1);
  background: rgba(167,139,250,0.3);
}
body.light .theme-toggle {
  background: rgba(124,58,237,0.1);
  border-color: rgba(124,58,237,0.25);
  color: #7c3aed;
}


/* ===== 修复: 黑夜里正文里 Word 粘贴遗留的内联纯黑 color:rgb(0,0,0) =====
 * 正文 p 常带 style="color: rgb(0,0,0)" 内联样式, 优先级盖过 body.dark 变量,
 * 导致黑夜模式下文字仍是黑色、与深色背景混在一起看不清。
 * 用 !important 强制覆盖(仅限 body.dark 且仅针对正文 .art-body 内段落)。
 * 亮色模式不受影响; 标题/链接/strong/blockquote 的专属颜色仍由上方具体规则负责。
 */
body.dark .art-body p,
body.dark .art-body section,
body.dark .art-body blockquote > p,
body.dark .art-body li,
body.dark .art-body td {
  color: #d1d5db !important;
}
/* 正文段落内联黑色(Word粘贴遗留), section/p 都已覆盖 */
body.dark .art-body section { color: #d1d5db !important; }