/* ===================================================================
 * 卫未数智 · tokens.css —— 全站唯一令牌文件
 * -------------------------------------------------------------------
 * 依《卫未数智 · 前端 UI 统一化规范 V2.0》§1 / §10.1 建立。
 *
 * 本文件只含三部分，不得再拆分、不得在其他文件中重复定义 :root：
 *   ① 设计令牌（:root）
 *   ② 全局 reset + 基础元素样式
 *   ③ 令牌别名层（向后兼容既有类名，不引入新视觉）
 *
 * ⚠ 视觉基线铁律：本站既有配色与字号（国网绿 + 莫兰迪紫/橙/灰、
 *    13/14/15/16/17/18/21/22/23px 实测视觉基线）为既定事实，V2 令牌
 *    一律取既有实测值，不得借"规范"之名改变既有观感。
 * =================================================================== */

/* ===================================================================
 * ① 设计令牌
 * =================================================================== */
:root {
  /* ---------- 1.1 色族 · 主 / 深 / 浅底 三档 ---------- */

  /* 国网绿（品牌主色） */
  --c-brand:        #00843D;   /* 国网标准绿 · 主色 */
  --c-brand-2:      #00A651;   /* 国网亮绿 · 悬停 / 强调 */
  --c-brand-dark:   #006B31;   /* 国网深绿 · 按下 / 文字 */
  --c-brand-ink:    #0F3D24;   /* 深墨绿 · 深底 / 标题 */
  --c-brand-tint:   #EAF6EF;   /* 浅绿底 · 标签 / 图标底 */
  --c-brand-line:   #BFE0CD;   /* 浅绿描边 */

  /* 莫兰迪紫 */
  --c-purple:       #7C6B93;
  --c-purple-2:     #9185A6;
  --c-purple-dark:  #64557A;
  --c-purple-tint:  #F1EEF5;
  --c-purple-line:  #D6CFE0;

  /* 莫兰迪橙 */
  --c-orange:       #C4844A;
  --c-orange-2:     #D49A66;
  --c-orange-dark:  #A66C36;
  --c-orange-tint:  #FBF2E8;
  --c-orange-line:  #E9D6BE;

  /* 莫兰迪灰 */
  --c-gray:         #7A8189;
  --c-gray-2:       #949AA1;
  --c-gray-dark:    #5E656C;
  --c-gray-tint:    #F1F3F5;
  --c-gray-tint-2:  #E6E9EC;
  --c-gray-line:    #DDE1E5;

  /* 语义状态色（§1.1 V2 新增；色值收编自站内既有散色，观感不变） */
  --c-ok:           #1F7A4D;   /* 成功 · 收编自 --ok */
  --c-ok-tint:      #E9F6EF;
  --c-warn:         #C4844A;   /* 警告 · 收编自 --warn */
  --c-warn-tint:    #FBF2E8;
  --c-danger:       #B3453F;   /* 危险 · 收编自 --danger */
  --c-danger-tint:  #FBF1F0;
  --c-info:         #1B6FA8;   /* 信息 */
  --c-info-tint:    #EAF3FA;

  /* 中性 */
  --c-bg:           #F4F6F5;
  --c-card:         #FFFFFF;
  --c-text:         #2B3038;
  --c-text-sub:     #6E767F;
  --c-line:         #E4E8E6;
  --c-line-2:       #CFD6D2;

  /* 深色栏 / 面包屑专用（深墨绿，替代早期深蓝） */
  --c-bar:          #0F3D24;
  --c-bar-2:        #14512F;

  /* 风险等级专用色（安全行业告示牌体系，仅限风险可视化模块使用） */
  --c-risk-red:     #A72E2F;
  --c-risk-orange:  #E06A00;
  --c-risk-yellow:  #F5A800;
  --c-risk-blue:    #004F7C;
  --c-risk-green:   #009944;

  /* ---------- 1.2 字号阶梯 ----------
   * ⚠ 本站既有视觉基线为 13/14/15/16/17/18/21/22/23px，经实测确认。
   *   为保证"显示效果与原来一致"，令牌一律取实测值。
   *   如需收敛档位，必须连同各页面字号一并复核，不得单向改令牌。 */
  --fs-13:  13px;   /* 极小辅助 · 元信息 · 抽屉分区标题 */
  --fs-14:  14px;   /* 辅助文字 · 徽标 · 按钮 · 表格 */
  --fs-15:  15px;   /* 卡片正文 · 列表项 */
  --fs-16:  16px;   /* 正文基准 · 子链 · 输入框 */
  --fs-17:  17px;   /* 二级标题 · 模态主标题 */
  --fs-18:  18px;   /* 卡片标题 */
  --fs-21:  21px;   /* 页首标题小屏态 */
  --fs-22:  22px;   /* 面板内标题 */
  --fs-23:  23px;   /* 图标容器内 emoji */
  --fs-26:  26px;   /* 区块标题（emp-head h2）小屏态 */
  --fs-28:  28px;   /* 区块标题标准态 */
  --fs-30:  30px;   /* 大标题 */
  --fs-34:  34px;   /* 大标题 · 页首主标题 */
  --fs-40:  40px;   /* 页首主标题宽屏态 */

  /* ---------- 1.3 行高 ---------- */
  --lh-body:  1.95;   /* 正文段落（中文长文） */
  --lh-title: 1.3;    /* 标题 */
  --lh-tight: 1.6;    /* 按钮 / 徽标 / 表格单元格 */

  /* ---------- 1.4 间距阶梯（§1.4 V2 新增） ---------- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-7:  32px;  --sp-8:  40px;
  --sp-9:  48px;  --sp-10: 64px;

  /* ---------- 1.5 圆角 / 控件高度 / 容器 ----------
   * 圆角沿用站内既有四档（8/10/12/16），另补齐 V2 的 pill 档。 */
  --r-xs:    8px;    --r-sm:   10px;  --r-md:  12px;
  --r-lg:    16px;   --r-pill: 999px;

  --ctl-sm:  32px;   --ctl-md: 40px;  --ctl-lg: 48px;

  --container: 1280px;      /* 内容区标准宽度（首页卡片网格用） */
  --gutter:    20px;        /* 页面横向留白 */
  --grid-min:  260px;       /* 卡片网格最小列宽 */
  --grid-gap:  20px;        /* 卡片网格间距 */

  /* ---------- 1.5b 控制台骨架尺寸（V3 §2.0；V3.3 §2.0.7 全宽化） ----------
   * V3.3 起轨道不再锁死 1880px，而是**铺满可用宽度、两侧各留 20px**，
   * 使 16:9（1920 / 2560 等）显示器获得最大可用宽度。
   * 两侧留白由 body 的 --edge padding 提供（避免 100vw 含滚动条导致横向溢出），
   * 轨道本身取 100% 并用 --shell-max 作超大屏保护。 */
  --edge:        20px;     /* 页面两侧留白（需求 4） */
  --shell:       100%;     /* 页面总宽（唯一设计基准，铺满 body 内容盒） */
  --shell-max:   2400px;   /* 超大屏保护上限 */
  --side-w:      272px;    /* 左侧功能栏标准宽（V3.3 加宽，最长条目单行显示） */
  --side-w-sm:   232px;    /* 左侧功能栏收窄态 */
  --side-w-icon: 64px;     /* 左侧功能栏图标态 */
  --top-h:       56px;     /* 顶栏**内容行**高（.vw-top-in 的 min-height） */
  /* ★ V3.5 顶栏总高（含条带上下内边距）
   * 顶栏 = `.vw-top{padding:var(--top-bar-pad) 0}` 包着 `.vw-top-in{min-height:--top-h}`，
   * 故「顶栏实际占位」= --top-h + 2 × --top-bar-pad = 76px。
   * ⚠ 所有「视口减去顶栏」的骨架高度、以及 `.app-side` 的 sticky/fixed top
   *   **必须用 --top-total**，用 --top-h 会让骨架比视口高 20px（页面凭空多出
   *   一段可滚动区域）、移动端抽屉顶边被顶栏压住 20px。 */
  --top-bar-pad: 10px;     /* 顶栏条带上下内边距（.vw-top padding 纵向值） */
  --top-total:   calc(var(--top-h) + 2 * var(--top-bar-pad));   /* = 76px */
  --main-pad:    var(--sp-6);  /* 内容栏内边距 */

  /* ---------- 1.5c 表单控件统一（V3 §3.7 新增） ----------
   * input / select / textarea 三者外观必须完全一致，仅 select 多一个
   * 统一 chevron。禁止在页面为 select 单独设 font-weight / color。 */
  --h-ctl:   42px;         /* 控件统一高度（触摸设备 ≥44px 由媒体查询覆盖） */
  --r-ctl:   10px;         /* 控件统一圆角（圆角矩形） */
  --bd-ctl:  1.5px;        /* 控件统一边框宽 */
  --pad-ctl: var(--sp-3);  /* 控件水平内边距 */
  --ico-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236E767F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ---------- 1.6 阴影 / 层级 / 动效 ---------- */
  --shadow-1: 0 2px 10px rgba(15, 61, 36, .06);   /* 静置卡片 */
  --shadow-2: 0 6px 20px rgba(15, 61, 36, .10);   /* hover 卡片 / 下拉 */
  --shadow-3: 0 12px 40px rgba(15, 61, 36, .18);  /* 模态 / 抽屉 / Toast */

  --z-sticky: 100;    /* 顶部系统条 */
  --z-side:   199;    /* 后台侧栏 / 左侧功能栏 */
  --z-top:    200;    /* V3 控制台顶栏（须高于侧栏） */
  --z-menu:   300;    /* V3 顶栏用户弹出菜单（须高于顶栏） */
  --z-drawer: 800;    /* 移动端抽屉 */
  --z-modal:  1000;   /* 模态框 */
  --z-toast:  1200;   /* 轻提示 */
  --z-busy:   1300;   /* 全屏运行遮罩（最高） */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .16s;   --dur: .22s;   --dur-slow: .28s;

  /* ---------- 断点令牌（§7.1 唯一 9 档，见文末 @custom-media 注释） ----------
   * 480 / 560 / 750 / 900 / 992 / 1280 / 1600 —— 仅此固定几档，禁止新增。
   * V3 起 ui_lint.py 直接解析本组 --bp-* 作为断点判定依据。 */
  --bp-480:  480px;   --bp-560:  560px;   --bp-750:  750px;
  --bp-900:  900px;   --bp-992:  992px;   --bp-1280: 1280px;
  --bp-1600: 1600px;  --bp-1601: 1601px;  --bp-1921: 1921px;
}

