/* ==========================================================================
   一体化电源数字孪生 · 生产级 UI 设计令牌（Design Tokens）
   版本: v1.0
   说明: 所有页面统一引用本文件的 CSS 变量，保证视觉一致性与可维护性。
   使用: <link rel="stylesheet" href="/ui-design/tokens.css">
   ========================================================================== */

:root {
  /* ---------- 品牌色板（电力行业：深空蓝 + 信号青 + 状态色） ---------- */
  --brand-900: #0b1a26;   /* 最深背景 */
  --brand-800: #10242f;   /* 主背景 */
  --brand-700: #16303d;   /* 次级背景 */
  --brand-600: #1d3d4d;   /* 面板背景 */
  --brand-500: #265061;   /* 边框/分隔 */
  --brand-400: #35677c;   /* 边框高亮 */
  --brand-300: #4a839b;   /* 次级文字/图标 */

  --accent-500: #2dd4bf;  /* 主强调（青）— 链接/主按钮 */
  --accent-400: #3ee0c9;  /* 强调高亮 */
  --accent-600: #17a394;  /* 强调按压 */
  --accent-dim: #2dd4bf26;/* 强调背景（15% 透明） */

  /* ---------- 状态色（电力遥信/告警语义） ---------- */
  --ok:      #34d399;  /* 运行/合闸/正常（绿） */
  --ok-dim:  #34d39926;
  --warn:    #fbbf24;  /* 预警/均充（黄） */
  --warn-dim:#fbbf2426;
  --info:    #38bdf8;  /* 浮充/信息（蓝） */
  --info-dim:#38bdf826;
  --danger:  #f87171;  /* 故障/分闸/告警（红） */
  --danger-dim:#f8717126;
  --offline: #64748b;  /* 离线/未知（灰） */
  --offline-dim:#64748b26;

  /* ---------- 文字 ---------- */
  --text-strong: #f1f7fa;  /* 标题/数值 */
  --text-base:   #c3d4dd;  /* 正文 */
  --text-muted:  #8aa5b3;  /* 次要 */
  --text-faint:  #5c7685;  /* 弱化/占位 */

  /* ---------- 字体 ---------- */
  --font-ui: "Inter", "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;
  --font-num: "JetBrains Mono", "Segoe UI", system-ui, sans-serif; /* 数值用等宽，对齐稳定 */

  /* ---------- 字号阶梯 ---------- */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-num:  28px;  /* 大数值 */
  --fs-hero: 34px;  /* 主数值 */

  /* ---------- 间距（4px 基线） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---------- 圆角 ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* ---------- 阴影 ---------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.55);
  --shadow-glow-accent: 0 0 0 1px var(--accent-dim), 0 4px 20px #2dd4bf22;

  /* ---------- 面板/背景分层 ---------- */
  --bg-app:    var(--brand-800);
  --bg-panel:  var(--brand-700);
  --bg-card:   var(--brand-600);
  --bg-raised: var(--brand-500);
  --bg-inset:  #0d1f29;
  --bg-input:  #0e222c;
  --border:    #2a4757;
  --border-strong: var(--brand-400);

  /* ---------- 交互 ---------- */
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --z-panel: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-tooltip: 2000;
  --z-menu: 3000;

  /* ---------- 组件专用 ---------- */
  --topbar-h: 56px;
  --sidebar-w: 280px;
  --inspector-w: 320px;
}

/* 基础重置（各页面共用） */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  color: var(--text-base);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

/* 无障碍：键盘焦点可见 */
:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 滚动条（深色） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-inset); }
::-webkit-scrollbar-thumb { background: var(--brand-500); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-400); }