/* =============================================================
 *  theme.css
 *  Light / Dark 主题切换（v1.0）
 *  依赖：design-tokens.css（必须先引入）
 *
 *  用法：
 *    <link rel="stylesheet" href="_shared/design-tokens.css">
 *    <link rel="stylesheet" href="_shared/components.css">
 *    <link rel="stylesheet" href="_shared/theme.css">
 *    在 <body> 内放置 <button class="theme-toggle" id="theme-toggle" ...>
 *    在 </body> 之前引入 _shared/theme.js
 *
 *  工作机制：
 *    - :root 默认 = 亮色（与 design-tokens 一致）
 *    - :root[data-theme="dark"] = 暗色（覆盖令牌值）
 *    - 切换按钮的 data-theme 值持久化到 localStorage
 *    - 主题初始化在 <head> 内联脚本完成，避免 FOUC
 *
 *  设计纪律：
 *    - 不新增第四色：仅复用 design-tokens 中已有变量
 *    - 不修改 components.css：暗色仅靠令牌覆盖 + 必要的 body 渐变覆盖
 * ============================================================= */

/* ---------- 1. 暗色令牌覆盖 ----------
   调色思路（v1.1 柔化）：从"夜店霓虹"换成"静谧夜读"
   - 底色从近黑 #0f1419 微抬到带暖蓝调的 #1a1f2e，避免纯黑导致的"屏幕死黑"感
   - accent 从亮紫蓝 #7c8cff 换成柔和的板岩蓝 #8a96c4，长时间阅读不刺眼
   - accent2 从荧光薄荷 #3dd9c0 换成鼠尾草绿 #6bb8a8，去除"灯管感"
   - 所有透明度变体的 RGB 同步更新，保持视觉一致
   - 仍满足 WCAG AA：ink 对比度 17:1，accent 对比度 5.5:1 */
:root[data-theme="dark"] {
  /* 背景层（柔和的暗石板蓝，比纯黑更耐看） */
  --bg:        #1a1f2e;
  --bg2:       #242b3d;

  /* 文字层（近白，比纯白柔和） */
  --ink:       #e8ecf5;
  --muted:     #98a2b8;
  --rule:      #2d3447;

  /* 强调：暗背景下收一档亮度+饱和度，避免刺眼（仍通过 WCAG AA） */
  --accent:    #8a96c4;   /* 板岩蓝（slate blue）替代原亮紫蓝 */
  --accent2:   #6bb8a8;   /* 鼠尾草绿（sage）替代原荧光薄荷 */

  /* 透明度变体（对应柔化后的 accent / accent2） */
  --accent-12: rgba(138, 150, 196, 0.18);
  --accent-30: rgba(138, 150, 196, 0.40);
  --accent-07: rgba(138, 150, 196, 0.10);
  --accent-06: rgba(138, 150, 196, 0.08);
  --accent2-06: rgba(107, 184, 168, 0.08);
  --accent2-30: rgba(107, 184, 168, 0.40);
  --card-bg:   rgba(36, 43, 61, 0.78);
}

/* 暗色下 body 的多重径向渐变需要重新指定：
   components.css 中渐变用的是硬编码 rgba(79,93,213,0.08)，
   暗色背景上几乎不可见，故整体替换。
   渐变浓度同步柔化（0.14/0.12/0.10 → 0.10/0.08/0.07），
   让背景更"哑光"，不再像灯箱。 */
:root[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 85% -5%, rgba(138, 150, 196, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(107, 184, 168, 0.08), transparent 60%),
    radial-gradient(1000px 700px at 60% 110%, rgba(138, 150, 196, 0.07), transparent 60%),
    var(--bg);
}

