/**
 * tokens.css —— 设计令牌（手机端与电脑端唯一共用文件）
 * 改配色 / 字号 / 圆角 / 阴影只改这里。
 *
 * 主题：明亮奶油紫（light）
 * - 背景浅紫白、卡片纯白，文字深墨紫，正文对比度 ≥ 4.5:1
 * - 品牌紫只用于强调与主按钮，避免大面积铺色
 */
:root {
  /* ---------- 底色 ---------- */
  --bg-0: #f8f6ff;
  --bg-1: #efeaff;
  --bg-card: #ffffff;
  --bg-card-hover: #f6f2ff;
  --bg-soft: #f4f0ff;
  --bg-input: #fbfaff;

  /* 玻璃层：顶栏 / 底部 Tab / 侧边栏 */
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.94);

  /* ---------- 品牌色 ---------- */
  --brand: #6d4aff;
  --brand-light: #8f74ff;
  --brand-deep: #4f2ae8;
  --brand-soft: rgba(109, 74, 255, 0.1);
  --brand-softer: rgba(109, 74, 255, 0.055);
  --on-brand: #ffffff;

  /* ---------- 语义色 ---------- */
  --ok: #0f9d70;
  --ok-soft: rgba(15, 157, 112, 0.1);
  --star: #f59e0b;
  --danger: #e04a4f;
  --danger-soft: rgba(224, 74, 79, 0.1);
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, 0.1);

  /* ---------- 文字 ---------- */
  --text-0: #1c1734;
  --text-1: #4b4468;
  --text-2: #8b85a4;

  /* ---------- 线条 ---------- */
  --line: rgba(109, 74, 255, 0.22);
  --line-soft: rgba(28, 23, 52, 0.08);

  /* ---------- 阴影 ---------- */
  --shadow-xs: 0 1px 2px rgba(28, 23, 52, 0.06);
  --shadow-sm: 0 2px 8px rgba(28, 23, 52, 0.07);
  --shadow: 0 8px 24px rgba(76, 55, 160, 0.1);
  --shadow-md: 0 14px 34px rgba(76, 55, 160, 0.14);
  --shadow-brand: 0 6px 18px rgba(109, 74, 255, 0.28);
  --shadow-brand-lg: 0 10px 24px rgba(109, 74, 255, 0.34);

  /* 兼容旧变量名（明亮主题下 = 柔和阴影） */
  --glow: var(--shadow);
  --glow-strong: var(--shadow-md);

  /* ---------- 圆角 ---------- */
  --r-card: 20px;
  --r-btn: 12px;
  --r-pill: 999px;
  --r-sm: 10px;

  /* ---------- 间距 ---------- */
  --gap: 16px;
  --gap-sm: 10px;
  --gap-lg: 24px;

  /* ---------- 尺寸 ---------- */
  --topbar-h: 72px;

  /* ---------- 字号 ---------- */
  --fs-display: 28px;
  --fs-title: 24px;
  --fs-h2: 18px;
  --fs-body: 15px;
  --fs-note: 13px;
  --fs-tiny: 11px;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}