/* ==========================================================================
   tokens.css — 设计令牌（唯一允许出现"魔法数字"的地方）
   规则：其余 CSS 一律引用 var(--*)，不写字面颜色/尺寸
   ========================================================================== */

:root {
  /* ---------- 色彩：中性（对齐原型 V2 的 #2c2c2a/#5f5e5a/#888780/#f5f6f8/#e5e5e5）---------- */
  --c-bg:            #f5f6f8;   /* 页面底色 */
  --c-surface:       #ffffff;   /* 卡片/面板 */
  --c-surface-2:     #fafbfc;   /* 次级面板（表头、hover 底） */
  --c-border:        #e5e5e5;   /* 主分割线 */
  --c-border-2:      #f2f2f2;   /* 行分隔线（原型 td 下边框） */
  --c-border-strong: #d9d7cf;   /* 输入框边框 */
  --c-text:          #2c2c2a;   /* 主文本 */
  --c-text-2:        #5f5e5a;   /* 次要文本 */
  --c-text-3:        #888780;   /* 弱化文本 / 占位 */
  --c-text-invert:   #ffffff;
  --c-text-faint:    #b4b2a9;   /* 页脚级最弱文本 */

  /* ---------- 色彩：顶栏 / 标签栏（对齐原型 V2 .topbar / .tabs）---------- */
  --c-topbar-bg:     #0C447C;               /* 顶栏底色（原型的品牌深蓝） */
  --c-topbar-text:   #ffffff;
  --c-topbar-dim:    rgba(255,255,255,.78);
  --c-topbar-line:   rgba(255,255,255,.16);
  --c-topbar-fill:   rgba(255,255,255,.15);  /* 顶栏胶囊（env / 告警铃）底 */
  --c-tab-text:      #5f5e5a;
  --c-tab-active:    #185FA5;               /* 选中态下划线（原型 .tabs a.on） */
  --c-toast-bg:      #2c2c2a;               /* Toast 底色（原 --c-nav-bg） */

  /* ---------- 色彩：语义（主色/告警三色直接搬原型 V2，勿改）---------- */
  --c-primary:       #185FA5;   /* 主色 / 交互（原型 on 态） */
  --c-primary-dark:  #0C447C;   /* 深主色（顶栏 / note 文字） */
  --c-primary-soft:  #E6F1FB;   /* 原型 .note 底 */
  --c-ok:            #3B6D11;   /* 正常（原型 .ok / .g） */
  --c-ok-soft:       #e6f5ec;
  --c-warn:          #BA7517;   /* 警告（原型 .p1） */
  --c-warn-soft:     #FAEEDA;   /* 原型 .warnbox 底 */
  --c-warn-2:        #EF9F27;   /* 状态点黄（原型 .y） */
  --c-danger:        #A32D2D;   /* 严重 / 告警（原型 .p0 / .r / 告警铃） */
  --c-danger-soft:   #fdecea;
  --c-neutral:       #888780;   /* P2 / 中性标签（原型 .p2） */
  --c-purple:        #72243E;   /* 原型 .demo 文字色 */
  --c-purple-soft:   #FBEAF0;   /* 原型 .demo 底 */

  /* ---------- 字体 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
               "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  26px;

  --lh-tight: 1.3;
  --lh-base:  1.6;

  /* ---------- 间距（4 的倍数）---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;

  /* ---------- 圆角 ---------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---------- 阴影 ---------- */
  --sh-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-md: 0 2px 8px rgba(16, 24, 40, .08);
  --sh-lg: 0 8px 24px rgba(16, 24, 40, .12);

  /* ---------- 层级 ---------- */
  --z-nav:      100;
  --z-topbar:   200;
  --z-pagehead: 150;
  --z-thead:    140;
  --z-modal:    900;
  --z-toast:    950;

  /* ---------- 吸顶高度（四层吸顶的唯一来源）---------- */
  --topbar-h: 56px;   /* 第 1 层 TopBar（原型固定 56px） */
  --tabs-h:   42px;   /* 第 2 层 标签栏（原型 .tabs a: 11px padding + 2px 下划线） */
  --phh:      56px;   /* 第 3 层 PageHead 高度，JS 实测后写回 */
  --thh:      40px;   /* 第 4 层 表头高度 */

  /* ---------- 布局宽度 ---------- */
  /* --content-max：内容区最大宽度。
     2026-09-27 潘总要求「页面宽度全部自适应」→ 由 1240px（对齐原型 .page 居中限宽）
     放开为 100%（完全撑满）。
     理由：这是长时间盯着看的数据面板，屏幕宽时两侧留白只会把表格的关键列挤成横向滚动。
     若要恢复居中限宽，把这里改回具体像素即可 —— .content__inner 的 max-width 跟着它走。 */
  --content-max: 100%;
}