/* =====================================================================
   theme.css — 深浅主题（深色 token + 页面 chrome 覆盖）+ 明暗模式切换按钮样式
   2026-10-15 建立。全站 4 个页面（index / 01 / 02 / 03）共用一份，
   🔒 styles.css 与各详情页内联样式均不改动，深色全部收敛在本文件。

   切换机制：<html data-theme="dark">，由 head 内联防闪脚本在首屏绘制前设定，
   持久化 localStorage['aq-theme']，无偏好时跟随 prefers-color-scheme。
   token 覆盖优先级 html[data-theme="dark"](0,1,1) 高于各页 :root(0,1,0)，无需改原文件。

   明暗切换按钮（替换原 PullCord 拉绳）：设计稿 Figma 文件 Km0nKC22vREua2EeKual6s，
   page「明暗模式」画板「顶部-明暗模式按钮」；图标 dark 模式=月亮(47:619)、
   light 模式=太阳(47:631)，均线性描边、stroke 跟随 currentColor。
   互斥：亮页→显示月亮(点它切深色)；暗页→显示太阳(点它切亮色)。
   仅首页 .nav 注入（详情页不加此脚本，按钮一律不出现，需回首页切换）。
   ===================================================================== */

/* ---------------- 1) 深色 token ----------------
   首页 styles.css 与 01/02/03 详情页内联 :root 的变量合集，
   同名的直接覆盖，多余的（如详情页没有 --faint）在对应页面不生效，无害。 */
html[data-theme="dark"]{
  --paper:#0E0F12;
  --ink:#F1F1F3;
  --muted:rgba(255,255,255,.60);
  --faint:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.08);
  --accent:#FF6A3D;
  --thumb:#1D2027;
  /* --radius-media 不动：全站媒体圆角唯一口径 7px，深浅一致 */
}

/* ---------------- 2) 页面 chrome 覆盖 ----------------
   仅覆盖「页面框架」级元素。内嵌 Figma 复刻组件（yzm / cdh / vhl / hubx / tsc / t3d / ida）
   是作品内容，保持设计稿原样（Akira 2026-10-15 拍板：白底亮块接受，不做降亮处理）。 */

/* 顶栏：详情页 .topbar 是硬编码浅色毛玻璃，深色下换深底，透明度 82% 保持原值 */
html[data-theme="dark"] .topbar{
  background:rgba(14,15,18,.82);
  border-bottom:1px solid rgba(255,255,255,.10);
}
/* 首页顶栏 background 是 color-mix(in srgb, var(--paper) 88%, transparent)，随 token 自动变深 */
html[data-theme="dark"] .site-head{ border-bottom-color:rgba(255,255,255,.08); }

/* 右侧锚点导航：桌面浮层 */
html[data-theme="dark"] .anchor-labels{
  background:rgba(22,24,29,.86);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
html[data-theme="dark"] .anchor-label{
  color:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.10);
}
html[data-theme="dark"] .anchor-label:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}
html[data-theme="dark"] .anchor-label.is-active{ color:var(--accent); }

/* 移动端抽屉内的锚点列表（.m-drawer 作用域） */
html[data-theme="dark"] .m-drawer{ background:rgba(14,15,18,.92); }
html[data-theme="dark"] .m-drawer .anchor-labels{ background:transparent; border:0; box-shadow:none; }

