/* ════════════════════════════════════════════════════════════════════
   JMOS 应用层 · 设计令牌 v0.1（由 _build/gen.py 生成，请勿手改颜色值）
   用法：
     1. 在 main.ts 最先 import './design-spec/tokens.css'
     2. 主题：<html data-theme="light|dark">（system 由 theme.ts 解析成 light/dark 再写入）
     3. 密度：<html data-density="comfortable|compact|display">，可只挂在某个容器上
        （例如大屏：<div data-density="display">；主题跟随全局，不在容器上锁定 data-theme）
     4. 白标：只改 --jm-brand-50…950（tokens.ts 的 applyBrand(hex) 会自动算好并写入）
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* 品牌色阶（由 #ee8034 在 OKLCH 空间等色相生成）*/
  --jm-brand-50: #fff4ef;
  --jm-brand-100: #ffe8db;
  --jm-brand-200: #fed0b5;
  --jm-brand-300: #ffb487;
  --jm-brand-400: #fc9758;
  --jm-brand-500: #ee8034;
  --jm-brand-600: #d06822;
  --jm-brand-700: #af541a;
  --jm-brand-800: #894017;
  --jm-brand-900: #642e12;
  --jm-brand-950: #3f1a08;
  /* JMOS 架构分层色：只用于架构图/分层标识，不用于状态 */
  --jm-layer-device: #5f7db0; /* ⓪ 设备与控制层 */
  --jm-layer-access: #f5a623; /* ① 接入层 */
  --jm-layer-data: #4d9fff; /* ② 数据层 */
  --jm-layer-capability: #a06bff; /* ③ 能力层 */
  --jm-layer-governance: #ff6b81; /* ④ 治理层 */
  --jm-layer-application: #2fd4a7; /* ⑤ 应用层 */
  --jm-layer-hq: #ff8a4d; /* 总部侧 */
  --jm-layer-crosscut: #ffc96b; /* 横切设施 */

  /* 字体 */
  --jm-font-sans: Inter, 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', system-ui, sans-serif;
  --jm-font-num: 'Barlow', 'Bahnschrift', 'DIN Alternate', 'D-DIN', Inter, 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --jm-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, 'Noto Sans Mono CJK SC', monospace;
  /* 字号（px）：12 说明 / 13 表格、次要 / 14 正文 / 16 小标题 / 18 卡片大标题 / 20 页面标题 / 24 / 30 */
  --jm-fs-12: 12px; --jm-fs-13: 13px; --jm-fs-14: 14px; --jm-fs-16: 16px;
  --jm-fs-18: 18px; --jm-fs-20: 20px; --jm-fs-24: 24px; --jm-fs-30: 30px;
  /* 数字专用字号（KPI/大屏），配 --jm-font-num + tabular-nums */
  --jm-num-20: 20px; --jm-num-28: 28px; --jm-num-36: 36px; --jm-num-48: 48px; --jm-num-64: 64px;
  --jm-lh-tight: 1.25; --jm-lh-normal: 1.5; --jm-lh-relaxed: 1.75;
  --jm-fw-regular: 400; --jm-fw-medium: 500; --jm-fw-semibold: 600;
  /* 圆角：2 标签内小块 / 4 按钮输入框 / 6 卡片表格 / 8 弹窗抽屉 / full 只给胶囊状态标签和头像 */
  --jm-radius-xs: 2px; --jm-radius-sm: 4px; --jm-radius-md: 6px; --jm-radius-lg: 8px; --jm-radius-full: 999px;
  /* 间距（4px 栅格）*/
  --jm-space-0-5: 2px; --jm-space-1: 4px; --jm-space-2: 8px; --jm-space-3: 12px; --jm-space-4: 16px;
  --jm-space-5: 20px; --jm-space-6: 24px; --jm-space-8: 32px; --jm-space-10: 40px; --jm-space-12: 48px; --jm-space-16: 64px;
  /* 动效 */
  --jm-duration-fast: 120ms; --jm-duration-base: 200ms; --jm-duration-slow: 320ms;
  --jm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* 层级 */
  --jm-z-sticky: 100; --jm-z-dropdown: 1000; --jm-z-drawer: 1200; --jm-z-modal: 1300; --jm-z-toast: 1400;
}

