/* ==========================================================================
   tokens.css — 设计令牌（唯一真源）
   改颜色 / 字号 / 间距 / 圆角 / 内容宽度，只改这里，全站生效。
   配套文档：docs/ui-design-spec.md §1
   ========================================================================== */

:root {
  /* ---- 结构基色（冷石墨 · 色相 250°） ---------------------------------- */
  --bg-0: #0a0c11;
  --bg-1: #0f1218;   /* 页面底 */
  --bg-2: #14171f;   /* 面板 */
  --bg-3: #191d26;   /* 卡片 */
  --bg-4: #1f2430;   /* 图标底 */
  --bg-5: #262c39;   /* 悬浮层 */

  /* ---- 分割线 --------------------------------------------------------- */
  --line-soft: #232833;
  --line: #2c3342;
  --line-strong: #3a4353;
  --line-field: #5b6577;          /* 表单控件边框（3.05:1，满足 WCAG 1.4.11） */

  /* ---- 文字三级 ------------------------------------------------------- */
  --txt-1: #eef1f7;
  --txt-2: #aab3c4;
  --txt-3: #8a92a4;

  /* ---- 品牌强调 ------------------------------------------------------- */
  --acc-200: #ffe9bd;
  --acc-300: #ffd98a;
  --acc-400: #ffb020;             /* 主色 */
  --acc-500: #ff9500;
  --acc-600: #f57c00;
  --acc-2: #ff6b35;
  --acc-ink: #1a1205;             /* 琥珀/橙/霓虹填充上的文字色 */

  /* ---- 霓虹折扣层 ----------------------------------------------------- */
  --hot-300: #ff8fa8;
  --hot-400: #ff3d6e;
  --hot-orn: #ff8f3d;
  --gold-400: #ffd45a;
  --gold-600: #ff8f00;
  --cool-300: #7fd8ff;
  --cool-500: #38b6ff;

  /* ---- 语义色 --------------------------------------------------------- */
  --ok-400: #2ee6b0;
  --warn-400: #ffc14d;
  --err-400: #ff5a5f;
  --info-400: #58b9ff;

  /* ---- 渐变（角度全站统一 135deg，背景光斑除外） ----------------------- */
  --grad-brand: linear-gradient(135deg, #ffd98a 0%, #ffb020 45%, #ff6b35 100%);
  --grad-cta: linear-gradient(135deg, #ffb020 0%, #ff8f00 55%, #ff6b35 100%);
  --grad-hot: linear-gradient(135deg, #ff3d6e 0%, #ff663d 55%, #ff8f3d 100%);
  --grad-gold: linear-gradient(135deg, #ffd45a 0%, #ffa91f 55%, #ff8f00 100%);
  --grad-cool: linear-gradient(135deg, #7fd8ff 0%, #38b6ff 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 46%);
  --grad-rule: linear-gradient(90deg, transparent 0%, rgba(255, 176, 32, .55) 50%, transparent 100%);
  --grad-bar: linear-gradient(180deg, var(--hot-400) 0%, var(--acc-400) 100%);
  --grad-num: linear-gradient(180deg, #ffffff 0%, #ffd98a 100%);   /* 仅 ≥26px 数字 */
  --grad-hero:
    radial-gradient(120% 88% at 12% -18%, rgba(255, 61, 110, .20), transparent 58%),
    radial-gradient(104% 76% at 86% -12%, rgba(255, 176, 32, .18), transparent 62%),
    radial-gradient(130% 110% at 50% 118%, rgba(56, 182, 255, .10), transparent 62%);

  /* ---- 暗场网格纹理 --------------------------------------------------- */
  --tex-grid:
    linear-gradient(rgba(44, 51, 66, .34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 51, 66, .34) 1px, transparent 1px);
  --tex-grid-size: 34px 34px;

  /* ---- 阴影与发光 ----------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
  --sh-2: 0 4px 14px -6px rgba(0, 0, 0, .55);
  --sh-3: 0 16px 40px -18px rgba(0, 0, 0, .72);
  --sh-4: 0 26px 64px -28px rgba(0, 0, 0, .82);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
  --glow-acc: 0 0 0 1px rgba(255, 176, 32, .38), 0 8px 26px -12px rgba(255, 176, 32, .55);
  --glow-hot: 0 0 0 1px rgba(255, 61, 110, .42), 0 8px 26px -10px rgba(255, 61, 110, .60);
  --glow-cool: 0 0 0 1px rgba(56, 182, 255, .38), 0 8px 26px -12px rgba(56, 182, 255, .50);
  --glow-focus: 0 0 0 3px rgba(255, 176, 32, .30);

  /* ---- 圆角 ----------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --r-icon: 23.5%;                /* 图标专用比例，随尺寸自适应 */

  /* ---- 间距（4 的倍数） ----------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --pad-card: 12px 10px 10px;
  --gap-card: 14px;
  --sec-gap: 34px;

  /* ---- 宽度档：全站只有这两档 ----------------------------------------- */
  --w-container: 1180px;          /* 内容宽度 */
  --w-prose: 900px;               /* 长文阅读宽度 */

  /* ---- 字体 ----------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-num: "Chakra Petch", "Rajdhani", "Saira Condensed", ui-monospace, Consolas, monospace;
  --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  /* ---- 动效 ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .30, 1);
  --ease-in-out: cubic-bezier(.40, 0, .20, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 90ms;
  --dur-2: 140ms;
  --dur-3: 220ms;
  --dur-4: 320ms;
  --dur-5: 520ms;

  /* ---- 层级 ----------------------------------------------------------- */
  --z-base: 0;
  --z-badge: 2;
  --z-sticky: 30;
  --z-head: 50;
  --z-drawer: 60;
  --z-modal: 80;
  --z-toast: 100;

  /* ---- 结构尺寸（跨组件复用，避免魔法数字散落） ----------------------- */
  --h-topbar: 48px;               /* 移动端顶栏 */
  --h-head: 60px;                 /* 桌面端顶栏 */
  --h-tabbar: 56px;               /* 底部 Tab 栏 */
  --h-seg: 44px;                  /* 分段控件 */
  --h-row-kaifu: 52px;            /* 开服行·移动 */
  --w-cta-col: 88px;              /* 开服表行尾 CTA 列固定宽 */
}

/* reduced-motion：位移/缩放全禁，仅保留 opacity */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
  }
}