/*
 * 全局设计令牌：所有颜色/排版/间距/圆角/阴影/动效都以变量存在。
 * 颜色只允许写在这里的 :root 与 dark 映射中；组件代码一律用 var()。
 * 切换主题 = 切换 <html data-theme>，两套主题共用同一套语义变量名。
 * 明暗分工（2026-09-06 F0.5 定稿）：浅色 = 暖编辑感；深色 = 冷峻终端。
 */

:root {
  color-scheme: light;

  /* 明暗共用：图片/深色叠加层上的文字（颜色与主题无关） */
  --text-on-image: #ffffff;
  /* 明暗共用：图片上的选中描边（相册封面选中态这类「压在图上」的环） */
  --ring-on-image: #ffffff;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  /* 间距 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* 布局 */
  --content-max: 1080px;
  --measure: 680px;
  --measure-narrow: 620px;

  /*
   * 栏目页「标题块」尺度 + 站点框宽度（2026-09-15 作者反馈：
   * posts / moments / works / me / albums 打开时的 kicker + 大标题位置与字号各不相同，
   * 切换页面看着像布局抖动）。**所有栏目页共用这一套**：
   * 页面容器、站点头部统一 `--page-frame`（1160），kicker 与大标题统一字号/字距/行高/外边距。
   * 改这里的值 = 全站栏目页一起变；新栏目页直接引用这些变量，别再写死数字。
   */
  --page-frame-w: 1160px;
  --page-frame: min(100% - var(--space-8), var(--page-frame-w));
  --page-kicker-tracking: 0.22em;
  --page-title-size: clamp(2.3rem, 5vw, 3.8rem);
  --page-title-leading: 1.12;
  --page-title-tracking: -0.02em;

  /* 动效 */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/*
 * 基础重置（SSR 与 App 共用）：App 的 index.css 本来就写了这条；SSR 模板不引 index.css，
 * 少了它会保留浏览器默认的 8px body 外边距 —— 页面整体比 App 偏右下 8px、上域也少 16px 宽。
 * 2026-09-14 拿 SSR 与 App 的同分辨率截图逐块比对时发现（F6 要求两边完全一致）。
 */
body {
  margin: 0;
}

/*
 * 滚动条占位（2026-09-15）：Windows 上经典滚动条宽 ~17px，**短页面不出现滚动条时整页内容会横向跳一下**
 * （栏目页之间来回切最明显：albums/works 长、posts/moments 短 → 切一次标题就左右挪 5–8px，
 * 作者反馈的「切换看着布局抖动」有一半来自这里）。`scrollbar-gutter: stable` 让所有页面都预留这条槽位，
 * 与 `--page-frame` 一起保证标题块横向位置**永远不动**。
 */
html {
  scrollbar-gutter: stable;
}

/*
 * 滚动条外观（2026-09-15）：原来只在 App 的 index.css 里，SSR 模板不引 index.css → 两边滚动条宽度不同
 * （App 12px / SSR 系统默认 ~15px）→ 预留的槽位宽度不同 → **同一个标题块在 SSR 页与 App 页之间差 2.5px**。
 * 挪到这里（两端共用）保证「站点头部 / 标题块 / 内容」在 SSR 与 App 上像素一致。
 */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 62%, transparent) transparent;
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: color-mix(in srgb, var(--text-tertiary) 62%, transparent);
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
  background-color: var(--accent) !important;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Light（默认）语义色：暖编辑感（颜色暖，字体与深色一致 = Share Tech Mono + 雅黑） */
