/* ════════════════════════════════════════════════════════════════════
   JMOS 应用层 · 设计令牌 v0.1 + 冻结视觉色 v1.0.0
   色源：design-system/color/generated/tokens.css（palette + light/dark 语义 + jmx 壳色）
   本文件保留：字族/字号/密度/圆角/间距/动效/z、架构分层色、兼容别名、Noto 接线
   勿再把暖灰 canvas / color-mix brand 写回主题块；白标改 brand 阶请走冻结 palette 或 overlay。
   ════════════════════════════════════════════════════════════════════ */

/* Self-hosted Noto Sans SC — pulled in so pages that only link tokens.css get CJK */
@import url('fonts-noto.css');
/* Frozen color v1 — palette + semantic light/dark + jmx shell (no density/type) */
@import url('../../reference/design-system/color/generated/tokens.css');

:root {
  /* 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: 'Noto Sans SC', 'Noto Sans CJK SC', Inter, 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 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;
  /* 间距（规范刻度 2…24 + 32/48；含 6/10/14）*/
  --jm-space-0-5: 2px; --jm-space-1: 4px; --jm-space-1-5: 6px; --jm-space-2: 8px; --jm-space-2-5: 10px; --jm-space-3: 12px; --jm-space-3-5: 14px; --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); }

/* ─── 主题 color-scheme（色值由冻结 tokens 提供，勿在此重写暖灰/color-mix）─── */
:root, [data-theme='light'] { color-scheme: light; }
[data-theme='dark'] { 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);
}