/* ============================================================================
   士恒钣金 · 设计系统（唯一真源 / single source of truth）
   ----------------------------------------------------------------------------
   三处界面都用这一份：
     · App（app/index.html）      —— 手工内联（单文件打包要求），tools/vi_check.py 逐值校验
     · 管理后台（server/admin.py）—— 启动时读取本文件并内联
     · 下载页（site/index.tpl.html）—— tools/site_build.py 注入
   CI 会跑 tools/vi_check.py：三处取值不一致、或对比度不达标，直接失败。

   ── 两层颜色，别混用 ────────────────────────────────────────────────────────
   第一层「品牌色」是 VI 原值，用于品牌露出、大色块、图形。它们按**识别度**挑的，
   不是按小字可读性挑的 —— 所以不做正文颜色。
   第二层「语义色」是界面真正用的颜色，每一个都过了 WCAG AA：
     正文文字 ≥ 4.5:1，大字与图形 ≥ 3:1。
     --ink-3 就是踩过这个坑：原来直接用工业灰 #8CA0B3 当说明文字，白底只有 2.69:1。
   ============================================================================ */

/* ── 1. 品牌色（VI 原值，别改）──────────────────────────────────────────── */
:root{
  --vi-blue:#0066FF;   /* 品牌蓝 */
  --vi-cyan:#00B0FF;   /* 科技蓝 */
  --vi-navy:#0B2E66;   /* 深海蓝 */
  --vi-gray:#8CA0B3;   /* 工业灰（图形用；当文字不达标，见 --ink-3） */
  --vi-mist:#E8F1FA;   /* 浅灰 */
}

/* ── 2. 语义色 · 浅色 ───────────────────────────────────────────────────── */
:root{
  /* 面 */
  --ground:#E8F1FA; --panel:#FFFFFF; --panel-2:#F3F8FD; --sunk:#DCE8F5;
  /* 字：--ink 主 / --ink-2 次 / --ink-3 辅助，三档全部 ≥4.5:1 */
  --ink:#0B2E66;    --ink-2:#4A5F7A; --ink-3:#546A80;
  /* 线 */
  --rule:#D3E0EE;   --rule-2:#E6EEF7; --grid:#DDE8F4; --control-border:#73879D;
  /* 行动色：--accent 用于填充与白字底；--accent-ink 专用于「把品牌蓝当文字」的场合；
     --on-accent 是「铺满 accent 的按钮上那行字」的颜色（深色下必须反过来用深字，
     白字在亮蓝上只有 3.31:1，这是最常见的深色模式翻车点） */
  --accent:#0066FF; --accent-ink:#005DEA; --accent-2:#008CCC; --accent-soft:#E2EEFF;
  --accent-d:#0052CC;   /* 按下/激活态 */
  --on-accent:#FFFFFF;
  /* 图形描边（细线要看得见，比科技蓝深一档） */
  --fig:#0066FF;    --fig-2:#008CCC;
  /* 语义三色：填充/大字用 -good/-warn/-bad，小字用 -ink 后缀，淡底用 -soft 后缀；
     铺满 -good 的按钮上的字用 -on-good（深色下必须反过来用深字） */
  --warn:#D97706;   --warn-ink:#A55A05;  --warn-soft:#FDF1DF;
  --good:#117655;   --good-ink:#117655;  --good-soft:#E4F4EE;  --on-good:#FFFFFF;
  --bad:#C62828;    --bad-ink:#C62828;   --bad-soft:#FDECEC;
  --mark:#0B2E66;   --mark-soft:#DDEBFF;
  --fill:rgba(0,102,255,.10); --soliddk:#0050CC;
  --bar-a:#0B2E66;  --bar-b:#0A56D6;  --on-bar:#FFFFFF; --on-bar-2:#B7C6DB;
  --shadow-1:0 1px 2px rgba(11,46,102,.06);
  --shadow-2:0 1px 2px rgba(11,46,102,.05), 0 10px 26px -14px rgba(11,46,102,.28);
  --focus:#005DEA;
  /* —— 全局质感（2026-10-02，照 ChunUI 的微拟物手法做的本地化）—————————————
     一个品牌色 + 灰阶，彩色只留给品牌动作色和真状态；层级靠"顶部 1px 内高光 + 三级软阴影"撑。
     ① --hi：控件顶部的内高光，缺了就是一块死板色块；② --sh-e1/e2/e3：控件 / 卡片 / 浮层；
     ③ 按下时下沉 1px 并撤掉外阴影，手上要有反馈。 */
  --hi:inset 0 1px 0 rgba(255,255,255,.55);
  --sh-e1:0 1px 2px rgba(11,46,102,.10);
  --sh-e2:0 1px 2px rgba(11,46,102,.05),0 8px 22px -14px rgba(11,46,102,.30);
  --sh-e3:0 2px 6px rgba(11,46,102,.08),0 22px 48px -24px rgba(11,46,102,.44);
  --r-ctl:12px;                     /* 控件圆角（约等于高度×0.38；不做胶囊） */
  /* 宣传官网的沉浸式工业场景。固定深色，不随系统主题翻转。 */
  --mkt-bg:#050A12; --mkt-bg-2:#0A1830; --mkt-panel:#0E1D34;
  --mkt-ink:#F4F7FB; --mkt-muted:#A8B7CC; --mkt-line:#263A57;
  --mkt-glow:rgba(0,102,255,.22); --mkt-cyan-glow:rgba(0,102,255,.12);
}