:root {
  /* 字体：英文/数字 Share Tech Mono（定稿，单字重 400）+ 中文雅黑，明暗一致 */
  --font-display:
    'Share Tech Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Cascadia Mono',
    'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-body:
    'Share Tech Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Cascadia Mono',
    'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-mono:
    'Share Tech Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Cascadia Mono',
    monospace;

  --bg: #faf8f5;
  --bg-elevated: #ffffff;
  --bg-muted: #f2eee8;
  --bg-inset: #ece6dd;

  --text-primary: #211d19;
  --text-secondary: #6c645b;
  --text-tertiary: #9a9084;
  --text-invert: #f7f3ed;

  --border-subtle: #eae3d9;
  --border-default: #ddd3c6;
  --border-strong: #c3b5a4;

  --accent: #0c9a62;
  --accent-strong: #0a7f51;
  --accent-soft: rgba(12, 154, 98, 0.12);
  --on-accent: #f2fff9;

  --text-danger: #b3382d;

  --shadow-sm: 0 1px 2px rgba(33, 29, 25, 0.05);
  --shadow-md: 0 8px 24px rgba(33, 29, 25, 0.07);
  --shadow-lg: 0 18px 48px rgba(33, 29, 25, 0.1);

  /* 双域页面区域色（H）：上域随主题明暗、下域始终偏浅 */
  --bg-upper: #e7e5df;
  --bg-upper-soft: #dedbd3;
  --text-upper: #201c17;
  --text-upper-secondary: #57503f;
  --text-upper-tertiary: #837a6c;
  --accent-upper: #0c9a62;
  --accent-upper-soft: rgba(12, 154, 98, 0.14);
  --border-upper: rgba(32, 28, 23, 0.2);
  --bg-lower: #faf7f1;
  --bg-lower-elevated: #fffdf9;

  /* 上域背景微渐变：浅色保持纯色，不叠渐变 */
  --bg-upper-gradient: none;

  /* 内容 tone 变体（作品卡/说说缩略图/头像底色）：amber / sky 由组件硬编码收编而来 */
  --tone-amber: #d4a017;
  --tone-sky: #3f86d8;

  /* 头像背景色池（F7 头像绑定，低饱和暖调）：--avatar-bg-0..9，由 visitor_id 哈希取模 */
  --avatar-bg-0: #ece3d4;
  --avatar-bg-1: #e3e6d8;
  --avatar-bg-2: #dde3e9;
  --avatar-bg-3: #e9dde1;
  --avatar-bg-4: #eae4d6;
  --avatar-bg-5: #dbe5e1;
  --avatar-bg-6: #e5dfe8;
  --avatar-bg-7: #e0e6da;
  --avatar-bg-8: #eae6da;
  --avatar-bg-9: #dee3e6;
}

/* Dark 语义色：冷峻终端 */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* 字体：冷峻终端 = 英文/数字 Share Tech Mono（定稿，单字重 400）+ 中文雅黑 */
  /* 字体：冷峻终端 = 英文/数字 Share Tech Mono（单字重 400）+ 中文雅黑 */
  --font-display:
    'Share Tech Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Cascadia Mono',
    'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-body:
    'Share Tech Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Cascadia Mono',
    'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-mono:
    'Share Tech Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Cascadia Mono',
    monospace;

  --bg: #0a0e14;
  --bg-elevated: #10141c;
  --bg-muted: #151b25;
  --bg-inset: #1a212d;

  --text-primary: #e6edf3;
  --text-secondary: #a6b1be;
  --text-tertiary: #6d7a88;
  --text-invert: #0b0f15;

  --border-subtle: #1c2430;
  --border-default: #283242;
  --border-strong: #3d4a5e;

  --accent: #34d399;
  --accent-strong: #6ee7b7;
  --accent-soft: rgba(52, 211, 153, 0.12);
  --on-accent: #04120c;

  --text-danger: #f87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);

  /* 双域页面区域色：冷近黑，上域叠冷微渐变 */
  --bg-upper: #0a0f18;
  --bg-upper-soft: #101826;
  --text-upper: #e9f0f7;
  --text-upper-secondary: #b6c2d0;
  --text-upper-tertiary: #7d8a99;
  --accent-upper: #34d399;
  --accent-upper-soft: rgba(52, 211, 153, 0.15);
  --border-upper: rgba(233, 240, 247, 0.16);
  --bg-lower: #10151d;
  --bg-lower-elevated: #151c26;

  /* 上域背景冷微渐变：近黑 → 深蓝 HUD 感，叠在 --bg-upper 之上 */
  --bg-upper-gradient: linear-gradient(180deg, #0d1524 0%, #0a0f18 100%);

  --tone-amber: #d4a017;
  --tone-sky: #3f86d8;

  /* 头像背景色池（深色 = 冷峻终端的低饱和冷调） */
  --avatar-bg-0: #20261e;
  --avatar-bg-1: #1f2420;
  --avatar-bg-2: #1d2330;
  --avatar-bg-3: #271f24;
  --avatar-bg-4: #262315;
  --avatar-bg-5: #18262a;
  --avatar-bg-6: #231f2c;
  --avatar-bg-7: #1d261d;
  --avatar-bg-8: #282515;
  --avatar-bg-9: #1b222c;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/*
 * 站点页脚（备案号）：大陆站点合规要求「页脚展示备案号 + 链到工信部」（2026-09-15 加）。
 * 放在 tokens.css 是因为它是**所有页面都引**的那一份（SSR 模板与 App 都引）；
 * 备案号本身写在 templates/fragments/icp.html（SSR）与 components/SiteFooter.tsx（App），改号要一起改。
 */
.site-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em;
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-4);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.site-icp,
.site-foot a {
  color: inherit;
  text-decoration: none;
}

.site-icp a:hover,
.site-foot a:hover {
  color: var(--accent);
}