/* ========================================================================
 * Design Tokens · V1+ W1 深蓝企业风（稳重 / 安静 / 严肃）
 * ====================================================================== */

:root {
  /* === 深蓝主色阶 === */
  --color-primary-darkest:  #042C53;   /* sidebar 底色 / banner */
  --color-primary-dark:     #0C447C;   /* 标题 */
  --color-primary:          #185FA5;   /* 强调 / 链接 / 按钮 */
  --color-primary-light:    #378ADD;
  --color-primary-lightest: #E6F1FB;

  /* === 中性 === */
  --color-bg:               #F8FAFC;   /* 主内容区背景 */
  --color-card:             #FFFFFF;
  --color-border:           #E5E7EB;
  --color-border-strong:    #D1D5DB;
  --color-text:             #1F2937;
  --color-text-secondary:   #6B7280;
  --color-text-muted:       #9CA3AF;

  /* === 状态色（沉稳）=== */
  --color-success: #0F6E56;   --color-success-bg: #ECFDF5;
  --color-warning: #B45309;   --color-warning-bg: #FEF3C7;
  --color-danger:  #A32D2D;   --color-danger-bg:  #FEE2E2;
  --color-info:    #185FA5;   --color-info-bg:    #E6F1FB;

  /* === 表格行（克制）=== */
  --color-row-stripe:   #FAFBFC;
  --color-row-hover:    #F1F5F9;
  --color-row-selected: #E6F1FB;

  /* === 字体（系统默认 / 不再用 Inter / Geist / mono）=== */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Source Han Sans SC", Helvetica, Arial, sans-serif;
  --font-mono: var(--font-sans);

  /* === 字号（克制 / V1+ W1）=== */
  --fs-h1:    18px;
  --fs-h2:    16px;
  --fs-h3:    14px;
  --fs-body:  14px;
  --fs-sub:   12px;
  --fs-label: 11px;
  --fs-mega:  18px;            /* 不再有"巨数字" */

  /* === 字重 === */
  --fw-regular: 400;
  --fw-medium:  500;

  /* === 行高 / 字距 === */
  --lh-tight:  1.4;
  --lh-normal: 1.5;
  --ls:        0;

  /* === 间距 === */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 8px;   --sp-4: 12px;
  --sp-5: 16px; --sp-6: 20px; --sp-7: 24px;  --sp-8: 32px;

  /* === 圆角（V1+ W1 = 8px）=== */
  --r-sm:    4px;
  --r-md:    8px;
  --r:       8px;
  --r-lg:    8px;
  --r-pill:  10px;
  --r-circle:50%;

  /* === 阴影（极轻）=== */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 16px rgba(15, 23, 42, 0.10);

  /* === 动画 === */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --dur-fast: 100ms;
  --dur: 150ms;
  --dur-slow: 240ms;

  /* === 布局尺寸 === */
  --layout-sidebar:  220px;
  --layout-toolbar:  56px;
  --layout-row-h:    44px;

  /* === 兼容层（V5/V6/V4/V3/V2 旧变量映射）=== */
  --primary:        var(--color-primary);
  --primary-hover:  var(--color-primary-dark);
  --primary-bg:     var(--color-primary-lightest);
  --primary-text:   var(--color-primary-dark);
  --bg-page:        var(--color-bg);
  --bg-card:        var(--color-card);
  --bg-hover:       var(--color-row-hover);
  --bg-elevated:    var(--color-card);
  --bg-pop:         var(--color-card);
  --bg-secondary:   var(--color-card);
  --bg-primary:     var(--color-bg);
  --border:         var(--color-border);
  --border-strong:  var(--color-border-strong);
  --border-subtle:  var(--color-border);
  --border-default: var(--color-border);
  --text-primary:   var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary:  var(--color-text-muted);
  --text-muted:     var(--color-text-muted);
  --text-disabled:  var(--color-text-muted);

  --danger:  var(--color-danger);  --danger-bg: var(--color-danger-bg);  --danger-soft: var(--color-danger-bg);
  --warning: var(--color-warning); --warning-bg: var(--color-warning-bg); --warning-soft: var(--color-warning-bg);
  --success: var(--color-success); --success-bg: var(--color-success-bg); --success-soft: var(--color-success-bg);
  --info:    var(--color-info);    --info-bg: var(--color-info-bg);       --info-soft: var(--color-info-bg);

  --accent:           var(--color-primary);
  --accent-hover:     var(--color-primary-dark);
  --accent-bg:        var(--color-primary-lightest);
  --accent-bg-strong: var(--color-primary-lightest);
  --accent-text:      var(--color-primary-dark);
  --accent-glow:      none;
  --accent-ring:      var(--color-primary-lightest);

  --gray-50:  var(--color-bg);
  --gray-100: #F1F5F9;
  --gray-200: var(--color-border);
  --gray-300: var(--color-border-strong);
  --gray-400: var(--color-text-muted);
  --gray-500: var(--color-text-secondary);
  --gray-600: var(--color-text-secondary);
  --gray-700: var(--color-text);
  --gray-800: var(--color-text);
  --gray-900: var(--color-text);

  --c-deep:     var(--color-primary-darkest);
  --c-mid:      var(--color-primary);
  --c-pale:     var(--color-primary-lightest);
  --c-bg:       var(--color-bg);
  --c-card:     var(--color-card);
  --c-border:   var(--color-border);
  --c-text:     var(--color-text);
  --c-text-sub: var(--color-text-secondary);
  --c-text-mute:var(--color-text-muted);
  --c-urgent:   var(--color-danger);
  --c-mid-warn: var(--color-warning);
  --c-normal:   var(--color-success);
  --c-orange:   #B45309;

  --bg-ok:     var(--color-success-bg);
  --bg-warn:   var(--color-warning-bg);
  --bg-orange: #FEF3C7;
  --bg-urgent: var(--color-danger-bg);

  --red:    var(--color-danger);  --red-bg:    var(--color-danger-bg);  --red-text:    var(--color-danger);  --red-soft:    var(--color-danger-bg);
  --yellow: var(--color-warning); --yellow-bg: var(--color-warning-bg); --yellow-text: var(--color-warning); --yellow-soft: var(--color-warning-bg);
  --green:  var(--color-success); --green-bg:  var(--color-success-bg); --green-text:  var(--color-success); --green-soft:  var(--color-success-bg);
  --blue:   var(--color-info);    --blue-bg:   var(--color-info-bg);    --blue-text:   var(--color-info);    --blue-soft:   var(--color-info-bg);
  --purple: #6E40AA;              --purple-bg: #F3E8FF;                 --purple-text: #6E40AA;              --purple-soft: #F3E8FF;
  --orange: #B45309;              --orange-bg: #FEF3C7;                 --orange-text: #B45309;
  --pink:   #BE185D;              --pink-bg:   #FCE7F3;                 --pink-text:  #BE185D;

  --radius-pill: var(--r-pill);
  --radius-sm:   var(--r-sm);
  --radius:      var(--r);
  --radius-lg:   var(--r);

  --fs-h:   var(--fs-h2);
  --fs-b:   var(--fs-body);
  --fs-s:   var(--fs-sub);
  --fs-tag: var(--fs-label);

  /* 头像调色板（紫/蓝/绿/橙/粉/青 — 区分度高）*/
  --av-1: #185FA5;   /* 蓝 */
  --av-2: #0F6E56;   /* 绿 */
  --av-3: #6E40AA;   /* 紫 */
  --av-4: #B45309;   /* 橙 */
  --av-5: #BE185D;   /* 粉 */
  --av-6: #0E7490;   /* 青 */
}

