/* ============================================================
 * design/_base.css — 原型共享基底
 * ============================================================
 *
 * 用途：供 design/*.html 原型 <link> 引用。集中此前在每个原型
 *       <style> 里字面重复的 reset / body / 极光铜晕 / 字体类 /
 *       reduced-motion，消除 24 份副本。
 *
 * 依赖：必须在本文件之前 <link href="tokens.css"> —— 下方的
 *       body 背景与极光底色均引用 token 变量。
 *
 * 字体策略：与生产 src/styles/globals.css 的 --font-sans 对齐，
 *           优先系统字体，避免 CJK 网页字体（15MB+）。
 *           .serif 用宋族做显示字，.mono 用 JetBrains Mono 做数据/标签。
 * ============================================================ */

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* 极光铜晕：铜绿主导，把暗底拉向 verdigris-on-bronze。
 * 各原型此前字面一致，固定为设计语言的氛围底色。 */
body::before {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: -1;
  background:
    radial-gradient(
      54vmax 54vmax at 12% 4%,
      rgba(111, 163, 137, 0.2),
      transparent 60%
    ),
    radial-gradient(
      40vmax 40vmax at 92% 8%,
      rgba(201, 162, 74, 0.1),
      transparent 60%
    ),
    radial-gradient(
      60vmax 60vmax at 50% 112%,
      rgba(184, 57, 46, 0.06),
      transparent 60%
    );
  filter: blur(28px);
  pointer-events: none;
}

.serif {
  font-family:
    "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", serif;
}
.mono {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

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

/* iframe 缩略图态：被 index.html 的 live <iframe> 嵌入时（_theme.js 加 .in-frame），
   动画瞬间完成到末态、过渡归零——避免 25 个缩略图同时持续重绘耗 CPU。
   用 duration 归零而非 play-state:paused：确保入场动画（如 opacity 0→1）跑到
   末帧可见态，不会停在首帧导致元素消失。JS（rAF/setTimeout）驱动的动画
   （仅 chat）开销可控，不在此处理。 */
.in-frame *,
.in-frame *::before,
.in-frame *::after {
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  transition-duration: 0.001s !important;
}