@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap");

:root {
  --bg: #fff1ea;
  --surface: #fff1ea;
  --wash: #ffe3d6;
  --wash-2: #fff1ea;

  --ink: #6b5f57;
  --peach: #c05b49;
  --strong: #6b2502;

  /* Typography */
  --ff-body: "Gowun Batang", ui-serif, Georgia, "Times New Roman", serif;
  --ff-script: "Great Vibes", ui-cursive, "Brush Script MT", cursive;

  --fs-body: clamp(1rem, 0.875rem + 0.5vw, 1.125rem);
  --fs-cta: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-caption: clamp(0.875rem, 0.825rem + 0.3vw, 1rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);

  --lh-body: 1.6;

  /* Section spacing */
  --section-padding-vertical: clamp(3.75rem, 10vw, 7.5rem);
  --section-padding-horizontal: clamp(1.5rem, 6vw, 4.5rem);

  --container-max: 1100px;

  /* Spacing scale */
  --gap-tight: 0.625rem;
  --gap-sm: 0.75rem;
  --gap-mid: 1rem;
  --gap: 1.375rem;
  --gap-loose: 1.625rem;

  /* Layout gaps */
  --layout-gap: clamp(1.75rem, 5vw, 4.5rem);
  --subsection-gap-sm: clamp(1.625rem, 4vw, 2.75rem);
  --subsection-gap: clamp(3rem, 7vw, 5.25rem);

  --button-padding-y: var(--gap-mid);
  --button-padding-x: 3.5rem;

  --scrollbar-color-track: var(--peach);
  --scrollbar-color-thumb: var(--bg);
  scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
}

@media (max-width: 600px) {
  :root {
    --fs-body: clamp(1.125rem, 1.025rem + 0.6vw, 1.25rem);
  }
}