/* ═══════════════════════════════════════════════════════
   eLinehub Client Design Tokens v4.3
   Usage: @import './assets/tokens.css';
   Source: DS v15 (inherited) + Client Supplement
   ═══════════════════════════════════════════════════════ */

:root {

  /* ── Role Colors ──
     铁律: Technician = 橙 (tech), Mechanic = 蓝 (mech), 绝不串用 */
  --clr-tech-700: #8B3A10;
  --clr-tech-600: #C05A15;
  --clr-tech-500: #ED772E;
  --clr-tech-200: #F5C4A0;
  --clr-tech-100: #FFF3EB;

  --clr-mech-700: #1A4272;
  --clr-mech-600: #2B6AA4;
  --clr-mech-500: #3B7FBF;
  --clr-mech-200: #A8C4E0;
  --clr-mech-100: #EEF4FB;

  /* 中转服务器区域：已确认的11个蓝/绿/青色调，仅用于分类胶囊。 */
  --category-region-1: #185D9C;
  --category-region-1-bg: #E7F2FD;
  --category-region-2: #176B43;
  --category-region-2-bg: #E8F6EB;
  --category-region-3: #08717F;
  --category-region-3-bg: #E4F6FA;
  --category-region-4: #2655AE;
  --category-region-4-bg: #EAF0FF;
  --category-region-5: #076253;
  --category-region-5-bg: #E2F7F0;
  --category-region-6: #12677A;
  --category-region-6-bg: #DCEEF7;
  --category-region-7: #285B37;
  --category-region-7-bg: #EFF8E9;
  --category-region-8: #17488F;
  --category-region-8-bg: #E2ECFB;
  --category-region-9: #167263;
  --category-region-9-bg: #EAFBF7;
  --category-region-10: #004F69;
  --category-region-10-bg: #DBF5FB;
  --category-region-11: #305D7C;
  --category-region-11-bg: #EFF6FC;

  /* ── Link ── */
  --clr-link: #2B6AA4;
  --clr-link-hover: #1A4272;

  /* ── Surface ── */
  --surface-page:      #F8F7F4;
  --surface-card:      #FFFFFF;
  --surface-raised:    #F1F0EC;
  --surface-inset:     #E9E8E3;
  --surface-dark:      #1A2635;
  --surface-dark-card: #243040;

  /* ── Text ── */
  --text-primary:  #18181A;
  --text-secondary:#48484A;
  --text-tertiary: #555558;
  --text-disabled: #757578;
  --text-inverse:  #FFFFFF;

  /* ── Border ── */
  --border-subtle:  rgba(0, 0, 0, .07);
  --border-default: rgba(0, 0, 0, .13);
  --border-strong:  rgba(0, 0, 0, .22);

  /* ── Status ── */
  --ok:      #1A7A4A;
  --ok-bg:   #E8F7EE;
  --err:     #B92D27;
  --err-bg:  #FDECEA;
  --err-100:#fdecec;   /* 告警标签浅红底（与 --err 同色系） */
  --err-200:#F3CFCD;   /* 更严重语义的深一档红底（NQ-CHART-4TIER-01）：从 --err-bg 向 --err 插值 15%，
                          与 --err-bg 的 RGB 欧氏距离 42.20（目标线 22.49，取自 --ok-bg/--warn-bg 既有色差）。
                          时延分布图 150ms+ 那一段专用；--err-bg/--err-100 均达不到该色差，无现成令牌可复用。 */
  --warn:    #B05E0A;
  --warn-bg: #FDF3E7;
  --info:    #2B6AA4;
  --info-bg: #EEF4FB;

  /* Non-alert categorical colors keep device paths distinct from warnings. */
  --category-cyan: #146B78;
  --category-cyan-bg: #E7F5F6;
  --category-violet: #6941A5;
  --category-violet-bg: #F1EBFA;

  /* Device metadata uses its own palette so role buttons and alerts keep their semantics. */
  --device-rec-text: #8A5A10;
  --device-rec-bg: #FFF0CC;
  --device-rec-border: #E7CA83;
  --device-mech-text: #2D63A5;
  --device-mech-bg: #EDF5FF;
  --device-mech-border: #D1E3F5;
  --device-tech-text: #7652A3;
  --device-tech-bg: #F4EEFB;
  --device-tech-border: #E4D7F2;
  --device-usb-text: #396D80;
  --device-usb-bg: #E8F4FA;
  --device-usb-border: #D0E5EF;

  /* ── Typography ── */
  --font-ui:   'Inter', -apple-system, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ── Type Scale (9 levels) ──
     Display 28 / H1 20 / H2 16 / H3 15 / Body 13 / Body-sm 12 / Caption 11 / Overline 10 */
  --t-display:  28px;
  --t-h1:       20px;
  --t-h2:       16px;
  --t-h3:       15px;
  --t-body:     13px;
  --t-body-sm:  12px;
  --t-caption:  11px;
  --t-overline: 10px;

  /* ── Spacing (4px grid, 禁止非4倍数值) ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Radius ── */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-btn:  6px;
  --r-card: 8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 9999px;

  /* ── Shadow ── */
  --shadow-ring:  0 0 0 1px rgba(0, 0, 0, .08);
  --shadow-raise: 0 4px 16px rgba(0, 0, 0, .07), 0 0 0 1px rgba(0, 0, 0, .05);
  --shadow-float: 0 20px 56px rgba(0, 0, 0, .15), 0 4px 16px rgba(0, 0, 0, .08);
  --shadow-dropdown: 0 8px 28px rgba(0, 0, 0, .13);                              /* 下拉/面板浮层 */
  --shadow-panel:    0 8px 32px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04);/* 带描边浮层 */
  --shadow-overlay:  0 8px 40px rgba(0, 0, 0, .5);                               /* 离线屏遮罩浮层 */
  --shadow-xs:       0 1px 4px rgba(0, 0, 0, .05);                               /* 细微抬升 */
  --shadow-knob:     0 1px 2px rgba(0, 0, 0, .25);                               /* 开关圆点 */

  /* ── Motion ── */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease-std:    ease;
  --ease-spring: cubic-bezier(.22, 1, .36, 1);

  /* ── Focus Ring ── */
  --focus-tech: 0 0 0 3px rgba(192, 90, 21, .4);
  --focus-mech: 0 0 0 3px rgba(43, 106, 164, .4);

  /* ── Shell (Client-specific) ── */
  --shell-titlebar-h:  44px;
  --shell-titlebar-bg: linear-gradient(135deg, #1a1f3c, #2a3158);
  --shell-sidebar-w:   60px;
  --shell-sidebar-bg:  #f7f5f2;
  --shell-content-bg:  #eef1f5;

  /* ── Connection Bar ── */
  --conn-bar-h:     164px;   /* MECH-TOPO-02：节点 147.5（头 32 + 笔记本 88 + 11 + 16.5）+ 上下各 7.25 + 边框 2；唯一消费方是 shared.css 的 .conn */
  --conn-line-idle: #cdd5de;
  --conn-line-live: #22a06b;

  /* ── Scrollbar (触控友好, Mechanic 无鼠标) ── */
  --scroll-thumb:       #9a958d;
  --scroll-thumb-hover:  #968f86;
  --scroll-track:       #e8e5df;
  --scroll-w:           17px;
  --scroll-thumb-r:     10px;
  --scroll-thumb-min-h: 44px;

  /* ── Status Extended ── */
  --ok-hover:    #15633c;
  --sel-bg-ok:#e8f4ed;   /* 选中项浅绿底（与 --ok 绿勾/绿字同语义，非可切换模式） */
  --surface-hover-ok:#f0f8f4;   /* 列表 hover 浅绿（选中绿 --sel-bg-ok 的更浅一档，同绿色相更高明度） */

  /* ── Surface Extended ── */
  --surface-hover: #f8f6f3;

  /* ── Border Extended ── */
  --border-field: #d9d5cf;
  --border-panel: #d6d2cc;

  /* ── Feature: Favorites ── */
  --clr-fav:      #F5A623;
  --clr-fav-bg:   #FFF6E8;
  --clr-fav-text: #B5780C;

  /* ── Switch ── */
  --sw-off: #cfd4da;

  /* ── Cancelled State ── */
  --cancelled-border: #9a9690;
  --cancelled-text:   #6c6862;
  --cancelled-bg:     #eeece8;

  /* ── Badge (Titlebar) ── */
  --badge-std-text:    #dce4f2;
  --badge-custom-text: #F4CE7B;

  /* ── Shell Extended ── */
  --shell-outer-bg: #1b2030;

  /* ── Role Alias (set per-product in inline <style>) ── */
  /* --clr-role-700: (product sets via --clr-mech-700 or --clr-tech-700) */
  /* --clr-role-600: (product sets) */
  /* --clr-role-500: (product sets) */
  /* --clr-role-200: (product sets) */
  /* --clr-role-100: (product sets) */
  /* --focus-role:   (product sets via --focus-mech or --focus-tech) */

  /* ── Tint (语义色浅调；字面值。兼容 WebView2 109，使用字面值；
     改基色时须手动同步下列派生值) ── */
  --err-tint:          rgba(185, 45, 39, .12);   /* 派生自 --err #B92D27 */
  --err-tint-weak:     rgba(185, 45, 39, .08);   /* 派生自 --err（含网络状态 offline 浅底；原 .06 处 alpha 归一） */
  --ok-tint:           rgba(26, 122, 74, .25);   /* 派生自 --ok #1A7A4A（含 online 笔记本绿光，原 .2 归一） */
  --ok-tint-soft:      rgba(26, 122, 74, .08);   /* 派生自 --ok（网络状态 recovered 浅底） */
  --ok-tint-flow:      rgba(26, 122, 74, .45);   /* 派生自 --ok（连接线流动光效） */
  --warn-tint:         rgba(176, 94, 10, .25);   /* 派生自 --warn #B05E0A */
  --tech-tint:         rgba(192, 90, 21, .15);   /* 派生自 --clr-tech-600 #C05A15 */
  --tech-tint-soft:    rgba(237, 119, 46, .08);  /* 派生自 --clr-tech-500 #ED772E（网络状态 restricted 浅底） */
  --live-tint:         rgba(34, 160, 107, .10);  /* 派生自 --conn-line-live #22a06b */
  --badge-custom-tint: rgba(244, 206, 123, .5);  /* 派生自 --badge-custom-text #F4CE7B */

  /* ── Tooltip (即时提示气泡皮肤；收敛原 rgba(34,34,34,.9/.92/1) 9 处为一档) ── */
  --tip-bg: rgba(34, 34, 34, .92);
  --tip-fg: #FFFFFF;   /* == --text-inverse，提示专用别名 */

  /* ── Overlay / Modal ── */
  --overlay-scrim: rgba(20, 24, 34, .5);            /* 弹窗遮罩底 */
  --shadow-modal:  0 20px 60px rgba(0, 0, 0, .3);   /* 弹窗阴影（区别于 --shadow-float） */
  --modal-w-sm: 430px;
  --modal-w-md: 560px;
  --modal-w-lg: 700px;
  --modal-w-xl: 900px;
  --modal-w-xxl: 1200px;

  /* ── Misc (杂项界面色) ── */
  --star-idle:      #c9c5bf;                  /* 收藏星标未选灰 */
  --avatar-shell-bg: #3a4168;                 /* 标题栏头像占位底 */
  --badge-paid:     #2E2B25;                  /* 付费徽章黑金（§27） */
  --on-dark-border: rgba(255, 255, 255, .18); /* 深底（标题栏）分隔线 */
  --on-dark-text:   rgba(255, 255, 255, .7);  /* 深底次要文字 */

  /* ── Border Extended (TOK-04) ── */
  --border-control: #c4c8cf;   /* radio / 开关圈边框 */
  --border-divider: #f4f2ef;   /* 选项列表分隔线 */

  /* ── Surface Extended (TOK-04) ── */
  --surface-oti:    #eef0f3;   /* 服务专家选择卡图标框底 */

  /* ── Status Text (TOK-04；横幅深色字，各为对应状态深档) ── */
  --warn-text:      #8a4b00;   /* 警告横幅深色字（--warn 深档） */
  --ok-text:        #136b3f;   /* 成功横幅深色字（--ok 深档） */

  /* ── Favorites Extended (TOK-04) ── */
  --clr-fav-border: #f0e2c6;   /* 收藏分组头下边框 */

  /* ── Misc (TOK-04) ── */
  --avatar-msg-bg:  #e2dfd8;   /* 聊天头像占位底 */
  --empty-icon:     #b8cbe2;   /* 空态占位图标色 */
  --spinner-track:  #cdd9e8;   /* 加载转圈轨道色 */
  --icon-faint:     #ababae;   /* Profile 箭头浅灰 */

  /* ── Media placeholder (TOK-09；聊天媒体占位；与 scroll/border 令牌语义隔离) ── */
  --media-img-bg:   #e8e5df;         /* 图片占位底（≠ --scroll-track） */
  --media-video-bg: #d9d5cf;         /* 视频占位底（≠ --border-field） */
  --media-icon:     #9a958d;         /* 占位图标描边（≠ --scroll-thumb） */
  --media-chip-bg:  rgba(0,0,0,.04); /* 文件片底 */
  --media-play-bg:  rgba(0,0,0,.45); /* 视频播放键底 */

  /* ── Z-Layers (TOK-Z；跨组件层叠层。值为当前现状，注含「已知乱处」；
     局部微堆叠 0-20 与 vehicle-info 49-52 级联不入档，留字面) ── */
  --z-dropdown:    50;    /* 组件内下拉（.proc-dd/.panel） */
  --z-backdrop:    799;   /* 面板背幕 */
  --z-panel:       800;   /* 侧滑面板（.cm-panel/.profile-panel） */
  --z-panel-sub:   801;   /* 面板子层（.pp-sub） */
  --z-notice:      850;   /* 常驻提示卡片（.nc-wrap，NOTICE-02）——新增令牌，插在 --z-panel-sub 与 --z-overlay 之间：
                              必须低于弹窗遮罩（打开弹窗时卡片被压暗，NOTICE-01 §2 已拍板要求）；
                              ⚠ 现有两层轻提示（--z-toast/--z-toast-wrap）仍高于遮罩，与本层方向不同，
                              两者是两条独立规则，不是一条直线，见 DESIGN-RULES.md 常驻提示卡片一节。 */
  --z-panel-dd:    900;   /* 面板级下拉（.go-dd-panel，需覆盖侧面板故 >--z-panel；与 --z-dropdown 分层因作用域不同） */
  --z-panel-dd-hi: 920;   /* 面板级下拉2（.pi-spec-dd） */
  --z-overlay:     950;   /* 弹窗遮罩(.ms-mask)兼即时提示([data-tip]::after)——历史共用同层 */
  --z-toast:       960;   /* 设备提示/内联 toast */
  --z-toast-wrap:  999;   /* toast 容器（.toast-wrap） */
  --z-tip-panel:   1199;  /* 仅低于统一提示层一档，专用于需要固定排在提示气泡之下的浮层面板（.nq-tip，NQ-TIP-STACK-FIX-01） */
  --z-tip-top:     1200;  /* 最高行内提示（统一提示层 .ux-tip；网络质量浮层已改用 --z-tip-panel，见上，NQ-TIP-STACK-FIX-01） */

  /* ── Touch ── */
  --touch-min: 44px;
}