/* ── 3. 语义色 · 深色（跟随系统，可被 data-theme 覆盖）──────────────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#070B0E; --panel:#151C24; --panel-2:#1B2530; --sunk:#0E141B;
    --ink:#F1F5FA;    --ink-2:#B0BCC9; --ink-3:#8E9BAA;
    --rule:#33404D;   --rule-2:#26323E; --grid:#1B2834; --control-border:#647991;
    --accent:#1F6FE5; --accent-ink:#6BA6FF; --accent-2:#4A91F7; --accent-soft:#0E274A;
    --accent-d:#1558BD;
    --on-accent:#FFFFFF;
    --fig:#5A9BFF;    --fig-2:#74B5FF;
    --warn:#FFB547;   --warn-ink:#FFC46B;  --warn-soft:#33260F;
    --good:#4CC99A;   --good-ink:#4CC99A;  --good-soft:#0F2A22;  --on-good:#06231B;
    --bad:#FF8A80;    --bad-ink:#FF8A80;   --bad-soft:#3A1C22;
    --mark:#1F6FE5;   --mark-soft:#132B4D;
    --fill:rgba(31,111,229,.16); --soliddk:#75AAFF;
    --bar-a:#0A1730;  --bar-b:#0A1730;  --on-bar:#FFFFFF; --on-bar-2:#B7C6DB;
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.75);
    --focus:#8CC4FF;
    --hi:inset 0 1px 0 rgba(255,255,255,.07);
    --sh-e1:0 1px 2px rgba(0,0,0,.45);
    --sh-e2:0 1px 2px rgba(0,0,0,.40),0 10px 24px -16px rgba(0,0,0,.75);
    --sh-e3:0 2px 6px rgba(0,0,0,.50),0 24px 50px -26px rgba(0,0,0,.85);
    --r-ctl:12px;
  }
}
:root[data-theme="dark"]{
  --ground:#070B0E; --panel:#151C24; --panel-2:#1B2530; --sunk:#0E141B;
  --ink:#F1F5FA;    --ink-2:#B0BCC9; --ink-3:#8E9BAA;
  --rule:#33404D;   --rule-2:#26323E; --grid:#1B2834; --control-border:#647991;
  --accent:#1F6FE5; --accent-ink:#6BA6FF; --accent-2:#4A91F7; --accent-soft:#0E274A;
  --accent-d:#1558BD;
  --on-accent:#FFFFFF;
  --fig:#5A9BFF;    --fig-2:#74B5FF;
  --warn:#FFB547;   --warn-ink:#FFC46B;  --warn-soft:#33260F;
  --good:#4CC99A;   --good-ink:#4CC99A;  --good-soft:#0F2A22;  --on-good:#06231B;
  --bad:#FF8A80;    --bad-ink:#FF8A80;   --bad-soft:#3A1C22;
  --mark:#1F6FE5;   --mark-soft:#132B4D;
  --fill:rgba(31,111,229,.16); --soliddk:#75AAFF;
  --bar-a:#0A1730;  --bar-b:#0A1730;  --on-bar:#FFFFFF; --on-bar-2:#B7C6DB;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.75);
  --focus:#8CC4FF;
    --hi:inset 0 1px 0 rgba(255,255,255,.07);
    --sh-e1:0 1px 2px rgba(0,0,0,.45);
    --sh-e2:0 1px 2px rgba(0,0,0,.40),0 10px 24px -16px rgba(0,0,0,.75);
    --sh-e3:0 2px 6px rgba(0,0,0,.50),0 24px 50px -26px rgba(0,0,0,.85);
    --r-ctl:12px;
}

/* ── 4. 字体与尺度 ──────────────────────────────────────────────────────── */
:root{
  --f-cn:"Source Han Sans CN","Source Han Sans SC","Noto Sans CJK SC","Noto Sans SC",
         "PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",system-ui,sans-serif;
  --f-ui:var(--f-cn);
  /* 数字用等宽数位：尺寸表、料单要上下对齐，跳动会看错行 */
  --f-num:"Roboto","DIN Alternate","Helvetica Neue",ui-monospace,var(--f-cn);
  --base:17px; --gut:14px; --tap:48px;         /* --tap：最小点击区边长 */
  /* 小于正文的字号只许用这五档（2026-09-22：App 里原来有 20 多种 .6x/.7x/.8x rem，看不出层级）。
     --fs-xs 就是规范里的最小字号 .68rem，别再往下写。 */
  --fs-xs:.68rem; --fs-sm:.76rem; --fs-md:.84rem; --fs-lg:.92rem; --fs-body:1rem;
}
/* 大字模式：现场看图纸的师傅把字号调大，点击区跟着长 */
:root[data-big="1"]{ --base:20px; --tap:54px; font-size:18px; }

/* 圆角 / 间距 / 动效 */
:root{
  --r-sm:10px; --r:14px; --r-lg:18px; --r-pill:99px;
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:14px; --sp-6:18px; --sp-7:22px; --sp-8:28px;
  --dur:.18s; --ease:cubic-bezier(.2,.7,.3,1);
}

/* ── 5. 基础件：数字对齐、焦点环、动效降级 ──────────────────────────────── */
.num,table td,table th,.row .v,.stat .v{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* 键盘走查必须看得见：焦点环不能拿不达标的浅色当描边 */
:focus-visible{ outline:2.5px solid var(--focus); outline-offset:2px; border-radius:3px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
}