/* ============================================================================
 * brand.css v2 — SpaceMV 企业 VI · 深空星球风(深) / 只此青绿纸感(浅) 双主题令牌真源
 *              (Single Source of Truth，与 spacemv-planet 官网 VI 同源)
 * ----------------------------------------------------------------------------
 * 全 Portal 页面通过 <link rel="stylesheet" href="/css/brand.css"> 引用本文件，
 * 不再各自内联 :root / html.light。品牌值只存在这一处。
 *
 * 深色为默认主题（深空星球风：深空底 + 青绿高光文字 + 泥金主强调）；
 * html.light 覆盖为浅色（青绿纸感编辑风：纸色底 + 白卡 + 墨青标题 + 朱红点睛）。
 * 切换由 index.html 的 JS 在 <html> 上加/去 .light 类驱动
 * （prefers-color-scheme 初始判定）。
 *
 * 命名兼容说明：全部 --mm-* 变量名与 RGB 镜像（--mm-*-rgb）命名保持 v1 不变，
 * 仅替换取值；新增 --mm-title / --mm-gold / --mm-cinnabar / 字体 / 字号令牌。
 *
 * 注意：var(--mm-*) 只在 CSS 属性上下文生效，不适用于 Cytoscape 样式表 JSON、
 *       SVG 表现属性 (stroke=/fill=)、或传给 JS 图形 API 的颜色字面量 ——
 *       那些场景请用 index.html 内 buildMM() 运行时合成的 MM.* 对象
 *       （其值由本文件的 --mm-*-rgb 令牌实时读取，随主题切换联动）。
 * ========================================================================== */

:root {
  /* —— 表面层次（深空星球风）—— */
  --mm-bg: #060B14;        /* space-deep */
  --mm-surface: #0A1A2F;   /* space-dark */
  --mm-card: #10233A;      /* dark→teal 间层 */
  --mm-border: #1E4258;    /* ≈space-teal/40 实色 */

  /* —— 主色 / 强调 —— */
  --mm-primary: #C9A063;   /* 泥金 = 深空唯一强调（主操作/激活态） */
  --mm-accent: #2A827E;    /* space-mid2 青绿亮 */

  /* —— 语义色 —— */
  --mm-green: #3FB97F;     /* 成功（青绿调） */
  --mm-red: #E05252;       /* 危险（朱红系柔化） */
  --mm-yellow: #D9A441;    /* 警告（琥珀近金） */
  --mm-orange: #D97B3F;
  --mm-purple: #7FA8A0;    /* 类目色：青绿灰（去紫） */

  /* —— 文字三档 + 标题 —— */
  --mm-text: #D3FFFE;          /* space-hi2 */
  --mm-text-secondary: #ADEFED;/* space-hi */
  --mm-text-muted: #6FA8A5;    /* ≈hi/55 */
  --mm-title: #D3FFFE;         /* 标题色 */

  /* —— 点缀纪律用 —— */
  --mm-gold: #C9A063;      /* 泥金 */
  --mm-cinnabar: #BF362B;  /* 朱红 */

  /* —— RGB 镜像（供 rgba() 半透明叠加与 JS buildMM() 运行时读取）—— */
  --mm-bg-rgb: 6, 11, 20;
  --mm-surface-rgb: 10, 26, 47;
  --mm-card-rgb: 16, 35, 58;
  --mm-border-rgb: 30, 66, 88;
  --mm-hover-rgb: 22, 52, 74;
  --mm-primary-rgb: 201, 160, 99;
  --mm-accent-rgb: 42, 130, 126;
  --mm-green-rgb: 63, 185, 127;
  --mm-red-rgb: 224, 82, 82;
  --mm-yellow-rgb: 217, 164, 65;
  --mm-orange-rgb: 217, 123, 63;
  --mm-purple-rgb: 127, 168, 160;
  --mm-text-rgb: 211, 255, 254;
  --mm-text-secondary-rgb: 173, 239, 237;
  --mm-text-muted-rgb: 111, 168, 165;
  --mm-title-rgb: 211, 255, 254;
  --mm-gold-rgb: 201, 160, 99;
  --mm-cinnabar-rgb: 191, 54, 43;

  /* —— 字体系统（内网无外网时回退本地宋体/苹方栈，不依赖 CDN 可用性）—— */
  --mm-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --mm-font-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --mm-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Noto Sans SC", monospace;

  /* —— 字号令牌（七档；9px 一律升 10px）—— */
  --mm-fs-10: 10px;
  --mm-fs-12: 12px;
  --mm-fs-13: 13px;
  --mm-fs-14: 14px;
  --mm-fs-16: 16px;
  --mm-fs-20: 20px;
  --mm-fs-24: 24px;

  /* —— 布局 token（主题无关）—— */
  --header-h: 52px;
  --nav-h: 46px;
}

