@font-face {
  font-display: swap;
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/great-vibes-400.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/hanken-grotesk-400.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/hanken-grotesk-500.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/hanken-grotesk-600.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/hanken-grotesk-700.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 800;
  src: url("/assets/fonts/hanken-grotesk-800.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/newsreader-300.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/newsreader-400.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/newsreader-500.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/newsreader-600.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --color-ink: #3e2138;
  --color-muted: #6f5f69;
  --color-soft-ink: #8a7883;
  --color-paper: #fbf6f0;
  --color-bg: var(--color-paper);
  --color-stage: #f2ecf5;
  --color-panel: #f5f1f7;
  --color-panel-alt: #f3e7ed;
  --color-surface: #ffffff;
  --color-soft: #f1eaf4;
  --color-soft-2: #e9f1ec;
  --color-line: #e7dbee;
  --color-border: #e3d7e8;
  --color-border-strong: #cdb9d9;
  --color-brand: #6e3d63;
  --color-brand-strong: #512e4a;
  --color-primary: var(--color-brand);
  --color-primary-dark: var(--color-brand-strong);
  --color-accent: #a85c97;
  --color-calm: #4f786d;
  --color-lavender: #ece5f1;
  --color-mauve: #c9a7d0;
  --shadow-soft: 0 22px 52px rgba(62, 33, 56, 0.16);
  --shadow-cover: 0 14px 28px -10px rgba(62, 33, 56, 0.48);
  --space-page: clamp(1.1rem, 4.8vw, 3.5rem);
  --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;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-script: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  --header-height: 86px;
  --content-max: 1120px;
}