/* ============================================================================
   agentcss / 01-tokens / typography.css
   排版辅助类（跨组件共享）

   依赖：无（只用 tokens.css 里的变量）
   版本：A ✅ / B ✅ / C ✅

   🔴 建立。此前 8 个 demo 各自在内联 <style> 里**重复定义**
      .small / .note / .lead 等，全库没有一个共同出处 ——
      改一处就要改八处，漏一处就样式不一致（这次就被 refs.py 当场抓到）。
   ========================================================================= */

/* ============================================================================
   页面级默认值
   ============================================================================
   🔴 补（暗色模式首次生效后暴露的真问题）：
      此前 tokens.css 与 typography.css 都**没有给 body 设 color / background**
      ⇒ 暗色下所有页面继承**浏览器默认黑**（rgb(0,0,0)）
      ⇒ 实测 19 个 demo 页面的 h1 是「黑字 on #14171A」，对比度 1.17:1（几乎看不见）
   ⇒ 页面底色与文字色的默认值属于**排版层**职责，故放在 typography.css。
   ⚠️ 加在文件**头部**：此前我加在末尾，结果末尾的说明注释没闭合，
      规则被当成注释吞掉（CSSOM 里查不到）—— 又一次同类问题。
   ============================================================================ */
body {
  color: var(--text-primary);
  background: var(--paper);
}

/* 辅助文字：说明、注释、元信息 */
.small {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* 更弱一档：几乎不抢眼，用在页脚、版权行 */
.small--faint { color: var(--text-tertiary); }

/* 导语：紧跟标题的一段话，比正文略大、略淡 */
.lead {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 说明块：补充/解释，不是警告，更不是错误。要"注意"用 .note--warn。
   🔴 0.4.2 底色 --warning-bg → --surface-sunken：实测 21 页用 .note，
     20 页当灰底说明块手写同一个值，只有 1 页用 warning ⇒ 取众数。 */
.note {
  /* 🔴 去掉 `border-left: 3px solid`。
     左边那条侧边阴影是多余的：
       ① 它是**纯装饰**，不传达信息（颜色已经表达了）
       ② 3px 竖条在浅底上形成一条硬边，视觉噪声比信息量大
       ③ 满库 13 处同款，一眼就能看出"模板感" —— 这正是 AI 味的来源。
     真实产品（GitHub callout / Vercel / Stripe）都是**纯底色 + 圆角**，没有竖条。 */
  background: var(--surface-sunken);
  color: var(--text-secondary);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
  /* 众数写法是 `margin: 0 0 var(--sp-4)`（9 页）。
     上下都要留出呼吸，但它是**紧跟上下文的补充**，不是独立章节，
     所以下边距给 --sp-4、上边距为 0（由上一个块的 margin 负责）。 */
  margin: 0 0 var(--sp-4);
}

/* 注意块：同样一块，但要"提醒"而不是"补充" —— 唯一差别是底色。 */
.note--warn {
  background: var(--warning-bg);
}

/* 分隔线：比 border 轻，用于段落之间 */
.rule {
  border: 0;
  border-top: 1px solid var(--border-decor);
  margin: var(--sp-6) 0;
}

/* 代码片段（行内）—— 与 content.css 的 .prose > code 呼应 */
code {
  font-family: var(--mono);
}

/* ============================================================================
   反模式
   =========================================================================
   1. 在每个 demo 的内联 <style> 里重复定义 .small / .note
      八处重复，改一处漏一处。不如引这一个文件。
   2. 用 .note 装错误消息
      它是"注意"不是"错误"，颜色与语义都不对。错误用 .field__error。
   3. 在这里加组件专有样式
      这是 tokens 层，只放跨组件通用的东西。
   ========================================================================= */

/* ============================================================================
   数字排印：`.num`
   ============================================================================
   🔴 建立。之前的情况是「每个组件自己写一遍」：
   `list.css` 有 `tabular-nums`、longform 用自造的 `.num`、
   而 states 的数据行（26,831 条记录）根本没处理。
   ⇒ 同一个库里三套做法，且**只有一处**是真规则。

   为什么必须等宽（实测）：
   Windows 的 Segoe UI 里 `1` `8` `0` 本来就等宽（都 10.33px @14px），
   **但逗号只有 4.25px** ⇒ `12,345,678` 仍然会歪。
   也就是说：**不能依赖系统字体的默认**，
   不同系统（macOS SF / Linux DejaVu）连数字本身都不一定等宽。
   必须显式声明。

   为什么不做成全局 `* { font-variant-numeric: tabular-nums }`：
   比例数字在正文里更好看（"第 3 步"不该被拉宽）。
   ⇒ **只在"需要成列比较"的地方用**，这是排版判断，不是全局开关。

   用法：
       <td class="num">26,831</td>        表格、金额、指标
       <span class="num">+2.41%</span>    涨跌幅
   ------------------------------------------------------------------------ */
.num {
  font-variant-numeric: tabular-nums;
  /* 🔴 负数与小数点也要等宽，否则 "-1.2%" 和 "12.3%" 仍然对不齐 */
  font-feature-settings: "tnum" 1;
}

/* 指标块的数字：更大的、更"技术"的一档。
   金融看板的标志性元素 —— 数字本身成为视觉主体，而不是正文的一部分。 */
.num-lg {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  letter-spacing: -0.01em;   /* 大字号收紧一点，数字块更整齐 */
}

/* ==========================================================================
   🔴 补：`.lede`（导语/引言段）

   ⭐ 为什么补它（refs 门禁抓到）：
     全库有 **6 个 demo** 都在用 `class="lede"`（导语段），
     但**从来没有定义过** ⇒ 属于「静默失效」——
     浏览器不报错、页面照常显示，只是这一段**根本没生效**。
     这类问题只能靠门禁抓，肉眼完全看不出来。

   用途：标题下面那段摘要性文字。要比正文大一号、行距更松，
        但**不能大到抢标题的视觉重量**（标题才是层级入口）。

   ⚠️ 全部走令牌，不写死值 —— 换主题/换字号版本时自动跟随。
   ========================================================================== */
.lede {
  /* 🔴 0.4.2：--fs-lg → --fs-md。前者与 h2 同档，导语抢了小节标题的层级。 */
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-secondary);
  /* 众数是 --sp-6（6 页）；--measure-lede 取代各页手写的 60ch / 62ch。 */
  margin: 0 0 var(--sp-6);
  max-width: var(--measure-lede);
}