/* ==========================================================================
   tokens.css — 设计令牌层
   方向：Dark Instrument（暗色工业精密）
   近墨黑底 + 暖白字 + 唯一强调色（熔岩橙红）；等宽字体承担"科技感"，
   展示字承担"性格"，中文黑体承担"可读与稳"。
   所有组件只引用这里的变量，禁止硬编码色值与临时数值。
   ========================================================================== */

:root {
  /* ---------- 色彩：表面 ---------- */
  --c-void:        #08080A;   /* 最底层，入口页与页尾 */
  --c-bg:          #0C0C0F;   /* 页面主背景 */
  --c-surface:     #141418;   /* 卡片 / 面板 */
  --c-surface-2:   #1C1C22;   /* 悬停态、内嵌块 */

  /* ---------- 色彩：文字 ---------- */
  --c-text:        #F2EFE9;   /* 主文字（暖白，避免纯白刺眼） */
  --c-muted:       #928F88;   /* 次级文字 —— 对 --c-bg 约 6.1:1 */
  --c-faint:       #65625C;   /* 三级文字 —— 仅用于非关键标注 */

  /* ---------- 色彩：线 ---------- */
  --c-line:        rgba(242, 239, 233, .10);  /* 发丝线（默认） */
  --c-line-2:      rgba(242, 239, 233, .18);  /* 发丝线（强调分隔） */

  /* ---------- 色彩：强调色（全站唯一） ---------- */
  --c-accent:      #00E1FF;
  --c-accent-hi:   #7DF3FF;
  --c-accent-soft: rgba(0, 225, 255, .14);
  --c-accent-line: rgba(0, 225, 255, .38);

  /* 冷调辅助光（仅用于氛围层，不作为可交互色） */
  --c-glow-cool:   rgba(86, 128, 255, .16);

  /* ---------- 字体 ---------- */
  --f-display: "Bricolage Grotesque", "Noto Sans SC", "PingFang SC", sans-serif;
  --f-body:    "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- 字阶：流体 clamp，1.25 比例骨架 ---------- */
  --fs-mega:    clamp(3.4rem, 11vw, 10.5rem);   /* 入口页 / Hero 主标 */
  --fs-display: clamp(2.75rem, 7.2vw, 6.5rem);
  --fs-h2:      clamp(1.9rem, 3.6vw, 3.25rem);
  --fs-h3:      clamp(1.35rem, 2vw, 1.75rem);
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.3125rem);
  --fs-body:    1rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-label:   .6875rem;                        /* 等宽小标签 */

  /* ---------- 行高 / 字距 ---------- */
  --lh-tight:  .96;
  --lh-snug:   1.12;
  --lh-body:   1.75;      /* 中文正文行高放宽 */
  --ls-display: -.03em;
  --ls-body:   .01em;
  --ls-label:  .18em;     /* 等宽小标签用大字距 */

  /* ---------- 间距梯度 ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 176px;

  /* ---------- 布局 ---------- */
  --maxw:        1440px;
  --gutter:      clamp(20px, 5vw, 72px);
  --section-y:   clamp(88px, 12vw, 176px);
  --nav-h:       72px;

  /* ---------- 圆角 ---------- */
  --r-xs: 2px;
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---------- 阴影：三级高度，带环境色而非纯黑 ---------- */
  --sh-1: 0 2px 8px rgba(0, 0, 0, .34);
  --sh-2: 0 8px 28px rgba(0, 0, 0, .42);
  --sh-3: 0 24px 64px rgba(0, 0, 0, .54);
  --sh-accent: 0 12px 40px rgba(0, 225, 255, .22);

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-scene: 820ms;

  /* ---------- 层级 ---------- */
  --z-bg: 0;
  --z-content: 1;
  --z-nav: 40;
  --z-cursor: 90;
}

/* 小屏收紧：栅格退化为单列，间距梯度整体降一档 */
@media (max-width: 767px) {
  :root {
    --section-y: 80px;
    --nav-h: 60px;
  }
}