/* ─── 密度：comfortable（默认，主应用）─── */
:root, [data-density='comfortable'] {
  --jm-font-size-body: 14px;
  --jm-control-h: 32px;       /* 按钮/输入框高度 */
  --jm-row-h: 40px;           /* 表格行高 */
  --jm-card-pad: 16px;
  --jm-gap: 16px;             /* 卡片之间 */
  --jm-radius-card: var(--jm-radius-md);
  --jm-radius-control: var(--jm-radius-sm);
  --jm-kpi-value: var(--jm-num-28);
  --jm-kpi-label: var(--jm-fs-13);
  --jm-title-card: var(--jm-fs-14);
  --jm-title-page: var(--jm-fs-20);
  --jm-status-dot: 8px;
}
/* ─── 密度：compact（管理后台长表格）─── */
[data-density='compact'] {
  --jm-font-size-body: 13px;
  --jm-control-h: 28px;
  --jm-row-h: 32px;
  --jm-card-pad: 12px;
  --jm-gap: 12px;
  --jm-kpi-value: var(--jm-num-20);
  --jm-kpi-label: var(--jm-fs-12);
  --jm-title-card: var(--jm-fs-14);
  --jm-title-page: var(--jm-fs-18);
}
/* ─── 密度：display（看板/大屏：高密度 + 远看清楚；深浅主题都可用）─── */
[data-density='display'] {
  --jm-font-size-body: 14px;
  --jm-control-h: 32px;
  --jm-row-h: 36px;
  --jm-card-pad: 16px;
  --jm-gap: 12px;
  --jm-radius-card: var(--jm-radius-lg);
  --jm-kpi-value: var(--jm-num-48);
  --jm-kpi-label: var(--jm-fs-14);
  --jm-title-card: var(--jm-fs-16);
  --jm-title-page: var(--jm-fs-24);
  --jm-status-dot: 10px;
}

/* ─── 无级自适应（v0.2）：手机竖屏 360 → 笔记本 1440 连续变化，1440–1920 就是规范值；1920 以上由显示缩放接管 ───
   静态令牌（--jm-fs-20 等）= 1440 处的值，不变；页面要随屏宽变化时用 --jm-fluid-*。没有固定断点，只有 clamp() 的两个端点。
   组件内部再用容器查询（container-type: inline-size + cqi）按所在插槽宽度适配（07 舞台窗口、iframe 里同样成立）。 */
:root {
  --jm-fluid-fs-16: clamp(15px, calc(14.67px + 0.09259vw), 16px);
  --jm-fluid-fs-18: clamp(16px, calc(15.33px + 0.1852vw), 18px);
  --jm-fluid-fs-20: clamp(18px, calc(17.33px + 0.1852vw), 20px);
  --jm-fluid-fs-24: clamp(20px, calc(18.67px + 0.3704vw), 24px);
  --jm-fluid-fs-30: clamp(24px, calc(22px + 0.5556vw), 30px);
  --jm-fluid-num-28: clamp(24px, calc(22.67px + 0.3704vw), 28px);
  --jm-fluid-num-36: clamp(28px, calc(25.33px + 0.7407vw), 36px);
  --jm-fluid-num-48: clamp(32px, calc(26.67px + 1.481vw), 48px);
  --jm-fluid-num-64: clamp(40px, calc(32px + 2.222vw), 64px);
  --jm-fluid-space-4: clamp(12px, calc(10.67px + 0.3704vw), 16px);
  --jm-fluid-space-5: clamp(16px, calc(14.67px + 0.3704vw), 20px);
  --jm-fluid-space-6: clamp(16px, calc(13.33px + 0.7407vw), 24px);
  --jm-fluid-space-8: clamp(20px, calc(16px + 1.111vw), 32px);
  --jm-fluid-space-10: clamp(24px, calc(18.67px + 1.481vw), 40px);
  --jm-fluid-space-12: clamp(24px, calc(16px + 2.222vw), 48px);
  --jm-fluid-space-16: clamp(32px, calc(21.33px + 2.963vw), 64px);
  --jm-gutter: clamp(16px, calc(5.333px + 2.963vw), 48px);             /* 页面左右留白：手机 16 → 1440 起 48 */
  --jm-gutter-wide: clamp(16px, calc(4.923px + 3.077vw), 64px);  /* 宽页面（看板 / 展示页）：到 1920 为 64 */
  --jm-content-max: 1600px;   /* 应用页正文最大宽度（大屏两侧留白随屏宽增长） */
  --jm-touch: 44px;           /* 触控目标最小尺寸（pointer: coarse） */
  /* 显示缩放（远距离 / 大屏）：1920 及以下 = 1；之后随屏宽线性增大，2560 ≈ 1.25，3840 = 1.75（上限）。
     r = 屏宽 / 1920（tan(atan2()) 把长度比变成无单位数）。页面在 <html data-display="auto"> 上启用，整页等比放大：
     字更大、留白更宽，排版宽度仍比 1920 多（3840 ÷ 1.75 ≈ 2194），看板可以多放一列。启用后页面里不要再写 100vw / 100vh，用 100% / dvh。 */
  --jm-display-r: tan(atan2(100vw, 1920px));
  --jm-display-zoom: clamp(1, calc(1 + (var(--jm-display-r) - 1) * 0.75), 1.75);
  /* 看板 / 大屏（data-density="display"）放大得少一些，换来更高的信息密度：2560 ≈ 1.15，3840 = 1.45 */
  --jm-display-zoom-dense: clamp(1, calc(1 + (var(--jm-display-r) - 1) * 0.45), 1.45);
}
html[data-display='auto'] { zoom: var(--jm-display-zoom); }
html[data-display='auto'][data-density='display'] { zoom: var(--jm-display-zoom-dense); }
/* 触控屏：可点区域至少 44px（视觉尺寸不变，用透明外扩） */
@media (pointer: coarse) { .jm-hit { position: relative; } .jm-hit::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, var(--jm-touch)); height: max(100%, var(--jm-touch)); transform: translate(-50%, -50%); } }
/* 刘海 / 圆角屏安全区（需在 viewport meta 里写 viewport-fit=cover） */
:root { --jm-safe-t: env(safe-area-inset-top, 0px); --jm-safe-r: env(safe-area-inset-right, 0px); --jm-safe-b: env(safe-area-inset-bottom, 0px); --jm-safe-l: env(safe-area-inset-left, 0px); }

