:root {
  --paper: #f6f3f7;
  --paper-translucent: rgba(246, 243, 247, 0.86);
  --surface: #ffffff;
  --ink: #241e2e;
  --muted: #675e70;
  --line: #e6dfea;
  --plum: #5a3d63;
  --plum-deep: #2e1f35;
  --plum-soft: #efe7f1;
  --accent: #a84462;
  --accent-soft: #f6e7eb;
  --accent-bright: #e7a8ba;
  --sage: #4f6e5c;
  --sage-soft: #e4ede7;
  --on-dark: #f6f3f7;
  --on-dark-muted: #c9bbd0;
  --shadow: rgba(46, 31, 53, 0.16);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
blockquote {
  font-family: var(--font-display);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.loop-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s var(--ease-out) 0.15s;
}

.reveal.is-visible .loop-path {
  stroke-dashoffset: 6;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .loop-path {
    stroke-dashoffset: 6;
    transition: none;
  }
}