@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ivory-50: #fcfaf6;
  --ivory-100: #f7f3eb;
  --ivory-200: #efe8dc;
  --ivory-300: #dcd3c5;
  --stone-500: #746d63;
  --stone-600: #645b51;
  --stone-800: #3e3b32;
  --stone-900: #2e3029;
  --forest-100: #e1e8dc;
  --forest-200: #ced9c8;
  --forest-600: #365a43;
  --forest-700: #244533;
  --forest-900: #1e382b;
  --rust-700: #8b3a2b;

  --surface-canvas: var(--ivory-50);
  --surface-warm: var(--ivory-100);
  --surface-deep: var(--ivory-200);
  --surface-photo: var(--forest-100);
  --surface-dark: var(--forest-900);
  --text-primary: var(--forest-900);
  --text-secondary: var(--stone-600);
  --text-muted: var(--stone-500);
  --text-inverse: var(--ivory-50);
  --border-subtle: var(--ivory-300);
  --accent: var(--forest-600);
  --accent-hover: var(--forest-700);
  --focus-ring: var(--forest-700);
  --error: var(--rust-700);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-display: clamp(2.75rem, 4.6vw, 4.5rem);
  --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;
  --page-gutter: clamp(1.25rem, 5.5vw, 6rem);
  --content-width: 82rem;
  --radius-button: 2px;
  --radius-input: 6px;
  --radius-dialog: 14px;
  --shadow-bar: 0 -2px 8px rgb(46 48 41 / 3%), 0 -10px 32px rgb(46 48 41 / 4%);
  --shadow-dialog: 0 8px 24px rgb(20 22 18 / 12%), 0 24px 80px rgb(20 22 18 / 18%);
  --duration-fast: 160ms;
  --duration-enter: 240ms;
  --duration-exit: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-header: 20;
  --z-mobile: 30;
}