/* ─── 浅色主题（默认）─── */
:root, [data-theme='light'] {
  /* 背景层级：canvas 页面底 → surface 卡片 → raised 悬浮/二级 → overlay 弹层 */
  --jm-bg-canvas: #f6f7f9;
  --jm-bg-surface: #ffffff;
  --jm-bg-sunken: #f2f3f5;
  --jm-bg-raised: #ffffff;
  --jm-bg-hover: #eef0f3;
  --jm-bg-overlay: #ffffff;
  --jm-bg-selected: color-mix(in srgb, var(--jm-brand-500) 8%, var(--jm-bg-surface));
  /* 线 */
  --jm-border: #e4e7ec;
  --jm-border-strong: #cdd2da;
  --jm-divider: #eceef2;
  /* 文字：1 主文 / 2 次要 / 3 辅助说明（均 ≥4.5:1）/ disabled 仅禁用态 */
  --jm-text-1: #1f2329;
  --jm-text-2: #4e5562;
  --jm-text-3: #646b78;
  --jm-text-disabled: #a3a9b4;
  --jm-text-inverse: #ffffff;
  --jm-link: #2563eb;
  --jm-link-hover: #1d4ed8;
  /* 品牌（白标时只需替换 --jm-brand-50…950，语义变量自动跟随）*/
  --jm-brand: var(--jm-brand-500);            /* 识别色：Logo、标题短条、选中指示条 */
  --jm-brand-solid: var(--jm-brand-700);      /* 主按钮底色（白字 5.1:1，两套主题相同）*/
  --jm-brand-solid-hover: var(--jm-brand-800);  /* 主按钮悬停/键盘焦点（白字 7.5:1）*/
  --jm-brand-solid-active: var(--jm-brand-900); /* 主按钮按下（白字 10.8:1）*/
  --jm-brand-text: var(--jm-brand-700);       /* 橙色文字（5.1:1）*/
  --jm-brand-soft: var(--jm-brand-50);        /* 选中行/选中菜单的淡底 */
  --jm-brand-border: var(--jm-brand-200);
  --jm-focus-ring: var(--jm-brand-600);
  --jm-brand-on: #ffffff;
  /* 状态色：solid=圆点/图标/进度条  fg=文字  bg=淡底  border=描边。只用于"表达状态"，不做装饰 */
  --jm-ok-solid: #0e9a3f; --jm-ok-fg: #067b30; --jm-ok-bg: #e9f6ee; --jm-ok-border: #abdcbc;
  --jm-warn-solid: #ae880c; --jm-warn-fg: #826509; --jm-warn-bg: #f8f4e9; --jm-warn-border: #e3d5aa;
  --jm-bad-solid: #de3a46; --jm-bad-fg: #c12535; --jm-bad-bg: #fcedee; --jm-bad-border: #f3babe;
  --jm-info-solid: #068cbc; --jm-info-fg: #036f97; --jm-info-bg: #e9f5f9; --jm-info-border: #a8d7e8;
  --jm-idle-solid: #858c99; --jm-idle-fg: #5b6270; --jm-idle-bg: #f1f2f4; --jm-idle-border: #d5d9df;
  --jm-bad-strong: #c12535; --jm-bad-on-strong: #ffffff; /* 严重级实心标签：红底白字（白字 5.9:1）*/
  /* 图表 */
  --jm-chart-1: #2b7ad6;
  --jm-chart-2: #038e7a;
  --jm-chart-3: #8362cd;
  --jm-chart-4: #997a50;
  --jm-chart-5: #b25196;
  --jm-chart-6: #1087aa;
  --jm-chart-7: #6a7b99;
  --jm-chart-8: #7a8750;
  --jm-chart-seq-1: #d9eaff;
  --jm-chart-seq-2: #a7ceff;
  --jm-chart-seq-3: #82aee6;
  --jm-chart-seq-4: #5d8bc6;
  --jm-chart-seq-5: #396aa7;
  --jm-chart-seq-6: #174d8b;
  --jm-chart-grid: #eceef2;
  --jm-chart-axis: #cdd2da;
  --jm-chart-label: #646b78;
  /* 海拔 */
  --jm-shadow-1: 0 1px 2px rgba(16,24,40,.05);
  --jm-shadow-2: 0 4px 12px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.06);
  --jm-shadow-3: 0 16px 40px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.06);
  --jm-scrollbar: #d0d4db;
  color-scheme: light;
}

