/* ==================================================================
   设计变量（design tokens）—— 界面"长什么样"全在这里
   ==================================================================

   ⚠️ 这个文件是**为了让后期换美术资产变便宜**才存在的。

   为什么单独抽出来：
     界面 = 结构（HTML/JS 生成的 DOM）+ 外观（颜色/尺寸/圆角/阴影/图标）
     如果外观散落在几百个类名里，后期换一套美术资产就得改几十处、
     还容易漏。抽成变量之后，**换美术只需要改这一个文件**。

   使用约定（以后加新样式请遵守）：
     ① 组件 CSS 里**不要写死颜色和圆角**，一律用 var(--xx)
     ② 新变量加在这里，并在下面按用途分组
     ③ 图标不写在 HTML 里，统一走 app.js 的 icon() 函数

   后期换美术资产的三种情形，成本从低到高：
     ① 换配色/圆角/阴影/字号  → 只改本文件，几分钟
     ② 换图标（emoji → 图片） → 改本文件 --icon-* + app.js 的 ICONS 表
     ③ 换成整块切图（九宫格） → 需要改组件 CSS 的 background/border-image，
                                但**结构不用动**，仍然可控
   ================================================================== */

:root {
  /* ── 底色与层次 ──────────────────────────────────────────────
     现在的做法：浅灰紫底 + 纯白卡片 + 阴影分层（参考用户的截图）。
     ⚠️ 层次靠阴影而不是边框 —— 换暗色主题时把阴影换成浅色描边即可。 */
  --bg: #f2f3f7;
  --bg-2: #f7f8fb;
  --panel: #ffffff;
  --panel-2: #fbfbfe;
  --line: #e6e8f0;
  --line-strong: #d8dcea;

  /* ── 文字 ──────────────────────────────────────────────────── */
  --text: #1f2430;
  --text-dim: #8b93a7;
  --text-strong: #12151c;

  /* ── 主色（截图里的紫蓝）───────────────────────────────────── */
  --primary: #7c6ce0;
  --primary-2: #9285e8;
  --primary-soft: #ece9fb;
  --primary-line: #d8d2f2;

  /* ── 稀有度配色（用户 2026-10-16 直接给定色号）─────────────────────
     ⚠️ 这五个是**游戏语义色**，不是主题色：
        普通/精良/稀有/史诗/传说 在任何主题下都该长这样。
        所以它们**不参与主题切换**，也不要用 --primary/--ok 那类变量代替
        （那些会随皮肤变，稀有的蓝一变就不是稀有的蓝了）。

     ⚠️ 物品名与稀有度胶囊**共用同一个颜色** —— 用户报过
        "物品名称的颜色和稀有度的颜色对不上"，就是两处各用一套色导致的。
        现在两者都取这里的变量，从根上不可能再不一致。

     用户给的原始值（有的带 # 有的没带，这里统一规范化）：
        普通 95949a / 精良 82ae46 / 稀有 89c3eb / 史诗 674598 / 传说 fcc800 */
  --rarity-common: #95949a;
  --rarity-uncommon: #82ae46;
  --rarity-rare: #89c3eb;
  --rarity-epic: #674598;
  --rarity-legendary: #fcc800;

  /* ── 功能色 ────────────────────────────────────────────────────
     ⚠️ 三围（生命/精力/魔力）各有 前景色 + 轨道色 两个变量。
        换美术时如果要"轨道用一张图"，改 --*-track 指向图片即可。 */
  --hp: #e05666;
  --hp-2: #ef7d8a;
  --hp-track: #fbe3e6;

  --stamina: #4aa89d;
  --stamina-2: #7ccdc3;
  --stamina-track: #ddf1ef;

  --mp: #5b8def;
  --mp-2: #86abf5;
  --mp-track: #e3ecfd;

  --gold: #e8a33d;
  --gold-soft: #fdf3e8;
  --gold-line: #f5dcc0;

  --ok: #4caf7d;
  /* ⚠️ 每个状态色给"浅/深"两档：
     同一句话在深底上要用亮色、在浅底上要用暗色才看得清。
     换主题时只改这两档，不用去每个组件里调。 */
  --ok-2: #6f9b6a;
  --ok-3: #a8cba4;

  --warn: #e8a33d;

  --danger: #d9534f;
  --danger-2: #e0948f;
  --danger-3: #f0b8b6;
  --danger-4: #8f3b39;

  --muted-warm: #8a7761;   /* 灰掉的暖色（比如"已放弃"的记录）*/

  --pink: #e87a9c;
  --orange: #f0934a;

  /* ── 属性各自的颜色（四维一眼分辨）────────────────────────── */
  --attr-constitution: #8b93a7;
  --attr-agility: #f0934a;
  --attr-intellect: #e87a9c;
  --attr-luck: #4caf7d;

  /* ── 形状 ──────────────────────────────────────────────────── */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  /* ── 左右内边距 ──────────────────────────────────────────────
     ⚠️ 宽度已经统一交给 --ui-w（见下），这里只管内边距。 */
  --app-pad: 12px;

  /* ── 统一宽度（用户定稿）──────────────────────────────────────
     ⚠️ 这个变量现在管**整个界面的宽度**：顶部按钮区、角色卡那两栏、
        冒险者页、设施页 —— 全部用它，所以左右边界天然对齐。

     用户要求："顶部的 UI 区域进一步缩减到 40%，比中部的角色卡宽一点就好"
     （角色卡 620px；40vw 在常见桌面宽度上是 700~1000px，正好"宽一点"）
     以及"其他界面的宽度限制在和顶部 UI 宽度一致"。 */
  --ui-w: 40vw;

  /* ── 阴影 ──────────────────────────────────────────────────── */
  --shadow: 0 2px 10px rgba(31, 36, 48, .06);
  --shadow-lift: 0 4px 16px rgba(31, 36, 48, .10);

  /* ── 字号 ──────────────────────────────────────────────────── */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;

  /* ── 间距 ────────────────────────────────────────────────────
     ⚠️ 统一成一条刻度，后期调"紧密/疏松"只改这几个值 */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;

  /* ── 三围条的厚度 ─────────────────────────────────────────────
     换美术时如果条的图片有固定高度，改这里。 */
  --bar-h: 24px;

  /* ── 图标 ────────────────────────────────────────────────────
     ⚠️ 现在用 emoji 字符（零依赖，手机端渲染免费）。
        后期换成美术图标时，把 app.js 里 ICONS 表的值从 '❤' 换成
        '<img src="/art/hp.svg">' 即可 —— 调用点不用动。
        尺寸也在这里统一控制。 */
  --icon-size: 14px;
  --icon-size-lg: 22px;
}