/* ============================================================================
   同宽适慧 · 三期设计 Token（H5 端）  v1  2026-09-22
   ----------------------------------------------------------------------------
   来源：_ui_ref/prototype-v1.html（客户 2026-09-22 确认方向）+ 适老化增强（决策①方案 A）
   规范：交付方案/三期-设计规范-v1.md
   校验：python tools/check_tokens.py       ← 改任何颜色后必须重跑
   小程序同源文件：app/miniprogram/src/common/theme.scss（两端语义名一一对应，勿单改一端）

   用法（阶段 2 换肤时接入）：在 index.html 的 <style> 之前加
       <link rel="stylesheet" href="/static/theme.css">
   本文件只放「变量 + 通用组件皮」，不含任何业务选择器，接入不会改变现结构。
   ========================================================================== */

:root {
  /* ---------- 1. 底色 / 面（保留明度差，老人可辨识，决策①） ---------- */
  --bg:          #EFE6E4;                                   /* 页面底：米灰 */
  --bg-grad:     linear-gradient(160deg, #EDE2DF 0%, #E5D8D5 100%);
  --card:        #FEFDFC;                                   /* 卡片：暖白（与底明度差 ≈ 1.08） */
  --card-2:      #F6F2F0;                                   /* 次级卡片 / 堆叠下层 */
  --card-sunken: #F1EAE8;                                   /* 凹陷面（输入框内底） */
  --line:        #E7DAD7;                                   /* 描边（非文本，≥3:1 不作要求） */
  --overlay:     rgba(58, 49, 40, .45);                     /* 遮罩 */

  /* ---------- 2. 文字（全部按 WCAG 2.1 实测，门槛 ≥4.5:1 @ --card） ---------- */
  --ink:     #332C27;   /* 主文字      12.19:1 ✅ */
  --ink-2:   #5F5450;   /* 次文字       5.90:1 ✅（最差底 bg 上仍 5.90） */
  --ink-3:   #6E625D;   /* 辅助/说明    4.65:1 ✅（card/card-2/sunken/bg 四底全达标）
                             ← 适老化增强：原型 #9A8D7E 仅 3.10 ~ 2.64，不达标 */
  --ink-4:   #8C8078;   /* 🔴 仅限非文本：图标 / 分隔线 / 未选中勾选框（图形阈值 3:1，3.10 ✅）—— 作文字用不达标 */
  --ink-on-dark: #FFF3D9;/* 深色底上的文字（拍摄页）6.56:1 @#585754 ✅ */

  /* ---------- 3. 品牌金 ---------- */
  --gold-grad: linear-gradient(160deg, #F5C158 0%, #DE9A2C 100%);  /* 主 CTA 底色（视觉与原型一致） */
  --gold:      #DE9A2C;                                  /* 纯色金（装饰） */
  --gold-l:    #FAEFE9;                                  /* 金色浅底（标签底） */
  --gold-d:    #8F570A;   /* 金色「文字/描边」5.69:1 @card / 5.29 @gold-l / 4.84 @bg ✅
                             ← 适老化增强：原型 #B8761A 仅 3.56，不达标 */
  --gold-m:    #B8761A;   /* 🔴 仅限非文本装饰（描边/图标，3.56 ≥3:1 ✅） */
  --on-gold:   #43310A;   /* 金底上的文字  5.21~7.21:1 ✅
                             ← 🔴 禁用白字：白字在金渐变两端仅 1.73 / 2.40，远不达标 */

  /* ---------- 4. 风险 / 状态（不只靠颜色，决策③） ---------- */
  --danger:    #C0392B;   /* 4.67:1 @--danger-bg ✅，白字在其上 5.44:1 ✅ */
  --danger-bg: #FBEAE7;
  --danger-ink:#8E3A2C;   /* 风险标题 5.69:1 @--danger-card ✅（深版 7A2E22 = 7.09 备用） */
  --danger-card:   linear-gradient(165deg, #F6DAD4, #EFC4BC);
  --danger-border: #E3AFA5;
  --neutral-card:  linear-gradient(165deg, #E4E1DB, #D6D2CB);
  --neutral-border:#C6C1B8;
  --neutral-tag:   #6E6960;   /* 中性标签底，白字 5.45:1 ✅ ← 原型 #8A8378 白字仅 3.75 不达标 */
  --ok: #8F570A;   /* 合格/成功（"图片合格"标签） */
  --ok-bg: #FAEFE9;

  /* ---------- 5. 字号阶梯（适老化硬线：正文 ≥17px，辅助 ≥14px） ---------- */
  --fs-display: 26px;   /* 封面主标题 */
  --fs-h1:      22px;   /* 页面标题 */
  --fs-h2:      19.5px; /* 区块标题 */
  --fs-h3:      18px;   /* 卡片标题 */
  --fs-body:    17px;   /* 🔴 正文下限（验收标准：≥17px） */
  --fs-sm:      16px;   /* 表单标签 / 次要正文 */
  --fs-xs:      14.5px; /* 辅助说明（下限） */
  --lh-body:    1.65;
  --lh-title:   1.38;

  /* 老人模式「一键放大」：+15%（不动结构，只切一套变量） */
  --fs-scale: 1;
  --fs-display-s: calc(var(--fs-display) * var(--fs-scale));
  --fs-h1-s:      calc(var(--fs-h1)      * var(--fs-scale));
  --fs-h2-s:      calc(var(--fs-h2)      * var(--fs-scale));
  --fs-h3-s:      calc(var(--fs-h3)      * var(--fs-scale));
  --fs-body-s:    calc(var(--fs-body)    * var(--fs-scale));
  --fs-sm-s:      calc(var(--fs-sm)      * var(--fs-scale));
  --fs-xs-s:      calc(var(--fs-xs)      * var(--fs-scale));

  /* ---------- 6. 触控尺寸（适老化硬线：主按钮 ≥52px，点按区 ≥44px） ---------- */
  --tap:     52px;   /* 主按钮 / 关键操作（与客户确认的规划口径一致） */
  --tap-min: 44px;   /* 🔴 可点区域下限 */
  --tap-chip:40px;   /* 勾选项行高（仅限已有 ≥12px 行距的密集列表） */

  /* ---------- 7. 圆角 / 间距 ---------- */
  --r-card: 26px;
  --r-btn:  14px;
  --r-chip: 10px;
  --r-pill: 999px;
  --sp-1: 8px;  --sp-2: 12px; --sp-3: 16px; --sp-4: 20px; --sp-5: 28px;

  /* ---------- 8. 新拟态阴影（浅浮雕：底暗 + 顶亮 双向） ---------- */
  --sh-out:  11px 14px 30px rgba(172,142,136,.30), -8px -8px 20px rgba(255,255,255,.98);
  --sh-soft: 7px 9px 20px rgba(172,142,136,.26), -6px -6px 15px rgba(255,255,255,.96);
  --sh-in:   inset 3px 3px 7px rgba(172,142,136,.28), inset -3px -3px 7px rgba(255,255,255,.95);
  --sh-gold: 0 0 22px rgba(245,193,88,.45), 0 6px 16px rgba(222,154,44,.34), inset 0 1px 0 rgba(255,255,255,.55);
  --sh-card: 0 14px 30px rgba(150,90,80,.26);

  /* ---------- 9. 动效（老人端克制：位移小、时长短） ---------- */
  --dur: 160ms;  --dur-slow: 260ms;  --ease: cubic-bezier(.4,0,.2,1);
}

/* 老人模式「一键放大」：给 <html> 或任一容器加 data-senior="1" 即全量生效 */
[data-senior="1"] { --fs-scale: 1.15; }
[data-senior="2"] { --fs-scale: 1.30; }

/* ============================================================================
   通用组件皮（新拟态）——阶段 2 换肤时逐个替换旧类，本期只是备好
   ========================================================================== */
.neu {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-out);
}
.neu-flat {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-soft);
}
.neu-sunken {
  background: var(--card-sunken);
  border-radius: var(--r-btn);
  box-shadow: var(--sh-in);
}
.neu-btn {
  display: block; width: 100%;
  min-height: var(--tap);
  border: 0; font-family: inherit; cursor: pointer;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);   /* 浮雕面：顶部微高光 */
  color: var(--ink);
  border-radius: var(--r-btn);
  box-shadow: var(--sh-soft), inset 0 1px 0 rgba(255,255,255,.95);
  font-size: var(--fs-body-s); font-weight: 700;
  padding: 14px 10px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.neu-btn:active { box-shadow: var(--sh-in); transform: translateY(1px); }
.neu-btn--gold {   /* 仅主操作（拍照 / 生成方案）用金色点缀 */
  background: linear-gradient(180deg, #F5C158 0%, #DE9A2C 100%);
  color: var(--on-gold);
  box-shadow: var(--sh-gold);
}
.neu-btn--gold:active { transform: translateY(1px); filter: brightness(.97); }
.neu-btn--line {
  background: var(--card); color: var(--gold-d);
  border: 2px solid #B8761A; font-weight: 800;
}
.neu-btn:disabled { opacity: .55; box-shadow: none; cursor: not-allowed; }

/* 输入 / 下拉：凸起底 + 凹陷内槽，字号走 --fs-sm-s，可点高度 ≥--tap-min */
.neu-field {
  width: 100%; min-height: var(--tap-min);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  box-shadow: var(--sh-in);
  font-family: inherit; font-size: var(--fs-sm-s);
  padding: 11px 13px;
}
.neu-field::placeholder { color: var(--ink-3); }   /* 4.65:1 ✅ 不用 --ink-4 */

/* 标签：颜色 + 文字双通道（决策③：颜色只作区分，不表等级） */
.neu-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs-s); font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--gold-l); color: var(--gold-d);
  border: 1px solid var(--line);
}
.neu-tag--danger { background: var(--danger); color: #fff; }      /* 5.44:1 ✅ */
.neu-tag--neutral { background: var(--neutral-tag); color: #fff; }/* 5.45:1 ✅ */

/* 双列勾选项（报价页） */
.neu-chk {
  display: flex; align-items: flex-start; gap: 8px;
  min-height: var(--tap-chip);
  background: var(--card); border-radius: var(--r-chip);
  box-shadow: var(--sh-soft);
  padding: 9px 10px; margin-bottom: 6px;
  font-size: var(--fs-xs-s); color: var(--ink-2); line-height: 1.45;
}
.neu-chk i { font-style: normal; font-size: var(--fs-sm-s); color: var(--gold-d); font-weight: 900; }
.neu-chk.on { background: var(--gold-l); border: 1px solid var(--line); }
.neu-chk.off i { color: var(--ink-4); }

/* 焦点可见（键盘 / 无障碍，不能只靠点击态） */
.neu-btn:focus-visible,
.neu-field:focus-visible,
.neu-chk:focus-visible { outline: 3px solid var(--gold-d); outline-offset: 2px; }

/* 降低动效偏好：只作用于本期新组件皮（不劫持现有页面的过渡） */
@media (prefers-reduced-motion: reduce) {
  .neu-btn, .neu-chk, .neu { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}