@charset "utf-8";
/* ============================================================================
   klk-design-system.css —— 设计规范【变量层】· 阶段 1
   ----------------------------------------------------------------------------
   ★ 本文件【只定义 CSS 自定义属性，不含任何选择器规则】
     ⇒ 引入后页面的渲染结果【逐字节不变】（零视觉变化），可安全上线。
   ★ 阶段 2 起，由覆盖层（klk-mobile-fix.css / klk-desktop-fix.css）引用这些变量，
     按「字号 → 间距 → 颜色」的优先级渐进替换；阶段 3 收敛近似值
     （主蓝 6 个近似值 → #0A6DB5；实测 #0a7cc1 / #0062a0 全站 0 次，
       实际只需合并 #0375be(11) + #0369a8(2) + #0769b2(1) = 14 处）。
   来源：_排版诊断_20261003\建议的设计规范.md
   ============================================================================ */
:root{
  /* ── 字号阶梯（6 档）──────────────────────────────────────────── */
  --fs-xs:12px;      /* 页脚版权、极次要标注 */
  --fs-sm:13px;      /* 列表页日期、辅助说明 */
  --fs-base:16px;    /* 正文（默认） */
  --fs-lg:18px;      /* 卡片标题、小标题、FAQ 问题 */
  --fs-xl:21px;      /* 页面 H1、区块大标题 */
  --fs-2xl:26px;     /* 仅限首屏 hero 可选强化 */

  /* ── 间距阶梯（8 档 / 8px 网格）───────────────────────────────── */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:24px;  --sp-6:32px;  --sp-7:48px;  --sp-8:64px;

  /* ── 颜色体系（6 色 + 强调红）─────────────────────────────────── */
  --c-blue:#0A6DB5;        /* 主蓝 */
  --c-blue-dark:#1A59B8;   /* 深蓝 */
  --c-text:#1F2A37;        /* 文字主 */
  --c-text-2:#333333;      /* 文字次 */
  --c-text-3:#666666;      /* 文字弱 */
  --c-muted:#8496A5;       /* 弱化 */
  --c-red:#D13B38;         /* 强调红（底部电话钮） */

  /* ── 行高 ─────────────────────────────────────────────────────── */
  --lh-body:1.7;           /* 正文 */
  --lh-heading:1.4;        /* 标题 */

  /* ── 桌面容器与阅读列（与 klk-desktop-fix.css 的 --kdf-* 对应）── */
  --container:1100px;      /* 桌面主容器最大宽（实测 1100 与 1200 对行宽零差别） */
  --reading:720px;         /* 正文阅读列宽（行宽 40 字） */
}

/* ============================================================================
   ★★ 以下为【追加层】（2026-10-06，设计规范落地任务）——纯追加，不改动上面任何一行。
      来源：_排版诊断_20261003\建议的设计规范.md + _UI验收标准_20261006.md
      ★ 规则：本层只定义 CSS 自定义属性，不含任何作用于元素的选择器规则
        ⇒ 引入后渲染结果逐字节不变（零视觉变化）。
      ★ 命名兼容：线上已用 --c-blue / --c-text / --c-muted 等；本层不重命名，
        仅【新增】规范里要求的角色名，二者等价并存，供阶段 2/3 任选引用。
   ============================================================================ */
