/**
 * 设计令牌的唯一来源。
 *
 * 后台（admin.css）与提交页（style.css）共用这一份。此前两边各写了一份
 * 完全相同的 :root，改主题色要改两处、漏一处就分叉 —— 现在只有这里能动颜色。
 *
 * 页面引用顺序：<link rel="stylesheet" href="/tokens.css"> 必须排在各页自己的
 * 样式之前，否则 var() 解析不到。
 */
:root {
  /* ---------- 底色与文字 ---------- */
  --bg: #f4f6fa;
  --card: #ffffff;
  --text: #1a2233;
  --text-soft: #5b667a;
  --text-mute: #8c96a8;

  /* ---------- 线条 ---------- */
  --line: #e2e7f0;
  --line-soft: #eef1f7;

  /* ---------- 品牌色 ---------- */
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-soft: #eff4ff;

  /* ---------- 语义色 ---------- */
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --ok: #059669;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;

  /* ---------- 圆角与阴影 ---------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);

  /* ---------- 间距刻度 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ---------- 字号刻度 ---------- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;

  /*
   * ---------- 六个状态的状态色 ----------
   *
   * 色相按流程推进排布：橙（待响应）→ 蓝（已派发）→
   * 青（待终审）→ 绿（成功终态）/ 灰（非我司责任的终态）。
   * 「处理完成」特意用青而不是绿，避免和真正的终态「已经解决」混淆。
   *
   * 「信息不足」（2026-10-09 加的反向流程）用紫：它和「等待处理」是同一段流程的
   * 两个面（等工程师干活 / 等运营补客户信息），所以紧挨着蓝的等待排。
   * 紫表达「需要你回来做点什么」，既不像红那样像失败，也不至于和蓝糊成一团。
   *
   * 徽章一律同时带文字，颜色只是辅助 —— 色弱用户也必须能读。
   */
  --st-unassigned-bg: #fff7ed;
  --st-unassigned-fg: #c2410c;
  --st-assigned-bg: #eff4ff;
  --st-assigned-fg: #1d4ed8;
  --st-need_info-bg: #f5f3ff;
  --st-need_info-fg: #6d28d9;
  --st-finished-bg: #ecfeff;
  --st-finished-fg: #0e7490;
  --st-resolved-bg: #ecfdf5;
  --st-resolved-fg: #047857;
  --st-customer_cause-bg: #f1f5f9;
  --st-customer_cause-fg: #475569;
}