/* ============================================================
   万事通电子（惠州）科技有限公司 · wstdz.top
   tokens.css — 设计令牌 / 重置 / 排版 / 基础控件 / 无障碍
   令牌严格对齐《UI技术约束说明_Headless前端 v2.0》第 7 节
   ============================================================ */

/* ============================================================
   GuBruce 2026-09-24 · 「中文黑体」字体层
   ------------------------------------------------------------
   客户要求：官网字体显示为「黑体」，字号不变。

   为什么不能直接把黑体写进字体栈：
     Windows 上原栈把 'Microsoft YaHei'（微软雅黑）排在前，中文实际显示的是
     微软雅黑而非真正的黑体。但黑体自带西文字形，若把黑体整栈前置，会把英文、
     数字、型号一并换掉（mk004@wstsz.cn / 24V · CAN / WST · DOT MATRIX /
     08 / Contact），观感变差。

   做法：用 @font-face + local() 引用**访客本机**已装的黑体，
        再用 unicode-range 把作用范围限定为「中文字形」——
        英文与数字不受影响，维持原观感。不下载任何字体文件
        （与本站「纯系统字体、不依赖任何 CDN」的硬约束一致）。

   回落行为：访客机器没有黑体时（macOS / 手机 / Linux），本字体层不生效，
            中文按下面的系统字体栈自然回落（苹方 / 思源 / Noto），与改动前一致。
   ============================================================ */
@font-face{
  font-family:'gb-cn-hei';
  src:local('SimHei'), local('黑体');
  /* 仅覆盖 CJK 字形：中日韩汉字、中文标点、兼容汉字、全角标点 */
  unicode-range:U+2E80-2EFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF,
                U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}

