/* ============================================
 * 设计Token - 老六游戏UI组件库
 * 配色体系：冷蓝灰底 + 金色主强调
 * ============================================ */

:root {
  /* ---- 背景色阶（冷蓝灰，由深到浅） ---- */
  --bg-dark:     #14181C;   /* 最深：视口外边框、顶部状态栏基底 */
  --bg-main:     #1E2329;   /* 主背景：背包、角色面板、对话主窗口底色 */
  --bg-light:    #2B323B;   /* 次级背景：列表条目、输入框、Tab页签 */
  --bg-surface:  #3A4350;   /* 最浅：分割线、卡片悬浮底衬、滑块轨道 */

  /* ---- 主强调色（金色） ---- */
  --primary:        #C89B3C;   /* 核心：按钮、选中边框、高亮文字 */
  --primary-hover:  #E8C55A;   /* 悬停：按钮悬停、可交互物品划过 */
  --primary-active: #A67C2E;   /* 按压：按钮按下、已装备/锁定状态 */
  --primary-glow:   rgba(200,155,60,0.2); /* 柔光：珍贵物品微光、重要标记 */

  /* ---- 辅助色 ---- */
  --red:          #C44B4B;   /* 警告/伤害/生命值低 */
  --red-bright:   #E05555;
  --green:        #4CAF50;   /* 治疗/成功/生命值满 */
  --green-bright: #66CC6A;
  --blue:         #4A8FD4;   /* 精良/信息/冷却中 */
  --blue-bright:  #6AAFFF;

  /* ---- 品质色 ---- */
  --q-common:    #9B9B9B;   /* 普通 - 灰色 */
  --q-magic:     #4A8FD4;   /* 精良 - 蓝色 */
  --q-rare:      #9B6FD4;   /* 稀有 - 紫色 */
  --q-legendary: #C44B4B;   /* 传奇 - 红色 */
  --q-unique:    #C89B3C;   /* 史诗 - 金色 */
  --q-set:       #4AC420;   /* 套装 - 绿色 */

  /* ---- 文字色阶 ---- */
  --text-primary:   #E8E0D0;   /* 主文字 */
  --text-secondary: #9BA4AE;   /* 次要文字 */
  --text-dim:       #5E6872;   /* 弱化文字 */

  /* ---- 边框 ---- */
  --border-dim:      rgba(155,164,174,0.12);
  --border-primary:  rgba(200,155,60,0.35);
  --border-light:    rgba(155,164,174,0.2);

  /* ---- 发光 ---- */
  --glow-primary:  0 0 8px rgba(200,155,60,0.4);
  --glow-red:      0 0 8px rgba(196,75,75,0.4);
  --glow-green:    0 0 8px rgba(76,175,80,0.4);
  --glow-purple:   0 0 8px rgba(155,111,212,0.4);

  /* ---- 字体 ---- */

  --font-body:    'HarmonyOS Sans SC', 'HarmonyOS Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-num:     'Cinzel', 'Georgia', 'Times New Roman', serif;          /* 战力/评分/伤害等特殊数值 */
  --font-mono:    'SF Mono', 'Cascadia Code', Consolas, 'Liberation Mono', Menlo, monospace; /* 常规数值/角标/代码 */

  /* ---- 布局尺寸 ---- */
  --sidebar-width: 220px;
  --grid-cell:     80px;
  --grid-gap:      4px;
  --slot-size:     72px;

  /* ---- 圆角 ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* ---- 过渡 ---- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}