/* ============================================================================
   ql-theme.css —— 全站设计令牌的唯一来源（REQ-324「网站视觉与图标按主流风格优化」）
   ----------------------------------------------------------------------------
   背景：改造前全站是**两套皮肤并存**——
     · 29 个页面引用 /style.css，用 --primary / --panel / --text / --border；
     · 12 个真实页面（links / login / register / reset / req / requirements /
       tokens / users / audit / devices …）各自在 <style> 里另造一套
       --accent / --surface / --ink / --muted / --line，取值还都不一样
       （--accent #2f6fed vs --primary #2563eb，--bg #f7f8fa vs #f6f7f9）。
   ⇒ 同一站里两种蓝、两种灰底，换页就"跳一下"，这是"不够好看"的主要来源之一。

   本文件做三件事：
   ① 定义唯一一份令牌（取值与 style.css 的 :root 完全一致）；
   ② 为历史页面提供**兼容别名**（--accent→--primary、--ink→--text、--line→--border…），
      这样删掉各页自己的 :root 之后，页面里既有的 var(--ink) 等写法一行都不用改；
   ③ 提供全站基础视觉（字体栈、滚动条、聚焦环、选中色），让"主流网站"的细节一致。

   ★ 加载顺序：必须在各页自己的 <style> **之前**（<head> 里紧接 <meta viewport>）。
     页面自身的规则因此仍然可以正常覆盖本文件的兜底规则。
   ★ 新增颜色请只在这里加，不要再往页面 <style> 里写 :root 调色板
     （`_audit-theme.js` 会把"页面自造调色板"判红）。
   ============================================================================ */
:root {
  /* —— 主色 —— */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eff4ff;
  /* —— 语义色 —— */
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --ok: #059669;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  /* —— 表面 / 文字 / 描边 —— */
  --bg: #f6f7f9;
  --panel: #ffffff;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --text: #1f2329;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  /* —— 圆角 / 阴影 / 尺度 —— */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, .10);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, .18);
  --topbar-h: 54px;
  --sidebar-w: 260px;
  --detail-w: 400px;
  /* —— 字体栈（与 style.css 一致；不引入外部字体，避免离线/内网首屏阻塞）—— */
  --ql-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --ql-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* ===== 兼容别名（历史页面用旧名，值指向新令牌；只读，不要在此改色）===== */
  --surface: var(--panel);
  --ink: var(--text);
  --muted: var(--text-secondary);
  --mut: var(--text-secondary);
  --line: var(--border);
  --bd: var(--border);
  --brand: var(--primary);
  --accent: var(--primary);
  --accent-ink: var(--primary-hover);
  --accent-soft: var(--primary-soft);
}

/* —— 全站基础：盒模型 / 字体 / 选中色 —— */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ql-font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(37, 99, 235, .18); }

/* —— 聚焦环：键盘可达性（主流站点的基本要求），鼠标点击不显示 —— */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* —— 滚动条：细、浅、hover 才明显（Windows 下默认滚动条很"重"）—— */
* { scrollbar-width: thin; scrollbar-color: #cfd4dc transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #cfd4dc;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: #aeb5c0; background-clip: content-box; }

/* —— 图标（ql-icons.js 注入的 SVG）—— */
.ql-ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ql-ico-slot { display: inline-flex; align-items: center; margin-right: .38em; }
.ql-ico-slot > .ql-ico { width: 1.06em; height: 1.06em; vertical-align: 0; }
/* 这些容器本身是 flex + gap，图标槽再留外边距会变成双倍间距 */
.smi > .ql-ico-slot,
.smi > span > .ql-ico-slot { margin-right: 0; }

/* —— 通用按钮 / 卡片（供新页面与逐页改造复用；老页面自己的类不受影响）—— */
.ql-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: 500 13.5px/1 var(--ql-font);
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
}
.ql-btn:hover { border-color: var(--border-strong); background: #fafbfc; }
.ql-btn-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.ql-btn-primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); }
.ql-btn-danger { border-color: var(--danger); color: var(--danger); }
.ql-btn-danger:hover { background: var(--danger-soft); }