/* SN 设计令牌（Design Tokens）
 *
 * 三层结构，引用方向只能自上而下：组件 → L3 → L2 → L1。
 *   L1 原始层  --c-*        纯调色板，不含任何语义，换品牌只改这里
 *   L2 语义层  --surface-* / --text-* / --border-* / --state-*
 *   L3 组件层  --pill-* / --table-* / --btn-* / --card-*   组件样式只引用 L3/L2
 *
 * 两条硬规则（由 scripts/dev/contrast_check.py 在门禁 L6 把守）：
 *   1. 业务 CSS 里不允许出现裸十六进制色值，一律走令牌；
 *   2. 每一对「前景 / 背景」组合必须过 WCAG AA：正文 4.5:1，大字与非文本 3:1。
 *
 * 状态从三色扩为五色：ok / warn / bad / unknown / na。
 * 三色时代"不知道"只能借 warn 的黄，于是黄色同时表示"有问题"和"没证据"，
 * 这是语义污染；unknown 与 na 独立配色后，黄只表示"确有异常"。
 */

:root {
  /* ============ L1 原始层 ============ */
  /* 蓝：承接 Ant Design 蓝阶，页面主色 */
  --c-blue-25:#f5f9ff;
  --c-blue-50:#e6f4ff;  --c-blue-100:#bae0ff; --c-blue-200:#91caff;
  --c-blue-300:#69c0ff; --c-blue-400:#4096ff; --c-blue-500:#1677ff; --c-blue-600:#0958d9;
  --c-blue-700:#003eb3; --c-blue-800:#002c8c;
  --c-azure-400:#69c0ff;
  /* 品牌深墨（官网同源） */
  --c-navy-900:#031d6a; --c-navy-700:#0a4073; --c-indigo-600:#113bbf;
  --c-gold-900:#8a5a00; --c-gold-200:#ffd666;
  /* 登录页光斑：--login-glow 的两层径向色。它们是"背景上的背景"，
     对比度审计必须把它们合成进去算（见 contrast_check 的 login 配对）。 */
  --c-glow-azure:rgba(64,169,255,.16); --c-glow-blue:rgba(22,119,255,.18);
  /* 状态三色相 */
  --c-green-50:#e0f2e9; --c-green-500:#1f9d55; --c-green-700:#0f713a;
  --c-red-50:#fdeaea;   --c-red-500:#e25555;   --c-red-700:#b02525;
  --c-amber-50:#fff4e0; --c-amber-500:#d48806;
  /* 中性灰阶 */
  --c-slate-0:#ffffff;  --c-slate-25:#f7f8fa; --c-slate-30:#fafbfe;
  --c-slate-50:#f2f3f5; --c-slate-100:#f0f2f8; --c-slate-200:#e5e6eb;
  --c-slate-300:#c9cdd4; --c-slate-400:#a9b0ba; --c-slate-500:#86909c;
  --c-slate-550:#646e7d; --c-slate-600:#4e5969; --c-slate-700:#1d2129;
  --c-slate-900:#0d1a26;
  /* 深底文本 / 日志台 */
  --c-ink-900:#0f1c2e;  --c-ink-800:#131e30;  --c-ink-text:#dbe7ff;
  /* 暗色档专用 */
  --c-night-0:#17191c;  --c-night-1:#1d2129;  --c-night-2:#2a2f37;
  --c-night-3:#3a4250;  --c-night-4:#4b5563;
  --c-night-text:#e8eaed; --c-night-muted:#a0a6b0;
  --c-on-night-ok:#73d13d; --c-on-night-warn:#ffa940;
  --c-on-night-bad:#ff7875; --c-on-night-acc:#69b1ff;
  /* 派生档位：AA 反推出的边框/深底档。全文件只有 --c-* 行允许出现十六进制字面量，
     这条约束由 contrast_check.py 的 bare_hex 检查把守。 */
  
  --c-mist-50:#eef1f6;   --c-mist-400:#8c99a8;
  --c-mist-600:#5c6b7a;
  --c-night-15:#22303f; --c-night-text2:#c3c9d2; --c-night-accborder:#2a4b74;
  --c-night-accbg:#12253c;
  --c-night-okbg:#132c1d;   --c-night-warnbg:#33230c;  --c-night-badbg:#361a1a;
  
  
  
  --c-night-unkfg:#b3bcc7;  --c-night-unkbg:#242a31;
  
  

  /* ============ L2 语义层 ============ */
  --surface-page:var(--c-slate-25);
  --surface-card:var(--c-slate-0);
  --surface-sunken:var(--c-slate-30);
  --surface-code:var(--c-slate-100);
  --surface-hover:var(--c-blue-25);
  --surface-inverse:var(--c-ink-900);
  --surface-overlay:rgba(13,26,38,.5);
  --surface-on-dark-soft:rgba(255,255,255,.1);
  --surface-on-dark-active:rgba(255,255,255,.16);
  --surface-on-dark-hover:rgba(255,255,255,.12);
  --surface-quiet:rgba(13,26,38,.06);
  --surface-quiet-hover:rgba(13,26,38,.14);
  --text-primary:var(--c-slate-700);
  --text-secondary:var(--c-slate-600);
  --text-muted:var(--c-slate-550);
  --text-inverse:var(--c-ink-text);
  --text-on-accent:var(--c-slate-0);
  --text-brand:var(--c-slate-0);
  --border-default:var(--c-slate-200);
  --border-strong:var(--c-slate-300);
  --border-accent:var(--c-blue-100);
  --border-on-dark:rgba(255,255,255,.16);
  --border-on-dark-soft:rgba(255,255,255,.1);
  --border-on-dark-hairline:rgba(255,255,255,.18);
  /* ghost 按钮与外观开关的边框 = 控件边界，受 1.4.11 的 3:1 管辖，
     最亮停靠 --c-indigo-600 上需 α≥.457；soft/hairline 只做装饰分隔，不入配对表。 */
  --border-on-dark-ghost:rgba(255,255,255,.52);
  --accent-fill:var(--c-blue-600);
  --accent-fill-hover:var(--c-blue-700);
  --accent-hover-ring:0 0 0 0 transparent;
  /* 链接/小字主色必须用 -text 档：--c-blue-500 在白底只有 4.1:1，不到 AA */
  --accent-text:var(--c-blue-600);
  --accent-subtle:var(--c-blue-50);
  --accent-ring:rgba(22,119,255,.12);
  --brand-gradient:linear-gradient(90deg,var(--c-navy-900) 0%,var(--c-navy-700) 58%,var(--c-indigo-600) 100%);
  --login-gradient:linear-gradient(135deg,var(--c-navy-900) 0%,var(--c-navy-700) 55%,var(--c-indigo-600) 100%);
  --brand-navy:var(--c-navy-900);
  /* 深底（品牌栏 / 登录页）上的前景。这些不随主题切换：品牌栏在暗色档仍是同一条墨蓝渐变。
     四档透明度不是审美值：最坏情况是登录页左栏 —— 墨蓝渐变最亮停靠 --c-indigo-600
     还叠了一层 --c-glow-azure 光斑，白字要过 AA 4.5:1 需要 α≥.73（contrast_check 把
     光斑合成进背景逐停点验）。所以最弱一档压在 .76，层级差靠间距表达而不是掉到不可读。 */
  --accent-on-dark:var(--c-azure-400);
  --text-on-dark:rgba(255,255,255,.86);
  --text-on-dark-strong:rgba(255,255,255,.94);
  --text-on-dark-muted:rgba(255,255,255,.80);
  --text-on-dark-faint:rgba(255,255,255,.76);
  /* 深底上的金色只能做文字强调，不能沿用浅底品牌金：#f5a623 在墨蓝渐变 + 光斑上
     只有 3.5:1，亮一档的 gold-200 才过 4.5。所以深底前景单独成令牌。 */
  --text-on-dark-gold:var(--c-gold-200);

  /* 五态：一个状态一个色。fg 由 AA 反推（≥4.5），border/dot 直接复用它，
     于是"边框/圆点能不能被看见"这个问题自动跟着文本一起达标，不必各调一套。 */
  --state-ok-fg:var(--c-green-700);    --state-ok-bg:var(--c-green-50);
  --state-ok-dot:var(--state-ok-fg);   --state-ok-border:var(--state-ok-fg);
  --state-warn-fg:var(--c-gold-900);   --state-warn-bg:var(--c-amber-50);
  --state-warn-dot:var(--state-warn-fg);  --state-warn-border:var(--state-warn-fg);
  --state-bad-fg:var(--c-red-700);     --state-bad-bg:var(--c-red-50);
  --state-bad-dot:var(--state-bad-fg);    --state-bad-border:var(--state-bad-fg);
  /* unknown：灰蓝，"没有观测"，不是判词 */
  --state-unknown-fg:var(--c-mist-600);    --state-unknown-bg:var(--c-mist-50);
  --state-unknown-dot:var(--state-unknown-fg);   --state-unknown-border:var(--state-unknown-fg);
  /* na：无口径 / 不适用，比 unknown 更弱，用虚线边界表达"这里本就不该有结论" */
  --state-na-fg:var(--c-slate-600);    --state-na-bg:var(--c-slate-50);
  --state-na-dot:var(--state-na-fg);   --state-na-border:var(--state-na-fg);

  /* ============ L3 组件层 ============ */
  --pill-fg-ok:var(--state-ok-fg);      --pill-bg-ok:var(--state-ok-bg);
  --pill-fg-warn:var(--state-warn-fg);  --pill-bg-warn:var(--state-warn-bg);
  --pill-fg-bad:var(--state-bad-fg);    --pill-bg-bad:var(--state-bad-bg);
  --pill-fg-unknown:var(--state-unknown-fg); --pill-bg-unknown:var(--state-unknown-bg);
  --pill-fg-na:var(--state-na-fg);      --pill-bg-na:var(--state-na-bg);
  --pill-fg-accent:var(--accent-text);  --pill-bg-accent:var(--accent-subtle);
  --table-row-hover:var(--surface-hover);
  --table-head-fg:var(--text-muted);
  --table-cell-pad-y:9px;  --table-cell-pad-x:8px;
  --card-bg:var(--surface-card);
  --card-border:1px solid var(--border-default);
  --card-pad:18px;
  /* 统计卡左侧 3px 色条 = 这张卡的状态色。暗色档必须整体换档：
     --brand-navy 压在 --c-night-1 上等于没有，浅底好看的墨蓝在夜底只有 1.3:1。 */
  --stat-stripe:var(--accent-fill);
  --stat-stripe-ok:var(--state-ok-dot);
  --stat-stripe-warn:var(--state-warn-fg);
  --stat-stripe-deep:var(--brand-navy);
  --field-bg:var(--surface-card);
  --log-bg:var(--surface-inverse);      --log-fg:var(--text-inverse);
  --nav-bg:var(--brand-gradient);       --nav-fg:var(--text-brand);
  --login-glow:radial-gradient(circle at 18% 22%,var(--c-glow-azure),transparent 42%),
               radial-gradient(circle at 82% 78%,var(--c-glow-blue),transparent 46%);
  --login-dot-glow:0 0 8px rgba(105,192,255,.8);
  --login-title-gradient:linear-gradient(135deg,var(--c-azure-400),var(--c-blue-100));
  --badge-neutral-fg:var(--state-na-fg);   --badge-neutral-bg:var(--state-na-bg);
  /* 侧栏 IA：宽度/吸顶高度都在令牌里，页面 CSS 不写死数值 */
  --sidebar-w:240px;  --sidebar-w-collapsed:56px;
  --nav-w:var(--sidebar-w);
  --header-h:62px;  --nav-item-h:34px;
  --content-max:1600px;

  /* ============ 非颜色令牌 ============ */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:44px;
  --radius-xs:4px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px;
  --radius-xl:16px; --radius-pill:20px;
  --font-xs:11px; --font-sm:12px; --font-base:13px; --font-md:14px;
  --font-lg:15px; --font-xl:16px; --font-2xl:22px; --font-3xl:28px;
  /* 等宽栈：管理台的 code、公开页的 SHA/命令都该用同一套字体回落顺序，
     否则同一个 sha256 在两边字宽不同，运维对着截图核字符会核不出来。 */
  --font-mono:"SFMono-Regular", Consolas, "Cascadia Mono", Menlo, monospace;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  --weight-bold:700; --weight-black:800;
  --leading-tight:1.2; --leading-snug:1.35; --leading-normal:1.55; --leading-loose:1.8;
  --shadow-1:0 1px 3px rgba(0,0,0,.03);
  --shadow-2:0 4px 14px rgba(22,119,255,.3);
  --shadow-3:0 24px 48px rgba(10,64,115,.25);
  --shadow-4:0 24px 64px rgba(0,0,0,.35);
  --shadow-nav:0 2px 10px rgba(3,29,106,.28);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --z-header:20; --z-sidebar:25; --z-login:40; --z-modal:50; --z-toast:60;
  --focus-ring:0 0 0 2px var(--accent-ring);
  --control-h:38px; --control-h-sm:30px;
}

