/* ============================================================
   base.css — 设计令牌、重置、排版、工具类、主题
   ============================================================ */

:root {
  /* 深色（默认） */
  --bg: #0d0f14;
  --bg-soft: #141821;
  --surface: #181c27;
  --surface-2: #1f2432;
  --surface-3: #262c3d;
  --border: #2a3143;
  --border-soft: #232939;
  --text: #e8ebf2;
  --text-dim: #9aa3b8;
  --text-faint: #6b7489;

  --accent: #5b8cff;
  --accent-hover: #4a7bf0;
  --accent-soft: rgba(91, 140, 255, .13);
  --accent-ring: rgba(91, 140, 255, .35);

  --ok: #34c98a;
  --ok-soft: rgba(52, 201, 138, .13);
  --warn: #f0b429;
  --warn-soft: rgba(240, 180, 41, .13);
  --danger: #ef5b6b;
  --danger-soft: rgba(239, 91, 107, .13);
  --info: #a78bfa;
  --info-soft: rgba(167, 139, 250, .13);

  --code-bg: #0a0c11;
  --code-text: #b9c2d6;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);

  --sidebar-w: 232px;
  --topbar-h: 56px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;

  --transition: .16s cubic-bezier(.4, 0, .2, 1);
}

[data-theme="light"] {
  --bg: #f5f7fa;
  --bg-soft: #eceff5;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef1f7;
  --border: #dde2ec;
  --border-soft: #e8ecf3;
  --text: #1a1f2e;
  --text-dim: #5c6579;
  --text-faint: #8b93a5;

  --accent: #3466e0;
  --accent-hover: #2755c9;
  --accent-soft: rgba(52, 102, 224, .09);
  --accent-ring: rgba(52, 102, 224, .28);

  --ok: #149c66;
  --ok-soft: rgba(20, 156, 102, .1);
  --warn: #b87d09;
  --warn-soft: rgba(184, 125, 9, .1);
  --danger: #d63b4d;
  --danger-soft: rgba(214, 59, 77, .09);
  --info: #7c5ce0;
  --info-soft: rgba(124, 92, 224, .1);

  --code-bg: #f2f4f9;
  --code-text: #2f3647;

  --shadow-sm: 0 1px 2px rgba(20, 25, 40, .07);
  --shadow: 0 4px 16px rgba(20, 25, 40, .09);
  --shadow-lg: 0 12px 40px rgba(20, 25, 40, .14);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; }
h1 { font-size: 19px; }
h2 { font-size: 15px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; }

p { margin: 0 0 10px; }

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

code, kbd, pre { font-family: var(--mono); font-size: 12px; }
code {
  background: var(--surface-3);
  padding: 1.5px 5px;
  border-radius: 4px;
  color: var(--accent);
}
kbd {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: var(--text-dim);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 5px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--border); }

::selection { background: var(--accent-ring); }

/* ---------------- 工具类 ---------------- */

.hidden { display: none !important; }
.muted { color: var(--text-dim); font-size: 12px; }
.faint { color: var(--text-faint); font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.grow { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }

.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }
.text-accent { color: var(--accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 加载骨架 */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: var(--radius-sm);
  color: transparent !important;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 13px; height: 13px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: inline-block;
  vertical-align: -2px;
}

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