/* ============================================================
   tokens-a11y.css · 可访问性 / 交互反馈 / 语义色双轨
   ------------------------------------------------------------
   基准：DOC-20260918-SWDEV-REF-025（UI 主基准）§4.4 §5.1 §9.2
   用法：framework.css + theme-xxx.css + 本文件（放最后）
   作用：① 键盘焦点环（≥6.5:1） ② 动效时长（240ms 缓入缓出）
         ③ 禁用态降级 ④ 语义色双轨：图形鲜亮 / 文字达标 AA
         ⑤ 加载与空态 ⑥ 断点补齐
   纪律：纯叠加，不改 framework.css 骨架结构（合 RL-22）
   实测：2026-09-18 对比度脚本复核，文本项全部 ≥4.5:1
   作者：太子 | 2026-09-18 | 全系统复用 · 触碰 P0
   ============================================================ */

/* ---------- 1. 动效与焦点令牌 ---------- */
html{--dur-fast:150ms;--dur-base:240ms;--dur-slow:300ms;--ease:cubic-bezier(.4,0,.2,1)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring,#0052d9);
  outline-offset:2px;
}
/* Tab 顺序=视觉顺序由 DOM 保证；禁 outline:none 无替代 */
:where(a,button,input,select,textarea):focus:not(:focus-visible){outline:none}

/* ---------- 2. 禁用态视觉降级 ---------- */
.btn[disabled],.btn.disabled,button[disabled],input[disabled],select[disabled],textarea[disabled]{
  opacity:.45;cursor:not-allowed;filter:none!important;box-shadow:none;pointer-events:none
}

/* ---------- 3. 语义色双轨制 ----------
   鲜亮色（--ok/--warn/--err/--dim）= 图形用（进度条/圆环/色块/强调条）
   达标色（--*-ink）= 文字与徽标用（必须 ≥4.5:1）                        */

/* 3.1 浅色主题（腾讯云 TDesign） */
html.tpl-tencent{--dim:#67707e;--ok:#0a7a52;--warn:#9a5700;--err:#bb2d25;--primary-ink:#0052d9;--focus-ring:#0052d9;}
html.tpl-tencent{--dim-fill:#969dab;--ok-fill:#00a870;--warn-fill:#ff8d1a;--err-fill:#d54941;}

/* 3.2 浅色主题（阿里 AntDesignPro） */
html.tpl-alibaba{--dim:#67707e;--ok:#0a7a52;--warn:#9a5700;--err:#bb2d25;--primary-ink:#1668dc;--focus-ring:#1668dc;}
html.tpl-alibaba{--dim-fill:#8c8c8c;--ok-fill:#52c41a;--warn-fill:#fa8c16;--err-fill:#f5222d;}

/* 3.3 浅色主题（京东 NutUI） */
html.tpl-jd{--dim:#67707e;--ok:#0a7a52;--warn:#9a5700;--err:#bb2d25;--primary-ink:#c81606;--focus-ring:#c81606;}
html.tpl-jd{--dim-fill:#969dab;--ok-fill:#00b578;--warn-fill:#ff8f1f;--err-fill:#fa2c19;}

/* 3.4 浅色主题（百度 BaiduDesign） */
html.tpl-baidu{--dim:#67707e;--ok:#0a7a52;--warn:#9a5700;--err:#bb2d25;--primary-ink:#3550d8;--focus-ring:#3550d8;}
html.tpl-baidu{--dim-fill:#969dab;--ok-fill:#00c48c;--warn-fill:#fa8c16;--err-fill:#f5222d;}

/* 3.5 浅色主题（网易企业级） */
html.tpl-netease{--dim:#67707e;--ok:#0a7a52;--warn:#9a5700;--err:#bb2d25;--primary-ink:#c20c0c;--focus-ring:#c20c0c;}
html.tpl-netease{--dim-fill:#969dab;--ok-fill:#00b578;--warn-fill:#ff8f1f;--err-fill:#f5222d;}

/* 3.6 深色主题（theme-dark-tech.css）—— 深底已达标，仅补令牌 */
html.tpl-dark{--dim:#93a0b8;--ok:#4ade9b;--warn:#ffc247;--err:#ff8a80;--primary-ink:#6ea8ff;--focus-ring:#6ea8ff;}
html.tpl-dark{--dim-fill:#93a0b8;--ok-fill:#22c55e;--warn-fill:#f59e0b;--err-fill:#ef4444;}

/* 3.8 文字位一律用达标主色档（--primary 鲜亮档只留给填充/渐变） */
.tag,.btn.lnk,.op a,.page-h .tag{color:var(--primary-ink,var(--primary))}

/* 3.7 图形类元素改用鲜亮档（圆环/强调条不受文字达标色影响） */
html .donut{background:conic-gradient(
  var(--ok-fill,var(--ok)) 0 var(--d1v),
  var(--warn-fill,var(--warn)) var(--d1v) var(--d2v),
  var(--err-fill,var(--err)) var(--d2v) var(--d3v),
  var(--d4) var(--d3v) 100%)}
html .kpi::before{background:var(--primary)}
html.tpl-tencent .kpi.ok::before{background:var(--ok-fill,var(--ok))}
html.tpl-tencent .kpi.warn::before{background:var(--warn-fill,var(--warn))}
html.tpl-tencent .kpi.err::before{background:var(--err-fill,var(--err))}
html .badge.b-idle{background:var(--th-bg,#fafafa);color:var(--dim)}

/* ---------- 4. 状态反馈：加载 / 骨架 / 空态（REF-025 §5.1 §9.4） ---------- */
.spinner{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--primary);border-radius:50%;display:inline-block;animation:spin 700ms linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
/* 超过 1 秒的操作：给容器加 .is-loading 即显示角标 */
.is-loading{position:relative;pointer-events:none;opacity:.75}
.skeleton{background:linear-gradient(90deg,var(--line) 25%,var(--hl) 37%,var(--line) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:4px;min-height:12px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px 16px;color:var(--dim);text-align:center;font-size:12.5px}
.empty .ico{font-size:30px;opacity:.6}
.empty .act{color:var(--primary);cursor:pointer;font-weight:500}
/* 弹窗动效：200-300ms 缓入缓出（REF-025 §3.2） */
.modal-mask{position:fixed;inset:0;background:var(--e-tint-0_0_0-45);display:flex;align-items:center;justify-content:center;z-index:900;animation:maskIn var(--dur-base) var(--ease)}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);width:min(560px,90vw);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 12px 40px var(--e-tint-0_0_0-22);animation:modalIn calc(var(--dur-slow)) var(--ease)}
.modal-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);font-weight:600;font-size:14.5px}
.modal-h .x{margin-left:auto;cursor:pointer;color:var(--dim);font-size:16px;line-height:1}
.modal-b{padding:18px 20px;overflow:auto;flex:1;font-size:13.5px;color:var(--sub)}
.modal-f{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}
@keyframes maskIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}

/* ---------- 5. 断点补齐（REF-025 §9.3：1920+ / 1366-1919 / <1366） ---------- */
@media(max-width:1365px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid,.grid2,.bands{grid-template-columns:1fr}
  .side{width:64px}
  .side .brand{justify-content:center;padding:0}
  .side .brand .nm,.side .brand .bg,.nav span,.nav .grp,.side .user .meta{display:none}
  .side .user{justify-content:center;padding:0}
  .nav a{justify-content:center}
  .search{width:150px}
}
@media(min-width:2560px){
  body{font-size:15px}
  .content{max-width:2200px;margin:0 auto;width:100%}
}