/* ── 1. 设计令牌 ───────────────────────────────────── */
:root{
  /* ═══ 基础层：深色工业 HUD（TONIC 配色体系） ═══
     用户指定：信号琥珀 #FF6B1A（应急/电源）+ 电光青 #22D3EE（显示/通信）
     说明：本套覆盖说明书 §7 的浅色蓝系令牌（用户明确要求），
           类名契约 .gb-* 与对比度 / 触控等硬指标仍全部保留。 */
  --gb-bg:#090D15;            /* 页面底色（深） */
  --gb-white:#111827;         /* 卡片 / 面板底色（深灰蓝，比页面高一级） */
  --gb-heading:#F7FAFD;       /* 标题（深底白字） 14.8:1 ✅ */
  --gb-text:#BCC8DA;          /* 正文  9.4:1 ✅ */
  --gb-text-muted:#93A1B6;    /* 次要  6.2:1 ✅ */
  --gb-meta:#93A1B6;          /* 元信息 */
  --gb-ink-link:#FF6B1A;      /* 信号琥珀：链接 / 强调  6.78:1 ✅ */
  --gb-ink-strong:#FF8A3D;    /* hover（更亮） 8.6:1 ✅ */
  --gb-band-bg:#0B1020;       /* 内页色带底色（深，配琥珀光晕） */
  --gb-cyan:#22D3EE;          /* 电光青：通信 / 显示次级强调  10.8:1 ✅ */
  --gb-blue:#38BDF8;          /* 次级蓝（装饰） */
  --gb-border:rgba(255,255,255,.14);

  /* 深色层 */
  --gb4-bg:#06090F;
  --gb4-bg-2:#0A0E18;
  --gb4-bg-3:#0F1525;
  --gb4-surface:rgba(255,255,255,.035);
  --gb4-surface-2:rgba(255,255,255,.055);
  --gb4-border:rgba(255,255,255,.10);
  --gb4-border-2:rgba(255,255,255,.18);
  --gb4-text:#F7FAFD;
  --gb4-text-2:rgba(245,247,250,.78);
  --gb4-text-3:rgba(245,247,250,.52); /* 仅装饰 */

  /* HUD 装饰令牌 */
  --hud-led:#FF6B1A;                       /* 琥珀 LED（点阵屏 / 指示灯） */
  --hud-led-soft:rgba(255,107,26,.16);
  --hud-glow:0 0 28px rgba(255,107,26,.32);
  --hud-cyan:#22D3EE;                      /* 青色（网格 / 遥测 / 次级描边） */
  --hud-grid:rgba(255,255,255,.055);
  --gb-media:linear-gradient(150deg,#16202F,#0A0E18); /* 图片位占位渐变 */

  /* 形状 / 触控（说明书：圆角只有 16px 与胶囊两档；触控 ≥44px） */
  --gb-radius:16px;
  --gb-radius-sm:10px;
  --gb-pill:999px;
  --gb-tap:44px;
  /* 深底上用纯黑投影更自然，蓝色投影在暗背景会发灰 */
  --gb-shadow:0 10px 26px rgba(0,0,0,.42);
  --gb-shadow-lg:0 20px 44px rgba(0,0,0,.58);

  /* 字体：全站黑体（无衬线），纯系统字体，不依赖任何 CDN
     覆盖 macOS(苹方) / HarmonyOS / Linux(思源·Noto) / Windows(微软雅黑)
     —— GuBruce 2026-09-24：按客户要求，Windows 上中文改为显示真正的「黑体」。
        做法是在栈首加 'gb-cn-hei'（上面 @font-face 定义，只作用于中文），
        英文/数字不受影响；'Microsoft YaHei' 保留在后面作为非 Windows 兜底。 */
  --gb-font-sans:'gb-cn-hei','PingFang SC','HarmonyOS Sans SC','Source Han Sans SC','Noto Sans SC',
                 'Microsoft YaHei','Hiragino Sans GB','Helvetica Neue',Arial,sans-serif;
  --gb-font-head:var(--gb-font-sans);
  --gb-font-body:var(--gb-font-sans);
  --gb-font-label:var(--gb-font-sans);
  /* 等宽栈（编号/日期/LED 数字）保持西文等宽字体不变；
     末尾补 'gb-cn-hei' 与中文兜底：原来栈里没有任何中文字体，
     .mono 元素里的中文（如「MODE 楼层」的"楼层"）会掉到浏览器默认衬线体（宋体），
     与「全站黑体」不一致 —— 这是顺带修正，西文与数字的字形完全不变。 */
  --gb-font-mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,'Courier New',
                 'gb-cn-hei','PingFang SC','Microsoft YaHei',monospace;

  /* 字阶（流体）—— 按黑体重新校准：
     黑体视觉重量大于衬线体，故大号字上限收敛；中文需要更大下限与更松行距 */
  --fs-display:clamp(2.3rem,5.6vw,4.4rem);
  --fs-h1:clamp(1.75rem,3.4vw,2.75rem);
  --fs-h2:clamp(1.42rem,2.5vw,2.05rem);
  --fs-h3:clamp(1.08rem,1.7vw,1.32rem);
  --fs-lead:clamp(1.05rem,1.4vw,1.22rem);
  --fs-body:1.0625rem;   /* 17px · 中文正文舒适值 */
  --fs-sm:.9375rem;      /* 15px */
  --fs-xs:.8125rem;      /* 13px */

  /* 间距（4px 基准） */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.25rem;--s-6:1.5rem; --s-8:2rem;   --s-10:2.5rem;
  --s-12:3rem;  --s-16:4rem;  --s-20:5rem;  --s-24:6rem;

  /* 版心 / 节奏 */
  --gb-max:1180px;
  --gb-wide:1400px;
  --sec-pad:clamp(3.2rem,6.5vw,6.5rem);
  --gb-nav-h:72px;

  /* 动效 */
  --t-fast:150ms ease;
  --t-base:300ms cubic-bezier(.22,.61,.36,1);
  --t-slow:620ms cubic-bezier(.22,.61,.36,1);

  /* 层级 */
  --z-rail:60; --z-hdr:100; --z-mega:110;
  --z-palette:200; --z-toast:300; --z-pre:400;
}

/* ── 2. 重置 ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--gb-nav-h) + 24px);
}

body{
  margin:0;
  background:var(--gb-bg);
  color:var(--gb-text);
  font-family:var(--gb-font-body);
  font-size:var(--fs-body);
  line-height:1.8;   /* 中文正文需要更松的行距 */
  /* Windows 上保留 ClearType 次像素渲染，避免文字发虚 */
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--s-4);
  font-family:var(--gb-font-head);
  color:var(--gb-heading);
  font-weight:700;
  line-height:1.28;          /* 中文标题行距需比拉丁文松，避免多行拥挤 */
  letter-spacing:-.005em;    /* 黑体中文不宜过度收紧字距，否则笔画粘连 */
  /* 黑体保留 ClearType：antialiased 会让中文笔画变细发虚 */
  -webkit-font-smoothing:auto;
}
h1{font-size:var(--fs-h1);font-weight:700}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:600}
h4{font-size:1.05rem;font-weight:600}

p{margin:0 0 var(--s-4)}
p:last-child{margin-bottom:0}

a{color:var(--gb-ink-link);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--gb-ink-strong)}

img,svg,video{max-width:100%;display:block}
img{height:auto}

ul,ol{margin:0 0 var(--s-4);padding-left:1.25em}
li{margin-bottom:.35em}

button{font:inherit;color:inherit}

/* ⚠️ 关键护栏：作者样式的 display 会覆盖 hidden 属性的 UA 样式，
   导致隐藏组件（命令面板 / Toast）从加载起就盖住全站。 */
[hidden]{display:none !important}

::selection{background:rgba(255,107,26,.18);color:var(--gb-heading)}

/* ── 3. 无障碍 ─────────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--gb-ink-link);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed;top:8px;left:8px;z-index:9999;
  transform:translateY(-160%);
  background:var(--gb4-bg-3);color:#fff;
  padding:.7rem 1.1rem;border-radius:var(--gb-radius-sm);
  font-size:var(--fs-sm);font-weight:600;
  transition:transform var(--t-base);
}
.skip-link:focus{transform:translateY(0);color:#fff}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── 4. 布局原语 ───────────────────────────────────── */
.gb-wrap{
  width:100%;max-width:var(--gb-max);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}
