/* ============================================================
   base.css —— 设计令牌 / 重置 / 排版
   ============================================================ */

:root {
  /* 表面 */
  --bg:            #F1F0EC;
  --surface:       #FFFFFF;
  --surface-2:     #F7F6F3;
  --surface-3:     #EDEBE5;
  --sidebar:       #FFFFFF;

  /* 描边 */
  --border:        #E4E2DA;
  --border-2:      #D2D0C6;
  --border-3:      #BDBBAF;

  /* 文字 */
  --text:          #21211F;
  --text-2:        #63625C;
  --text-3:        #96948C;

  /* 主色 */
  --accent:        #12946C;
  --accent-hover:  #0E7C5A;
  --accent-soft:   #E2F3EC;
  --accent-line:   #8ACFB6;

  /* 语义色 */
  --ok:            #0B6349;
  --ok-soft:       #E1F3EB;
  --warn:          #87510A;
  --warn-soft:     #FBEDD8;
  --warn-line:     #EBC485;
  --danger:        #A02A2A;
  --danger-soft:   #FCEAEA;
  --danger-line:   #EEB0B0;
  --info:          #17568F;
  --info-soft:     #E7F0FA;

  /* 数据色（图表 / 档位条） */
  --c-blue:        #A9CCF0;
  --c-blue-deep:   #2F7FD0;
  --c-green:       #7FBB4A;
  --c-amber:       #E8971E;
  --c-red:         #D94545;
  --c-gray:        #A9A79E;
  --c-purple:      #7369D4;

  /* 形状 */
  --r-xs:  5px;
  --r-sm:  7px;
  --r:     10px;
  --r-lg:  13px;
  --r-xl:  18px;

  /* 阴影 —— 工具感靠层次，不靠重阴影 */
  --shadow-1: 0 1px 2px rgba(24, 24, 18, .05);
  --shadow-2: 0 1px 3px rgba(24, 24, 18, .06), 0 4px 12px rgba(24, 24, 18, .05);
  --shadow-3: 0 6px 20px rgba(24, 24, 18, .10);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg:            #161615;
  --surface:       #212120;
  --surface-2:     #292928;
  --surface-3:     #333331;
  --sidebar:       #1C1C1B;

  --border:        #34342E;
  --border-2:      #45453D;
  --border-3:      #56564C;

  --text:          #EFEDE7;
  --text-2:        #A8A69E;
  --text-3:        #74726B;

  --accent:        #2FBE8B;
  --accent-hover:  #45CF9C;
  --accent-soft:   #13342A;
  --accent-line:   #276B54;

  --ok:            #6FD3B0;
  --ok-soft:       #13342A;
  --warn:          #E7B25C;
  --warn-soft:     #3A2C13;
  --warn-line:     #6B5223;
  --danger:        #F0908F;
  --danger-soft:   #3B1F1F;
  --danger-line:   #6E3535;
  --info:          #85B7EB;
  --info-soft:     #16283C;

  --c-blue:        #2F4E6E;
  --c-blue-deep:   #4E9BE0;
  --c-green:       #4E7A2A;
  --c-amber:       #9A6B1B;
  --c-red:         #9E3636;
  --c-gray:        #4A4A44;
  --c-purple:      #5F58A8;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .32);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, .36), 0 4px 12px rgba(0, 0, 0, .28);
  --shadow-3: 0 6px 20px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 13.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 只过渡背景，**不过渡 color**。
     color 是可继承的：把它挂上过渡，切主题时整棵树的文字都会从
     「上一个主题的文字色」渐变到新的 —— 浅色→深色那 180ms 里，
     深色文字压在深色底上，等于全站文字消失一下。
     背景淡入已经足够顺，文字直接换色反而更干净。 */
  transition: background .18s;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.15px; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

code, kbd {
  font-family: var(--mono);
  font-size: .91em;
  background: var(--surface-3);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

/* 所有数字等宽，避免跳动 */
.num, .kpi .v, table.data .r { font-variant-numeric: tabular-nums; }

/* 焦点可见 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 滚动条 */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 6px;
  border: 3px solid var(--bg);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-3); background-clip: padding-box; }

::selection { background: var(--accent-soft); color: var(--text); }

@media print {
  .sidebar, .topbar, .toast { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .card { break-inside: avoid; box-shadow: none; }
}