/**
 * theme.css —— 全站浅色 / 深色主题令牌
 *
 * 设计要点：
 *   1. 主题状态挂在 <html data-theme="light|dark"> 上，由 theme.js 在 <head> 里
 *      同步写入（渲染前就绪，不会闪白）。
 *   2. 这里只定义**颜色/阴影类**的自定义属性。选择器用 html[data-theme=...]，
 *      比页面自己的 :root（0,1,0）高一档，因此能压掉页面里
 *      「@media (prefers-color-scheme: dark){ :root{...} }」的自动跟随 —— 这样
 *      用户手动选了浅色，深色系统的浏览器里也不会被媒体查询抢回去。
 *   3. 兜底：给那些没写自定义属性、颜色全硬编码的老页面用 invert 滤镜
 *      （html[data-theme-fallback="invert"]）。由 theme.js 实测页面背景亮度后自动决定。
 *
 * 命名沿用站点既有的天空主题（--sky-* / --accent-*），另外补齐了各页面
 * 历史上用过的别名（--bg / --card / --hover / --txt ...），避免为一个按钮
 * 去改 60 个页面。
 */

/* ── 基础 ─────────────────────────────────────────── */
:root { color-scheme: light; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* ── 浅色（站点默认：淡蓝白灰） ───────────────────── */
html[data-theme="light"] {
  --sky-top:#e9f4ff; --sky-mid:#f4f9ff; --sky-bot:#f8fafc;

  --surface:#ffffff; --surface-soft:#f7fafd;
  --card:#ffffff; --bg:#f4f9ff; --bg1:#eaf4ff; --hover:#fbfdff;

  --line:#e3ebf3; --line-strong:#d5e2ee; --border-color:#e3ebf3;

  --accent:#4a90c4; --accent-deep:#3d7ba8; --accent-soft:#eaf3fb;
  --accent-line:#cfe3f5; --primary-color:#4a90c4; --ring:rgba(74,144,196,.18);

  --text:#37474f; --text-2:#5b6b7a; --text-color:#37474f; --txt:#37474f; --sub:#5b6b7a;
  --muted:#8a99a8; --muted-2:#9aa8b6;

  --ok:#3f7d55; --ok-soft:#e9f7ee; --ok-line:#cfe9d8;
  --warn:#a5813f; --warn-bg:#fff8ec; --warn-line:#f5dfb8;
  --err:#b4544d; --err-bg:#fdf0ef; --err-line:#f2d3d0;

  --shadow:0 1px 2px rgba(31,66,99,.04), 0 6px 18px rgba(31,66,99,.06);
  --shadow-hover:0 2px 8px rgba(31,66,99,.08), 0 14px 30px rgba(31,66,99,.11);

  --gh-bg:#f4f9ff; --gh-surface:#ffffff; --gh-line:#e3ebf3;
  --gh-text:#37474f; --gh-muted:#8a99a8; --gh-quote:#f4f8fc; --gh-code:#f2f6fa;
}

/* ── 深色（夜空蓝，与浅色同色相） ─────────────────── */
html[data-theme="dark"] {
  --sky-top:#0e1621; --sky-mid:#111a26; --sky-bot:#141d29;

  --surface:#18222f; --surface-soft:#1d2836;
  --card:#18222f; --bg:#111a26; --bg1:#0e1621; --hover:#1f2b3a;

  --line:#26313f; --line-strong:#334152; --border-color:#26313f;

  --accent:#6fa8d6; --accent-deep:#8bbde4; --accent-soft:#1b2a39;
  --accent-line:#2d4557; --primary-color:#6fa8d6; --ring:rgba(111,168,214,.24);

  --text:#dde7f0; --text-2:#aabaca; --text-color:#dde7f0; --txt:#dde7f0; --sub:#aabaca;
  --muted:#8296a8; --muted-2:#728699;

  --ok:#6cc08a; --ok-soft:#16281e; --ok-line:#2c4c37;
  --warn:#d9b46a; --warn-bg:#2a2318; --warn-line:#4a3d22;
  --err:#e08b84; --err-bg:#2b1c1c; --err-line:#4d2f2d;

  --shadow:0 1px 2px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.34);
  --shadow-hover:0 2px 8px rgba(0,0,0,.34), 0 14px 30px rgba(0,0,0,.44);

  --gh-bg:#111a26; --gh-surface:#18222f; --gh-line:#26313f;
  --gh-text:#dde7f0; --gh-muted:#8296a8; --gh-quote:#1b2532; --gh-code:#1e2937;
}

/* ── 我们自己的天空主题页面：body::before 是硬编码的浅色光晕，深色下换掉 ── */
html[data-theme="dark"] body::before {
  background:
    radial-gradient(1000px 560px at 50% -14%, #17293c 0%, rgba(14,22,33,0) 64%),
    radial-gradient(760px 480px at 88% 4%, #152534 0%, rgba(17,26,38,0) 62%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-bot) 100%);
}

/* ── 通用滚动条 / 选区 ────────────────────────────── */
html[data-theme="dark"] {
  scrollbar-color:#334152 #111a26;
}
html[data-theme="dark"] ::-webkit-scrollbar { width:11px; height:11px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background:#111a26; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background:#334152; border-radius:99px; border:2.5px solid #111a26;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background:#415264; }
html[data-theme="dark"] ::selection { background:#2d4557; color:#eaf3fb; }

/* ── 兜底：整页反色（只对没有主题令牌的老页面启用） ──
 * theme.js 会实测 <body> 的实际背景亮度，与当前主题不符时才挂上这个属性。
 * 只把「照片类」内容再反一次还原（否则人像/图表会变负片）；
 * 图标类 inline SVG 不还原 —— 它会跟着整页翻成浅色，正是我们要的；
 * iframe 也不还原，让内嵌页面一起变深色更统一。
 * 注意：「全站导航」浮标和切换按钮都挂在 <html> 上、在 body 滤镜之外，天然不受影响。 */
html[data-theme-fallback="invert"] { background:#111a26; }
html[data-theme-fallback="invert"] body { filter:invert(1) hue-rotate(180deg); }
html[data-theme-fallback="invert"] img,
html[data-theme-fallback="invert"] video,
html[data-theme-fallback="invert"] canvas,
html[data-theme-fallback="invert"] picture {
  filter:invert(1) hue-rotate(180deg);
}

@media print {
  html[data-theme-fallback="invert"] body { filter:none !important; }
}

/* ── 「全站导航」浮标（nav-back.js）的深色配色 ──
 * 浮标在 body 滤镜之外，得自己跟着主题换色。 */
html[data-theme="dark"] #nav-back-widget {
  color:#8bbde4; background:rgba(24,34,47,.9);
  border-color:#2d4557; box-shadow:0 2px 10px rgba(0,0,0,.4);
}
html[data-theme="dark"] #nav-back-widget:hover { box-shadow:0 6px 20px rgba(0,0,0,.5); }