/* 设计 Token — 智能化数据中台。
   全平台只允许用这里定义的变量，禁止在组件里写死色值。
   主题取向：简洁、通透、层级柔和——弱化“框框感”，用留白、阴影和一致圆角建立层次，消除拼接感。 */
:root {
  /* ── 品牌与交互（主蓝与图表一致，保证 UI 与图表同色，不脱节） ── */
  --blue-60: #0f62fe;   /* 主色：可点击、选中态 */
  --blue-70: #0043ce;   /* hover 加深 */
  --blue-10: #e9f1ff;   /* 选中底色（更淡，通透明亮） */
  --blue-20: #d0e2ff;
  --accent-grad: linear-gradient(135deg, #0f62fe, #0b5bd6);

  /* ── 数据语义色：能耗上升=红，下降=绿（工厂惯例，与股市一致） ── */
  --red-60: #da1e28;
  --red-10: #ffe9ec;
  --green-60: #198038;
  --green-10: #e2f6ea;
  --yellow-30: #f1c21b;
  --yellow-10: #fbf3d4;
  --teal-60: #009d9a;
  --orange-60: #ff832b;

  /* ── 中性色（冷调灰，配冷底更协调） ── */
  --gray-100: #161b24;
  --gray-80: #2b3240;
  --gray-70: #525b68;
  --gray-60: #6b7485;
  --gray-50: #8b93a2;
  --gray-40: #a9b0bd;
  --gray-30: #c7cdd6;
  --gray-20: #e3e7ed;
  --gray-10: #f3f5f8;
  --white: #ffffff;

  /* ── 语义映射 ── */
  --bg-page: #eef1f6;   /* 冷调浅底，让白卡片浮起来，弱化“拼贴框” */
  --bg-panel: #ffffff;
  --bg-field: #f5f7fa;
  --bg-hover: #eef2f8;
  --bg-selected: var(--blue-10);
  --text-1: var(--gray-100);
  --text-2: var(--gray-70);
  --text-3: var(--gray-50);
  --text-on-color: #ffffff;
  --border: var(--gray-20);
  --border-strong: var(--gray-30);
  --focus: var(--blue-60);

  /* ── 字体（中文回退系统雅黑，数字保持等宽对齐） ── */
  --font-sans: 'IBM Plex Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Courier New', monospace;

  /* 字阶 */
  --fs-label: 12px;
  --fs-body: 14px;
  --fs-body-lg: 16px;
  --fs-h4: 18px;
  --fs-h3: 20px;
  --fs-h2: 24px;
  --fs-metric: 30px;
  --fs-metric-lg: 38px;

  /* ── 间距（Carbon 8px 栅格） ── */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;

  /* ── 结构 ── */
  --nav-w: 272px;
  --header-h: 56px;

  /* ── 圆角：统一柔和体系，一处定义，全站一致，消除生硬拼接 ── */
  --radius: 14px;        /* 卡片 */
  --radius-card: 14px;
  --radius-sm: 8px;      /* 小块 / 内嵌卡片 */
  --radius-btn: 9px;     /* 按钮 / 输入框 / 标签 */
  --radius-pill: 999px;  /* 胶囊 */

  /* ── 阴影：多层柔光，代替重边框，建立“浮动”层级 ── */
  --shadow-0: 0 1px 2px rgba(15, 30, 50, .04);
  --shadow-1: 0 1px 2px rgba(15, 30, 50, .04), 0 2px 6px rgba(15, 30, 50, .06);
  --shadow-2: 0 2px 4px rgba(15, 30, 50, .05), 0 8px 18px rgba(15, 30, 50, .09);
  --shadow-pop: 0 10px 30px rgba(15, 30, 50, .16);

  /* ── 动效 ── */
  --dur: .18s;
  --dur-1: .28s;
  --ease: cubic-bezier(.25, .6, .3, 1);
}

/* 图表配色序列：冷暖交替，色盲可辨，避免相邻色混淆 */
:root {
  --c1: #0f62fe;
  --c2: #009d9a;
  --c3: #ff832b;
  --c4: #fa4d56;
  --c5: #b28600;
  --c6: #198038;
  --c7: #8a3800;
  --c8: #1192e8;
}