/* ─── 深色主题（主应用深色 + 看板/大屏共用）─── */
[data-theme='dark'] {
  /* 背景层级：canvas 页面底 → surface 卡片 → raised 悬浮/二级 → overlay 弹层 */
  --jm-bg-canvas: #0e1117;
  --jm-bg-surface: #161a22;
  --jm-bg-sunken: #12151c;
  --jm-bg-raised: #1d222c;
  --jm-bg-hover: #232936;
  --jm-bg-overlay: #232936;
  --jm-bg-selected: color-mix(in srgb, var(--jm-brand-500) 14%, var(--jm-bg-surface));
  /* 线 */
  --jm-border: #2a303c;
  --jm-border-strong: #3b4352;
  --jm-divider: #222731;
  /* 文字：1 主文 / 2 次要 / 3 辅助说明（均 ≥4.5:1）/ disabled 仅禁用态 */
  --jm-text-1: #e8ebf0;
  --jm-text-2: #b0b7c3;
  --jm-text-3: #8a92a1;
  --jm-text-disabled: #5b6372;
  --jm-text-inverse: #0e1117;
  --jm-link: #7aa7f8;
  --jm-link-hover: #9cbdfa;
  /* 品牌（白标时只需替换 --jm-brand-50…950，语义变量自动跟随）*/
  --jm-brand: var(--jm-brand-500);
  --jm-brand-solid: var(--jm-brand-700);      /* 主按钮底色（白字 5.1:1，两套主题相同）*/
  --jm-brand-solid-hover: var(--jm-brand-800);  /* 主按钮悬停/键盘焦点（白字 7.5:1）*/
  --jm-brand-solid-active: var(--jm-brand-900); /* 主按钮按下（白字 10.8:1）*/
  --jm-brand-text: var(--jm-brand-400);
  --jm-brand-soft: color-mix(in srgb, var(--jm-brand-500) 14%, var(--jm-bg-surface));
  --jm-brand-border: color-mix(in srgb, var(--jm-brand-500) 40%, var(--jm-bg-surface));
  --jm-focus-ring: var(--jm-brand-400);
  --jm-brand-on: #ffffff;
  /* 状态色：solid=圆点/图标/进度条  fg=文字  bg=淡底  border=描边。只用于"表达状态"，不做装饰 */
  --jm-ok-solid: #4bd76d; --jm-ok-fg: #6ce182; --jm-ok-bg: #1d332c; --jm-ok-border: #2a623e;
  --jm-warn-solid: #ffcd46; --jm-warn-fg: #fed25e; --jm-warn-bg: #343127; --jm-warn-border: #6f5e30;
  --jm-bad-solid: #fb575d; --jm-bad-fg: #ff8482; --jm-bad-bg: #34222a; --jm-bad-border: #6d3138;
  --jm-info-solid: #47c6ff; --jm-info-fg: #89d6fe; --jm-info-bg: #1c303f; --jm-info-border: #295b76;
  --jm-idle-solid: #7d8596; --jm-idle-fg: #a9b0bd; --jm-idle-bg: #1e232c; --jm-idle-border: #3a4150;
  --jm-bad-strong: #cc323e; --jm-bad-on-strong: #ffffff; /* 严重级实心标签：红底白字（白字 5.1:1）*/
  /* 图表 */
  --jm-chart-1: #6fadfd;
  --jm-chart-2: #3cc3ab;
  --jm-chart-3: #b296ff;
  --jm-chart-4: #ccab7f;
  --jm-chart-5: #e882c8;
  --jm-chart-6: #50b9df;
  --jm-chart-7: #9aaccb;
  --jm-chart-8: #aab97f;
  --jm-chart-seq-1: #012d5d;
  --jm-chart-seq-2: #19487f;
  --jm-chart-seq-3: #386aa8;
  --jm-chart-seq-4: #558bd0;
  --jm-chart-seq-5: #73aef8;
  --jm-chart-seq-6: #b3d4ff;
  --jm-chart-grid: #222731;
  --jm-chart-axis: #3b4352;
  --jm-chart-label: #8a92a1;
  /* 海拔 */
  --jm-shadow-1: 0 0 0 1px rgba(255,255,255,.02);
  --jm-shadow-2: 0 6px 16px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.04);
  --jm-shadow-3: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  --jm-scrollbar: #3b4352;
  color-scheme: dark;
}

