/*
  Design tokens: the brand's raw values in one place.
  Every other stylesheet uses these variables instead of typing hex codes,
  so changing a color here changes it everywhere.
  Colors were sampled from the Canva Community One-Pager; swap in the
  exact Canva hex values once you have them.
*/
:root {
  /* Forest green: header/footer bands, callouts, primary buttons */
  --forest-900: #1E3A2F;
  --forest-700: #2F5444;
  --forest-100: #E3EADF;

  /* Cream: page and card backgrounds */
  --cream-50: #FBF8F1;
  --cream-100: #F5EFE3;
  --cream-200: #EAE1CF;

  /* Brick: a deep rust red, used sparingly. Kept dark on purpose so it
     never reads as the bright terracotta orange common in AI-made sites. */
  --brick-500: #9A4630;
  --brick-700: #7A3324;

  /* Butter yellow from the logo's sun: keyboard focus ring on dark green */
  --sun-300: #E8C872;

  /* Text */
  --ink: #1C2621;
  --ink-muted: #4F5A53;
  --on-forest: #F5EFE3;
  --on-forest-muted: #C9D3C9;

  /* Type: Fraunces for headings, Public Sans for everything else */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale. clamp(min, preferred, max) grows text smoothly
     between phone and desktop widths without breakpoints. */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --text-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);

  /* Spacing, radius, layout */
  --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;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  /* The two spacing values the page uses: between sections, and between
     blocks inside a section */
  --section-space: clamp(4rem, 3rem + 4vw, 6rem);
  --block-space: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --content-max: 72rem;
  --prose-max: 40rem;
  --gutter: clamp(1rem, 4vw, 2rem);
}