/* ==========================================================================
   Design tokens — colors, type, spacing.
   Every other stylesheet should read these custom properties rather than
   hardcoding a color or font value directly.
   ========================================================================== */

:root {
  /* Colors, matched from the live Squarespace site */
  --color-ink: #3f4a49;            /* primary text, dark header background */
  --color-ink-secondary: #495a58;  /* secondary dark accent */
  --color-accent: #d4967d;         /* terracotta — buttons, links, highlights */
  --color-accent-hover: #c07f63;   /* darker terracotta for hover/active states */
  --color-border: #dcd9d0;         /* warm neutral — borders, alternating section bg */
  --color-cream: #f4f2ed;          /* lighter tint of --color-border for section bg */
  --color-white: #ffffff;

  /* Text-on-color pairings */
  --color-on-ink: var(--color-white);
  --color-on-accent: var(--color-white);

  /* Fonts.
     Heading: the live site uses a licensed Adobe Fonts family ("adonis-web")
     we don't have a license for. Lora is a free, close visual match — swap
     it here in one place if a licensed font becomes available later. */
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Pontano Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;

  /* Layout */
  --content-width: 1120px;
  --content-width-narrow: 760px;
  --radius: 6px;
}