/* theme.css — docs.qcode.cc 深浅双主题覆盖层 (Phase 4)
 * 架构说明见 job jobs-2026-08-07-qcode-dual-theme/GOAL.md §3.4，跟 qcode-web 的
 * theme.css 同一套 --qc-* 语义变量命名约定（本文件复用 base.html 已有的
 * --bg / --text-* / --border 等变量名，不重新发明一套），但落地方式不同
 * qcode-docs 的样式本来就是 CSS 变量驱动的（base.html <style> 里的 :root 块），
 * 不是 Tailwind utility class，不需要 qcode-web 那套"按类名覆盖 + qc-keep 例外"
 * 机制——只需要在 [data-theme="dark"] 下重新声明同一批变量，把 :root 的默认值
 * （= 无 [data-theme] 属性时的样子，SEO 中性保证：爬虫/无 JS 环境看到的还是
 * 今天的浅色）覆盖成深色等价值即可。
 *
 * 顶部导航 / 页脚 / 首页 hero 三处刻意不在这份覆盖里——理由见 Phase 4 报告：
 * 三处都是内部自洽的深色配色（白字配 #0A0A0B 底，对比度本来就够，逻辑上等价于
 * qcode-web 里的 qc-keep 恒定色块），GOAL 要求两案对比截图交 review 拍板，这里
 * 先落地风险最低的方案 A（不改，两个主题下导航/页脚/hero 都保持今天的样子）；
 * 方案 B（导航跟随主题反色）的对比截图另外产出，不改动这份线上 CSS。
 *
 * 跟 qcode-web 一样整体包进 @supports：不支持 color-mix() 的老浏览器上，这一整层
 * 覆盖为零生效，页面是今天的样子，theme.js 会隐藏切换控件（同一个特性判据）。
 * docs 站这边没用到 color-mix()，用 @supports 纯粹是为了和 qcode-web 保持同一个
 * "老浏览器零覆盖"判据、同一个用户体验（要么两站都有主题功能，要么都没有），
 * 不是因为这份 CSS 本身需要这个特性。
 */
@supports (color: color-mix(in srgb, red 50%, transparent)) {

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0A0B;
  --bg-white: #141416;
  --text-900: #F6F6F7;
  --text-700: #C7C7CC;
  --text-500: #96969C;
  --text-400: #737378;
  --text-300: #4E4E52;
  /* .prose blockquote（文档正文里 markdown > 引用块渲染出来的提示/警告框，比如
     document.html 那种"⚡ 推荐" 说明框）用 --primary-light 当纯色背景 + --text-700
     当文字色——只改 --text-700 不改 --primary-light 的话，深色主题下变成"浅粉底配
     浅灰字"，实测截图确认过对比度很差。这里改成半透明版本（跟着实际背景走），
     不用另挑一个不透明深色，浅色主题下这个变量不变（还是纯色 #fef2ef，SEO 中性）。 */
  --primary-light: rgba(217,119,87,0.14);
  --border: rgba(255,255,255,0.12);
  --border-light: rgba(255,255,255,0.06);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.35), 0 2px 4px -2px rgba(0,0,0,0.25);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.2);
}

/* docs/index.html、docs/category.html、docs/document.html 里几处硬编码/带字面
   fallback 的色值（#f9fafb、#fff）跟 --bg / --bg-white 字面同值，之前只是没有
   间接引用同一个变量——深色主题上线后不跟着变就会变成"浅色底块糊在深色页面里"。
   改用变量直接引用后这几处自动纳入覆盖，不需要在这里专门补规则；没有引入
   --bg-card 这个变量名，因为原代码里同名的两处 fallback（#f9fafb 和 #fff）
   其实是两种不同的视觉角色（前者是"融入页面背景"的幽灵按钮，后者是真正的
   白色卡片），共用一个变量名会把两种语义混在一起，各自直接指向 --bg / --bg-white
   更准确。详见 Phase 4 报告"页面级硬编码色值改动清单"一节。 */


/* 三态切换控件——顶部导航现在是本项目刻意保留的"恒深色"区域（方案 A，见文件头
   说明），所以控件样式直接跟 .lang-btn/.nav-ext 用同一套 rgba(255,255,255,*)
   写法，不走 --qc-fg 变量（导航不参与反色，跟着变量走反而会在方案 A 下不一致；
   如果 review 选方案 B 让导航跟随主题，这里要连带改成变量驱动）。 */
[data-theme] .qc-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent; color: rgba(255,255,255,0.7);
  cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
[data-theme] .qc-theme-toggle:hover { border-color: rgba(255,255,255,0.4); color: #ffffff; }
[data-theme] .qc-theme-toggle svg { width: 16px; height: 16px; }
}