/* dual-theme-toggle · theme-toggle.css
   单文件两态主题:① 语义 token(深色默认 / 浅色重映射)② 无边框纯图标切换按钮。
   接入三行见 docs/usage.md;本文件不含页面 chrome,页面样式请自己写并只消费变量。

   三条硬结论(踩出来的,别改回去):
   1. 重映射选择器必须带元素名前缀。属性贴在 <html> 上,而各页自己的 :root{...} 通常写在后面、
      特异性同为 (0,1,0) —— 写成 [data-theme="light"] 会被压掉:属性切了、颜色纹丝不动。
      html[data-theme="light"] 是 (0,1,1),稳压 :root。实测踩过。
   2. 重映射表要覆盖页面用到的**全部** token,漏一个就是"切了一半"。
   3. 浅色映射在本文件里出现两次(显式选择 / 无 JS 跟随系统),两段声明体必须逐字一致;
      scripts/assert_tokens.py 会逐行比对这两段。改配色只动 --c-* 原色表。 */

:root {
  /* ---- 原色表(改配色只动这一段)---- */
  --c-paper: #F5F3ED;          /* 纸白底 */
  --c-paper-ink: #1A1A16;      /* 纸白墨 */
  --c-paper-muted: #5B5A53;    /* 纸白灰 */
  --c-charcoal: #0E0E0C;       /* 炭黑底(禁纯黑) */
  --c-charcoal-ink: #EDEBE4;   /* 炭黑墨 */
  --c-charcoal-muted: #A3A199; /* 炭黑灰 */
  --c-accent: #CD5545;         /* 朱:两模共用的唯一强调色 */

  /* ---- 深色映射(默认;无属性时的静态兜底也是它)---- */
  color-scheme: dark;
  --bg: var(--c-charcoal);
  --surface: rgba(237, 235, 228, .055);
  --ink: var(--c-charcoal-ink);
  --muted: var(--c-charcoal-muted);
  --line: rgba(237, 235, 228, .12);
  --line-strong: rgba(237, 235, 228, .22);
  --accent: var(--c-accent);
  /* 小字彩色文本必须走 --accent-ink(同色相提亮/压暗一档),--accent 只给图形与大字号 */
  --accent-ink: color-mix(in oklab, var(--c-accent) 86%, #FFFDF5);
  --accent-soft: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --focus: var(--accent-ink);
}

/* 触发之一:无 JS(或用户从未选过)时跟随系统。
   系统浅色时给出与下面完全相同的映射;系统深色则沿用 :root 的默认。 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: var(--c-paper);
    --surface: rgba(26, 26, 22, .045);
    --ink: var(--c-paper-ink);
    --muted: var(--c-paper-muted);
    --line: rgba(26, 26, 22, .12);
    --line-strong: rgba(26, 26, 22, .22);
    --accent: var(--c-accent);
    --accent-ink: color-mix(in oklab, var(--c-accent) 85%, #14140F);
    --accent-soft: color-mix(in srgb, var(--c-accent) 10%, transparent);
    --focus: var(--accent-ink);
  }
}

/* 触发之二:用户在页面上按过切换器(data-theme 由 localStorage 决定)。
   元素名前缀 = 特异性地毯,压过页面自己的 :root。 */
html[data-theme="light"] {
  color-scheme: light;
  --bg: var(--c-paper);
  --surface: rgba(26, 26, 22, .045);
  --ink: var(--c-paper-ink);
  --muted: var(--c-paper-muted);
  --line: rgba(26, 26, 22, .12);
  --line-strong: rgba(26, 26, 22, .22);
  --accent: var(--c-accent);
  --accent-ink: color-mix(in oklab, var(--c-accent) 85%, #14140F);
  --accent-soft: color-mix(in srgb, var(--c-accent) 10%, transparent);
  --focus: var(--accent-ink);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--c-charcoal);
  --surface: rgba(237, 235, 228, .055);
  --ink: var(--c-charcoal-ink);
  --muted: var(--c-charcoal-muted);
  --line: rgba(237, 235, 228, .12);
  --line-strong: rgba(237, 235, 228, .22);
  --accent: var(--c-accent);
  --accent-ink: color-mix(in oklab, var(--c-accent) 86%, #FFFDF5);
  --accent-soft: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --focus: var(--accent-ink);
}

/* ============================================================
   切换按钮:44px 热区 · 15px 图标 · 无边框无胶囊无文字
   一个按钮,不是两个点并排;浅色月亮/太阳按当前态切换(图标由 JS 注入)
   ============================================================ */
.tt {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color .2s cubic-bezier(.22, .61, .36, 1);
}

.tt:hover { color: var(--ink); }
.tt:active { color: var(--accent-ink); }

/* 可见焦点:键盘用户必须看得见 */
.tt:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.tt svg { display: block; width: 15px; height: 15px; }

/* 图标:浅色出太阳,深色出空心月亮。默认(未解析出状态)出月亮。 */
.tt .i-sun { display: none; }
html[data-resolved="light"] .tt .i-sun { display: block; }
html[data-resolved="light"] .tt .i-moon { display: none; }
/* 无 JS 时的图标兜底(此时按钮本身是隐藏的,这里只是不让图标错位) */
@media (prefers-color-scheme: light) {
  html:not([data-resolved]) .tt .i-sun { display: block; }
  html:not([data-resolved]) .tt .i-moon { display: none; }
}

/* 无 JS 保持 hidden:「无 JS 跟系统」的代价是按钮点不动,宁可不显示也不要一个骗人的开关。
   data-js 由 <head> 里的三行贴标脚本打上。 */
html:not([data-js]) .tt { display: none; }

/* 页面浮动机位:JS 在页面里找不到宿主时才会挂上 .tt--float */
.tt--float {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 50;
}

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