/* ============================================================================
   tokens.css — 设计令牌层
   方向: 深色工业未来主义 (Dark Industrial-Futuristic)
   所有颜色 / 字阶 / 间距 / 圆角 / 阴影 / 动效只在这里定义，组件层禁止硬编码。
   ========================================================================= */

/* ---------- 自托管字体 (latin 子集, 共 60KB) ----------
   不从 fonts.googleapis.com 加载: 该域在国内经常不可达。
   自托管走自己的 Cloudflare CDN，任何地区都能命中。 */
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/chakra-petch-500.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chakra-petch-600.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-petch-700.woff2") format("woff2");
}
/* JetBrains Mono 的 woff2 是可变字体，一个字重文件覆盖 400–500 */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* ---------- 颜色 ----------
     60% 深空底 / 30% 玻璃面板 / 10% 电光青强调 */
  --c-bg:            #05070a;   /* 近黑冷底，不用纯黑 */
  --c-bg-deep:       #030406;
  --c-surface:       rgba(255, 255, 255, 0.038);
  --c-surface-hi:    rgba(255, 255, 255, 0.062);
  --c-surface-solid: #0b0e13;   /* 不透明版本，用于 sticky 栏避免透出内容 */
  --c-border:        rgba(255, 255, 255, 0.075);
  --c-border-hi:     rgba(255, 255, 255, 0.14);

  --c-text:          #e8edf2;
  --c-text-dim:      #b3bfcc;
  --c-muted:         #8a97a6;   /* 在 --c-bg 上约 6.1:1 */
  --c-faint:         #5d6874;

  --c-accent:        #4fd8e8;   /* 唯一强调色 */
  --c-accent-soft:   rgba(79, 216, 232, 0.14);
  --c-accent-line:   rgba(79, 216, 232, 0.34);
  --c-accent-ink:    #06222a;   /* 强调色作底时的前景 */

  /* 氛围层专用（不算强调色，只出现在背景渐变里） */
  --c-aura-1:        rgba(79, 216, 232, 0.16);
  --c-aura-2:        rgba(86, 108, 255, 0.13);
  --c-aura-3:        rgba(255, 120, 60, 0.06);

  /* ---------- 字体 ---------- */
  --ff-display: "Chakra Petch", "PingFang SC", "Hiragino Sans GB",
                "Microsoft YaHei", sans-serif;
  --ff-body:    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                -apple-system, "Segoe UI", sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
                Consolas, monospace;

  /* 模块化字阶, 比例 1.25 */
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-base:  1.65;   /* 中文正文行高要求 ≥ 1.7 左右 */

  /* ---------- 间距梯度 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  /* ---------- 圆角 ---------- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- 阴影 (三级高度, 带环境色而非纯黑) ---------- */
  --sh-1: 0 2px 8px rgba(0, 0, 0, 0.45);
  --sh-2: 0 8px 26px rgba(0, 0, 0, 0.55);
  --sh-3: 0 24px 64px rgba(0, 0, 0, 0.62);
  --sh-glow: 0 0 0 1px var(--c-accent-line), 0 8px 30px rgba(79, 216, 232, 0.13);

  /* ---------- 动效 ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  170ms;
  --dur-base:  320ms;
  --dur-slow:  620ms;

  /* ---------- 结构尺寸 ---------- */
  --w-sidebar: 272px;
  --h-dock:    54px;                              /* 移动端顶部 dock 高度 */
  --h-topbar:  62px;
  --z-atmo: 0;
  --z-base: 1;
  --z-topbar: 25;
  --z-dock: 30;
}