:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans SC", "Source Han Sans SC", "PingFang SC", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono",
    Menlo, monospace;

  --text-display: 2.5rem;
  --text-display-zh: 2.375rem;
  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-code: 0.875rem;
  --line-height-display: 1.15;
  --line-height-body: 1.7;
  --line-height-code: 1.6;

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

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;

  --layout-navbar-height: 56px;
  --layout-sidebar-width: 260px;
  --layout-toc-width: 220px;
  --layout-content-max: 44rem;
  --layout-max: 1400px;

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

:root,
html[data-theme="dark"] {
  --color-bg-base: #0d1117;
  --color-bg-surface: #161b22;
  --color-bg-raised: #1c2128;
  --color-bg-overlay: #22272e;
  --color-bg-inline-code: #2d333b;
  --color-text-primary: #e6edf3;
  --color-text-secondary: #9da7b3;
  --color-text-tertiary: #7d8590;
  --color-text-inverse: #0d1117;
  --color-border-subtle: #21262d;
  --color-border-default: #30363d;
  --color-border-strong: #3d444d;
  --color-accent: #39c5cf;
  --color-accent-hover: #56d4dd;
  --color-accent-active: #2aa8b2;
  --color-accent-subtle: rgba(57, 197, 207, 0.12);
  --color-info: #58a6ff;
  --color-warning: #d29922;
  --color-danger: #f85149;
  --color-success: #3fb950;
  --code-text: #e6edf3;
  --code-comment: #8b949e;
  --code-keyword: #ff7b72;
  --code-string: #a5d6ff;
  --code-number: #79c0ff;
  --code-function: #d2a8ff;
  --code-class: #ffa657;
  color-scheme: dark;
}

html[data-theme="light"] {
  --color-bg-base: #ffffff;
  --color-bg-surface: #f6f8fa;
  --color-bg-raised: #ffffff;
  --color-bg-overlay: #ffffff;
  --color-bg-inline-code: #eff1f3;
  --color-text-primary: #1f2328;
  --color-text-secondary: #59636e;
  --color-text-tertiary: #6e7781;
  --color-text-inverse: #ffffff;
  --color-border-subtle: #e8ebee;
  --color-border-default: #d1d9e0;
  --color-border-strong: #b6bfc8;
  --color-accent: #0e7c86;
  --color-accent-hover: #0a626b;
  --color-accent-active: #084e55;
  --color-accent-subtle: rgba(14, 124, 134, 0.1);
  --color-info: #0969da;
  --color-warning: #9a6700;
  --color-danger: #cf222e;
  --color-success: #1a7f37;
  --code-text: #1f2328;
  --code-comment: #59636e;
  --code-keyword: #cf222e;
  --code-string: #0a3069;
  --code-number: #0550ae;
  --code-function: #8250df;
  --code-class: #953800;
  color-scheme: light;
}

html[data-theme="dark"],
html[data-theme="light"] {
  --pst-font-family-base: var(--font-sans);
  --pst-font-family-monospace: var(--font-mono);
  --pst-color-background: var(--color-bg-base);
  --pst-color-surface: var(--color-bg-surface);
  --pst-color-on-surface: var(--color-bg-raised);
  --pst-color-on-background: var(--color-bg-overlay);
  --pst-color-text-base: var(--color-text-primary);
  --pst-color-text-muted: var(--color-text-secondary);
  --pst-color-border: var(--color-border-subtle);
  --pst-color-primary: var(--color-accent);
  --pst-color-primary-highlight: var(--color-accent-hover);
  --pst-color-info: var(--color-info);
  --pst-color-warning: var(--color-warning);
  --pst-color-danger: var(--color-danger);
  --pst-color-success: var(--color-success);
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --color-bg-base: #ffffff;
    --color-bg-surface: #f6f8fa;
    --color-bg-raised: #ffffff;
    --color-bg-overlay: #ffffff;
    --color-bg-inline-code: #eff1f3;
    --color-text-primary: #1f2328;
    --color-text-secondary: #59636e;
    --color-text-tertiary: #6e7781;
    --color-text-inverse: #ffffff;
    --color-border-subtle: #e8ebee;
    --color-border-default: #d1d9e0;
    --color-border-strong: #b6bfc8;
    --color-accent: #0e7c86;
    --color-accent-hover: #0a626b;
    --color-accent-active: #084e55;
    --color-accent-subtle: rgba(14, 124, 134, 0.1);
    --color-info: #0969da;
    --color-warning: #9a6700;
    --color-danger: #cf222e;
    --color-success: #1a7f37;
    --code-text: #1f2328;
    --code-comment: #59636e;
    --code-keyword: #cf222e;
    --code-string: #0a3069;
    --code-number: #0550ae;
    --code-function: #8250df;
    --code-class: #953800;
    color-scheme: light;
  }
}

html[data-theme="auto"] {
  --pst-font-family-base: var(--font-sans);
  --pst-font-family-monospace: var(--font-mono);
  --pst-color-background: var(--color-bg-base);
  --pst-color-surface: var(--color-bg-surface);
  --pst-color-on-surface: var(--color-bg-raised);
  --pst-color-on-background: var(--color-bg-overlay);
  --pst-color-text-base: var(--color-text-primary);
  --pst-color-text-muted: var(--color-text-secondary);
  --pst-color-border: var(--color-border-subtle);
  --pst-color-primary: var(--color-accent);
  --pst-color-primary-highlight: var(--color-accent-hover);
  --pst-color-info: var(--color-info);
  --pst-color-warning: var(--color-warning);
  --pst-color-danger: var(--color-danger);
  --pst-color-success: var(--color-success);
}