/* ========== 全局 reset ========== */
*{ box-sizing:border-box; margin:0; padding:0; }
*::before, *::after { box-sizing: border-box; }

html {
  /* 防滚动条出现/消失导致主区宽度变化引起的整页"左右抖动"。
     ① scrollbar-gutter:stable 仅现代浏览器支持，且要求 overflow≠visible 才生效——
        html 默认 overflow:visible，所以单这一条此前一直失效。
     ② overflow-y:scroll 作兜底：强制 document 永远预留垂直滚动条槽，有无内容宽度都恒定，
        同时把 overflow 变成非 visible，让上面的 scrollbar-gutter 真正生效。全浏览器支持。
     macOS 悬浮滚动条模式下两者都不显示空槽，无副作用。 */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

::selection { background: var(--color-primary-lightest); color: var(--color-text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); border: 2px solid transparent; background-clip: padding-box; }

/* ============================================================
 * 深色模式 — 覆盖基础调色板 (#203/暗色同步)
 * 派生 token (--bg-card/--c-card/--border/--color-text...) 全引用 --color-*,
 * 故只覆盖这层基础调色板, 全站 V45/theme-v5/v6/main 卡片一起转深色.
 * 手动 data-theme=dark + 系统 prefers-color-scheme 跟随 (除非显式 light).
 * ============================================================ */
:root[data-theme="dark"] {
  --color-bg:               #020617;
  --color-card:             #0F172A;
  --color-border:           #1E293B;
  --color-border-strong:    #334155;
  --color-text:             #F1F5F9;
  --color-text-secondary:   #94A3B8;
  --color-text-muted:       #64748B;
  --color-success-bg:       rgba(34,197,94,0.12);
  --color-warning-bg:       rgba(245,158,11,0.12);
  --color-danger-bg:        rgba(239,68,68,0.12);
  --color-info-bg:          rgba(59,130,246,0.14);
  --color-success:          #4ADE80;
  --color-warning:          #FBBF24;
  --color-danger:           #F87171;
  --color-info:             #60A5FA;
  --color-row-stripe:       #0B1220;
  --color-row-hover:        #1E293B;
  --color-row-selected:     rgba(59,130,246,0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:             #020617;
    --color-card:           #0F172A;
    --color-border:         #1E293B;
    --color-border-strong:  #334155;
    --color-text:           #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-text-muted:     #64748B;
    --color-success-bg:     rgba(34,197,94,0.12);
    --color-warning-bg:     rgba(245,158,11,0.12);
    --color-danger-bg:      rgba(239,68,68,0.12);
    --color-info-bg:        rgba(59,130,246,0.14);
    --color-success:        #4ADE80;
    --color-warning:        #FBBF24;
    --color-danger:         #F87171;
    --color-info:           #60A5FA;
    --color-row-stripe:     #0B1220;
    --color-row-hover:      #1E293B;
    --color-row-selected:   rgba(59,130,246,0.16);
  }
}