/* 设计令牌 v2（§10.12）——颜色语义固定：绿=已确认正常、黄=stale/pending、红=故障/撤销失败。
   每个状态都另有文字说明，颜色只作辅助（§10.8）。

   品牌色三档使用规则（对比度为实测值，见 §10.12）：
     --brand        #8B5CF6  仅装饰（选中底块、下划线、图形）；**永不承载 14px 以下文字**
     --brand-strong #7C3AED  主按钮底（配白字 5.70:1 → AA）、聚焦环
     --brand-text   #6D28D9  紫色文字（白底 7.10:1 → AAA）
   表单控件边界单独用 --border-control（对白底 4.83:1，满足 WCAG 1.4.11 的 3:1）；
   卡片与分隔线仍是浅灰（装饰性，不受 1.4.11 约束）。 */
:root {
  color-scheme: light;

  /* 画布与面 */
  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-alt: #f3f4f6;

  /* 描边 */
  --border: #e5e7eb;          /* 卡片 / 分隔（装饰性） */
  --border-strong: #d1d5db;   /* 次级分隔 */
  --border-control: #6b7280;  /* 表单控件边界（非文字对比达标） */

  /* 文字 */
  --text: #111827;
  --text-secondary: #374151;
  --muted: #5f6774;           /* 实测：白卡 5.71:1、次级面 5.19:1（#6b7280 在次级面只有 4.39，不达标） */

  /* 品牌 */
  --brand: #8b5cf6;
  --brand-strong: #7c3aed;
  --brand-strong-hover: #6d28d9;
  --brand-text: #6d28d9;
  --brand-soft: #f5f3ff;
  --brand-soft-border: #ddd6fe;
  --brand-contrast: #ffffff;

  /* 兼容旧令牌名（页面无需改动） */
  --accent: var(--brand-strong);
  --accent-contrast: #ffffff;

  /* 状态色（语义不变，仅换浅色底） */
  --ok-bg: #ecfdf5;   --ok-border: #a7f3d0;   --ok-text: #047857;
  --warn-bg: #fffbeb; --warn-border: #fde68a; --warn-text: #92400e;
  --bad-bg: #fef2f2;  --bad-border: #fecaca;  --bad-text: #b91c1c;
  --info-bg: #eff6ff; --info-border: #bfdbfe; --info-text: #1d4ed8;

  /* 字号阶梯（§10.17）：组件字号一律取这里的变量，不要在规则里写死像素。
     依据：实测管理端 8 个页面 429 处文本，其中 12px 210 处、13px 137 处——内容主体
     （表格、标签、徽章）挤在最小的两档，观感偏小。这次统提一档：
     旧 11→12 / 旧 12→13 / 旧 13→14 / 旧 14→15 / 旧 16→18 / 旧 20→22 / 旧 24→28。 */
  --fs-2xs: 13px;   /* 旧 11：导航分组标题、版本徽章 */
  --fs-xs: 14px;    /* 旧 12：徽章、辅助说明、表头、.small */
  --fs-sm: 15px;    /* 旧 13：表格内容、表单标签、导航项、提示条 */
  --fs-base: 16px;  /* 旧 14：正文、按钮、状态标题 */
  --fs-lg: 20px;    /* 旧 16：区块标题 */
  --fs-xl: 24px;    /* 旧 20：页面标题 */
  --fs-2xl: 32px;   /* 旧 24：KPI 数值 */

  /* 形状 */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-nav: 8px;
  --radius-pill: 999px;
  --radius: var(--radius-control); /* 兼容旧名 */

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

  /* 尺寸 */
  --nav-width: 240px;
  --topbar-height: 60px;
  --bottombar-height: 64px;
  /* 内容最大宽度：只在超宽屏生效（比 1440 断点宽，所以常规屏完全不受影响）。
     没有它时 3440 实测卡片 3137px、输入框 1531px，行长失控。改这一个值就能调松紧。 */
  --content-max: 1680px;
  --drawer-width: 480px;
  --control-height: 36px;
  --icon-size: 18px;

  /* 阴影：只表达层级，不做浮起 */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-button: 0 1px 2px rgba(124, 58, 237, .25);
  --shadow-drawer: 0 0 0 1px var(--border), -8px 0 24px rgba(16, 24, 40, .10);

  /* 字体：保留系统栈（离线可用，与参考同族） */
  --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- 控件基础层与链接色（§UI-1）----------

   放在 tokens.css 而不是 components.css：主页（home.html）只加载 tokens.css + home.css，
   放 components.css 的话主页上的链接与下拉会退回浏览器默认样式（实测主页曾漏出默认蓝
   rgb(0,0,238)）。这一层必须被**所有入口**共享，且只写一份。

   为什么需要这一层：原生控件自带浏览器样式（Chrome 下是 Arial + 13.3333px + 灰底 #efefef），
   不收口就会出现"Arial 与系统字体混排、非令牌字号、原生灰按钮"——观感像半成品的主因。 */
button,
input,
select,
textarea {
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  padding: 0 var(--space-3);
  min-height: var(--control-height);
  box-sizing: border-box;
}
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
input[type="checkbox"],
input[type="radio"] {
  min-height: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--brand-strong);
}
input[type="file"] { min-height: 0; padding: var(--space-1); border-style: dashed; }
textarea { padding: var(--space-2) var(--space-3); }

a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 深色模式 ----------
   用新紫重新推导，而不是简单反色。
   由 JS 把 <html data-theme> 写成 light / dark（"跟随系统"在 prefs.js 里解析），
   所以这里只需要一份属性选择器——不再用媒体查询，避免两份令牌副本各自漂移。 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0f1116;
  --surface: #171a21;
  --surface-alt: #1f232b;

  --border: #2b313b;
  --border-strong: #3a4150;
  --border-control: #8b93a3;

  --text: #e8eaee;
  --text-secondary: #c7ccd6;
  --muted: #a3abb9;

  --brand: #a78bfa;
  --brand-strong: #7c3aed;        /* 深色下按钮底仍取 #7c3aed：白字 5.70:1（#8b5cf6 只有 4.23） */
  --brand-strong-hover: #6d28d9;
  --brand-text: #c4b5fd;
  --brand-soft: #241f38;
  --brand-soft-border: #453a6b;
  --brand-contrast: #ffffff;

  --ok-bg: #10281c;   --ok-border: #2f6b43;   --ok-text: #7ee2a8;
  --warn-bg: #2b2313; --warn-border: #6d5a25; --warn-text: #f0c674;
  --bad-bg: #2c1616;  --bad-border: #7a3733;  --bad-text: #f2a09a;
  --info-bg: #141f33; --info-border: #34537f; --info-text: #a5c8f8;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-button: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-drawer: 0 0 0 1px var(--border), -8px 0 24px rgba(0, 0, 0, .45);
}