/* ============================================================
   宁知 · 网页版 Design Token (v1.0)
   对齐小程序 app.wxss v5.0「档案蓝」差异化策略。
   设计哲学：温和、克制、陪伴感；资料感优先于养生感。
   差异化理由：养生绿易被误读为阿福式「养生解读」App；
   档案蓝传递「长期资料链管理 / 档案」定位，3 秒与竞品区分。

   关键拆分（网页版历史债修正）：
   - 品牌 / 主操作色 = 档案蓝（--nz-primary-*）
   - 健康 / 正常语义色 = 独立绿（--nz-healthy-*），不得与品牌色混用
   这样既统一品牌，又不破坏「正常=绿」的医学语义直觉。

   所有 P0 安全色（急诊红 / 免责暖色 / VIP 金）必须走 token，禁止裸写。
   ============================================================ */

:root {
  /* —— 色彩 Token · 档案蓝品牌体系 —— */
  --nz-bg-page: #F7F5F0;        /* 页面背景·米白 */
  --nz-bg-white: #FFFFFF;       /* 卡片背景 */
  --nz-bg-soft: #F2F5F6;        /* 软背景·chip 未选中态 */
  --nz-text-primary: #2C2C2C;   /* 主文字 */
  --nz-text-secondary: #666666; /* 次文字 */
  --nz-text-hint: #999999;      /* 提示/免责 */
  --nz-primary-strong: #1F4E5F; /* 主色·深档案蓝（按钮/标题/活跃态） */
  --nz-primary: #2E7D8A;        /* 强调蓝·活跃态/时间轴节点 */
  --nz-primary-light: #3E8E9A;  /* 亮蓝·渐变收尾 */
  --nz-primary-pale: #E6EFF1;   /* 浅蓝背景/选中/标签 */
  --nz-primary-border: #C4DDE0; /* 浅蓝描边 */
  --nz-border: #DFE5E7;         /* 边框（偏冷，配合蓝） */
  --nz-border-strong: #D4DCE0;  /* 实色边框（白底+米白底下边缘清晰） */
  --nz-link: #2b6de0;           /* 科普/外链蓝 */

  /* —— 语义色 · 健康/正常（与品牌蓝严格分离） —— */
  --nz-healthy: #2C7A3F;        /* 正常/健康·深绿 */
  --nz-healthy-bg: #E3F1E6;     /* 正常/健康浅底 */

  /* —— 语义色 · 警示/风险（受保护功能色） —— */
  --nz-danger: #C75A3A;         /* 危险/删除 */
  --nz-danger-bg: #FBEDE8;      /* 危险/错误软底 */
  --nz-warn-bg: #FCE7D9;        /* 温柔提示暖底（陪伴/安抚条） */
  --nz-warn-border: #EAD7B7;    /* 暖色描边（合规/免责边界） */
  --nz-review-bg: #FBE3DB;      /* 需复核暖底（置信度·review 徽章） */
  --nz-mention: #185FA5;        /* 提及冷蓝·正文 */
  --nz-mention-dark: #0C447C;   /* 提及冷蓝·深一档标题 */
  --nz-mention-bg: #E6F1FB;     /* 提及冷蓝浅底 */
  --nz-mention-border: #B5D4F4; /* 提及冷蓝描边 */
  --nz-disabled: #CFD9DC;       /* 禁用态灰蓝 */
  --nz-tab-inactive: #A8B5B9;   /* 底部 tab 未选中（刻意弱对比） */

  /* —— P0 安全色（零触碰：禁止裸写，必须走 token） —— */
  --nz-emergency: #C0392B;       /* 急诊红·功能型紧急灯 */
  --nz-emergency-dark: #B5492A;  /* 急诊红深一档（正文层） */
  --nz-emergency-bg: #FDECEA;    /* 急诊红浅底（强提醒块） */
  --nz-emergency-border: #E7B4AD;/* 急诊红描边（轻提醒 chip） */
  --nz-vip-gold: #F4D58D;        /* VIP 金（零触碰） */
  --nz-warm-disclaimer: #FBF7EF; /* 免责暖色底（零触碰） */

  /* —— 圆角 —— */
  --nz-radius-sm: 8px;
  --nz-radius-md: 12px;   /* 交互元素 */
  --nz-radius-lg: 16px;   /* 大卡片 */
  --nz-radius-pill: 999px;/* 胶囊/标签/圆形按钮 */

  /* —— 字号阶梯（全年龄可读基线：覆盖年轻人/中年人/老人，非「老人版」——视觉障碍、昏暗环境、小屏阅读都靠放大字号偏好解决，见 js/font-scale.js 三档） —— */
  --nz-fs-micro: 11px;     /* 徽标 / 极小提示 */
  --nz-fs-caption: 13px;  /* 辅助/来源/免责 */
  --nz-fs-body: 15px;     /* 正文/说明 */
  --nz-fs-base: 16px;     /* 基础阅读 */
  --nz-fs-subtitle: 17px; /* 区块标题 */
  --nz-fs-title: 20px;    /* 页面标题 */
  --nz-fs-display: 26px;  /* 首屏大标题 */

  /* —— 间距（8px 栅格） —— */
  --nz-sp-1: 4px;
  --nz-sp-2: 8px;
  --nz-sp-3: 16px;
  --nz-sp-4: 24px;
  --nz-sp-5: 32px;
  --nz-sp-6: 48px;

  /* —— 阴影 —— */
  --nz-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --nz-shadow-md: 0 4px 14px rgba(0,0,0,.08);
  --nz-shadow-lg: 0 -8px 30px rgba(0,0,0,.18); /* 底部弹层 */

  /* —— 动效 —— */
  --nz-ease: cubic-bezier(.4,0,.2,1);
  --nz-dur: .2s;
}

