/* =============================================================================
 * WQ-DSS 控制台 · 设计令牌（theme.css）
 * 品牌主色 #0066CC；浅色主题；工业风：高信息密度、工整对齐、细边框 + 轻阴影。
 * 零外部依赖，纯本地资产。
 * ========================================================================== */

:root {
  /* 品牌主色与派生 */
  --wq-primary: #0066CC;
  --wq-primary-600: #0057AD;
  --wq-primary-700: #004C99;
  --wq-primary-050: #E6F0FA;
  --wq-primary-100: #CFE2F6;

  /* 背景与表面 */
  --wq-bg: #F5F5F7;
  --wq-surface: #FFFFFF;
  --wq-surface-2: #FAFBFC;
  --wq-surface-3: #F0F2F5;

  /* 边框 */
  --wq-border: #E3E5E9;
  --wq-border-2: #EDEFF2;
  --wq-border-strong: #D0D3D9;

  /* 文本 */
  --wq-text: #1B1F24;
  --wq-text-2: #5A6270;
  --wq-text-3: #8A93A2;
  --wq-text-inv: #FFFFFF;

  /* 状态色 */
  --wq-success: #0F9D58;
  --wq-success-bg: #E7F5EC;
  --wq-warn: #F4B400;
  --wq-warn-bg: #FDF4DC;
  --wq-danger: #D93025;
  --wq-danger-bg: #FBE9E7;
  --wq-approval: #F4B400;
  --wq-approval-bg: #FDF4DC;
  --wq-info: #0066CC;
  --wq-info-bg: #E6F0FA;
  --wq-neutral-bg: #EEF0F3;

  /* 圆角 */
  --wq-radius: 8px;
  --wq-radius-sm: 6px;
  --wq-radius-lg: 12px;
  --wq-radius-pill: 999px;

  /* 阴影 */
  --wq-shadow-xs: 0 1px 1px rgba(16, 24, 40, 0.04);
  --wq-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --wq-shadow-md: 0 4px 10px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06);
  --wq-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16);

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

  /* 字号 */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  /* 字体栈 */
  --wq-font: "Sarasa Gothic SC", "Inter", "Microsoft YaHei", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wq-mono: "Sarasa Mono SC", "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  /* 布局 */
  --sidebar-w: 236px;
  --topbar-h: 56px;
  --focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--wq-font);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--wq-text);
  background: var(--wq-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
  color: var(--wq-text);
  line-height: 1.3;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0; }

a {
  color: var(--wq-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--wq-radius-sm);
}

::selection {
  background: var(--wq-primary-100);
}

code, kbd, pre, .mono {
  font-family: var(--wq-mono);
  font-size: 0.92em;
}

/* 滚动条（工整、细） */
* {
  scrollbar-width: thin;
  scrollbar-color: #C6CBD3 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #C6CBD3;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #AEB4BD; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* 文本工具类 */
.muted { color: var(--wq-text-2); }
.dim { color: var(--wq-text-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-success { color: var(--wq-success); }
.text-danger { color: var(--wq-danger); }
.text-warn { color: var(--wq-warn); }
.text-primary { color: var(--wq-primary); }