:root {
  color-scheme: light;

  --color-emerald: #1f7a63;
  --color-action: #1e3a4c;
  --color-action-hover: #081c2d;
  --color-heading: #164037;
  --color-text: #164037;
  --color-text-secondary: #3b544f;
  --color-text-muted: #58706b;
  --color-jade: #28926e;
  --color-mint: #3cc48f;
  --color-gray: #9aa3a8;
  --color-border: #d2d6d8;
  --color-page-bg: #ebeff3;
  --color-soft: #f5f7fa;
  --color-white: #ffffff;

  --color-wood-bg: #f6efe6;
  --color-wood-border: #e3d4c0;
  --color-wood-accent: #c19e74;
  --color-wood-ink: #45392d;
  --color-wood-label: #634b33;

  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --color-photo-bg: #f5f7fa;
  --color-photo-frame: #f5f7fa;

  --text-body: 1.0625rem;
  --text-body-sm: 0.9375rem;
  --text-nav: 0.9375rem;
  --text-btn: 1rem;
  --text-h1: clamp(2rem, 5vw, 3.5rem);
  --text-h2: clamp(1.6875rem, 3.5vw, 2.625rem);
  --text-h3: clamp(1.25rem, 2vw, 1.625rem);

  --leading-body: 1.5;
  --leading-heading: 1.15;

  --space-page: clamp(1.125rem, 2.5vw, 2rem);
  --space-section: clamp(2.5rem, 6vw, 5rem);
  --space-gap: 1.5rem;

  --width-content: 75rem;
  --width-prose: 45rem;

  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.375rem;
  --radius-xl: 1.75rem;

  --shadow-card: 0 8px 24px rgb(8 28 45 / 8%);

  --tap: 2.75rem;
  --header-h: 4.25rem;

  --focus-ring: 3px solid var(--color-mint);
  --focus-offset: 3px;
}

@media (min-width: 768px) {
  :root {
    --text-body: 1.125rem;
  }
}