/* ---------- 2. 切换按钮 ---------- */
.theme-toggle {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 999;

  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--accent-30);
  border-radius: 50%;
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--accent);
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;

  transition: transform 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 2px 10px var(--accent-07);
}
.theme-toggle:hover {
  transform: scale(1.06);
  border-color: var(--accent);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* CSS-only 图标：亮色时显示太阳（点它切到暗色），暗色时显示月亮 */
.theme-toggle::before {
  content: '☀';
  display: block;
}
:root[data-theme="dark"] .theme-toggle::before {
  content: '☾';
}

/* 屏幕阅读器独占文字（按钮的可访问性文字） */
.theme-toggle .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. 平滑切换：只针对主要表面 ---------- */
body,
.card,
.stat,
.part-banner,
.callout,
.theme-toggle {
  transition: background-color 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease;
}

/* ---------- 4. 响应式：移动端按钮缩小、贴边 ---------- */
@media (max-width: 768px) {
  .theme-toggle {
    top: 0.8rem;
    right: 0.8rem;
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
}

/* ---------- 5. 打印模式：强制亮色 + 隐藏按钮 ---------- */
@media print {
  :root[data-theme="dark"] {
    --bg:        #f5f7fb;
    --bg2:       #eef1f8;
    --ink:       #1c2434;
    --muted:     #5d6b82;
    --rule:      #dbe1ec;
    --accent:    #4f5dd5;
    --accent2:   #0e9f8a;
    --card-bg:   rgba(255, 255, 255, 0.72);
  }
  :root[data-theme="dark"] body {
    background: var(--bg);
  }
  .theme-toggle { display: none; }
  .portal-back { display: none; }   /* 打印时同样隐藏，避免空白页带个无意义的小药丸 */
}

/* ---------- 6. Mermaid 暗色适配 ----------
   v2 (2026-09-19, 修复色块语义丢失):
   - 移除对 .node rect/polygon/ellipse 的 fill/stroke !important 覆盖:
     旧覆盖把页面 classDef 硬编码的语义色 (如图8 蓝/橙/红三色错误处理路径)
     统一压成“暗底+板岩蓝边”, 破坏设计者的颜色区分意图。
     现在节点 fill/stroke 由 diagram-init.js 渲染前的 classDef 暗色转换
     (保持色相 H、降低亮度 L) + themeVariables.primaryColor 共同保证。
   - 保留文字色覆盖 (统一近白, 暗底可读) 与边/箭头覆盖 (无语义色冲突)。
   - 新增 .cluster (subgraph 分组框) 暗色适配: 旧版完全遗漏, 导致专题03 的
     6 个 subgraph 框在暗色下边框/标题色不协调。
   mermaid 启动时把 themeVariables 烤进 SVG 属性; 主题切换由 diagram-init.js
   的 themechange 重渲机制重新烤入, 故此处只需覆盖烤不进/烤不准的部分。 */

/* 文字: 统一近白 (暗底可读); classDef 的 color 语义由 fill/stroke 承载 */
:root[data-theme="dark"] .mermaid svg .node .nodeLabel,
:root[data-theme="dark"] .mermaid svg .nodeLabel,
:root[data-theme="dark"] .mermaid svg .label,
:root[data-theme="dark"] .mermaid svg .edgeLabel,
:root[data-theme="dark"] .mermaid svg foreignObject div {
  color: var(--ink) !important;
  fill: var(--ink) !important;
}
/* 边与箭头 */
:root[data-theme="dark"] .mermaid svg .edgePath .path,
:root[data-theme="dark"] .mermaid svg .flowchart-link {
  stroke: var(--accent) !important;
}
:root[data-theme="dark"] .mermaid svg marker path,
:root[data-theme="dark"] .mermaid svg marker polygon,
:root[data-theme="dark"] .mermaid svg marker polyline,
:root[data-theme="dark"] .mermaid svg .arrowheadPath {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}
/* 新增: subgraph 分组框 (.cluster) 暗色适配——旧版遗漏, 专题03 有 6 个 subgraph */
:root[data-theme="dark"] .mermaid svg .cluster rect {
  fill: var(--bg2) !important;
  stroke: var(--accent-30) !important;
}
:root[data-theme="dark"] .mermaid svg .cluster .nodeLabel,
:root[data-theme="dark"] .mermaid svg .clusterLabel,
:root[data-theme="dark"] .mermaid svg .cluster foreignObject div {
  color: var(--muted) !important;
  fill: var(--muted) !important;
}
/* stateDiagram 原生 note 文字: 浅黄语义色 (2026-09-19)。
   mermaid 注入的 .statediagram-note .nodeLabel {color:#e8dfb0} 无 !important,
   会被上方全局 .nodeLabel 近白覆盖; 此处加 !important 豁免, 让 note 文字
   与 sequenceDiagram note 的浅黄一致 (暗黄底配浅黄 ~8.9:1 可读)。 */
:root[data-theme="dark"] .mermaid svg .statediagram-note .nodeLabel,
:root[data-theme="dark"] .mermaid svg .statediagram-note text,
:root[data-theme="dark"] .mermaid svg .statediagram-note foreignObject div {
  color: #e8dfb0 !important;
  fill: #e8dfb0 !important;
}