/* —— 字号偏好放大（全年龄通用，非「老人模式」）——
   现行方案由 js/font-scale.js 实现：根元素挂 .font-large（大 1.25×）/ .font-xlarge（特大 1.5×），
   用户在「我的-阅读字号」自行选择 标准/大/特大；任何 P0 安全色（急诊红/免责暖色）零触碰。
   下方 .nz-lf 为旧开关方案残留，已废弃，请勿引用；保留仅作变量示例，后续迁移清理。 */
.nz-lf {
  --nz-fs-micro: 13px;
  --nz-fs-caption: 15px;
  --nz-fs-body: 17px;
  --nz-fs-base: 18px;
  --nz-fs-subtitle: 19px;
  --nz-fs-title: 23px;
  --nz-fs-display: 30px;
}

/* —— 工具类（供逐步迁移使用；现有 200+ 内联样式按页迁移时优先用这些） —— */
.nz-card {
  background: var(--nz-bg-white);
  border-radius: var(--nz-radius-lg);
  padding: var(--nz-sp-3);
  border: 1px solid var(--nz-border-strong);
  box-shadow: var(--nz-shadow-sm);
}
.nz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--nz-sp-3);
  border-radius: var(--nz-radius-md);
  font-size: var(--nz-fs-base); font-weight: 600; line-height: 1;
  border: none; cursor: pointer;
  transition: background var(--nz-dur) var(--nz-ease);
}
.nz-btn--primary { background: var(--nz-primary-strong); color: #fff; }
.nz-btn--primary:hover { background: var(--nz-primary); }
.nz-btn--ghost { background: var(--nz-primary-pale); color: var(--nz-primary-strong); }
.nz-btn--block { width: 100%; }
.nz-btn[disabled] { opacity: .5; cursor: not-allowed; }

.nz-tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--nz-radius-pill);
  font-size: var(--nz-fs-caption);
  background: var(--nz-primary-pale); color: var(--nz-primary-strong);
}
.nz-tag--healthy { background: var(--nz-healthy-bg); color: var(--nz-healthy); }

.nz-section-title {
  display: flex; align-items: center; justify-content: space-between;
  margin: var(--nz-sp-4) 0 var(--nz-sp-2);
  position: relative; padding-left: 14px;
  font-size: var(--nz-fs-subtitle); font-weight: 700; color: var(--nz-primary-strong);
}
.nz-section-title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 20px; border-radius: 3px; background: var(--nz-primary-strong);
}

.nz-row {
  display: flex; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--nz-border);
}
.nz-row:last-child { border-bottom: none; }