/* ============================================================
 * tokens.css —— 设计变量（颜色 / 间距 / 圆角 / 字号 / 阴影）
 * 修改主题色只需要改这一处。
 * ============================================================ */

:root {
  /* ---------- 品牌与主题色 ---------- */
  --c-brand: #2f6df6;
  --c-brand-strong: #1d55d6;
  --c-brand-soft: #e8efff;
  --c-accent: #ff7a45;

  /* ---------- 功能色 ---------- */
  --c-success: #21a366;
  --c-warning: #e8a33d;
  --c-danger: #e5484d;
  --c-info: #4a9de8;

  /* ---------- 中性色（亮色主题） ---------- */
  --c-bg: #f5f6f9;
  --c-bg-elevated: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f0f2f7;
  --c-border: #e3e6ee;
  --c-border-strong: #cfd5e2;
  --c-text: #1c2230;
  --c-text-2: #5b6376;
  --c-text-3: #8a92a6;
  --c-overlay: rgba(16, 20, 30, 0.45);

  /* ---------- 间距 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* ---------- 圆角 ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- 字号（手机优先，PC 通过 clamp 适配） ---------- */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;

  /* ---------- 阴影 ---------- */
  --shadow-1: 0 1px 2px rgba(20, 30, 60, 0.06);
  --shadow-2: 0 4px 14px rgba(20, 30, 60, 0.08);
  --shadow-3: 0 10px 30px rgba(20, 30, 60, 0.14);

  /* ---------- 布局尺寸 ---------- */
  --tabbar-h: 58px;
  --topbar-h: 52px;
  --sidenav-w: 220px;
  --content-max: 1120px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 160ms;

  /* ---------- 精灵属性配色（18 种基础属性 + 光系） ---------- */
  --type-normal: #a8a77a;
  --type-fire: #ee8130;
  --type-water: #6390f0;
  --type-electric: #f7c948;
  --type-grass: #7ac74c;
  --type-ice: #6fd6d6;
  --type-fighting: #c22e28;
  --type-poison: #a33ea1;
  --type-ground: #c99a3e;
  --type-flying: #a98ff3;
  --type-psychic: #f95587;
  --type-bug: #a6b91a;
  --type-rock: #b6a136;
  --type-ghost: #735797;
  --type-dragon: #6f35fc;
  --type-dark: #5a5366;
  --type-steel: #a8b1bb;
  --type-fairy: #ef70ef;
  --type-light: #f2c14e;
  --type-unknown: #9aa1b1;

  /* 属性标签上的文字色（浅色属性用深字） */
  --type-ink: #ffffff;

  /* 属性标签图标方格的加深蒙版 */
  --type-icon-veil: rgba(0, 0, 0, 0.26);
  --type-icon-veil-strong: rgba(0, 0, 0, 0.42);
}

/* ---------- 深色主题 ---------- */
:root[data-theme='dark'] {
  --c-brand: #5b8cff;
  --c-brand-strong: #7aa3ff;
  --c-brand-soft: #1c2740;
  --c-bg: #0f1218;
  --c-bg-elevated: #171b23;
  --c-surface: #1a1f28;
  --c-surface-2: #232935;
  --c-border: #2b3240;
  --c-border-strong: #3a4354;
  --c-text: #e9edf5;
  --c-text-2: #a3adc0;
  --c-text-3: #6e7889;
  --c-overlay: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 10px 30px rgba(0, 0, 0, 0.55);
}