/* ==========================================================================
   yanger blog · base.css
   设计令牌 / 主题 / reset —— 品牌基准提取自原主页 index.html
   （黑白极简 + 楷体点缀，--page / --ink 令牌与 yanger-theme 存储键保持一致）
   ========================================================================== */

:root {
  --page: #f6f2e9;             /* 羊皮纸底色（比纯白柔和，和深色终端不割裂） */
  --ink: #1b1813;              /* 暖调近黑 */
  --muted: #1b1813a6;          /* 次级文字 */
  --faint: #1b18135c;          /* 弱文字 */
  --rule: #1b18131f;           /* 发丝线 */
  --rule-strong: #1b181333;
  --surface: #1b18130a;        /* 浅填充（代码块 / 行内码） */
  --surface-2: #1b181312;
  --skeleton: #1b181326;       /* 骨架屏占位色 */
  --control-border: #1b181326;
  --control-glow: #1b18130a;
  --loader-track: #1b18131a;
  --selection: #1b1813;
  --header-bg: #f6f2e9d9;      /* 半透明头部底色（配合 backdrop blur） */
  --shadow: #1b181324;         /* 浮层阴影（下拉面板等） */

  --display: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
  --body: "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  --header-h: 64px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --page: #14110d;             /* 暖调近黑（与羊皮纸浅色主题同一色温） */
  --ink: #f2ece1;              /* 暖调近白 */
  --muted: #f2ece1a6;
  --faint: #f2ece15c;
  --rule: #f2ece124;
  --rule-strong: #f2ece13d;
  --surface: #f2ece10f;
  --surface-2: #f2ece11a;
  --skeleton: #f2ece12b;
  --control-border: #f2ece145;
  --control-glow: #f2ece112;
  --loader-track: #f2ece126;
  --selection: #f2ece1;
  --header-bg: #14110dd9;
  --shadow: #00000073;
  color-scheme: dark;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 隐藏滚动条但保留滚动（视觉极简；滚轮 / 触摸 / 键盘滚动不受影响） */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  transition: background-color .65s, color .65s;
}
::selection { background: var(--selection); color: var(--page); }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.4; }

/* 搜索 / 文章正文里的高亮（与 ::selection 同款反色） */
mark { background: var(--ink); color: var(--page); padding: 0 .15em; border-radius: 3px; }

/* ---------- 主题切换动画 ---------- */
/* 所有主题色平滑渐变（0.65s）。页面跳转不做过渡（不使用 View Transitions，
   避免 startViewTransition 被中止时的未处理 Promise 报错）。
   元素选择器优先级低于各组件自己的 transition 规则（类选择器），不会拖慢 hover 动效。 */
body * { transition: background-color .65s, border-color .65s, color .65s; }

/* ---------- 主题扩散层（theme.js 动态创建） ---------- */
/* 白变黑：暗色从按钮位置扩散铺满；黑变白：暗色向按钮收拢退场 */
.theme-ripple {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
}
/* 扩散期间冻结 CSS 过渡：主题在扩散层掩护下瞬间切换，不露半程配色 */
html.theme-switching,
html.theme-switching * { transition: none !important; }

/* ---------- 工具类 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 无 JS 时隐藏依赖脚本的控件与骨架屏（沿用原主页策略） */
.no-js .theme-toggle,
.no-js .global-loader,
.no-js .sk-bar,
.no-js .idcard-figure { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}