:root{

  /* ── A. 字体栈（规范 2.6；线上缺失，补齐 macOS/iOS/Android 中文 fallback）──── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
               "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  --font-num: "Impact", Verdana, Arial, sans-serif;

  /* ── B. 桌面端字号阶梯（7 档，≥901px）—— 规范 2.2 / 验收标准 四 ─────────────
     ★★ 最大收益点：14px(852 次) / 15px(838 次) / 13px(422 次) 三档只差 1px 却占 1,812 处
     ★ 现有 18 种字号 → 收敛到 7 档；13/15/17/19/21/23 等奇数档全部取消         */
  --d-fs-xs:   12px;   /* 版权、辅助 */
  --d-fs-sm:   14px;   /* 表格、元信息、日期（原 14px） */
  --d-fs-base: 16px;   /* ★ 正文默认（原 15px 并入这里） */
  --d-fs-md:   18px;   /* 小标题、卡片标题 */
  --d-fs-lg:   22px;   /* 区块标题 H2 */
  --d-fs-xl:   28px;   /* 页面标题 H1 */
  --d-fs-2xl:  34px;   /* 首页 hero（可选） */

  /* ── C. 桌面端间距阶梯（9 档，比移动多一档 96px）—— 规范 2.3 ─────────────── */
  --d-sp-1:  4px;   --d-sp-2:  8px;   --d-sp-3: 12px;
  --d-sp-4: 16px;   --d-sp-5: 24px;   --d-sp-6: 32px;
  --d-sp-7: 48px;   --d-sp-8: 64px;   --d-sp-9: 96px;

  /* ── D. 颜色角色名（规范 2.5 / 验收标准 六）────────────────────────────────
     ★ 与线上 --c-blue / --c-blue-dark / --c-text / --c-text-2 / --c-text-3 /
       --c-muted / --c-red 等价，仅补规范里的角色化命名，二者并存不冲突。      */
  --c-primary:       #0A6DB5;   /* = --c-blue  主品牌蓝 */
  --c-primary-dark:  #1A59B8;   /* = --c-blue-dark 深蓝标题 */
  --c-accent:        #D13B38;   /* = --c-red   电话 / 转化强调 */
  --c-text-1:        #1F2A37;   /* = --c-text  标题 / 主要文字 */
  --c-text-4:        #8496A5;   /* = --c-muted 弱化（日期、占位） */

  /* 补充色（验收标准 六 之外，规范 2.5 定义，线上缺失） */
  --c-primary-light: #E9F2FA;   /* 浅蓝底 */
  --c-brand-green:   #60A411;   /* 绿色点缀 */
  --c-warn:          #C00000;   /* 提醒 / 价格 */

  /* 兼容别名：规范里的备选正文色（线上实测出现 238 次），
     ★ 阶段 3 将并入 --c-text-3；此处登记，避免过渡期引用失效 */
  --c-text-muted:    #3D4B5A;

  /* 背景 / 边框 */
  --c-bg:            #FFFFFF;
  --c-bg-soft:       #F4F6F8;
  --c-bg-tint:       #FAFCFF;
  --c-border:        #DBE4EF;
  --c-border-soft:   #EEF2F6;

  /* ★ 浅蓝底 12 个近似值 → 先归拢为 3 个（阶段 3 启用） */
  --c-blue-bg-1: #E9F2FA;
  --c-blue-bg-2: #DDEEF9;
  --c-blue-bg-3: #CFE6F6;

  /* ★ 次要灰 5 个近似值 → 1 个（阶段 3 启用） */
  --c-gray-2:    #666666;

  /* ── E. 布局与可读性（规范 1.4 / 2.1 / 2.4 / 验收标准 七·九）──────────────
     ★ 线上已有 --container:1100px / --reading:720px（桌面任务的实测结论），
       本层不再定义同名 token，避免覆盖；仅补它没覆盖到的项。                  */
  --container-measure: 760px;   /* 正文列宽建议区间 760–800px */
  --sidebar-w:         320px;   /* 侧栏建议 300–340px */
  --gutter:             24px;   /* 12 列栅格 gutter */
  --page-pad-mobile:    12px;   /* 移动端左右留白统一 12px */
  --lh-tight:           1.35;   /* hero 标题行高 */

  /* ── F. 组件尺寸（规范 1.5 / 验收标准 七）──────────────────────────────── */
  --tap-min:       44px;   /* 最小触控目标 44×44 */
  --btn-h:         52px;   /* 主按钮高度 48–52px */
  --btn-h-sm:      48px;
  --btn-radius:     6px;
  --bottomnav-h:   71px;   /* 底部固定栏（已达标，保持） */
  --bottomnav-tel: 70px;   /* 底部电话钮 73×70px */

  /* ── G. 断点登记（CSS 变量不能用于 @media 条件，此处仅作文档化）──────────
     ★ 目标：把 klk-mobile-fix.css 的 768px 统一到 900px（与 nav.css 一致）；
       ★ 本期未启用（改动属阶段 2，且会与并发任务冲突）。                    */
  --bp-mobile:  900px;
  --bp-desktop: 901px;
}