:root {
  color-scheme: light;

  --color-bg: #f4efe7;
  --color-bg-soft: #faf7f1;
  --color-surface: #fffdf8;
  --color-surface-soft: #f8f2ea;
  --color-surface-raised: #ffffff;
  --color-text: #25211c;
  --color-text-soft: #4f4840;
  --color-text-muted: #7d7469;
  --color-text-faint: #a59a8d;
  --color-border: #ded4c7;
  --color-border-soft: #ebe2d7;
  --color-link: #8b4f2f;
  --color-link-hover: #62351f;
  --color-link-bg: #f1dfd2;
  --color-accent: #9a5b36;
  --color-accent-contrast: #fffdf8;
  --color-accent-strong: #733d23;
  --color-accent-soft: #ead3c2;
  --color-code-bg: #eee5da;
  --color-code-text: #3a2d25;
  --color-mark-bg: #fff0b8;
  --color-selection-bg: #d9b08c;
  --color-selection-text: #211915;
  --color-shadow: rgb(66 48 31);

  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-reading: "Literata", Georgia, "Times New Roman", serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font-sans: var(--font-ui);
  --font-code: var(--font-mono);

  --space-2xs: 0.25rem;
  --space-xs: 0.4rem;
  --space-sm: 0.65rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-card: 0 10px 28px rgba(66, 48, 31, 0.10);
  --shadow-card-hover: 0 16px 42px rgba(66, 48, 31, 0.14);
  --shadow-soft: 0 18px 48px rgba(66, 48, 31, 0.08);

  --width-reading: 820px;
  --width-single: 820px;
  --width-reading-narrow: 720px;
  --width-content-wide: 980px;
  --width-wide: var(--width-content-wide);
  --width-title: 1080px;
  --width-site: 1240px;

  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #151413;
  --color-bg-soft: #1b1917;
  --color-surface: #211f1d;
  --color-surface-soft: #2a2724;
  --color-surface-raised: #292622;
  --color-text: #eee8df;
  --color-text-soft: #d6ccc0;
  --color-text-muted: #aaa095;
  --color-text-faint: #7f766d;
  --color-border: #3d3832;
  --color-border-soft: #332f2a;
  --color-link: #d8a06f;
  --color-link-hover: #f0bd8f;
  --color-link-bg: #3a2a20;
  --color-accent: #d59a69;
  --color-accent-contrast: #211915;
  --color-accent-strong: #f0bd8f;
  --color-accent-soft: #3a2c23;
  --color-code-bg: #2f2b26;
  --color-code-text: #f0dfc8;
  --color-mark-bg: #5a4420;
  --color-selection-bg: #8f6848;
  --color-selection-text: #fff8ee;
  --color-shadow: rgb(0 0 0);

  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.34);
  --shadow-card-hover: 0 18px 48px rgba(0, 0, 0, 0.48);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.32);
}


/* v0.28.0: browser UI color-scheme hint */
:root {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}