/* 见月 · 深色模式
   ─────────────────────────────────────────────────────────────
   只认 `[data-theme="dark"]`：**跟随系统**由 head 里的内联脚本先解析成
   dark / light 再写进 <html data-theme>，这样「跟随系统」和「手动切换」
   共用同一套 CSS —— 不会出现 `@media` 与 `[data-theme]` 两套规则互相打架。

   为什么不逐个改那 250 处硬编码色值：它们绝大多数是组件级细节（代码块、
   徽章、下载卡），本身已有深底或只占很小面积。这里只覆盖「决定页面明暗」
   的那一层 token 与几个大面积浅底容器；组件层保持原样，视觉上不刺眼，
   也不会因为漏改一个 hex 就出现一块白斑。

   品牌色 --brand 不覆盖：它由主题选项配置（theme_option_css 注入），
   在这里改会盖掉用户选的颜色。
*/

:root { color-scheme: light dark; }

[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #171a23;
  --ink: #e8eaf2;
  --text: #b9bfd0;
  --muted: #8390a6;
  --line: rgba(124, 140, 255, .20);
  --line-soft: #1e232f;
  --brand-soft: #1d2333;
  --brand-soft-2: #232a3d;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 64px -20px rgba(0, 0, 0, .62);
}

/* jianyue2 把 body 底色写死成 #fff 了，必须显式压掉 */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* 顶栏原值是 rgba(255,255,255,.82) 的毛玻璃，深色下换深底同透明度 */
[data-theme="dark"] .site-head { background: rgba(15, 17, 23, .86); border-bottom-color: var(--line); }
[data-theme="dark"] .wv-head   { background: rgba(15, 17, 23, .92); border-bottom-color: var(--line); }

/* 卡片 / 正文 / 表单：统一走 --surface，把散落的 #fff 收口 */
[data-theme="dark"] .post-card,
[data-theme="dark"] .j2-card,
[data-theme="dark"] .article,
[data-theme="dark"] .j2-post,
[data-theme="dark"] .j2-side,
[data-theme="dark"] .j2-w,
[data-theme="dark"] .comment,
[data-theme="dark"] .search-box,
[data-theme="dark"] .search-box input,
[data-theme="dark"] .j2-find input,
[data-theme="dark"] .wf-toc { background: var(--surface); border-color: var(--line); }

/* 代码块本来就是深底，深色下补一道边，避免和页面糊在一起 */
[data-theme="dark"] .article-body pre { border: 1px solid var(--line); }

/* 分隔线与弱化文字在深底上要重新压一档，否则 #9096A6 会发灰到看不清 */
[data-theme="dark"] .j2-pmeta,
[data-theme="dark"] .post-card-meta,
[data-theme="dark"] .hm { color: var(--muted); }

/* 切換按钮：右下角浮动，与「回到顶部」（bottom:24）错开，不插入页头布局 */
.wf-theme-toggle {
  position: fixed; right: 24px; bottom: 76px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-size: 16px; line-height: 1; cursor: pointer; z-index: 9996;
  box-shadow: var(--shadow);
  transition: opacity .2s, transform .2s, border-color .2s;
}
.wf-theme-toggle:hover { transform: translateY(-2px); border-color: var(--brand); }
.wf-theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 520px) { .wf-theme-toggle { right: 14px; bottom: 64px; } }
@media print { .wf-theme-toggle { display: none; } }