/* ============================================================
   tokens.css — Design tokens, reset, and utilities
   ============================================================ */

/* 字体改由 index.html 的 <link preconnect> 加载（更快、不阻塞渲染） */

/* ---------- tokens / palettes ---------- */
:root {
  --black: #0a0a0a;
  --paper: #f2f0eb;
  --muted: rgba(242, 240, 235, 0.58);
  --muted-ink: rgba(10, 10, 10, 0.55);
  --line: rgba(242, 240, 235, 0.16);
  --line-ink: rgba(10, 10, 10, 0.14);

  /* default palette: BOOSTIO ORANGE（原 scarlet 红已统一为橙） */
  --accent: #ef6a2c;
  --accent-2: #ff8c3a;
  --grad-a: #ff8c3a;
  --grad-b: #d4551c;
  --on-accent: #f2f0eb;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* CJK 回退字体：默认日文字形（Zen Kaku）；中文语境切微软雅黑（见下方 html[lang="zh"]） */
  --font-cjk: 'Zen Kaku Gothic New';
}

/* 中文：所有中文字符使用微软雅黑（Windows 优先），其他系统优雅回退 */
html[lang="zh"] {
  --font-cjk: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

html[data-palette="ember"] {
  --accent: #ff5a00;
  --accent-2: #ffa200;
  --grad-a: #ffb300;
  --grad-b: #ff3d00;
  --on-accent: #1a0f00;
}

html[data-palette="mono"] {
  --accent: #161616;
  --accent-2: #555;
  --grad-a: #3a3a3a;
  --grad-b: #0c0c0c;
  --on-accent: #f2f0eb;
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
body {
  font-family: 'Inter', var(--font-cjk), system-ui, sans-serif;
  font-optical-sizing: auto;
  background: var(--black);
  color: var(--paper);
  overflow-x: hidden;
  overflow-wrap: break-word;   /* 全局兜底：超长词（德/法等）不溢出容器 */
  font-weight: 400;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--paper); }

/* 键盘焦点环兜底：仅键盘导航(:focus-visible)显示，鼠标点击不触发 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.mono { font-family: 'Space Mono', var(--font-cjk), monospace; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 80px); }
section { position: relative; }

.eyebrow {
  font-family: 'Space Mono', var(--font-cjk), monospace;
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* line-reveal heading wrapper */
.lines { display: block; }
.lines .line { display: block; overflow: hidden; }
.lines .line > span { display: block; will-change: transform; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; }
}