/* =====================================================================
   theme-tokens.css —— 和安筑设计令牌（Design Tokens）单一来源
   V2.2.0 批次1：把散落在 styles / theme-v3 / v4 / v5 四套 CSS 里的
   颜色、圆角、间距、阴影、字号、状态色收敛为一套变量。
   用法：本文件必须最先引入（在 styles.css 之前）；旧样式表保留硬编码值
   继续生效（渐进替换，不推倒重来），新增样式一律引用本文件变量。
   目标：杜绝「改了背景忘了改文字色」这类白字白底问题再次发生。

   ★★ 团队约定（2026-09-30 M8）：「新代码禁止内联 style」★★
   为什么：本项目的 CSS 有 6 层叠加（theme-tokens → styles → theme-v3 → theme-v4 → theme-v5 → ai-page），
   内联样式会绕过整套体系，直接导致两类顽固问题 ——
     ① 改了样式表却不生效（被内联压住，排查时最容易走错方向）；
     ② 换主题/调整令牌时必定漏掉这些地方（本项目有过"白字白底"事故前科）。
   怎么做：新写代码一律用**类名**（需要新的就用语义类，如 `.hz-empty`），颜色/圆角/间距取本文件令牌。
   存量：约 500 处内联样式按文件分批迁移，不追求一次性清零，**先断增长**。
   ===================================================================== */
:root {
  /* ---------- 品牌色 ---------- */
  --hz-brand: #4c7dff;
  --hz-brand-2: #7a5cff;
  --hz-brand-3: #ec4899;
  --hz-brand-grad: linear-gradient(135deg, #4c7dff, #7a5cff, #ec4899);
  --hz-brand-soft: #eaf0fe;
  --hz-brand-ink: #3b5bdb;

  /* ---------- 中性色 ---------- */
  --hz-bg: #f4f5f7;
  --hz-surface: #ffffff;
  --hz-surface-2: #fafbfc;
  --hz-line: #e5e8ef;
  --hz-line-strong: #d5dae4;

  /* ---------- 文字层级（高对比，浅底深字） ---------- */
  --hz-ink-1: #101828;   /* 主标题 */
  --hz-ink-2: #344054;   /* 正文 */
  --hz-ink-3: #667085;   /* 次要信息 */
  --hz-ink-4: #6b7686;   /* 辅助/占位（2026-09-29 M4：原 #98a2b3 白底对比度约 2.6:1，未达 ≥4.5:1；现约 4.6:1，保留与 ink-3 的层级区分） */
  --hz-ink-on-brand: #ffffff;

  /* ---------- 状态语义色（颜色 + 后接图标/文案三重表达，色弱可读） ---------- */
  --hz-st-danger: #d92d20;      /* 隐患 / 未整改 */
  --hz-st-danger-bg: #feecea;
  --hz-st-warn: #b45309;        /* 整改中 / 临期 */
  --hz-st-warn-bg: #fef4e6;
  --hz-st-ok: #079455;          /* 已闭环 / 正常 */
  --hz-st-ok-bg: #e7f6ef;
  --hz-st-info: #3b5bdb;        /* 信息 / 协同 */
  --hz-st-info-bg: #eaf0fe;
  --hz-st-neutral: #667085;
  --hz-st-neutral-bg: #eef1f6;

  /* ---------- 圆角 ---------- */
  --hz-r-sm: 8px;
  --hz-r-md: 12px;
  --hz-r-lg: 16px;
  --hz-r-pill: 999px;

  /* ---------- 间距（8pt 栅格） ---------- */
  --hz-sp-1: 4px;
  --hz-sp-2: 8px;
  --hz-sp-3: 12px;
  --hz-sp-4: 16px;
  --hz-sp-5: 24px;

  /* ---------- 阴影层级 ---------- */
  --hz-sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --hz-sh-2: 0 1px 3px rgba(16, 24, 40, .06);
  --hz-sh-3: 0 4px 8px rgba(16, 24, 40, .06), 0 12px 24px -12px rgba(16, 24, 40, .18);
  --hz-sh-4: 0 8px 28px -10px rgba(16, 24, 40, .22);

  /* ---------- 字号（卡片三层级） ---------- */
  --hz-fs-title: 13.5px;   /* 卡片主标题 */
  --hz-fs-body: 12.5px;    /* 卡片正文 */
  --hz-fs-meta: 11px;      /* 次要信息 / 状态 */
  --hz-fs-sec: 15px;       /* 区块标题 */

  /* ---------- 动效（统一节奏 200~300ms） ---------- */
  --hz-ease: cubic-bezier(.22, 1, .36, 1);
  --hz-dur-fast: .18s;
  --hz-dur: .24s;
  --hz-dur-slow: .3s;

  /* ---------- 触控热区 ---------- */
  --hz-tap: 44px;
}

/* ══ 响应式断点令牌（2026-09-30 M5）════════════════════════════════════════
   现状盘点：全站约 96 处 @media、10+ 种宽度写法（480/560/600/680/768/780/820/920/1080…），
   同一语义在不同文件用了不同数字 ⇒ 改一处要记得改多处、极易漏。
   ⇒ 定三档主令牌（**贴合现有主力分界，不改变任何现有布局**）：
       · 手机            ≤ 780px   （现有最主力：手机端布局）
       · 大屏手机/竖屏平板  781 ~ 820px
       · 桌面            ≥ 821px   （与既有 PC 分界一致）
   扩展档（仅在确有必要时用，且需写明理由）：
       · 宽屏桌面        ≥ 920px / ≥ 1080px（多栏布局加宽）
       · 超窄屏          ≤ 480px（老小屏兜底）
   ★ 用法约束（M5）：**新写的 @media 一律用上面三档**，不要再引入新数字。
   ★ 存量约 96 处**不做全量替换** —— 它们多是不同时期为不同组件设的，
     统一会真的改变布局（有事故风险）；只在新改动的文件里顺手归并。
   ★ 与 F4 的分工（双线并行协议）：本文件只动变量/颜色/断点行，
     **不碰任何 outline / :focus-visible / focus 相关行**（那些归 F4 线）。
   ★ 注意：CSS 变量**不能**用在 @media 条件里（媒体查询不支持 var()），
     所以下面这组是**语义文档 + 供 JS 读取**（如 matchMedia 判断），CSS 里请直接写数字。 */
:root {
  --hz-bp-phone: 780px;
  --hz-bp-phone-lg: 820px;
  --hz-bp-desktop: 821px;
  --hz-bp-wide: 1080px;
  --hz-bp-narrow: 480px;
}

/* ── 2026-09-29 M10：动效无障碍护栏（此前全库仅 theme-v4.css 一处响应系统减弱动效） ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
