/* ==========================================================================
   理嘉 · 排版层
   --------------------------------------------------------------------------
   对应：视觉规范 §3（字体方案）· §4（字号层级）· §3.6（中文排版参数）
        信息架构 §6.6（中文排版可读性）· §7.4「区块 × 字族」表

   本文件负责三件事：
   1. 最小 reset + html/body 基线（@layer reset / base）
   2. 论述层（宋体）与功能层（黑体）两套字号类
   3. 中文排版参数（行高、字距、标点、断行、段间距）

   ★ 字族归属的三条判据（信息架构 §7.4，顺序判断、命中即停）
     1. **不是连续可读的 CJK 文本** → 黑体，**不论字号**。
        覆盖：导航项、按钮、标签、眉标、图注、元数据、页脚全部、数字、
        表单元件，以及邮箱 / 电话 / 地址这类「可复制的数据」。
     2. **是连续可读的 CJK 文本，且字号 ≥ 19px** → 宋体。
     3. **是连续可读的 CJK 文本，字号 < 19px** → 黑体
        （卡片描述、说明文字、图片注释）。
     判据 1 优先于字号：邮箱地址即使放大到 24px 也仍是黑体，因为它是数据不是论述。
     判据落地方式：页面里给节点套 .zh-body / .zh-h2 …（宋体）或
     .zh-body-sm / .zh-eyebrow …（黑体），**不要自己写 font-family**。

   ★ 三条判据**全端一致，不存在任何按断点分叉的字族逻辑**（信息架构 §7.4-3）。
     中文正文在移动端同样是 19px：
     - 旧规则「移动端 zh-body 降到 17px + DPR 例外」**已于 IA v1.4 撤回、DECISIONS F7 锁定作废**。
       撤回理由不是"17px 会断裂"（实测 17px 同样不断裂），而是
       ① 17px 相对 19px 没有质变，收益为零；
       ② 一条需要三句防御性说明、只在特定 DPR 下成立的例外，
          在多人协作 + copilot 实现的项目里守不住，一定会被援引到卡片描述与元数据上。
     - **不要给 zh-body 加任何移动端字号覆盖。** 需要每行少两个字时，改栏宽或改文案。
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ══════════════════════════════════════════════════════════════════════════
   reset（最小集，只清浏览器默认差异，不做「观点式重置」）
   ══════════════════════════════════════════════════════════════════════════ */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    min-height: 100%;
  }

  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
  }

  ul, ol {
    padding: 0;
    list-style: none;
  }

  img, svg, video, canvas {
    display: block;
    max-width: 100%;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  /* 全局 font-synthesis: none｜视觉规范 §3.5「有效」第 7 条。
     防止浏览器对缺失字重做伪粗体合成——中文伪粗会直接糊成一团。
     这条也是「Clay 关键词不做 font-weight: 500 以外的加重」能成立的前提。 */
  html {
    font-synthesis: none;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   base：html / body 基线 + 中文排版参数 + 响应式字号阶梯
   ══════════════════════════════════════════════════════════════════════════ */
@layer base {
  html {
    /* 中文正文基准在 .zh-body，这里只是兜底，保证任何未被分类的节点不漏字体 */
    font-family: var(--lj-font-sans);
    font-size: 100%;
    /* 锚点跳转不被吸顶导航盖住｜信息架构 §1.3 */
    scroll-padding-top: var(--lj-scroll-margin);
  }

  body {
    background-color: var(--lj-canvas);
    color: var(--lj-ink);
    font-family: var(--lj-font-sans);
    /* 功能层正文基线：17px 黑体（中文）。论述层节点各自覆写。 */
    font-size: var(--lj-text-zh-nav);
    line-height: 1.40;
    letter-spacing: 0.02em;
    /* 中文标点避头尾｜信息架构 §6.6。不用 JS 或手打换行处理。 */
    line-break: strict;
    /* 连续全角标点挤压（Chrome 123+ 渐进增强）。
       **禁止在 HTML 里手打全角空格或零宽字符做挤压**，会让内容不可搜索。 */
    text-spacing-trim: space-all;
    /* 中西文自动间距（渐进增强）。iOS Safari 尚未支持，文案侧仍需手工留半角空格。 */
    text-autospace: normal;
    /* 禁止 text-align: justify —— 中文 justify 会在段末前产生大空隙 */
    text-align: start;
  }

  ::selection {
    /* 视觉规范 §2.7 第 17 项：tint 底 + ink 字 = 14.15:1 */
    background-color: var(--lj-accent-tint);
    color: var(--lj-ink);
  }

  /* 标题的通用克制规则｜视觉规范 §1 第 18 条：
     不加句号、不以冒号结尾、单行 ≤ 20 字。前两条由文案保证，这里只做断行优化。 */
  h1, h2, h3 {
    font-weight: inherit;
    text-wrap: balance;
  }

  /* ── 响应式字号阶梯｜视觉规范 §4.3 ──────────────────────────────────
     断点三档：≥1024 / 768–1023 / <768。**不新增断点。**
     写法：在 :root 上覆写变量，而不是给每个字号类写媒体查询。
     这样字号阶梯只在这里定义一次，类名永远稳定。
     顺序：先 tablet（max-width:1023），再 mobile（max-width:767）覆盖。 */
  @media (max-width: 1023px) {
    :root {
      --lj-text-zh-display-dark: 72px;
      --lj-text-zh-display-hero: 52px;
      --lj-text-zh-display-section: 46px;
      --lj-text-zh-display-md: 32px;
      --lj-text-zh-h1: 28px;
      --lj-text-zh-h2: 23px;
      --lj-text-zh-h3: 20px;
      --lj-text-zh-nav: 17px;
      --lj-text-zh-body-sm: 15px;

      --lj-text-display-dark: 84px;
      --lj-text-display-hero: 64px;
      --lj-text-display-section: 64px;
      --lj-text-display-md: 40px;
      --lj-text-h1: 36px;
      --lj-text-h2: 28px;
      --lj-text-h3: 22px;
      --lj-text-body-serif: 19px;
      --lj-text-body: 18px;
      --lj-text-body-sm: 15px;
    }
  }

  @media (max-width: 767px) {
    :root {
      --lj-text-zh-display-dark: 48px;
      --lj-text-zh-display-hero: 36px;
      --lj-text-zh-display-section: 30px;
      --lj-text-zh-display-md: 26px;
      --lj-text-zh-h1: 24px;
      --lj-text-zh-h2: 21px;
      --lj-text-zh-h3: 19px;
      --lj-text-zh-nav: 16px;
      --lj-text-zh-body-sm: 15px;
      /* ★ 注意：这里**没有** --lj-text-zh-body 的覆盖。
         中文正文全端锁 19px（DECISIONS F7 / 视觉规范 §4.3 / IA §6.6）。
         旧版那行 `--lj-text-zh-body: 17px` 已删除，不要加回来。 */

      --lj-text-display-dark: 56px;
      --lj-text-display-hero: 44px;
      --lj-text-display-section: 40px;
      --lj-text-display-md: 32px;
      --lj-text-h1: 28px;
      --lj-text-h2: 24px;
      --lj-text-h3: 20px;
      --lj-text-body-serif: 18px;
      --lj-text-body: 17px;
      --lj-text-body-sm: 14px;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     论述层（Serif / 宋体）字号类 ｜ 视觉规范 §4.2 标 S 的档位
     门槛：≥ 19px 的连续 CJK 文本。字重规则：21–38px 用 500，≥48px 回到 400。
     ════════════════════════════════════════════════════════════════════ */

  .zh-display-dark,
  .zh-display-hero,
  .zh-display-section,
  .zh-display {
    font-family: var(--lj-font-serif);
    font-weight: 400;   /* ≥48px 加大字号不加粗：汉字字面饱满，加粗会把「论述」变成「宣告」 */
    letter-spacing: 0;  /* 中文大标题字距一律 0 */
    text-wrap: balance; /* 避免孤字｜视觉规范 §8 T1 */
  }

  /* S · 96px · 深色区块巨型排版。仅用于 §7 State 0 的 dark 区块（类型 4 / 10）。
     本交付的 B3 / 页尾 CTA 按信息架构 §3 采用 zh-display-md，未启用本档，
     原因与冲突见 README「待裁决 D-3」。 */
  .zh-display-dark {
    font-size: var(--lj-text-zh-display-dark);
    line-height: 1.15;
  }

  /* S · 72px · 首屏主标题 */
  .zh-display-hero {
    font-size: var(--lj-text-zh-display-hero);
    line-height: 1.15;
  }

  /* S · 64px · 章节大标题 */
  .zh-display-section {
    font-size: var(--lj-text-zh-display-section);
    line-height: 1.20;
  }

  /* S · 48px · 常规展示标题 */
  .zh-display {
    font-size: var(--lj-text-zh-display);
    line-height: 1.22;
  }

  /* S · 38px / 500 · 区块主标题。页头、论点区标题、dark 区块那句话都用它。 */
  .zh-display-md {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-zh-display-md);
    font-weight: 500;
    line-height: 1.30;
    letter-spacing: 0.005em;
    text-wrap: balance;
  }

  /* S · 32px / 500 · 内页标题（类型 1 降级变体） */
  .zh-h1 {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-zh-h1);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.005em;
    text-wrap: balance;
  }

  /* S · 26px / 500 · 区块标题、引述 */
  .zh-h2 {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-zh-h2);
    font-weight: 500;
    line-height: 1.40;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  /* S · 21px / 500 · 模块小标题、卡片大标题。
     ★ 这是全站最容易判错的一档：21px ≥ 19px，属论述层宋体。
       若把卡片标题降到 17px，必须**同时**切黑体——字族跟着字号走。 */
  .zh-h3 {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-zh-h3);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  /* S · 21px / 400 · 引言、大号首段（卡片区引言） */
  .zh-lead {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-zh-lead);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.01em;
  }

  /* S · 19px / 400 · **中文正文基准**。行高 1.90 是这套 19px 宋体的唯一可用值，
     同时是 Windows 低分屏清晰度的主要补偿项（§3.5「有效」第 1 条）。
     不要按「看起来松」往下调。 */
  .zh-body {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-zh-body);
    font-weight: 400;
    line-height: 1.90;
    letter-spacing: 0.01em;
  }

  /* S · 22px / 400 · 引述块（靠字号与留白区分，不用斜体）。
     本交付未使用：信息架构 §3 B6 指定引述用 zh-h2 26px，见 README「待裁决 D-4」。 */
  .zh-quote {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-zh-quote);
    font-weight: 400;
    line-height: 1.80;
    letter-spacing: 0.01em;
  }

  /* ════════════════════════════════════════════════════════════════════
     功能层（Sans / 黑体）字号类 ｜ 视觉规范 §4.2 标 F 的档位
     门槛：非连续文本（判据 1）或 < 19px 的连续 CJK 文本（判据 3）。
     ════════════════════════════════════════════════════════════════════ */

  /* F · 17px / 400 · 导航项 */
  .zh-nav {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-zh-nav);
    font-weight: 400;
    line-height: 1.40;
    letter-spacing: 0.02em;
  }

  /* F · 17px / 500 · 按钮文字。字距 0.03em 让两字 / 四字按钮不至于挤在一起。 */
  .zh-button {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-zh-button);
    font-weight: 500;
    line-height: 1.40;
    letter-spacing: 0.03em;
  }

  /* F · 15px / 400 · 卡片描述、说明、表单辅助文字 */
  .zh-body-sm {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-zh-body-sm);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.01em;
  }

  /* F · 13px / 500 · 表单标签。13px 是中文最小字号（§3.1 唯一例外：13px 宋体结构会崩，
     所以 zh-label / zh-caption 即使语义偏论述也一律黑体）。 */
  .zh-label {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-zh-label);
    font-weight: 500;
    line-height: 1.40;
    letter-spacing: 0.02em;
  }

  /* F · 13px / 400 · 图注、脚注、版权 */
  .zh-caption {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-zh-caption);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.01em;
  }

  /* F · 13px / 500 / 字距 0.12em · 眉标。
     中文无大小写，uppercase 无意义，**放大的字距是中文唯一可用的眉标信号**。 */
  .zh-eyebrow {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-zh-eyebrow);
    font-weight: 500;
    line-height: 1.40;
    letter-spacing: 0.12em;
  }

  /* ════════════════════════════════════════════════════════════════════
     西文档位 ｜ 视觉规范 §4.1
     与中文档位同层配对：serif-* 配宋体栈，sans-* 配黑体栈。
     中文节点不得直接用这些类（12px / 18px 落进禁区）。
     ════════════════════════════════════════════════════════════════════ */

  .serif-display-section {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-display-section);
    font-weight: 400;
    line-height: 1.10;
    letter-spacing: -0.006em;
  }

  .serif-h1 {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-h1);
    font-weight: 400;
    line-height: 1.20;
    letter-spacing: -0.004em;
  }

  .serif-h2 {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-h2);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.003em;
  }

  .serif-body {
    font-family: var(--lj-font-serif);
    font-size: var(--lj-text-body-serif);
    font-weight: 400;
    line-height: 1.60;
  }

  .sans-body {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-body);
    font-weight: 400;
    line-height: 1.55;
  }

  .sans-body-sm {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-body-sm);
    font-weight: 400;
    line-height: 1.50;
    letter-spacing: -0.04px;
  }

  .sans-label {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-label);
    font-weight: 500;
    line-height: 1.40;
    letter-spacing: -0.02em;
  }

  /* 统计大数字：tabular-nums 保证多列数字等宽对齐。
     正文里的数字**不要**加 tnum，否则汉字间距会被拉乱（信息架构 §6.6）。 */
  .number-stat {
    font-family: var(--lj-font-sans);
    font-size: var(--lj-text-number-stat);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  /* ════════════════════════════════════════════════════════════════════
     行内强调 ｜ 视觉规范 §4.2 + DECISIONS C11
     中文用 font-weight: 500 + --lj-ink，**不用斜体**（中文斜体是机械倾斜，观感廉价）。
     西文可用真斜体。`<em>` 必须把 font-style 归零——否则浏览器默认给中文衬线
     做机械倾斜，那是这套系统里最廉价的一种观感。
     ════════════════════════════════════════════════════════════════════ */
  .em-ink {
    font-weight: 500;
    color: var(--lj-ink);
  }

  em, i {
    font-style: normal;
    font-weight: 500;
  }

  /* 西文确实需要真斜体时，显式加这个类（中文节点不要用） */
  .em-italic {
    font-style: italic;
    font-weight: inherit;
  }

  /* ════════════════════════════════════════════════════════════════════
     Clay 文字的唯一合法写法 ｜ 视觉规范 §2.7 第 8 / 14 项 + §7「Clay 整站密度」
     ------------------------------------------------------------------
     机制：`.accent-word` 写在深色区块作用域（.on-dark）内才允许出现 Clay 色。
     这样写是刻意的——它让「浅底上误用 Clay 文字」在结构上不可能发生：
     任何不在深色区块里的 .accent-word 都会被兜底规则改回墨色。

     ★ 验收口径（DECISIONS V9 / V10、IA §6.3）：
       全站 `#d97757` 作为**文字色**出现次数必须**恰好 1 次**，
       位置固定在页尾 CTA 标题里的 1 个词（≤4 字），底色 `#000000`（6.73:1）。
       该词与整行**同字号同字重**（zh-display-md = 38 / 26px，500），
       **只换颜色，不做任何额外字重提升**——500 已是标题基准字重，不是为强调加的。
     ════════════════════════════════════════════════════════════════════ */
  .accent-word {
    /* 兜底：浅色底上 Clay 文字 = 2.96:1，连大字 3:1 都不达，一律降为墨色 */
    color: var(--lj-ink);
  }

  .on-dark .accent-word {
    /* 深色底上唯一合法的 Clay 文本用法：on #000000 6.73:1 / on #141413 5.91:1 */
    color: var(--lj-accent);
  }

  /* ════════════════════════════════════════════════════════════════════
     段落节奏 ｜ 视觉规范 §5.1「段落之间 24 / 24 / 20」
     用相邻兄弟选择器，而不是给容器加 space-y——段落节奏是排版决策，
     交给工具类会产生「段落间距随容器变化」的不可控结果。
     ════════════════════════════════════════════════════════════════════ */
  .prose > p + p,
  .prose > p + ul,
  .prose > ul + p {
    margin-block-start: var(--lj-gap-paragraph);
  }

  /* 论述层正文的颜色用最深档 #141413（不用 #5e5d59）：
     对比度从 6.3:1 提到 17.5:1，主观上显著减弱低分屏「发虚」感。
     次级文字才用 --lj-text-secondary。 */
  .prose,
  .prose p {
    color: var(--lj-ink);
  }

  @media (max-width: 767px) {
    .prose > p + p,
    .prose > p + ul,
    .prose > ul + p {
      margin-block-start: 20px;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     动效降级 ｜ 信息架构 §6.5
     fade-up 直接置为最终态，**不能用 visibility: hidden 等 JS 触发**，
     否则禁用 JS 或 reduce 时内容永久不可见。
     hover 的颜色变化保留（颜色不是运动），hover 的位移取消。
     ════════════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}