/* ============================================================================
 * skin.css — 全站视觉皮肤 v4(hunt.now / libraries.dev 调研定稿,2026-10-03)
 * ----------------------------------------------------------------------------
 * 职责:@font-face 自托管字体 + 配色 token + 玻璃基底 + 页面底色。
 * 动效时长/缓动仍引用 styles/motion.tokens.css 的 --mo-*(用户规范,勿动)。
 * 图标为用户认可的自绘内联 SVG 体系,本皮肤只换配色/字体,不重画图标。
 * 字体子集:中文=思源黑体(pyftsubset,项目用字 1198 字;UI 新增文案后需重新子集化,
 * 命令见项目 AGENTS.md 前端视觉重构节)。
 * ========================================================================== */

/* ---------- 字体(自托管,font-display swap) ---------- */
/* 中文正文/标题:思源黑体 SC 子集 400/500/700 */
@font-face {
  font-family: "Noto Sans SC";
  src: url("../vendor/fonts/ui/noto-sc-400.subset.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("../vendor/fonts/ui/noto-sc-500.subset.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("../vendor/fonts/ui/noto-sc-700.subset.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* 英文展示:Space Grotesk 可变字体(hello 渐变字、品牌混排) */
@font-face {
  font-family: "Space Grotesk";
  src: url("../vendor/fonts/ui/space-grotesk-vf.woff2") format("woff2-variations");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
/* 等宽元数据:Geist Mono(hunt.now 同款,仪器读数气质) */
@font-face {
  font-family: "Geist Mono";
  src: url("../vendor/fonts/ui/geist-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../vendor/fonts/ui/geist-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../vendor/fonts/ui/geist-mono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* 纸感底 + 近黑墨色(hunt.now 亮色模式实测值) */
  --ink: #1c1b19;
  --ink-2: #5f5c55;
  --ink-3: #9a968d;
  --line: rgba(28, 27, 25, 0.08);
  --line-strong: rgba(28, 27, 25, 0.16);
  --surface: rgba(255, 255, 255, 0.55);
  --surface-strong: rgba(255, 255, 255, 0.85);
  --surface-line: rgba(255, 255, 255, 0.65);
  /* 蛋黄橙强调(比 hunt.now #ff5a1f 更黄更柔,贴小鸡主题) */
  --accent: #f59e0b;
  --accent-deep: #d97706;
  --accent-ink: #422006;
  --accent-soft: rgba(245, 158, 11, 0.12);
  /* 阴影:外圈暗发丝 + 近距柔影 + 远距大柔影(libraries.dev 实测收档) */
  --shadow-1: 0 0 0 1px rgba(28, 27, 25, 0.04), 0 1px 2px rgba(28, 27, 25, 0.05),
              0 6px 24px rgba(28, 27, 25, 0.08);
  --shadow-2: 0 0 0 1px rgba(28, 27, 25, 0.05), 0 4px 12px rgba(28, 27, 25, 0.07),
              0 16px 40px rgba(28, 27, 25, 0.13);
  --radius-l: 16px;
  --radius-m: 14px;
  --radius-s: 10px;
  --mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --display: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: var(--sans);
  color: var(--ink);
  /* 暖纸底:近白纸感 + 微弱天光/晨光晕染(3D 画布透明,页面底色即场景氛围) */
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(219, 233, 250, 0.5), transparent 62%),
    radial-gradient(1000px 620px at 88% 2%, rgba(255, 236, 205, 0.55), transparent 58%),
    linear-gradient(180deg, #fbfaf7 0%, #f6f4ed 50%, #f0eee5 100%);
}
button { font-family: inherit; }
button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: var(--radius-s); }

/* ---------- 玻璃基底(双层描边:外暗发丝 + 内白边,顶缘内高光) ---------- */
.glass {
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid var(--surface-line);
  box-shadow:
    0 0 0 1px rgba(28, 27, 25, 0.05),
    0 2px 6px rgba(28, 27, 25, 0.05),
    0 4px 32px rgba(28, 27, 25, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-l);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: var(--surface-strong); }
}