/* ============ 暗色档 ============
 * 由 <html data-theme="dark"> 显式开启（theme 控制器读 localStorage，
 * 缺省跟随 prefers-color-scheme）。只覆盖 L1/L2，L3 与组件零改动。
 */
[data-theme="dark"]{
  --surface-page:var(--c-night-0);
  --surface-card:var(--c-night-1);
  --surface-sunken:var(--c-night-2);
  --surface-code:var(--c-night-2);
  --surface-hover:var(--c-night-15);
  --surface-inverse:var(--c-night-2);
  --surface-overlay:rgba(0,0,0,.62);
  --text-primary:var(--c-night-text);
  --text-secondary:var(--c-night-text2);
  --text-muted:var(--c-night-muted);
  --text-inverse:var(--c-night-text);
  --text-brand:var(--c-night-text);
  --border-default:var(--c-night-3);
  --border-strong:var(--c-night-4);
  --border-accent:var(--c-night-accborder);
  /* 暗色档主按钮不能靠"变亮"表达 hover：blue-500 上的白字只有 4.1:1，不到 AA。
     填充色保持不变，改由 --accent-hover-ring 的光环给反馈。 */
  --accent-fill:var(--c-blue-600);
  --accent-fill-hover:var(--accent-fill);
  --accent-hover-ring:0 0 0 3px var(--accent-ring);
  --accent-text:var(--c-on-night-acc);
  --accent-subtle:var(--c-night-accbg);
  --accent-ring:rgba(105,177,255,.32);
  --state-ok-fg:var(--c-on-night-ok);     --state-ok-bg:var(--c-night-okbg);
  --state-warn-fg:var(--c-on-night-warn); --state-warn-bg:var(--c-night-warnbg);
  --state-bad-fg:var(--c-on-night-bad);   --state-bad-bg:var(--c-night-badbg);
  --state-unknown-fg:var(--c-night-unkfg);  --state-unknown-bg:var(--c-night-unkbg);
  --state-na-fg:var(--c-night-muted);     --state-na-bg:var(--c-night-2);
  /* 色条只要"在这张卡上看得见"，所以深底档取亮档；ok/warn 跟着 --state-*-fg 已经自动变亮 */
  --stat-stripe:var(--c-on-night-acc);    --stat-stripe-deep:var(--c-slate-500);
  --shadow-1:0 1px 3px rgba(0,0,0,.4);
  --shadow-2:0 4px 14px rgba(0,0,0,.45);
  --shadow-3:0 24px 48px rgba(0,0,0,.6);
  --shadow-4:0 24px 64px rgba(0,0,0,.7);
}

/* ============ 紧凑密度档 ============
 * 运维一屏要看二十行台账，间距与表格内边距收紧即可，组件不感知。
 */
[data-density="compact"]{
  --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px;
  --space-5:14px; --space-6:18px; --space-7:24px; --space-8:30px;
  --table-cell-pad-y:5px; --table-cell-pad-x:7px;
  --card-pad:12px; --control-h:32px; --control-h-sm:26px;
  --header-h:52px; --nav-item-h:28px;
  --font-3xl:24px;
}

/* ============ 侧栏折叠档 ============
 * 折叠只改宽度与标签呈现，不碰路由：窄档靠首字缩写 + sr-only 全名，
 * 键盘与读屏到达的路径和展开档完全一致。
 */
[data-nav="collapsed"]{--nav-w:var(--sidebar-w-collapsed)}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms;}
  *,*::before,*::after{
    animation-duration:1ms !important; transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
}