html.light {
  /* —— 表面层次（只此青绿纸感风）—— */
  --mm-bg: #FAF8F2;        /* paper-base */
  --mm-surface: #FFFFFF;   /* 白卡 */
  --mm-card: #F5F2E9;      /* paper-deep 派生 */
  --mm-border: #E4E0D4;    /* paper-line */

  --mm-primary: #16295E;   /* paper-ink 墨青 */
  --mm-accent: #B08D57;    /* paper-gold 赤金 */

  --mm-green: #1F8A5B;
  --mm-red: #BF362B;       /* paper-cinnabar 朱红 */
  --mm-yellow: #A8802F;    /* paper-amber */
  --mm-orange: #C2632A;
  --mm-purple: #4E6E6A;    /* 青绿灰 */

  --mm-text: #2A2F3A;          /* paper-body */
  --mm-text-secondary: #4A5060;
  --mm-text-muted: #8A8F9C;    /* paper-sub */
  --mm-title: #16295E;         /* 标题墨青 */

  --mm-gold: #B08D57;      /* 赤金 */
  --mm-cinnabar: #BF362B;  /* 朱红 */

  --mm-bg-rgb: 250, 248, 242;
  --mm-surface-rgb: 255, 255, 255;
  --mm-card-rgb: 245, 242, 233;
  --mm-border-rgb: 228, 224, 212;
  --mm-hover-rgb: 236, 231, 218;
  --mm-primary-rgb: 22, 41, 94;
  --mm-accent-rgb: 176, 141, 87;
  --mm-green-rgb: 31, 138, 91;
  --mm-red-rgb: 191, 54, 43;
  --mm-yellow-rgb: 168, 128, 47;
  --mm-orange-rgb: 194, 99, 42;
  --mm-purple-rgb: 78, 110, 106;
  --mm-text-rgb: 42, 47, 58;
  --mm-text-secondary-rgb: 74, 80, 96;
  --mm-text-muted-rgb: 138, 143, 156;
  --mm-title-rgb: 22, 41, 94;
  --mm-gold-rgb: 176, 141, 87;
  --mm-cinnabar-rgb: 191, 54, 43;
}

/* ═══════════ 全局排版基座（全部页面继承） ═══════════ */
body {
  font-family: var(--mm-font-sans);
  line-height: 1.75;
}

/* 标题走衬线（中文宋体感），西文/数字由字体栈自然回退 */
h1, h2, h3, h4 {
  font-family: var(--mm-font-serif);
  letter-spacing: -0.01em;
}

/* 中文禁斜体 */
em, i { font-style: normal; }

/* 选区：青绿 18% */
::selection { background: rgba(22, 84, 81, 0.18); }

/* 统一键盘焦点描边（全部页面继承） */
:focus-visible {
  outline: 2px solid var(--mm-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* 滚动条配色（随主题令牌走） */
* { scrollbar-width: thin; scrollbar-color: var(--mm-border) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--mm-border); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--mm-text-muted-rgb), 0.6); }

/* ═══════════ 浅色模式补丁（收编自 index.html / login.html 页内 <style>） ═══════════ */
/* —— 收编自 index.html —— */
html.light .card-icon { opacity: 0.06; }
html.light .status-dot.online { box-shadow: 0 0 4px rgba(var(--mm-green-rgb), 0.3); }
html.light .status-dot.offline { box-shadow: 0 0 4px rgba(var(--mm-red-rgb), 0.3); }
html.light header h1 { -webkit-text-fill-color: var(--mm-primary); }
html.light .btn-logout:hover { color: var(--mm-red); border-color: var(--mm-red); }
/* —— 收编自 login.html —— */
html.light .login-box h1 { -webkit-text-fill-color: transparent; }

/* ═══════════ 图表类目色板（VI 派生 8 色，供 renderRoutes/全链路拓扑/GROUP_STYLE 类目着色）═══════════ */
:root {
  --mm-cat-gold: #C9A063;      /* 泥金 */
  --mm-cat-teal: #2A827E;      /* 青绿 */
  --mm-cat-hi: #ADEFED;        /* 高光（浅色下换深青绿保证对比度） */
  --mm-cat-green: #2E6E5E;     /* 石绿 */
  --mm-cat-cinnabar: #BF362B;  /* 朱红 */
  --mm-cat-amber: #A8802F;     /* 琥珀 */
  --mm-cat-bronze: #B08D57;    /* 赤金 */
  --mm-cat-gray: #8A8F9C;      /* 灰 */
}
html.light { --mm-cat-hi: #165451; }
