/*
 * VBUY AI Workbench · 设计令牌（design tokens，v10.86）
 *
 * 这个文件只做一件事：把「字号、行高、字重、间距、控件高度」定成一套档位。
 * 它本身不改变任何现有页面 —— 里面只有变量定义，没有任何规则引用它们。
 * 真正开始用，是各页面挂上 .ui-scale（见 ui-scale.css）。
 *
 * 为什么要有这个文件（背景，别删）：
 *   改造前全站 1168 处 font-size 全是硬编码，散成 38 个不同取值
 *   （7px / 7.5px / 8.5px / 10.5px / 11.5px / 17px / 19px …），
 *   其中 795 处 ≤11.9px —— 表头 10px、表格正文 11px、辅助说明 9px，
 *   这就是"字小小的"的直接来源。档位不统一时，同一个层级的信息在
 *   不同页面大小不一，眼睛接收到的就是"没做完"的感觉。
 *
 * 三条使用规则（改页面时按这个来）：
 *   1. 字号的取值只允许从下面 7 档里挑，并且写成 var(--fs-*)；
 *      新写的样式里出现 "font-size: 11px" 这种数字，一律算写错。
 *   2. 间距用 --sp-*。它在 4/8/12/16/24 上，不要在 9px、13px、15px 上落脚。
 *   3. 一页之内只允许一套档位（整页挂 .ui-scale），不允许一页里新旧混着。
 *      弊端来自混用，不来自分批。
 *
 * 档位怎么选（拿不准时的默认答案）：
 *   表格 / 列表正文          --fs-200（13px）
 *   表头、字段名、角标、说明   --fs-100（12px，这是下限，不许再小）
 *   段落正文、输入框、按钮     --fs-300（14px）
 *   卡片标题                 --fs-400（16px）
 *   区块标题                 --fs-500（20px）
 *   页面主标题               --fs-600（24px）
 *   统计大数字               --fs-700（32px）
 */

:root {
  /* ---- 字号档位：全站只有这 7 档 ---- */
  --fs-100: 12px; /* 下限：表头、标签、角标、辅助说明 */
  --fs-200: 13px; /* 密集数据：表格正文、列表次要字段 */
  --fs-300: 14px; /* 正文默认：段落、输入框、按钮 */
  --fs-400: 16px; /* 小标题、卡片标题 */
  --fs-500: 20px; /* 区块标题 */
  --fs-600: 24px; /* 页面主标题 */
  --fs-700: 32px; /* 统计大数字、空状态主数字 */

  /* ---- 行高 ---- */
  --lh-tight: 1.35; /* 标题、数字 */
  --lh-body: 1.55; /* 正文、表格 */
  --lh-loose: 1.75; /* 长段落（邮件正文这种要读的） */

  /* ---- 字重 ---- */
  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 750;
  --fw-black: 800;

  /* ---- 间距（4 的倍数，不要再出现 9px / 13px / 15px 这种值）---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- 控件高度 ---- */
  --ctl-sm: 30px; /* 页脚小按钮、图标按钮 */
  --ctl-md: 34px; /* 常规按钮 */
  --ctl-lg: 40px; /* 表单输入、主按钮 */

  /* ---- 文字三档（颜色已经存在，这里只给语义名，方便以后统一）---- */
  --text-1: var(--ink); /* 标题、关键值 */
  --text-2: var(--ink-2); /* 正文 */
  --text-3: var(--muted); /* 次要说明、单位、时间 */

  /* ------------------------------------------------------------------ *
   * 表单填写状态（v10.87，规范见 field-state.css）
   *
   * 解决的是"一屏 30 多个格子，哪些填过、哪些还空着，扫一眼看不出来"。
   * 用法：给表单/面板挂 class="field-states"，再给每个输入框挂
   * `.is-filled`（有值）/ `.is-ai`（值是 AI 填的、人还没动过）。
   * 打标记这件事不用手写，见 public/field-state.js。
   * ------------------------------------------------------------------ */
  --field-label-color: var(--muted); /* 字段名：不浅于 muted —— 再浅就到不了对比度 4.5:1 */
  --field-value-color: #0b1220; /* 已输入的值：比正文更深一档 */
  --field-value-weight: 650; /* …再配一点字重，光靠颜色区分不够 */
  --field-placeholder-color: #98a5b3; /* 占位提示：最浅，别再浅 */

  --field-filled-bg: #f4f8ff; /* 已填：浅蓝底 */
  --field-filled-line: #cfdff7;
  --field-filled-bar: var(--brand);

  --field-ai-bg: #fff8ec; /* AI 填的、还没被人核对过：琥珀底 */
  --field-ai-line: #f0dcb4;
  --field-ai-bar: var(--amber);
}