/* ─── 基础 ─── */
html { font-family: var(--jm-font-sans); font-size: var(--jm-font-size-body); color: var(--jm-text-1); background: var(--jm-bg-canvas); }
[data-theme] { color: var(--jm-text-1); }
.jm-num { font-family: var(--jm-font-num); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
:focus-visible { outline: 2px solid var(--jm-focus-ring); outline-offset: 2px; }

/* ════ 兼容层：旧变量名 → 新令牌（迁移完成后删除）════
   主应用 style.css 的 :root 变量块、design-system.css 第 12–85 行的 .dash 颜色块请删除，改由这里接管 */
:root, [data-theme] {
  --main-bg: var(--jm-bg-canvas); --card-bg: var(--jm-bg-surface);
  --side-bg: var(--jm-bg-sunken); --side-bg-2: var(--jm-bg-sunken); --side-hover: var(--jm-bg-hover);
  --side-text: var(--jm-text-1); --side-text-dim: var(--jm-text-3); --side-border: var(--jm-border);
  --text-1: var(--jm-text-1); --text-2: var(--jm-text-2); --text-3: var(--jm-text-3);
  --border-1: var(--jm-border); --border-2: var(--jm-divider);
  --chrome-1: var(--jm-bg-sunken); --chrome-2: var(--jm-border);
  --link: var(--jm-link); --link-hover: var(--jm-link-hover);
  --ok: var(--jm-ok-fg); --warn: var(--jm-warn-fg); --missing: var(--jm-bad-fg);
  --tint-ok-bg: var(--jm-ok-bg); --tint-ok-border: var(--jm-ok-border); --tint-ok-text: var(--jm-ok-fg);
  --tint-info-bg: var(--jm-info-bg); --tint-info-border: var(--jm-info-border); --tint-info-text: var(--jm-info-fg);
  --tint-warn-bg: var(--jm-warn-bg); --tint-warn-border: var(--jm-warn-border); --tint-warn-text: var(--jm-warn-fg);
  --tint-missing-bg: var(--jm-bad-bg); --tint-missing-border: var(--jm-bad-border); --tint-missing-text: var(--jm-bad-fg);
  --brand: var(--jm-brand-solid); --brand-hover: var(--jm-brand-solid-hover); --brand-pressed: var(--jm-brand-solid-active); --brand-soft: var(--jm-brand-soft);
}
.dash {
  --font-sans: var(--jm-font-sans); --font-mono: var(--jm-font-num);
  --bg: var(--jm-bg-canvas); --bg-grad: none; --surface: var(--jm-bg-surface); --surface-2: var(--jm-bg-raised); --surface-glass: var(--jm-bg-surface);
  --border: var(--jm-border); --border-strong: var(--jm-border-strong);
  --text: var(--jm-text-1); --text-muted: var(--jm-text-2); --text-faint: var(--jm-text-3);
  --good: var(--jm-ok-fg); --warn: var(--jm-warn-fg); --bad: var(--jm-bad-fg); --info: var(--jm-info-fg); --idle: var(--jm-idle-fg);
  --chart-grid: var(--jm-chart-grid); --chart-axis: var(--jm-chart-axis);
  --shadow-sm: var(--jm-shadow-1); --shadow-md: var(--jm-shadow-1); --shadow-lg: var(--jm-shadow-3);
  --r-sm: var(--jm-radius-sm); --r-md: var(--jm-radius-md); --r-lg: var(--jm-radius-card); --r-xl: var(--jm-radius-lg);
}