@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;1,600;1,700&display=swap");

:root {
  --kh-primary: #7a13aa;
  --kh-primary-dark: #560b79;
  --kh-lavender: #f4ebfa;
  --kh-surface-muted: #f5f5f5;
  --kh-paper: #ffffff;
  --kh-ink: #000000;
  --kh-copy: #27282a;
  --kh-muted-copy: #666666;
  --kh-line: #d5d5d5;
  --kh-heading-font: "Playfair Display", serif;
  --kh-body-font: "Montserrat", sans-serif;
  --kh-radius-control: 8px;
  --kh-radius-card: 14px;
  --kh-radius-panel: 18px;
  --kh-brand-kays-color: #000000;
  --kh-brand-haven-color: #9760c3;
}

body, button, input, textarea, select { font-family: var(--kh-body-font); }
body { color: var(--kh-copy); background: var(--kh-paper); }

.kh-brand { display: inline-flex; align-items: baseline; gap: .22em; color: inherit; font-family: "Montserrat", sans-serif; font-weight: 700; letter-spacing: -.035em; text-decoration: none; }
.kh-brand__kays { color: var(--kh-brand-kays-color); font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 700; }
.kh-brand__haven { color: var(--kh-brand-haven-color); font-family: "Playfair Display", serif; font-style: italic; font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--kh-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}