// Design Token — CSS 自定义属性
// 基准参考：docs/design/mp-*.html 原型设计
// 页面样式应引用 var(--tk-*) 而非硬编码 px 值
// 关怀模式通过 .elder-mode 覆盖 token 值自动生效

// ═══════════════════════════════════════
// 正常模式 Token（对齐 docs/design/mp-*.html 原型）
// 字号来源：18 份原型稿 fontSize 统计
// ═══════════════════════════════════════
page {
  // ─── 色彩 Token（CSS 变量级联，医生端可覆盖）───
  --tk-pri: #{$pri};
  --tk-pri-l: #{$pri-l};
  --tk-pri-d: #{$pri-d};
  --tk-shadow-btn: #{$shadow-btn};
  --tk-shadow-tab: #{$shadow-tab};

  // ─── 字号（11 级，对齐原型 fontSize 统计）───
  --tk-font-display: 72px;      // 大屏展示
  --tk-font-hero: 48px;         // 启动页标题
  --tk-font-h1: 28px;           // 页面标题（原型 28px serif bold）
  --tk-font-h2: 22px;           // 副标题、用户名（原型 22px serif bold）
  --tk-font-body-lg: 18px;      // 按钮文字、section 标题（原型 17-18px fontWeight:600）
  --tk-font-body: 16px;         // 正文、输入框、icon 文字（原型 16px，最常用 UI 字号）
  --tk-font-body-sm: 14px;      // 副文本、描述（原型 14px，第二大用量）
  --tk-font-num: 30px;          // 数值（原型 30px serif bold）
  --tk-font-num-lg: 34px;       // 大数值
  --tk-font-cap: 13px;          // 说明文字（原型 13px，第一高频字号）
  --tk-font-nav: 18px;          // 导航栏标题（原型 18px serif bold）
  --tk-font-micro: 11px;        // 角标、tag（原型 11px）

  // ─── 结构 ───
  --tk-line-height: 1.5;
  --tk-touch-min: 48px;
  --tk-btn-primary-h: 52px;
  --tk-text-secondary: #78716C;

  // ─── 统一组件库结构化 Token ───
  --tk-card-bg: #FFFFFF;
  --tk-card-padding: 20px;
  --tk-card-padding-sm: 16px;
  --tk-card-padding-lg: 28px;
  --tk-card-radius: 16px;
  --tk-gap-2xs: 4px;
  --tk-gap-xs: 8px;
  --tk-gap-sm: 12px;
  --tk-gap-md: 16px;
  --tk-section-gap: 20px;
  --tk-gap-lg: 24px;
  --tk-gap-xl: 32px;
  --tk-gap-2xl: 48px;
  --tk-page-padding: 20px;
  --tk-input-height: 56px;
  --tk-tabbar-space: 100px;
  --tk-touch-feedback-opacity: 0.85;
  --tk-tag-font-size: 11px;
  --tk-tag-padding-v: 3px;
  --tk-tag-padding-h: 8px;
}

// ═══════════════════════════════════════
// 关怀模式 Token（非线性放大）
// 标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55
// ═══════════════════════════════════════
.elder-mode {
  --tk-font-display: 80px;
  --tk-font-hero: 56px;
  --tk-font-h1: 32px;            // 28×1.15
  --tk-font-h2: 25px;            // 22×1.15
  --tk-font-body-lg: 22px;       // 18×1.22（交互元素适度放大）
  --tk-font-body: 22px;          // 16×1.35
  --tk-font-body-sm: 19px;       // 14×1.35
  --tk-font-num: 34px;
  --tk-font-num-lg: 40px;
  --tk-font-cap: 18px;           // 13×1.4
  --tk-font-nav: 22px;           // 18×1.22
  --tk-font-micro: 17px;         // 11×1.55

  --tk-line-height: 1.7;
  --tk-touch-min: 56px;
  --tk-btn-primary-h: 60px;
  --tk-text-secondary: #5A554F;

  --tk-card-padding: 28px;
  --tk-card-padding-sm: 20px;
  --tk-card-padding-lg: 36px;
  --tk-card-radius: 20px;
  --tk-gap-2xs: 6px;
  --tk-gap-xs: 12px;
  --tk-gap-sm: 16px;
  --tk-gap-md: 20px;
  --tk-section-gap: 28px;
  --tk-gap-lg: 32px;
  --tk-gap-xl: 40px;
  --tk-gap-2xl: 56px;
  --tk-page-padding: 28px;
  --tk-input-height: 64px;
  --tk-tabbar-space: 120px;
  --tk-touch-feedback-opacity: 0.8;
  --tk-tag-font-size: 13px;
  --tk-tag-padding-v: 5px;
  --tk-tag-padding-h: 12px;
}

// ═══════════════════════════════════════
// 医生端 Token 覆盖（靛蓝色系）
// 在医生端页面根容器添加 class="doctor-mode"
// 所有引用 var(--tk-pri) 的组件自动变色
// ═══════════════════════════════════════
.doctor-mode {
  --tk-pri: #{$doc-pri};
  --tk-pri-l: #{$doc-pri-l};
  --tk-pri-d: #{$doc-pri-d};
  --tk-shadow-btn: #{$shadow-btn-doc};
  --tk-shadow-tab: #{$shadow-tab-doc};
}