/* ============================================================
   vps-mall tokens.css — 设计规范 §2 的唯一落地物
   ------------------------------------------------------------
   · 前后台共用同一份，内容逐字节相同（规范 §11 铁律）
   · 颜色 21 个语义变量（亮 18 + 暗色覆盖同槽位），禁止新增第 22 个
   · 圆角 4 / 阴影 4 / 字体 2 / 缓动 1
   · 页面布局变量（--page-w/--page-pad/--top-w/--rail）是页面级
     差异项，写在各页自己的 CSS 里，不进本文件
   · 值与 prototype/front.html 的 :root 逐字节一致（2026-10-12 校验）
   ============================================================ */

:root {
  /* ---- 品牌（唯一需要改的数字是 --brand-h，主题气泡/后台换色就改它） ---- */
  --brand-h: 262;
  --brand: oklch(0.56 0.17 var(--brand-h));
  --brand-ink: oklch(0.42 0.16 var(--brand-h));
  --brand-soft: oklch(0.95 0.03 var(--brand-h));
  --brand-line: oklch(0.87 0.06 var(--brand-h));

  /* ---- 表面（海拔角色：bg < surface-2 < surface-3，别用「亮/暗」描述层级） ---- */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F2F4F8;
  --surface-3: #E9ECF2;

  /* ---- 描边 ---- */
  --border: #E5E8EF;
  --border-strong: #D2D7E2;

  /* ---- 文字 ---- */
  --text: #11141B;
  --text-2: #5B6373;
  --text-3: #8B92A2;

  /* ---- 语义色（中国习惯：涨红 --up / 跌绿 --down；warn=缺项/告急） ---- */
  --up: #D93636;
  --down: #1E9E6A;
  --warn: #B4780E;
  --warn-soft: #FDF3E2;

  /* ---- 圆角（r-sm 导航/小件 · r 容器 · r-lg 卡片 · r-xl 弹窗） ---- */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* ---- 阴影（1 静置 · 2 hover · 3 浮层 · 4 弹窗） ---- */
  --sh-1: 0 1px 2px rgba(16, 20, 32, .05);
  --sh-2: 0 2px 6px rgba(16, 20, 32, .06), 0 1px 2px rgba(16, 20, 32, .05);
  --sh-3: 0 12px 32px rgba(16, 20, 32, .10), 0 2px 8px rgba(16, 20, 32, .06);
  --sh-4: 0 32px 64px rgba(16, 20, 32, .18), 0 4px 12px rgba(16, 20, 32, .08);

  /* ---- 字体 ---- */
  /* Sora 本地自托管（static/fonts.css，latin 子集，见该文件头注释）；
     中文**故意不下载 Noto Sans SC**（Google 会拆上百个子集拖慢首屏）→ 直接走系统中文字体 */
  --font: "Sora", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- 缓动 ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- 暗色主题（[data-theme="dark"]）：暗底阴影天然辨识度低，故意更重 ---- */
[data-theme="dark"] {
  --brand: oklch(0.70 0.15 var(--brand-h));
  --brand-ink: oklch(0.80 0.13 var(--brand-h));
  --brand-soft: oklch(0.28 0.06 var(--brand-h));
  --brand-line: oklch(0.38 0.09 var(--brand-h));
  --bg: #0A0B0E;
  --surface: #12141A;
  --surface-2: #171A21;
  --surface-3: #1E222B;
  --border: #232732;
  --border-strong: #323847;
  --text: #E9EBF1;
  --text-2: #9AA2B3;
  --text-3: #6B7385;
  --up: #F0554F;
  --down: #35C08A;
  --warn: #E0A63C;
  --warn-soft: #2A2318;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .45);
  --sh-3: 0 16px 40px rgba(0, 0, 0, .55);
  --sh-4: 0 32px 70px rgba(0, 0, 0, .7);
}