/* ===================================================================
 * ② 全局 reset + 基础元素
 * =================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", -apple-system, "Helvetica Neue", sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 所有表单控件继承页面字体，杜绝输入框各写一套 */
input, button, select, textarea { font: inherit; color: inherit; line-height: inherit; }
a { color: var(--c-brand-dark); text-decoration: none; }
/* 链接悬停不加重下划线：已有动态浅灰背景（:hover）做状态指示，避免双重提示（V2 §3/§5） */
a:hover { text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

/* 全局焦点可见（§7.5 无障碍基线，V2 新增） */
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--r-xs); }

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    /* SPEC-EXCEPT: 减弱动效 */
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    /* SPEC-EXCEPT: 减弱动效 */
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* 滚动条 */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #C3CDD8; border-radius: var(--r-xs); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 容器 ---------- */
/* V3.3：全站统一「铺满视口、两侧各留 --edge(20px)」的轨道（--shell）。
   首页门户与所有子页共用同一左右边缘，16:9 显示器下宽度最大化；
   --shell-max 仅在超宽屏生效，防止内容过度拉伸。 */
.wrap,
.vw-wrap { width: 100%; max-width: min(var(--shell), var(--shell-max)); margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); }
/* 门户首页卡片网格内容区仍按阅读舒适宽度收敛，与顶栏轨道区分 */
main.wrap { max-width: min(var(--shell), var(--shell-max)); }
main.wrap > .empower, main.wrap > .module-panel { max-width: var(--container); margin-left: auto; margin-right: auto; }

