:root,
[data-theme="light"] {
  --color-bg: #f7f5f0;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-border: #e8e4dc;
  --color-text: #1c1917;
  --color-text-muted: #78716c;
  --color-primary: #5c4d7a;
  --color-primary-hover: #4a3d62;
  --color-primary-soft: #ede9f5;
  --color-accent: #b8860b;
  --color-shadow: rgba(28, 25, 23, 0.08);
  --color-overlay: rgba(28, 25, 23, 0.4);
  --color-prose: #292524;
  --color-code-bg: #f5f5f4;
  --color-quote-border: #c4b5a5;
  --header-bg: rgba(247, 245, 240, 0.92);
}

[data-theme="sepia"] {
  --color-bg: #f4ecd8;
  --color-surface: #faf6eb;
  --color-surface-elevated: #fffdf7;
  --color-border: #ddd0b8;
  --color-text: #3d2f1f;
  --color-text-muted: #8b7355;
  --color-primary: #6b5344;
  --color-primary-hover: #564336;
  --color-primary-soft: #ebe0d0;
  --color-accent: #a67c00;
  --color-shadow: rgba(61, 47, 31, 0.1);
  --color-overlay: rgba(61, 47, 31, 0.45);
  --color-prose: #3d2f1f;
  --color-code-bg: #ebe3d0;
  --color-quote-border: #c9b896;
  --header-bg: rgba(244, 236, 216, 0.92);
}

[data-theme="dark"] {
  --color-bg: #141210;
  --color-surface: #1e1b18;
  --color-surface-elevated: #292524;
  --color-border: #3d3835;
  --color-text: #f5f5f4;
  --color-text-muted: #a8a29e;
  --color-primary: #a78bfa;
  --color-primary-hover: #8b5cf6;
  --color-primary-soft: #2e2640;
  --color-accent: #fbbf24;
  --color-shadow: rgba(0, 0, 0, 0.35);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-prose: #e7e5e4;
  --color-code-bg: #292524;
  --color-quote-border: #57534e;
  --header-bg: rgba(20, 18, 16, 0.92);
}

:root {
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif;
  --font-kai: "LXGW WenKai", "Kaiti SC", "STKaiti", KaiTi, serif;
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --header-height: 56px;
  --mobile-bar-height: 52px;
  --transition: 180ms ease;
  --content-width: 720px;
  --font-size: 18px;
  --line-height: 1.8;
  --font-family-active: var(--font-serif);
}