/* ============================================================
   tokens.css — 设计变量层
   新增板块时只改这里的变量，不要在模块里写死颜色/间距。
   ============================================================ */
:root {
  /* 品牌三原色：电蓝(技术) / 幽紫(AI) / 焰橙(火) */
  --brand-blue: #38e1ff;
  --brand-violet: #8b6bff;
  --brand-flame: #ff7a3d;
  --brand-flame-soft: #ffb03a;

  /* 表面层级 */
  --bg-base: #04060c;
  --bg-deep: #02030a;
  --panel: rgba(16, 23, 40, 0.62);
  --panel-solid: #0b1120;
  --panel-hi: rgba(38, 51, 82, 0.55);
  --line: rgba(120, 160, 220, 0.14);
  --line-hi: rgba(120, 200, 255, 0.34);

  /* 文本层级 */
  --text-hi: #eaf2ff;
  --text: #c3d1e8;
  --text-dim: #8496b5;
  --text-faint: #5b6b88;

  /* 语义色 */
  --ok: #3ddc97;
  --warn: #ffc14d;
  --err: #ff5f6d;

  /* 渐变 */
  --grad-brand: linear-gradient(120deg, var(--brand-blue), var(--brand-violet) 52%, var(--brand-flame));
  --grad-text: linear-gradient(100deg, #ffffff 8%, #a9e6ff 45%, #b9a5ff 78%);

  /* 字体 */
  --font-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 字号阶梯 */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-52: 3.25rem;
  --fs-72: 4.5rem;

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

  /* 圆角 */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* 阴影 / 辉光 */
  --sh-card: 0 18px 50px -22px rgba(0, 0, 0, 0.9);
  --glow-blue: 0 0 0 1px rgba(56, 225, 255, 0.28), 0 12px 44px -14px rgba(56, 225, 255, 0.4);
  --glow-flame: 0 0 0 1px rgba(255, 122, 61, 0.3), 0 12px 44px -14px rgba(255, 122, 61, 0.42);

  /* 布局 */
  --container: 1200px;
  --container-narrow: 880px;
  --nav-h: 68px;
  --section-gap: clamp(72px, 9vw, 132px);

  /* 动效 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.42s;

  --z-nav: 60;
  --z-drawer: 80;
  --z-fab: 70;
}

@media (max-width: 860px) {
  :root {
    --fs-52: 2.25rem;
    --fs-72: 2.75rem;
    --fs-40: 1.875rem;
    --nav-h: 60px;
  }
}