/* ── Type Utility Classes ── */
.type-display  { font-size: var(--t-display);  font-weight: 700; line-height: 1.15; letter-spacing: -.8px }
.type-h1       { font-size: var(--t-h1);       font-weight: 700; line-height: 1.25; letter-spacing: -.5px }
.type-h2       { font-size: var(--t-h2);       font-weight: 700; line-height: 1.3;  letter-spacing: -.2px }
.type-h3       { font-size: var(--t-h3);       font-weight: 600; line-height: 1.35 }
.type-body     { font-size: var(--t-body);      font-weight: 400; line-height: 1.5 }
.type-body-sm  { font-size: var(--t-body-sm);   font-weight: 400; line-height: 1.5 }
.type-caption  { font-size: var(--t-caption);   font-weight: 500; line-height: 1.45 }
.type-overline { font-size: var(--t-overline);  font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase }
.type-mono     { font-size: var(--t-body);      font-weight: 400; line-height: 1.5; font-family: var(--font-mono) }

/* ── Thick Scrollbar (apply to scrollable areas) ── */
.scroll-thick::-webkit-scrollbar { width: var(--scroll-w) }
.scroll-thick::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: var(--scroll-thumb-r);
  border: 4px solid transparent;
  background-clip: content-box;
  min-height: var(--scroll-thumb-min-h);
}
.scroll-thick::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  border: 4px solid transparent;
  background-clip: content-box;
}
.scroll-thick::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: var(--scroll-thumb-r);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}