:root {
  --color-ink: #20231f;
  --color-bone: #f5f1e9;
  --color-mineral: #d8d1c5;
  --color-sage: #5d6758;
  --color-clay: #7a4e3e;
  --color-white: #ffffff;

  --color-background: var(--color-bone);
  --color-surface: var(--color-white);
  --color-foreground: var(--color-ink);
  --color-muted: var(--color-mineral);
  --color-secondary: var(--color-sage);
  --color-accent: var(--color-clay);
  --color-on-accent: var(--color-white);
  --color-border: var(--color-mineral);
  --color-focus: var(--color-clay);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: Manrope, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.75rem;
  --text-display: clamp(4.5rem, 12vw, 10rem);

  --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;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-none: 0;
  --radius-small: 0.25rem;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --shadow-image: 0 1.5rem 4rem rgb(32 35 31 / 0.1);

  --content-reading: 42rem;
  --content-standard: 76rem;
  --content-wide: 96rem;
  --ratio-portrait: 4 / 5;
  --ratio-landscape: 3 / 2;
  --ratio-cinema: 16 / 9;
  --ratio-square: 1 / 1;

  --duration-fast: 160ms;
  --duration-normal: 260ms;
  --duration-slow: 420ms;
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);

  --button-height: 3rem;
  --button-padding-inline: var(--space-6);
  --nav-height: 4.5rem;
}