/* 光溯星河 设计系统 · Tokens 与基础样式
   版心：阅读 44rem / 常规 68rem / 宽屏 80rem。左对齐单栏为主，宽屏时目录在正文右侧。
   夜空只属于第 0 屏，其余界面都在纸面上。 */

:root {
  /* —— 色彩：夜空（第 0 屏专用，两种主题一致） —— */
  --night: #070a15;
  --night-2: #161d3b;
  --star: #eef1ff;
  --night-glow: #93a3ff; /* 第 0 屏光晕的冷蓝，两种主题一致 */

  /* —— 色彩：纸面 —— */
  --bg: #f4f5f8;          /* 纸面：页面底色 */
  --surface: #ffffff;     /* 素面：卡片、输入框、浮层 */
  --surface-2: #eceef3;   /* 衬底：代码、悬停、分组底色 */
  --fg: #161a23;          /* 墨：正文与标题 */
  --muted: #535b6b;       /* 次文字：摘要、说明 */
  --faint: #7d8494;       /* 弱文字：时间、辅助信息（≥4.5:1 于纸面上的 14px+ 文本） */
  --line: #dfe2e9;        /* 分隔线 */
  --line-strong: #c4c9d4; /* 输入框边框 */
  --accent: #3d52c4;      /* 晨蓝：唯一强调色，链接、当前项、主按钮 */
  --accent-fg: #ffffff;   /* 晨蓝上的文字 */
  --accent-soft: #e7eafb; /* 晨蓝浅底：选中、高亮 */
  --mark: #fff1b8;        /* 搜索命中 */

  /* —— 语义色（与强调色分开使用） —— */
  --ok: #217a4b;   --ok-soft: #e3f3ea;
  --warn: #8f5a00; --warn-soft: #fbf0d9;
  --bad: #b3261e;  --bad-soft: #fbe7e5;

  /* —— 字体 —— */
  --serif: "Source Serif 4", "Noto Serif SC", "Songti SC", "STSong", serif;
  --sans: "Geist", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* —— 字号阶梯（16px 基准） —— */
  --fs-xs: .78rem;   /* 12.5 角标、标注 */
  --fs-sm: .875rem;  /* 14 元信息、辅助 */
  --fs-md: 1rem;     /* 16 界面正文 */
  --fs-read: 1.0625rem; /* 17 文章正文 */
  --fs-lg: 1.125rem; /* 18 条目标题 */
  --fs-xl: 1.375rem; /* 22 区块标题 */
  --fs-2xl: 1.75rem; /* 28 页面标题 */
  --fs-3xl: clamp(1.9rem, 4.2vw, 2.6rem); /* 文章标题 */

  /* —— 间距（4px 栅格） —— */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* —— 圆角：按角色分级，不统一套用 —— */
  --r-xs: 4px;   /* 行内代码、标记 */
  --r-sm: 8px;   /* 按钮、输入框、缩略图 */
  --r-md: 12px;  /* 代码块、封面、媒体 */
  --r-lg: 18px;  /* 浮层、面板 */
  --r-pill: 999px;

  /* —— 版心 —— */
  --w-read: 44rem;
  --w-main: 68rem;
  --w-wide: 80rem;
  --nav-h: 60px;

  /* —— 栅格：左栏 rail / 正文 main / 右栏 aside。全站公开页对齐到同一组列线 —— */
  --rail: 9rem;          /* 日期、类型、分组名、页面标签 */
  --w-col: 44rem;        /* 正文栏，约 40 个汉字 */
  --aside: 13rem;        /* 封面缩略图、目录、来源 */
  --col-gap: clamp(2rem, 3.6vw, 3.5rem);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));

  /* —— 动效：一条曲线、两档时长 —— */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --t-fast: 180ms;
  --t-mid: 320ms;

  --shadow-float: 0 1px 2px rgba(22, 26, 35, .06), 0 12px 32px -8px rgba(22, 26, 35, .18);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0f17; --surface: #131722; --surface-2: #1a1f2c;
    --fg: #e6e8ee; --muted: #a3aabb; --faint: #858c9c;
    --line: #232a3a; --line-strong: #343c50;
    --accent: #93a3ff; --accent-fg: #0c0f17; --accent-soft: #1c2346; --mark: #4a3f12;
    --ok: #6fcf9a; --ok-soft: #12291d; --warn: #e8b55a; --warn-soft: #2d2410; --bad: #ff8a80; --bad-soft: #321614;
    --shadow-float: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -8px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0f17; --surface: #131722; --surface-2: #1a1f2c;
  --fg: #e6e8ee; --muted: #a3aabb; --faint: #858c9c;
  --line: #232a3a; --line-strong: #343c50;
  --accent: #93a3ff; --accent-fg: #0c0f17; --accent-soft: #1c2346; --mark: #4a3f12;
  --ok: #6fcf9a; --ok-soft: #12291d; --warn: #e8b55a; --warn-soft: #2d2410; --bad: #ff8a80; --bad-soft: #321614;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -8px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* —— 基础 —— */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
