:root {
  color-scheme: light;

  --color-paper: #fbfaf6;
  --color-paper-deep: #f5f2eb;
  --color-surface: #fffef9;
  --color-ink: #292b28;
  --color-ink-soft: #4b4e48;
  --color-muted: #6f7069;
  --color-sage: #527a4b;
  --color-sage-dark: #365f39;
  --color-sage-pale: #eef2e9;
  --color-clay: #a6541a;
  --color-clay-dark: #7f3c10;
  --color-clay-pale: #f8eadb;
  --color-rule: #dedbd4;
  --color-rule-strong: #c7c3ba;
  --color-focus: #8a4d1f;
  --color-accent-ink: #fffef9;

  --font-display: "Newsreader", "Yu Mincho", "YuMincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono: "IBM Plex Mono", "BIZ UDPGothic", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.953125rem;
  --text-2xl: 2.44140625rem;
  --text-3xl: 3.0517578125rem;
  --text-display: clamp(3rem, 6vw, 5.25rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --content-max: 86rem;
  --rail-width: 7rem;
  --z-sticky: 10;
  --z-sticky-nav: 20;
  --banner-height: 0px;
}