.gb-wrap--wide{max-width:var(--gb-wide)}

.gb-section{padding-block:var(--sec-pad);position:relative}
.gb-section--tight{padding-block:calc(var(--sec-pad) * .6)}
.gb-alt{background:var(--gb-white)}
.gb-dark{background:var(--gb4-bg);color:var(--gb4-text)}
.gb-dark h1,.gb-dark h2,.gb-dark h3{color:var(--gb4-text)}

/* 区块标题体系 */
.gb-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--gb-font-label);
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gb-ink-link);
  background:rgba(255,107,26,.08);
  border:1px solid rgba(255,107,26,.18);
  padding:.42rem .9rem;border-radius:var(--gb-pill);
  margin-bottom:var(--s-4);
}
.gb-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--hud-led);box-shadow:var(--hud-glow);
}
.gb-dark .gb-eyebrow{
  color:#FF8A3D;
  background:rgba(255,107,26,.12);
  border-color:rgba(255,107,26,.30);
}

.gb-sec-title{font-size:var(--fs-h2);margin-bottom:var(--s-3)}
.gb-sec-sub{
  font-size:var(--fs-lead);color:var(--gb-text-muted);
  max-width:62ch;margin-bottom:var(--s-8);
}
.gb-dark .gb-sec-sub{color:var(--gb4-text-2)}

.gb-sec-head{margin-bottom:var(--s-8)}
.gb-sec-head--center{text-align:center}
.gb-sec-head--center .gb-sec-sub{margin-inline:auto}

/* ── 5. 按钮 ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--gb-tap);
  padding:.7rem 1.4rem;
  font-family:var(--gb-font-label);
  font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--gb-pill);
  cursor:pointer;background:none;
  transition:transform var(--t-base),box-shadow var(--t-base),
             background-color var(--t-base),border-color var(--t-base),color var(--t-base);
}
.btn:focus-visible{outline:2px solid var(--gb-ink-link);outline-offset:3px}

.btn--primary{
  /* 文字用深墨而非白色：白字压琥珀仅 2.85:1（13px 需 4.5:1）。
     深墨 #0B1220 压 #FF6B1A = 6.57:1 ✅、压 hover 的 #FF8A3D = 7.98:1 ✅，
     品牌琥珀主色完全不变。站内 .dmx__btn.is-on（深青字压 LED 青底）已是同款做法。 */
  background:var(--gb-ink-link);color:#0B1220;
  box-shadow:0 8px 22px rgba(255,107,26,.28);
}
.btn--primary:hover{
  background:var(--gb-ink-strong);color:#0B1220;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(255,107,26,.34);
}

.btn--ghost{
  border-color:var(--gb-border);color:var(--gb-heading);background:var(--gb-white);
}
.btn--ghost:hover{
  border-color:var(--gb-cyan);color:var(--gb-ink-link);
  transform:translateY(-2px);box-shadow:var(--gb-shadow);
}

.btn--light{
  background:#F7FAFD;color:#0A0E18;
}
.btn--light:hover{transform:translateY(-2px);box-shadow:var(--gb-shadow-lg);color:var(--gb-ink-link)}

.btn--outline-light{
  border-color:var(--gb4-border-2);color:var(--gb4-text);
}
.btn--outline-light:hover{
  border-color:var(--hud-led);color:var(--hud-led);
  transform:translateY(-2px);
}

/* 红线⑥：触控目标 ≥44px。原 min-height:36px → 页头「获取方案」实测 89x40。
   本类用于 .hdr__cta（≥1024px 桌面/触控笔电可见）与巨菜单「查看详情」，
   均为独立可点控件，故抬到 var(--gb-tap)。padding 略收以保持视觉高度接近原样。 */
.btn--sm{min-height:var(--gb-tap);padding:.35rem 1rem;font-size:var(--fs-xs)}
.btn--block{width:100%}

/* ── 6. 装饰原语 ───────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .7rem;border-radius:var(--gb-pill);
  font-family:var(--gb-font-label);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,107,26,.08);color:var(--gb-ink-link);
  border:1px solid rgba(255,107,26,.16);
}
.pill--cyan{background:rgba(34,211,238,.12);color:var(--gb-ink-link);border-color:rgba(34,211,238,.28)}

.mono{font-family:var(--gb-font-mono);font-variant-numeric:tabular-nums}
.hairline{height:1px;background:var(--gb-border);border:0;margin:0}
.gb-dark .hairline{background:var(--gb4-border)}

/* 切角（品牌工业感） */
.gb-clip{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}

/* ── 7. 滚动揭示 ───────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity var(--t-slow),transform var(--t-slow);
  transition-delay:var(--rv-d,0ms);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}

/* ── 8. 降低动效偏好（说明书 12.2 硬性要求） ────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}