@media (min-width: 720px) {
  :root { --gutter-l: max(40px, env(safe-area-inset-left, 0px)); --gutter-r: max(40px, env(safe-area-inset-right, 0px)); }
}
body {
  /* 页脚始终贴在视口底部，短页面不会出现浮在中间的页脚 */
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: var(--fs-md); line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; text-wrap: balance; font-weight: 600; }
p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); border-radius: var(--r-xs); }
::selection { background: var(--accent-soft); }
time, .num { font-variant-numeric: tabular-nums; }

.sr-only {
  /* 固定在包含块左上角，避免在溢出裁切的祖先之外撑出横向滚动 */
  position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* —— 版心与栅格 —— */
.wrap, .wrap-read, .wrap-wide {
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap { max-width: calc(var(--w-main) + 80px); }
.wrap-read { max-width: calc(var(--w-read) + 80px); }
/* 宽版心与 .frame 的 wide 列等宽，导航、页脚和正文栅格左右对齐 */
.wrap-wide { max-width: calc(var(--rail) + var(--w-col) + var(--aside) + 2 * var(--col-gap) + 80px); }
@media (min-width: 720px) {
  .wrap, .wrap-read, .wrap-wide {
    padding-left: max(40px, env(safe-area-inset-left, 0px));
    padding-right: max(40px, env(safe-area-inset-right, 0px));
  }
}
body > main { flex: 1 0 auto; }

/* —— 栅格 frame / band ——
   frame：页面级网格，命名列线 rail / main / aside / wide / full。
   band：frame 内的一行，用 subgrid 继承列线，同一行的左栏与正文按首行基线对齐。
   ≥1080px 三栏；720–1079px 左栏 + 正文，右栏内容并入正文；<720px 单栏依次排列。 */
.frame {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter-l), 1fr)
    [wide-start rail-start] var(--rail) [rail-end] var(--col-gap)
    [main-start] minmax(0, var(--w-col)) [main-end] var(--col-gap)
    [aside-start] var(--aside) [aside-end wide-end]
    minmax(var(--gutter-r), 1fr) [full-end];
}
.frame > * { grid-column: main; min-width: 0; }
.frame > .rail { grid-column: rail; }
.frame > .aside { grid-column: aside; }
.frame > .span { grid-column: main-start / aside-end; }
.frame > .wide, .frame > .band { grid-column: wide; }
.frame > .full { grid-column: full; }
.band { display: grid; grid-template-columns: subgrid; align-items: first baseline; }
.band > * { grid-column: main; min-width: 0; }
.band > .rail { grid-column: rail; }
.band > .aside { grid-column: aside; }
.band > .span { grid-column: main-start / aside-end; }
.band > .wide { grid-column: wide; }
@media (max-width: 1079px) {
  .frame {
    grid-template-columns:
      [full-start] minmax(var(--gutter-l), 1fr)
      [wide-start rail-start] 7.5rem [rail-end] var(--col-gap)
      [main-start] minmax(0, var(--w-col)) [main-end aside-start aside-end wide-end]
      minmax(var(--gutter-r), 1fr) [full-end];
  }
  .frame > .aside, .frame > .span, .band > .aside, .band > .span { grid-column: main; }
}
@media (max-width: 719px) {
  .frame {
    grid-template-columns:
      [full-start] var(--gutter-l)
      [wide-start rail-start main-start aside-start] minmax(0, 1fr)
      [wide-end rail-end main-end aside-end] var(--gutter-r) [full-end];
  }
  .band { align-items: start; }
}

.stack { display: flex; flex-direction: column; gap: var(--gap, var(--sp-4)); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--sp-3)); }
.spacer { flex: 1; }

/* —— 字体角色 —— */
.t-display { font-family: var(--serif); font-weight: 600; letter-spacing: .02em; }
.t-ui { font-family: var(--sans); }
.t-mono { font-family: var(--mono); }
.t-muted { color: var(--muted); }
.t-faint { color: var(--faint); }
.t-sm { font-size: var(--fs-sm); }
.t-xs { font-size: var(--fs-xs); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important;
}