/* 正文辅助元素 */
html[data-theme="dark"] figcaption,
html[data-theme="dark"] .fig-cap{ color:rgba(255,255,255,.45); }
html[data-theme="dark"] blockquote{
  border-left-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.78);
}
html[data-theme="dark"] hr{ border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] code,
html[data-theme="dark"] pre{ background:rgba(255,255,255,.07); }
html[data-theme="dark"] table th,
html[data-theme="dark"] table td{ border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .doc-foot,
html[data-theme="dark"] .site-foot{ color:rgba(255,255,255,.42); }

/* ---------------- 2.1) 深色正文降亮（2026-10-15，Akira 拍板） ----------------
   与首页 .lede 同色：--muted = rgba(255,255,255,.60)。
   仅作用 .doc p 正文段落；h1/h2/h3 标题本身不设 color、走容器继承，故标题一律不变。
   作用域 html[data-theme="dark"] → 浅色模式下正文仍是 var(--ink)，不受影响。 */
html[data-theme="dark"] .doc p{ color:var(--muted); }

/* 🔒 内嵌 Figma 复刻 HTML 模块是「作品内容」（白底设计稿），内部文字自持配色，
   不跟随正文降亮——否则 .60 的白字落在白底上会直接看不见。
   下方选择器 (0,3,1) 高于主规则 (0,2,1)，把模块内 p 还原为设计稿原色 #000。
   已知模块作用域（03 页实装）：yzm / cdh / nfc / nfp / vhl / hubx / tsc / t3d / ida / yztn。 */
html[data-theme="dark"] .doc .yzm p,
html[data-theme="dark"] .doc .cdh p,
html[data-theme="dark"] .doc .nfc p,
html[data-theme="dark"] .doc .nfp p,
html[data-theme="dark"] .doc .vhl p,
html[data-theme="dark"] .doc .hubx p,
html[data-theme="dark"] .doc .tsc p,
html[data-theme="dark"] .doc .t3d p,
html[data-theme="dark"] .doc .ida p,
html[data-theme="dark"] .doc .yztn p{ color:#000; }

/* 平滑切换，避免深浅瞬变 */
html[data-theme="dark"] body,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .site-head,
html[data-theme="dark"] .doc{
  transition:background-color .4s ease, color .4s ease, border-color .4s ease;
}

/* 测试对齐（2026-10-15）：首页左侧导航整组——品牌字 AKIRA(.brand) + 链接(.nav a)——
   整体下移 2px，使视觉中心与明暗切换图标对齐。
   选择器限定 .site-head 作用域 → 仅首页生效（详情页用 .topbar，不受影响）；
   .theme-toggle 是 <button> 不属于 .nav a，保持原位，不被下移。 */
.site-head .brand,
.nav a{ position:relative; top:2px; }

/* 移动端（≤560px，对齐 styles.css 手机断点）：在桌面 2px 基础上再下移 1px，共 3px。
   仅移动端生效，桌面维持 2px；作用域仍限定 .site-head（首页），详情页 .topbar 不受影响。 */
@media (max-width:560px){
  .site-head .brand,
  .nav a{ top:3px; }
}

/* =====================================================================
   3) 明暗模式切换按钮（线性 icon 按钮，替换原 PullCord 拉绳）
   DOM 由 assets/theme-toggle.js 自注入到首页 .nav（联系 之后）；
   详情页不加该脚本 → 按钮一律不出现（需求：仅首页可切换）。
   ===================================================================== */

/* 按钮本体：与 .nav a 同色系（默认 --muted / hover --ink），满足「色值与其他文字按钮一致」；
   是 <button> 而非 <a>，故不会被 .nav a::after 挂上红色下划线；cursor:pointer 即手指态。 */
.theme-toggle{
  color:var(--muted);                /* 与圆稿图标、导航文字同为 #6E6E68（--muted） */
  background:none;
  border:0;
  padding:0;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;                 /* 与导航文字垂直居中 */
  transform:translateY(0px);         /* 图标盒子（圆盘）在自然位置即与文字居中；月亮路径已在 viewBox 内平移使墨迹重心=盒子中心，故无需额外偏移 */
  width:24px;height:24px;            /* 严格对齐设计稿 icon 区 48×48@2x = 24×24 */
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s ease;
}
/* hover 反馈仅桌面（hover:hover + 指针精确设备）生效；触屏(iOS) hover:none 永不触发，
   避免点击后 :hover 滞留把图标压淡，导致「第一次深、点完变浅」的不一致。
   图标 fill 恒为 var(--muted)（见下），深浅两套 token 都正确，与导航文字同色。 */
@media (hover:hover) and (pointer:fine){
  .theme-toggle:hover{ opacity:.72; }
}
.theme-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.theme-toggle svg{ display:block; width:24px; height:24px; }
.theme-toggle .tt-icon{
  fill:none;
  stroke:currentColor;             /* 跟随按钮 color（--muted/--ink），深浅自动适配 */
  stroke-linecap:butt;             /* 圆稿光芒为无端头（start/end=none），与 Figma 短光芒一致；不再用 square 导致显长 */
  stroke-linejoin:round;
}

/* 互斥显示：亮页→月亮(dark 模式图标)；暗页→太阳(light 模式图标)。由 html[data-theme] 驱动。 */
.theme-toggle .tt-sun{ display:none; }
/* 月亮/太阳 = 填色轮廓（Figma 57:703 / 58:717 已把描边烘进几何），改用 fill 渲染、无 stroke。
   关键：fill 直接固定为 var(--muted)（已解耦 currentColor），深浅两套 token 都正确；
   不再用 currentColor —— 否则按钮 hover（iOS 点击后滞留）把颜色推成 --ink 致图标变黑。 */
.theme-toggle .tt-moon{ fill:var(--muted); stroke:none; }
.theme-toggle .tt-sun{ fill:var(--muted); stroke:none; }
html[data-theme="dark"] .theme-toggle .tt-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .tt-sun{ display:block; }

@media (prefers-reduced-motion: reduce){ .theme-toggle{ transition:none; } }