/* ═══════════════════════════════════════════════════════════════════════════
   设计令牌 —— 深色「精密仪器」系统
   ═══════════════════════════════════════════════════════════════════════════
   真相来源：`docs/02-UI设计.md` §2（本文件逐条落地该节令牌）
   使用规则：见 `frontend/design.md`。页面与组件**禁止**散写颜色、圆角、字号。

   命名分三组：
   ① 基础令牌 —— 与 docs/02 §2 逐条一致
   ② 派生令牌 —— 由定稿 `prototype/v4.html` 中散写的字色提升而来（见下方注释），
      命名以 `-ink` 结尾，表示「用于承载文字」的安全色
   ③ 节奏令牌 —— 间距刻度

   对比度（对各自实际底色，WCAG 2.1 相对亮度）：
     正文 --ink / --ink-2            → ≥ 12:1
     标签 --ink-3                    → 5.67:1（on --bg）/ 5.40:1（on --surf）
     徽章文字 --ev0-ink / --ev1-ink / --ev2-ink / --ok-ink / --warn-ink / --bad-ink → ≥ 4.7:1
     装饰 --ink-4                    → 2.32:1（on --bg）/ 2.20:1（on --surf）
                                       —— **仅纯装饰，禁止承载任何信息**
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 声明本站是深色站点：否则浅色系统偏好下，UA 渲染的表单控件（滚动条、输入框自动填充、
     下拉列表）会变成浅色底，在深色页面里刺眼且对比度不可控 */
  color-scheme: dark;

  /* ── ① 基础令牌（docs/02 §2）─────────────────────────────────────────── */

  /* 表面 —— 靠亮度差分三层 */
  --bg: #0A0B0D;          /* 页底 */
  --surf: #101216;        /* 卡片 */
  --surf-2: #161A20;      /* hover / 次级块 */
  --surf-3: #1D222A;      /* 选中 */

  /* 线 —— 三条强度，多数场景用 hair */
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --hair: rgba(255, 255, 255, .045);   /* 表格行分隔 */

  /* 文字 —— 四级 */
  --ink: #F4F5F7;
  --ink-2: #A2A8B4;
  --ink-3: #828A9A;   /* 标签 / placeholder，过 AA：5.67:1 on 底 */
  --ink-4: #474D58;   /* 仅纯装饰，不承载信息、不做 placeholder */

  /* 信号色 —— 只做状态，不做装饰 */
  --lime: #C6F24E;   /* 主强调：品牌 / 当前项 / 主按钮 / 关键数字 */
  --ok: #46D39A;     /* L1 已复现 */
  --warn: #EBB84C;   /* 待复现 / 可能失效 */
  --bad: #FF6E5C;    /* 偏差 / 失败 */
  --info: #6FA8FF;   /* L2 跨框架已验证 */

  /* 证据分级专用（docs/02 §4.2）*/
  --ev0: #6B7280;    /* L0 自报 —— 中性灰（**图形用**，见 ② --ev0-ink）*/
  --ev1: #46D39A;    /* L1 复现 —— 绿 */
  --ev2: #6FA8FF;    /* L2 跨框架 —— 蓝 */

  /* 厂商色 —— 只在 RigTag 的 2px 竖线上用 */
  --amd: #ED4B3E;
  --nv: #76B900;
  --apple: #6B7280;

  /* 圆角 */
  --r-lg: 12px;   /* 卡片 */
  --r-md: 9px;    /* 按钮 / 输入框 */
  --r-sm: 6px;    /* 小控件 */
  /* 徽章 = 999px 胶囊 */

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
          "PingFang SC", "Hiragino Sans GB", sans-serif;

  --gut: 26px;    /* 页面左右安全边 */

  /* ── ② 派生令牌：承载文字的安全色 ────────────────────────────────────── */

  /*
   * 来源：`prototype/v4.html` 中这些值以字面量散落在 .ev / .tag 规则里。
   * 提升为令牌的原因有两条：
   *   1. 「视觉值必须来自令牌」——页面上不允许散写颜色
   *   2. `--ev0` 直接作为文字色只有 3.41:1，**不达 AA**。
   *      `--ev0` 本身保留为 L0 的图形/描边色，文字改用 `--ev0-ink`。
   */
  --ev0-ink: #8A9099;   /* 5.13:1 on L0 徽章底 */
  --ev1-ink: #63DFAF;   /* 9.21:1 on L1 徽章底 */
  --ev2-ink: #8FBDFF;   /* 7.95:1 on L2 徽章底 */

  --ok-ink: #63DFAF;    /* 8.93:1 on 「稳定」胶囊底 */
  --warn-ink: #EDC169;  /* 8.93:1 on 「待复现」胶囊底 */
  --bad-ink: #FF9184;   /* 7.38:1 on 「有争议」胶囊底 */
  --info-ink: #8FBDFF;

  /* 纯色上的主按钮文字（lime 底）*/
  --on-lime: #0A0B0D;

  /*
   * 卡片顶部内高光（docs/02 §2）——「高级暗色卡的标准手法」，是分层的第二条腿
   * （第一条是亮度差）。抽成令牌，避免每个卡片类各写一遍渐变。
   */
  --card-sheen: linear-gradient(90deg, transparent,
                 rgba(255, 255, 255, .14) 25%, rgba(255, 255, 255, .14) 75%, transparent);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -14px rgba(0, 0, 0, .9);
  --card-shadow-rail: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -14px rgba(0, 0, 0, .85);

  /*
   * 中性填充与品牌渐变端点。
   * 纪律 #2「大面积填充一律中性（白/灰）」——这两个值是**非信号色**的中性面，
   * 与信号色一样必须登记，避免组件里出现来源不明的字面量。
   */
  --fill-neutral: #F2F3F5;
  --fill-neutral-hover: #FFFFFF;
  --lime-hi: #E3FF7A;   /* 品牌标记渐变高光端 */
  --lime-lo: #8FBF2A;   /* 品牌标记渐变暗端 */

  /* ── ③ 节奏令牌 ──────────────────────────────────────────────────────── */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 26px;
  --sp-8: 36px;

  /* 动效 —— 全站只用三处（docs/02 §7）*/
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 150ms;
  --t-rule: 220ms;   /* 搜索细则行展开 */
}

/* ── 页面底光（暗得要有空气感，docs/02 §2）───────────────────────────── */
body {
  background:
    radial-gradient(1000px 460px at 50% -140px, rgba(198, 242, 78, .055), transparent 72%),
    radial-gradient(760px 520px at 104% -60px, rgba(111, 168, 255, .045), transparent 64%),
    var(--bg);
  background-attachment: fixed;
}