/* ══════════════════════════════════════════════════════════════
   设计令牌（M10 收口）：所有页面共用这一份 :root
   - 颜色 / 字号 / 间距 / 圆角 / 阴影 / 焦点环
   - 明暗两套：手动 data-theme="dark"，或跟随系统 prefers-color-scheme
   - 三态组件：.state-empty / .state-loading / .state-error
   ══════════════════════════════════════════════════════════════ */

:root {
  /* 颜色 */
  --bg: #f6f7fa;
  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --ink: #11141c;
  --dim: #4f5872;
  --dimmer: #646d81;   /* 对白底 5.19:1、对 --bg 4.84:1，11.5px 的小字也过 AA */
  --line: #e4e8f0;
  --line-2: #eef1f7;
  --brand: #3d5afe;
  --brand-soft: #eef1ff;
  --gold: #a9761a;
  --gold-soft: #fdf4e3;
  --red: #d92d20;
  --green: #12805c;
  --green-soft: #e8f7f0;
  --hl-yellow: #ffe9a3;

  /* 字号（正文用 --read-size 覆盖） */
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 25px;
  --fs-3xl: 29px;

  /* 间距 / 圆角 / 阴影 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 12px 28px -12px rgba(16, 24, 40, .18);

  /* 字体 */
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;

  /* 焦点环（无障碍） */
  --focus: 0 0 0 3px rgba(61, 90, 254, .35);
  color-scheme: light;
}

/* ── 明暗：手动切换优先，其次跟随系统 ───────────────────── */
[data-theme="dark"] {
  --bg: #0e1117;
  --surface: #161b24;
  --surface-2: #1b212c;
  --ink: #e8ecf5;
  --dim: #a7b1c4;
  --dimmer: #7c8699;
  --line: #262d3a;
  --line-2: #1e242f;
  --brand: #8fa2ff;
  --brand-soft: #1a2138;
  --gold: #d9b26a;
  --gold-soft: #241f16;
  --red: #ff8a7a;
  --green: #4fd39a;
  --green-soft: #102a20;
  --hl-yellow: #6b5a1c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 12px 28px -12px rgba(0, 0, 0, .7);
  --focus: 0 0 0 3px rgba(143, 162, 255, .45);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1117;
    --surface: #161b24;
    --surface-2: #1b212c;
    --ink: #e8ecf5;
    --dim: #a7b1c4;
    --dimmer: #7c8699;
    --line: #262d3a;
    --line-2: #1e242f;
    --brand: #8fa2ff;
    --brand-soft: #1a2138;
    --gold: #d9b26a;
    --gold-soft: #241f16;
    --red: #ff8a7a;
    --green: #4fd39a;
    --green-soft: #102a20;
    --hl-yellow: #6b5a1c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 12px 28px -12px rgba(0, 0, 0, .7);
    --focus: 0 0 0 3px rgba(143, 162, 255, .45);
    color-scheme: dark;
  }
}

/* 暗色下这些写死的墨色要跟着令牌走（否则深底深字） */
[data-theme="dark"] .article p,
[data-theme="dark"] .article li,
[data-theme="dark"] .chrow > b,
[data-theme="dark"] .tutcard p,
[data-theme="dark"] .hit .snip,
[data-theme="dark"] .ask-answer,
[data-theme="dark"] .digest-points,
[data-theme="dark"] .notes-quote {
  color: var(--ink);
}
[data-theme="dark"] .relsvg circle,
[data-theme="dark"] .room,
[data-theme="dark"] .center { fill: var(--surface); }

/* ── 三态组件（空 / 加载中 / 出错）────────────────────────── */
.state { padding: 26px 18px; border-radius: var(--r); font-size: 13.5px; line-height: 1.9; }
.state-empty { color: var(--dimmer); text-align: center; }
.state-empty b { color: var(--ink); font-weight: 500; }
.state-loading { display: flex; align-items: center; gap: 10px; color: var(--dim); }
.state-loading::before {
  content: "";
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--brand);
  animation: state-spin .9s linear infinite;
}
@keyframes state-spin { to { transform: rotate(360deg); } }
.state-error {
  color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--red) 28%, var(--line));
}
.state-error button { margin-left: 10px; padding: 4px 12px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font-family: inherit; font-size: 12px; }

/* ── 无障碍 ─────────────────────────────────────────────── */
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.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;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── 主题开关（注入式，不依赖页面标记）──────────────────── */
.theme-btn {
  position: fixed; left: 14px; bottom: 14px; z-index: 60;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--dim);
  box-shadow: var(--shadow-sm); cursor: pointer; font-size: 15px; line-height: 1;
}
.theme-btn:hover { color: var(--ink); border-color: #cfd6e4; }