/* 设计令牌（H5 网页版）
   权威来源：miniapp/docs/设计规范.md + 小程序页面实际在用的那套浅色色板
     （pages/index/index.wxss、pages/decal/decal.wxss、pages/home/home.wxss、app.wxss）。

   2026-09-16 改版：H5 从「黑金」换成「小程序浅色主题」。
   规范 §1 的那套黑金只属于小程序里的会员/权益卡（home.wxss 的 .vp-entry），
   而顾客每天用的排版页、妆贴页、打印页其实是第三套事实色板：
     浅色底 #f5f7fa / #f8fafc、白卡片 #ffffff + #edf1f5 描边、正文 #17202a / #6b7280、
     品牌绿主按钮 #18a765、信息蓝 #1688f0、浅色状态底 #e8f3ff / #e7f8ef。
   H5 现在是「左侧导航 + 右侧内容」的顾客工作台，所以对齐的是这一套，而不是黑金。
   **例外：会员入口（.member-banner / .member-pill / .member-gate / .btn-gold 那一族）
   是 H5 里唯一保留黑金的表面** —— 会员卡与小程序 pages/home/home.wxss 的 .vp-entry
   是同一份气质，顾客从小程序切到网页不该觉得「不是同一家」。改这些样式请对设计规范 §1/§2。

   色值白名单：工具 tools/check_h5_static.py 只允许
     design-tokens.json 的「规范色板」+「全局色板」+「H5色板」（新增值必须先登记）。
   rgba() 只允许白名单里登记过的「底色」（透明度可自由）。
*/

:root {
  /* ── 底座：浅色底 + 白卡片 + 浅灰分隔 ─────────────────────────── */
  --c-bg: #f5f7fa;              /* 页面底色（小程序 shell / 眼珠排版页同款） */
  --c-bg-soft: #f8fafc;         /* 区块内的浅底：进度条底、空态底、次级面板 */
  --c-card: #ffffff;            /* 卡片 */
  --c-line: #edf1f5;            /* 卡片描边（小程序 section 同款） */
  --c-line-soft: #f0f3f6;       /* 更淡的分隔线 */
  --c-line-strong: #e3e9f0;     /* 输入框/选择器的描边 */

  /* ── 文字：深墨正文 + 两级次要灰 ──────────────────────────────── */
  --c-ink: #17202a;             /* 标题 / 需要一眼看到的值 */
  --c-text: #4b5563;            /* 正文 */
  --c-muted: #6b7280;           /* 说明、副标题 */
  --c-faint: #7b8493;           /* 最弱：卡片脚注、占位 */

  /* ── 品牌绿：主按钮实心、次按钮描边 ───────────────────────────── */
  --c-primary: #18a765;         /* 品牌绿（小程序主 CTA 同款） */
  --c-primary-ink: #148756;     /* 浅绿底上的绿字 / 强调数值 */
  --c-primary-soft: #e7f8ef;    /* 浅绿底：选中态、成功态（见「H5色板」） */

  /* ── 信息蓝：链接、当前导航项、选中胶囊 ───────────────────────── */
  --c-info: #1688f0;
  --c-info-ink: #126fc9;
  --c-info-soft: #e8f3ff;
  --c-info-line: #bfdbfe;

  /* ── 危险 / 提示 ─────────────────────────────────────────────── */
  --c-danger: #b42318;          /* 危险操作的文字与描边（见 design-tokens.json「H5色板」） */
  --c-danger-soft: #fee2e2;     /* 危险操作的浅底 */
  --c-warn: #8a6400;            /* 提示文字（小程序 dpi-chip-tag 同款） */
  --c-warn-soft: #fff8e8;       /* 提示浅底 */
  --c-warn-line: #f0f3f6;       /* 提示描边（用中性浅灰，不为提示单独新增色值） */

  /* ── 中性浅灰：禁用、次要胶囊 ─────────────────────────────────── */
  --c-slate-soft: #eef2f7;
  --c-slate-ink: #566273;

  /* ── 遮罩与阴影（底色已登记，透明度按设计需要） ───────────────── */
  --c-overlay: rgba(15, 23, 42, .42);       /* 弹层遮罩（小程序 modal-mask 同款） */
  --c-shadow-card: 0 8px 22px rgba(17, 24, 39, .04);
  --c-shadow-float: 0 12px 34px rgba(17, 24, 39, .08);

  /* ── §2 圆角（小程序卡片 24–28rpx、胶囊 999rpx；1rpx=0.5px） ──── */
  --r-card: 14px;
  --r-card-sm: 10px;
  --r-pill: 999px;

  /* ── 间距（页面左右 24rpx=12px；其余按 8rpx=4px 步进） ────────── */
  --sp-page: 12px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ── 字号 ─────────────────────────────────────────────────────── */
  --fs-title: 16px;
  --fs-body: 14px;
  --fs-sub: 12px;
  --fs-hero: 22px;

  /* ── 组件尺寸（主 CTA 96rpx=48px；触控目标 ≥44px） ───────────── */
  --h-cta: 48px;
  --h-touch: 44px;
  --op-disabled: .55;

  /* ── 布局：手机单列；≥768px 左侧固定导航 + 右侧居中限宽 ───────── */
  --w-nav: 200px;
  --w-content: 900px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   黑金会员入口（H5 里唯一保留黑金的表面）
   —— 设计稿：miniapp/deploy/design-preview/h5-member-entry-design.md §3.1（方案 C）
   色值 100% 取自现有白名单，零新增：
     规范色板  #f7e7a6  #e8c86a  #c9a227  #17130e  #1f1a14
     全局色板  #3a2e12（金底上的深字；最深的金端对比度也有 5.5:1）
     rgba 底色 247,231,166 / 201,162,39（已在「rgba底色白名单」里）
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --g-light: #f7e7a6;          /* 金渐变起点（规范 §1） */
  --g-mid: #e8c86a;            /* 金渐变中点（规范 §1） */
  --g-deep: #c9a227;           /* 金渐变终点（规范 §1） */
  --g-ink: #3a2e12;            /* 金底深字：对 #c9a227 也有 5.5:1 */
  --g-card-bg: linear-gradient(160deg, #1f1a14 0%, #17130e 100%);   /* 规范 §1 黑金底 */
  --g-grad: linear-gradient(135deg, #f7e7a6 0%, #e8c86a 35%, #c9a227 100%);  /* 规范 §2 主 CTA */
  --g-shadow: 0 12px 30px rgba(201, 162, 39, .22);
  --g-shadow-strong: 0 14px 36px rgba(201, 162, 39, .45);
}