/* ==========================================================================
   Design Tokens
   16 列流体栅格 / 配色 / 字型阶梯 / 断点 / 缓动
   数值依据：对参考站的实测量取，公式为自实现
   ========================================================================== */

:root {
  /* ---------- 16 列流体栅格 ---------- */
  /* --vw 由 head 内联脚本同步为 documentElement.clientWidth。
     不能直接用 100vw：它包含滚动条宽度，会让整套栅格右移约 15px。
     无 JS 时回退 100vw（overlay 滚动条环境下两者相等）。 */
  --vw: 100vw;

  --grid-columns: 16;
  --grid-gap: clamp(4px, calc(-1.967px + var(--vw) * 0.0153), 24px);
  --grid-margin: clamp(16px, calc(2.896px + var(--vw) * 0.0336), 60px);
  --grid-half-gap: calc(var(--grid-gap) / 2);
  --grid-width: calc(var(--vw) - 2 * var(--grid-margin));

  /* 单列宽：(可用宽 - 15 个 gap) / 16 */
  --col: calc(
    (var(--grid-width) - (var(--grid-columns) - 1) * var(--grid-gap)) /
      var(--grid-columns)
  );

  /* --cols-N = N 列 + (N-1) 个 gap */
  --cols-1: var(--col);
  --cols-2: calc(var(--col) * 2 + var(--grid-gap) * 1);
  --cols-3: calc(var(--col) * 3 + var(--grid-gap) * 2);
  --cols-4: calc(var(--col) * 4 + var(--grid-gap) * 3);
  --cols-5: calc(var(--col) * 5 + var(--grid-gap) * 4);
  --cols-6: calc(var(--col) * 6 + var(--grid-gap) * 5);
  --cols-7: calc(var(--col) * 7 + var(--grid-gap) * 6);
  --cols-8: calc(var(--col) * 8 + var(--grid-gap) * 7);
  --cols-9: calc(var(--col) * 9 + var(--grid-gap) * 8);
  --cols-10: calc(var(--col) * 10 + var(--grid-gap) * 9);
  --cols-11: calc(var(--col) * 11 + var(--grid-gap) * 10);
  --cols-12: calc(var(--col) * 12 + var(--grid-gap) * 11);
  --cols-13: calc(var(--col) * 13 + var(--grid-gap) * 12);
  --cols-14: calc(var(--col) * 14 + var(--grid-gap) * 13);
  --cols-15: calc(var(--col) * 15 + var(--grid-gap) * 14);
  --cols-16: var(--grid-width);

  /* ---------- 配色 ----------
     NEXON 绿紫双色系统，真相源 output/brand-kit/brand.py。
     语义锁：XO 恒为绿，EXON 恒为紫，全站不得互换。
     深底优先，底色带轻微绿偏移——不用纯黑。 */
  --c-primary: #059669;        /* 主绿 · XO · 标志本体与核心数据 */
  --c-primary-light: #10b981;  /* 亮绿 · 深底上的大面积与高亮 */
  --c-primary-dark: #047854;   /* 暗绿 · 浅底上的文字与描边 */
  --c-mint: #a7f3d0;           /* 浅薄荷 · 高光与辅助层级 */
  --c-accent: #8b5cf6;         /* 次紫 · EXON · 强调与冷边缘 */
  --c-accent-dark: #6d3fe0;
  --c-ink: #050807;            /* 深墨 · 主视觉底 */
  --c-paper: #f5f3f0;
  --c-white: #ffffff;
  --c-black: #000000;

  /* 深底 UI 派生（output/机制长图/theme.py） */
  --bg: #0b0d0c;
  --bg-2: #0f1211;
  --fg: #f2f4f3;
  --fg-muted: #b9c0bd;
  --fg-faint: #7c8582;

  /* 卡片是白色半透明叠加，不是实色块；分隔线是极淡白，不是灰实线 */
  --surf: rgba(255, 255, 255, 0.055);
  --raised: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.14);
  --line-d: rgba(255, 255, 255, 0.08);

  /* 语义色（output/设计规范/NEXON/tokens.py 唯一定义） */
  --c-up: #2ebd85;
  --c-down: #e5484d;
  --c-warn: #f5a524;

  --c-primary-a05: rgba(5, 150, 105, 0.06);
  --c-primary-a14: rgba(5, 150, 105, 0.14);
  --c-accent-a14: rgba(139, 92, 246, 0.14);
  --c-white-a10: rgba(255, 255, 255, 0.1);

  --accent: var(--c-primary);

  /* ---------- 字型 ----------
     NEXON 生产件的组合：标题 Inter Tight / 正文 Inter / 数据 JetBrains Mono。
     三者都是可变字体——链接按钮用的 450 这种非整百字重，静态字重给不了。
     数字一律走等宽并开 tabular-nums，机制参数在滚动中不能跳宽。 */
  --font-display: "Inter Tight", "IT Fallback", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", "IT Fallback", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Monaco, "Courier New", monospace;
  --font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --fw-book: 450;
  --fw-medium: 500;
  --fw-display: 600;

  /* 大标题：line-height 1.0 是该版式的关键特征 */
  --fs-title-1: clamp(48px, calc(2.5rem + 4.4vw), 110px);
  --fs-title-2: clamp(40px, calc(2rem + 3.8vw), 96px);
  --fs-title-3: clamp(32px, calc(1.75rem + 2.6vw), 64px);
  --fs-title-4: clamp(28px, calc(1.5rem + 1.8vw), 44px);
  --fs-title-5: clamp(24px, calc(1.25rem + 1.2vw), 32px);

  --fs-subhead-1: clamp(20px, calc(1rem + 0.8vw), 28px);
  --fs-subhead-2: clamp(18px, calc(1rem + 0.4vw), 23px);
  --fs-body: clamp(16px, calc(0.95rem + 0.3vw), 23px);
  --fs-small: 14px;
  --fs-caption: 12px;

  --lh-title: 1;
  --lh-subhead: 1.2;
  --lh-body: 1.45;
  --ls-title: -0.025em;
  --ls-body: 0.01em;
  --ls-small: 0.03em;
  --ls-eyebrow: 0.14em;

  /* ---------- 圆角 ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 84px;
  --r-circle: 100%;

  /* ---------- 间距 ---------- */
  --sp-8: 8px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-120: clamp(72px, 10vw, 148px);
  --sp-180: clamp(88px, 15vw, 232px);

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.22s;
  --dur-mid: 0.45s;
  --dur-slow: 0.8s;

  --z-cursor: 9999;
  --z-transition: 9000;
  --z-menu: 800;
  --z-overlay: 700;
}

/* ---------- 断点（实测：370 / 743 / 1023 / 1290 / 1440 / 2000） ---------- */
@media (max-width: 743px) {
  :root {
    --grid-columns: 4;
  }
}

@media (min-width: 744px) and (max-width: 1023px) {
  :root {
    --grid-columns: 8;
  }
}

@media (min-width: 2000px) {
  :root {
    --grid-margin: clamp(60px, calc(100vw * 0.0336), 96px);
  }
}