:root {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --sidebar-w: 232px;
  --header-h: 56px;
  color-scheme: dark;
}

[data-theme="graphite-green"],
:root {
  --bg: #000000;
  --bg-soft: #0a0a0a;
  --bg-soft-2: #121212;
  --bg-soft-3: #1a1a1a;
  --brand: #00dd88;
  --brand-dark: #5cffb8;
  --brand-soft: rgba(0, 221, 136, 0.10);
  --brand-ink: #003b29;
  --ink: #ffffff;
  --ink-soft: #cbd5e1;
  --muted: #9ca3af;
  --muted-2: #6b7280;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.06);
  --ok: #34d399;
  --warn: #ffb27a;
  --danger: #ff6b6b;
  --tag-bg: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

[data-theme="light-blue"] {
  --bg: #f5f7fa;
  --bg-soft: #ffffff;
  --bg-soft-2: #eef2f7;
  --bg-soft-3: #e6ebf2;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-soft: rgba(37, 99, 235, 0.10);
  --brand-ink: #ffffff;
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --line: rgba(15, 23, 42, 0.10);
  --line-soft: rgba(15, 23, 42, 0.05);
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --tag-bg: rgba(15, 23, 42, 0.06);
  color-scheme: light;
}

[data-theme="silver-red"] {
  --bg: #f0f0f0;
  --bg-soft: #ffffff;
  --bg-soft-2: #f7f7f7;
  --bg-soft-3: #ededed;
  --brand: #dc2626;
  --brand-dark: #b91c1c;
  --brand-soft: rgba(220, 38, 38, 0.10);
  --brand-ink: #ffffff;
  --ink: #1f1f1f;
  --ink-soft: #4b5563;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --line: rgba(0, 0, 0, 0.10);
  --line-soft: rgba(0, 0, 0, 0.05);
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --tag-bg: rgba(0, 0, 0, 0.06);
  color-scheme: light;
}

[data-theme="black-gold"] {
  --bg: #0a0a0a;
  --bg-soft: #111111;
  --bg-soft-2: #181818;
  --bg-soft-3: #202020;
  --brand: #f5b923;
  --brand-dark: #ffd54f;
  --brand-soft: rgba(245, 185, 35, 0.12);
  --brand-ink: #3d2e00;
  --ink: #ffffff;
  --ink-soft: #d4d4d4;
  --muted: #9ca3af;
  --muted-2: #6b7280;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.06);
  --ok: #34d399;
  --warn: #ffb27a;
  --danger: #ff6b6b;
  --tag-bg: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

[data-theme="obsidian-cyan"] {
  --bg: #0d1b1e;
  --bg-soft: #122a2e;
  --bg-soft-2: #17353a;
  --bg-soft-3: #1d4248;
  --brand: #26c6da;
  --brand-dark: #4dd0e1;
  --brand-soft: rgba(38, 198, 218, 0.12);
  --brand-ink: #002f36;
  --ink: #e0f2f1;
  --ink-soft: #b2dfdb;
  --muted: #80cbc4;
  --muted-2: #4db6ac;
  --line: rgba(224, 242, 241, 0.12);
  --line-soft: rgba(224, 242, 241, 0.06);
  --ok: #69f0ae;
  --warn: #ffd180;
  --danger: #ff8a80;
  --tag-bg: rgba(224, 242, 241, 0.08);
  color-scheme: dark;
}

[data-theme="deep-sea"] {
  --bg: #0a192f;
  --bg-soft: #112240;
  --bg-soft-2: #162b4d;
  --bg-soft-3: #1d355a;
  --brand: #00d4ff;
  --brand-dark: #5ce1ff;
  --brand-soft: rgba(0, 212, 255, 0.12);
  --brand-ink: #003b49;
  --ink: #e6f1ff;
  --ink-soft: #a8b2d1;
  --muted: #8892b0;
  --muted-2: #5c6b8a;
  --line: rgba(230, 241, 255, 0.12);
  --line-soft: rgba(230, 241, 255, 0.06);
  --ok: #64ffda;
  --warn: #ffcb6b;
  --danger: #ff5370;
  --tag-bg: rgba(230, 241, 255, 0.08);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* 确保 [hidden] 属性不会被 author 样式的 display 覆盖 */
[hidden] {
  display: none !important;
}

html, body, #app {
  height: 100%;
  margin: 0;
}

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
  text-decoration: none;
}

button {
  font-family: inherit;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--muted-2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

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

/* 减少动态效果 */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  transition: none !important;
  animation: none !important;
}