/* =============================================
   🌙 开发者文档 · 暗色主题
       Developer Docs Dark Theme for smzhbook
   与 developer-light.css 配对：html.dark 时覆盖全部 CSS 变量
   风格: GitHub Docs (Primer dark) + VitePress 结构
   用法: 导航栏 ☀/🌙 按钮切换（见 theme-toggle.js）
   ============================================= */

/* 亮色为默认（原生控件 / 滚动条配色声明） */
:root {
  color-scheme: light;
}

/* ========== 暗色：CSS 变量覆盖（唯一暗色定义点） ========== */
html.dark {
  color-scheme: dark;

  /* ---------------------- 背景（GitHub Dark） */
  --vp-c-bg: #0d1117;        /* 页面主背景 */
  --vp-c-bg-alt: #161b22;    /* 侧边栏背景 */
  --vp-c-bg-soft: #161b22;   /* hover 面 / 表头 / 图表容器 */
  --vp-c-bg-elv: #1c2128;    /* 下拉 / 浮动面板 */

  /* ---------------------- 文字（GitHub Dark fg 色阶） */
  --vp-c-text-1: #e6edf3;    /* 正文 / 标题 */
  --vp-c-text-2: #9198a1;    /* 次级文字 */
  --vp-c-text-3: #6e7681;    /* 弱化文字 */

  /* ---------------------- 品牌色 — 靛蓝（暗底提亮） */
  --vp-c-brand-1: #8b93f8;   /* 常规态 */
  --vp-c-brand-2: #a5abff;   /* hover 态 */
  --vp-c-brand-3: #7c84f7;   /* 按下态 */
  --vp-c-brand-soft: rgba(139, 147, 248, 0.15);  /* 选中 / 激活浅底 */

  /* ---------------------- 边框 / 分割线（GitHub Dark border） */
  --vp-c-divider: #30363d;
  --vp-c-gutter: #30363d;

  /* ---------------------- 灰度 */
  --vp-c-gray-1: #30363d;    /* 滚动条 thumb */
  --vp-c-gray-2: #21262d;    /* 次要边框 */
  --vp-c-gray-3: #21262d;    /* 最淡边框 */
  --vp-c-gray-soft: rgba(230, 237, 243, 0.10);  /* 内联代码底 */

  /* ---------------------- 阴影（暗色下更深） */
  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.6);
  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5);
  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ========== 覆盖 developer-light.css 中的硬编码浅色 ========== */
/* 毛玻璃导航栏 */
html.dark .vp-nav {
  background-color: rgba(13, 17, 23, 0.85);
}

/* 表格 */
html.dark .vp-doc th {
  background-color: var(--vp-c-bg-soft);
}

html.dark .vp-doc tr:nth-child(2n) {
  background-color: var(--vp-c-bg-alt);
}

/* 图片占位底 */
html.dark .vp-doc img {
  background: var(--vp-c-bg-soft);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* 代码块边框（代码底 #0d1117 与页面同色，靠边框区分） */
html.dark .vp-doc pre {
  border-color: #3d444d;
}

/* 高亮标记：亮黄底 + 深色字（GitHub 同款），暗色下依旧醒目 */
html.dark .vp-doc mark,
html.dark .vp-doc .highlight {
  background-color: #fff8c5;
  color: #1f2328;
}

/* 下拉菜单阴影 */
html.dark .vp-nav-bar-dropdown {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ========== 主题切换按钮 ========== */
.vp-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--vp-c-divider);
  border-radius: 50%;
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-2);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.vp-theme-toggle:hover {
  color: var(--vp-c-brand-1);
  border-color: var(--vp-c-brand-1);
  background-color: var(--vp-c-brand-soft);
}

.vp-theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* 亮色显示月亮（点击进入暗色），暗色显示太阳（点击回到亮色） */
.vp-theme-toggle .icon-sun { display: none; }
html.dark .vp-theme-toggle .icon-sun { display: block; }
html.dark .vp-theme-toggle .icon-moon { display: none; }

/* ========== 切换过渡：去/回两个方向都平滑 ========== */
body,
.vp-nav,
.vp-sidebar,
.vp-doc th,
.vp-doc td,
.vp-doc blockquote,
.vp-doc pre,
.vp-doc code {
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
