/* ===========================================================
   新词 · 设计 token（唯一真源）
   任何颜色、字号、间距、圆角都必须引用这里的变量
   v2：大圆角统一（28px）+ 字号整体上调一档
   =========================================================== */

:root {
  /* 色彩 */
  --bg: #F6F6F8;            /* 页面底：极浅灰，让白色卡片浮起来 */
  --bg-group: #ECECF0;      /* 输入框、标签、未选中底 */
  --card: #FFFFFF;
  --text: #1C1C1E;
  --text-2: #86868B;
  --text-3: #C4C4C8;
  --line: rgba(60, 60, 67, 0.10);
  --accent: #007AFF;
  --ok: #34C759;
  --danger: #FF3B30;

  /* 字号 */
  --fs-title: 36px;
  --lh-title: 43px;
  --fs-page: 26px;
  --lh-page: 32px;
  --fs-h2: 24px;
  --lh-h2: 30px;
  --fs-body: 18px;
  --lh-body: 26px;
  --fs-sub: 16px;
  --lh-sub: 22px;
  --fs-caption: 14px;
  --lh-caption: 20px;
  --fs-word: 44px;
  --lh-word: 48px;

  /* 间距（基数 4） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 圆角：卡片统一 28，控件等比缩小 */
  --r-card: 28px;
  --r-inner: 20px;
  --r-btn: 18px;
  --r-input: 16px;
  --r-pill: 999px;

  /* 阴影：更淡、更大扩散，配合大圆角 */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.06);

  /* 布局 */
  --page-pad: 20px;
  --tab-h: 62px;            /* 浮动胶囊高度 */
  --tab-inset: 16px;        /* 胶囊距屏幕底部 */
  --tab-side: 16px;         /* 胶囊距屏幕左右 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* 动效 */
  --dur-fast: 120ms;
  --dur-page: 240ms;
  --dur-flip: 320ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}