/* ============================================================
   塘讯后台 · 设计令牌
   ------------------------------------------------------------
   值全部对齐 EDGEYOLO 前端（edgeyolo/web/frontend/src/style.css）
   的同一套变量，所以两个后台看起来是同一个产品。
   它是 CSS 自定义属性，不依赖 Tailwind / Vite / 构建步骤。

   四条规矩：
   1. 底色只有一族（bg / surface / raised / hover / panel），
      靠明度差分层，不靠彩色分层；
   2. 强调色只有青色一个，且**只用于"可操作"和"当前选中"**；
      文字上的青色用更亮的 --pri-lite，--pri 本身偏暗只当底色和描边；
   3. 语义色一律写成「描边 .25 + 底 .10 + 文字纯色」三件套，
      这是 EDGEYOLO 徽标的做法，深色底上不会糊成一片；
   4. 圆角只有两个真值：面板 10px、控件 6px。浮层 12px。
   ============================================================ */
:root {
  color-scheme: dark;

  /* ---------- 底色族 ---------- */
  --bg: #080a0d;
  --surface: #0d1015;
  --surface-2: #12161c;
  --surface-3: #171c23;
  --panel: #10141a;

  /* 兼容旧名（视图内联 style 在用） */
  --surface-raised: var(--surface-2);
  --surface-hover: var(--surface-3);
  --text: #edf2f7;
  --text-2: #a8b2bf;
  --text-3: #697586;
  --text-inv: #020617;

  /* ---------- 文字 ---------- */
  --ink-1: #edf2f7;
  --ink-2: #a8b2bf;
  --ink-3: #697586;
  --ink-4: #4b5563;

  /* ---------- 描边：全是同一支 slate，只透明度不同 ---------- */
  --line: rgba(148, 163, 184, .12);
  --line-soft: rgba(148, 163, 184, .08);
  --line-strong: rgba(148, 163, 184, .22);

  /* ---------- 侧栏（与内容同族，靠 --surface 区分，不用另一种颜色） ---------- */
  --nav-bg: var(--surface);
  --nav-bg-2: var(--surface-3);
  --nav-bg-3: rgba(6, 182, 212, .1);
  --nav-line: var(--line);
  --nav-text: #a8b2bf;
  --nav-text-hi: #edf2f7;
  --nav-group: #697586;
  --nav-active-bar: #22d3ee;

  /* ---------- 主色：青 ---------- */
  --pri: #19b8c7;
  --pri-hover: #35cad7;
  --pri-active: #1095a3;
  --pri-lite: #22d3ee;          /* 深色底上的文字/图标级青，够亮才读得清 */
  --pri-soft: rgba(6, 182, 212, .1);
  --pri-line: rgba(6, 182, 212, .25);
  --pri-glow: 0 0 20px rgba(6, 182, 212, .15);
  --pri-grad: linear-gradient(135deg, #06b6d4, #0891b2);
  --pri-grad-hover: linear-gradient(135deg, #0891b2, #06b6d4);
  --pri-ring: 0 0 0 3px rgba(25, 184, 199, .34);
  --on-pri: #020617;            /* 压在渐变主按钮上的字色 */

  /* 旧名兼容：--accent* 曾指主色，Field.js 里有内联引用 */
  --accent: var(--pri-lite);
  --accent-soft: var(--pri-soft);
  --accent-line: var(--pri-line);

  /* ---------- 语义色：描边 .25 / 底 .10 / 纯色文字 ---------- */
  --ok: #34d399;
  --ok-text: #34d399;
  --ok-bg: rgba(52, 211, 153, .1);
  --ok-line: rgba(52, 211, 153, .25);

  --warn: #fbbf24;
  --warn-text: #fbbf24;
  --warn-bg: rgba(251, 191, 36, .1);
  --warn-line: rgba(251, 191, 36, .25);

  --bad: #e05262;
  --bad-text: #fb7185;
  --bad-bg: rgba(239, 68, 98, .08);
  --bad-line: rgba(239, 68, 98, .3);
  --bad-hover: rgba(239, 68, 98, .15);

  --info: #94a3b8;
  --info-bg: rgba(148, 163, 184, .1);
  --info-line: rgba(148, 163, 184, .2);

  /* ---------- 字阶 ---------- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;

  /* ---------- 间距（4px 栅格） ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* ---------- 圆角：面板 10 / 控件 6 / 浮层 12 ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* ---------- 阴影：深色底上阴影要重，轻了分不出层 ---------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .28);
  --sh-2: 0 10px 28px rgba(0, 0, 0, .18);
  --sh-3: 0 14px 34px rgba(0, 0, 0, .22);
  --sh-pop: 0 24px 70px rgba(0, 0, 0, .6);

  /* ---------- 控件高度 ---------- */
  --ctl-h: 34px;
  --ctl-sm: 30px;
  --ctl-lg: 38px;

  /* ---------- 骨架 ---------- */
  --side-w: 220px;
  --side-min: 64px;
  --head-h: 60px;

  --num: tabular-nums;
  --ease: cubic-bezier(.2, 0, .2, 1);

  --font-sans: "Segoe UI Variable", "Microsoft YaHei UI", "Microsoft YaHei",
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  /* 一层极淡的网格纹理，EDGEYOLO 深色底的质感来源之一 */
  background:
    linear-gradient(rgba(148, 163, 184, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .022) 1px, transparent 1px),
    var(--bg);
  color: var(--ink-1);
  font: 14px/1.5715 var(--font-sans);
  font-variant-numeric: var(--num);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.4; }
h1 { font-size: var(--fs-20); }
h2 { font-size: var(--fs-16); }
h3 { font-size: var(--fs-14); }
h4 { font-size: var(--fs-13); }
p { margin: 0; }
a { color: var(--pri-lite); text-decoration: none; }
a:hover { color: var(--pri-hover); }
code, pre { font-family: var(--font-mono); }

button { font-family: inherit; }
:focus-visible { outline: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2a323d; background-clip: padding-box;
  border: 2px solid transparent; border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #3b4654; background-clip: padding-box; }

.num, .tbl .num, input[type="number"] { font-variant-numeric: var(--num); }
.mono { font-family: var(--font-mono); }