/* ===================================================================
 * ③ 令牌别名层（向后兼容）
 * -------------------------------------------------------------------
 * 既有页面 / 组件引用的 --sg-green-* / --mo-* / --brand / --line … 等
 * 全部指向上面同一套令牌，做到「一处改、全站变」，且不改动任何既有观感。
 * =================================================================== */
:root {
  /* 国网绿 */
  --sg-green: var(--c-brand);        --sg-green-2: var(--c-brand-2);
  --sg-green-3: var(--c-brand-dark); --sg-green-ink: var(--c-brand-ink);
  --sg-green-tint: var(--c-brand-tint); --sg-green-line: var(--c-brand-line);

  /* 莫兰迪紫 */
  --mo-purple: var(--c-purple);        --mo-purple-2: var(--c-purple-2);
  --mo-purple-3: var(--c-purple-dark); --mo-purple-tint: var(--c-purple-tint);
  --mo-purple-line: var(--c-purple-line);

  /* 莫兰迪橙 */
  --mo-orange: var(--c-orange);        --mo-orange-2: var(--c-orange-2);
  --mo-orange-3: var(--c-orange-dark); --mo-orange-tint: var(--c-orange-tint);
  --mo-orange-line: var(--c-orange-line);

  /* 莫兰迪灰 */
  --mo-gray: var(--c-gray);        --mo-gray-2: var(--c-gray-2);
  --mo-gray-3: var(--c-gray-dark); --mo-gray-tint: var(--c-gray-tint);
  --mo-gray-tint2: var(--c-gray-tint-2); --mo-gray-line: var(--c-gray-line);

  /* 语义 / 中性 */
  --brand: var(--c-brand);   --brand2: var(--c-brand-dark);  --brand3: var(--c-brand-2);
  --accent: var(--c-orange);
  --ok: var(--c-ok);  --warn: var(--c-warn);  --danger: var(--c-danger);  --blue: var(--c-info);
  --bg: var(--c-bg);  --card: var(--c-card);  --text: var(--c-text);
  --muted: var(--c-text-sub);  --line: var(--c-line);  --line2: var(--c-line-2);
  --bar: var(--c-bar);  --bar2: var(--c-bar-2);
  --radius: var(--r-sm);  --shadow: var(--shadow-1);  --shadow-lg: var(--shadow-3);

  /* 字号别名 */
  --fs-body: var(--fs-16);   --fs-small: var(--fs-14);  --fs-mini: var(--fs-13);
  --fs-h1: var(--fs-34);     --fs-h2: var(--fs-30);     --fs-h3: var(--fs-26);
  --fs-h4: var(--fs-18);

  /* 容器别名 */
  --wrap: var(--container);
}

