:root {
  color-scheme: light;

  --color-canvas: #f7f0e7;
  --color-surface: rgba(255, 252, 246, 0.78);
  --color-surface-strong: #fffaf2;
  --color-ink: #201d18;
  --color-muted: #70685d;
  --color-line: rgba(32, 29, 24, 0.18);
  --color-accent: #8b6548;
  --color-accent-strong: #5f402d;
  --color-olive: #6d725c;
  --color-clay: #b47a5b;
  --color-focus: #1c5f70;
  --color-shadow: rgba(30, 24, 17, 0.16);
  --color-watermark: rgba(255, 250, 242, 0.28);
  --overlay-warm: linear-gradient(180deg, rgba(250, 245, 237, 0.78), rgba(232, 221, 208, 0.7));
  --overlay-grey: linear-gradient(180deg, rgba(246, 246, 242, 0.82), rgba(214, 211, 203, 0.72));
  --overlay-solid: rgba(247, 240, 231, 0.94);

  --font-display: "Prata", Georgia, serif;
  --font-brand: "Prata", Georgia, serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.55rem;
  --text-2xl: 2rem;
  --text-3xl: 2.6rem;
  --text-hero: 3.4rem;
  --text-watermark: 4.7rem;

  --leading-tight: 0.92;
  --leading-heading: 1.02;
  --leading-body: 1.65;

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

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow-soft: 0 20px 70px var(--color-shadow);
  --shadow-line: 0 0 0 1px var(--color-line);

  --layer-background: -2;
  --layer-overlay: -1;
  --layer-content: 1;
  --layer-nav: 20;
  --layer-menu: 30;

  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 700ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);

  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 60rem;
  --bp-xl: 75rem;

  --nav-size: 5rem;
  --nav-desktop: 7.5rem;
  --section-pad-inline: 1.25rem;
  --section-pad-block: 5.5rem;
  --content-narrow: 47rem;
  --content-wide: 72rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #151411;
  --color-surface: rgba(29, 27, 23, 0.8);
  --color-surface-strong: #211f1a;
  --color-ink: #f6efe5;
  --color-muted: #c6bbae;
  --color-line: rgba(246, 239, 229, 0.2);
  --color-accent: #d4a37c;
  --color-accent-strong: #f1c9a7;
  --color-olive: #aab092;
  --color-clay: #de9571;
  --color-focus: #8bd8ff;
  --color-shadow: rgba(0, 0, 0, 0.36);
  --color-watermark: rgba(255, 250, 242, 0.12);
  --overlay-warm: linear-gradient(180deg, rgba(22, 21, 18, 0.78), rgba(36, 31, 26, 0.84));
  --overlay-grey: linear-gradient(180deg, rgba(20, 20, 19, 0.76), rgba(48, 46, 43, 0.84));
  --overlay-solid: rgba(21, 20, 17, 0.94);
}

:root[data-theme="contrast"] {
  color-scheme: light;
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-surface-strong: #ffffff;
  --color-ink: #000000;
  --color-muted: #151515;
  --color-line: #000000;
  --color-accent: #000000;
  --color-accent-strong: #000000;
  --color-olive: #000000;
  --color-clay: #000000;
  --color-focus: #0047ff;
  --color-shadow: rgba(0, 0, 0, 0.28);
  --color-watermark: rgba(0, 0, 0, 0.08);
  --overlay-warm: rgba(255, 255, 255, 0.9);
  --overlay-grey: rgba(255, 255, 255, 0.94);
  --overlay-solid: #ffffff;
}

@media (min-width: 48rem) {
  :root {
    --text-xl: 1.7rem;
    --text-2xl: 2.35rem;
    --text-3xl: 3.25rem;
    --text-hero: 5.35rem;
    --text-watermark: 8rem;
    --section-pad-inline: 2.5rem;
    --section-pad-block: 6rem;
  }
}

@media (min-width: 75rem) {
  :root {
    --text-hero: 7.15rem;
    --text-watermark: 11rem;
    --section-pad-inline: 4rem;
    --section-pad-block: 7rem;
  }
}