:root {
  color-scheme: light;

  --color-background: #fbfaf7;
  --color-background-soft: #ffffff;
  --color-background-deep: #efebe2;
  --color-background-symbol: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f2eb;
  --color-text: #141922;
  --color-text-inverse: #ffffff;
  --color-text-muted: #5d6675;
  --color-text-inverse-muted: #eef2f7;
  --color-accent: #9b6c1b;
  --color-accent-strong: #8a5f12;
  --color-accent-strong-hover: #6f4b0e;
  --color-accent-deep: #5f410c;
  --color-on-accent: #ffffff;
  --color-border: #e8e1d5;
  --color-border-dark: #d8cfc0;
  --color-header-text: #1f2530;

  --rgb-background: 251 250 247;
  --rgb-text: 20 25 34;
  --rgb-text-muted: 93 102 117;
  --rgb-accent: 155 108 27;
  --rgb-accent-strong: 138 95 18;
  --rgb-white: 255 255 255;

  --color-shadow: rgb(var(--rgb-text) / 8%);
  --color-shadow-soft: rgb(var(--rgb-text) / 5%);
  --color-shadow-faint: rgb(var(--rgb-text) / 3%);
  --color-overlay-faint: rgb(var(--rgb-white) / 68%);
  --color-overlay-soft: rgb(var(--rgb-white) / 86%);
  --color-accent-outline: rgb(var(--rgb-accent-strong) / 34%);
  --color-accent-border: rgb(var(--rgb-accent) / 34%);
  --color-accent-border-soft: rgb(var(--rgb-accent) / 21%);
  --color-accent-border-faint: rgb(var(--rgb-accent) / 14%);
  --color-accent-border-strong: rgb(var(--rgb-accent) / 48%);
  --color-accent-border-band: rgb(var(--rgb-accent) / 30%);
  --color-divider-accent: rgb(var(--rgb-accent) / 12%);
  --color-glow-accent: rgb(var(--rgb-accent) / 13%);
  --color-footer-credit: rgb(var(--rgb-text-muted) / 86%);
  --color-header-fade: rgb(var(--rgb-white) / 92%);

  --font-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.08rem;
  --text-xl: 1.2rem;
  --text-2xl: 1.62rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3.12rem;

  --leading-tight: 1.08;
  --leading-heading: 1.16;
  --leading-body: 1.65;

  --space-1: 0.35rem;
  --space-2: 0.55rem;
  --space-3: 0.85rem;
  --space-4: 1rem;
  --space-5: 1.35rem;
  --space-6: 1.75rem;
  --space-7: 2.25rem;
  --space-8: 3rem;
  --space-9: 4rem;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;

  --container-max: 1160px;
  --section-padding: 4rem;
  --page-gutter: 1rem;
}

@media (min-width: 760px) {
  :root {
    --section-padding: 4.75rem;
    --page-gutter: 2rem;
  }
}