/* ===================================================================
 * 容器响应式（§7.1 断点矩阵）
 * -------------------------------------------------------------------
 * V3.3：轨道已改为「铺满视口 - 两侧各 --edge」，故 --edge 只需按屏宽
 *   微调（窄屏留白收窄），不再需要 container/gutter 的双重收敛。
 * =================================================================== */
@media (max-width: 1280px) { :root { --edge: 20px; } }
@media (max-width: 992px)  { :root { --edge: 16px; --container: 100%; } }
@media (max-width: 750px)  { :root { --edge: 14px; } }
@media (max-width: 560px)  { :root { --edge: 12px; } }
@media (min-width: 1601px) { :root { --edge: 20px; } }
@media (min-width: 1921px) { :root { --edge: 24px; --container: 1840px; } }

/* ===================================================================
 * 字号降档（保留既有实测基线，仅随断点微调）
 * =================================================================== */
@media (max-width: 1600px) { :root { --fs-h1: 34px; --fs-h2: 28px; --fs-h3: 26px; } }
@media (max-width: 1280px) { :root { --fs-h1: 30px; --fs-h2: 26px; --fs-h3: 24px; } }
@media (max-width: 992px)  { :root { --fs-h1: 26px; --fs-h2: 24px; --fs-h3: 22px; } }
@media (max-width: 750px)  { :root { --fs-h1: 24px; --fs-h2: 22px; --fs-h3: 20px; } }

/* ===================================================================
 * 通用工具类
 * =================================================================== */
.mono   { font-family: Consolas, "Courier New", monospace; }
.small  { font-size: var(--fs-14); }
.muted  { color: var(--c-text-sub); }
.bold   { font-weight: 700; }
.nowrap { white-space: nowrap; }
.hide   { display: none !important; }   /* SPEC-EXCEPT: 工具类 */
.txt-ok     { color: var(--c-ok); }
.txt-bad    { color: var(--c-danger); }
.txt-warn   { color: var(--c-warn); }
.txt-purple { color: var(--c-purple-dark); }
.center { text-align: center; }
.spacer { flex: 1; }
.row    { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.mt8  { margin-top: var(--sp-2); }
.mt14 { margin-top: 14px; }
.mb10 { margin-bottom: var(--sp-2); }