:root {
  color-scheme: light;
  --font-display: "Lora Variable", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3 Variable", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* One hierarchy for every surface. Change it here, not inside a page. */
  --type-display: clamp(3.5rem, 6vw, 6.25rem);
  --type-display-tablet: clamp(3.7rem, 7vw, 5rem);
  --type-display-mobile: clamp(3.25rem, 16vw, 4.1rem);
  --type-page-title: clamp(2.35rem, 4vw, 4.3rem);
  --type-page-title-mobile: 2.35rem;
  --type-section-title: clamp(2.2rem, 3.8vw, 4.2rem);
  --type-card-title: 1.45rem;
  --type-body-large: clamp(1.08rem, 1.35vw, 1.3rem);
  --type-body: 1rem;
  --type-small: 0.86rem;
  --type-caption: 0.74rem;
  --leading-display: 0.98;
  --leading-heading: 1.08;
  --leading-body: 1.58;

  --forest-950: #14221c;
  --forest-900: #1f2c25;
  --forest-800: #30483b;
  --forest-700: #486252;
  --sage-500: #728369;
  --sage-300: #aeb8a5;
  --sage-100: #e8ece3;
  --terracotta-700: #9f4e34;
  --terracotta-500: #b86544;
  --terracotta-100: #f2dfd5;
  --parchment-50: #fffdf8;
  --parchment-100: #faf7ef;
  --parchment-200: #f5f0e6;
  --parchment-300: #e9e1d3;
  --sand-400: #d7b46a;
  --ink-950: #18201d;
  --ink-700: #4b5752;
  --ink-500: #6f7974;
  --danger-700: #8b3832;
  --danger-100: #f4deda;
  --success-700: #27654f;
  --success-100: #deeee6;
  --warning-700: #7b5a1e;
  --warning-100: #f4e8c8;

  --color-canvas: var(--parchment-200);
  --color-surface: var(--parchment-100);
  --color-surface-raised: var(--parchment-50);
  --color-surface-muted: var(--parchment-300);
  --color-ink: var(--ink-950);
  --color-ink-soft: var(--ink-700);
  --color-ink-muted: var(--ink-500);
  --color-line: #d9d1c4;
  --color-brand: var(--forest-900);
  --color-brand-hover: var(--forest-800);
  --color-brand-soft: var(--sage-100);
  --color-accent: var(--terracotta-500);
  --color-accent-soft: var(--terracotta-100);
  --color-on-dark: #fffaf0;
  --color-focus: #b54f2d;
  --color-danger: var(--danger-700);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  --radius-xs: 0.4rem;
  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-round: 999rem;

  --shadow-sm: 0 0.5rem 1.5rem rgba(36, 52, 45, 0.07);
  --shadow-md: 0 1rem 3rem rgba(36, 52, 45, 0.11);
  --shadow-lg: 0 2rem 5rem rgba(23, 63, 53, 0.17);

  --container: 90rem;
  --page-gutter: clamp(1rem, 3.2vw, 3.5rem);
  --content-gutter: clamp(1rem, 2.4vw, 2.5rem);
  --reading-width: 46rem;
  --site-header: 5rem;
  --app-header: 4.5rem;
  /* Navigation supports the workspace; it must not compete with its content. */
  --sidebar: 12.5rem;
  --transition-fast: 160ms ease;
  --transition-base: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --z-header: 20;
  --z-nav: 30;
  --z-overlay: 40;
}