/* ================= FONTS ================= */
@font-face {
  font-family: "PP Fraktion Sans";
  src: url("../Fonts/PPFraktionSans-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================
   DESIGN TOKENS — single source of truth for color, type, and spacing.
   Reference these vars instead of hardcoding a size or color.

   Breakpoints used across the site:
     • 640 / 641px  — mobile ⇄ tablet
     • 767 / 768px  — tablet ⇄ small-desktop (Our Story hero stack)
     • 899 / 900px  — small-desktop ⇄ desktop (Our Story timeline split)
     • 1023 / 1024px — tablet ⇄ desktop (main nav switch)
   ===================================================================== */

:root {
  /* ---- Color ---- */
  --raw-burgundy: #471224;
  --raw-chartreuse: #979c34;
  --raw-blue: #7b96b3;
  --raw-satin: #f4e8b8;
  --raw-ivory: #f0ede0;
  --raw-tomato: #d94b32;
  --raw-pink-lt: #cea8a6;
  --raw-pink-dk: #cc8193;

  --color-bg: var(--raw-ivory);
  --color-bg-alt: var(--raw-satin);
  --color-bg-deep: var(--raw-burgundy);
  --color-bg-olive: var(--raw-chartreuse);
  --color-bg-blue: var(--raw-blue);
  --color-text: var(--raw-burgundy);
  --color-text-on-dark: var(--raw-satin);
  --color-heading: var(--raw-burgundy);
  --color-cta: var(--raw-tomato);
  --color-cta-hover: var(--raw-burgundy);
  --color-accent-soft: var(--raw-pink-dk);
  --color-divider: var(--raw-blue);

  /* ---- Type families ---- */
  --font-h1-h2: "gorgias", serif;
  --font-h3: "krul", cursive;
  --font-h4: "PP Fraktion Sans", sans-serif;
  --font-body: "times-new-roman", serif;

  --weight-h1-h2: 400;
  --weight-h3: 400;
  --weight-body: 400;

  --text-display: clamp(5.25rem, 3.6rem + 9.75vw, 16rem);  /* the two hero titles only */
  --text-display-mobile: clamp(4rem, 25.35vw, 7rem);     /* ≤640/767px only */
  --text-h1: var(--text-display);
  --text-h2: clamp(2.4rem, 2.4rem + 4.28vw, 5.5rem);       /* section titles */
  --text-h3: clamp(1.5rem, 1.5rem + 2.9vw, 4.1rem);          /* eyebrows, RSVP heading, milestone date */
  --text-h4: clamp(1.3rem, 1.3rem + 1.44vw, 2.0rem);         /* small labels */
  --text-nav: clamp(0.8rem, 0.8rem + 1.1vw, 1.8rem);         /* primary nav links */
  --text-body: clamp(1rem, 1rem + 1.17vw, 1.35rem);          /* running copy */
  --text-sm: clamp(0.8rem, 0.8rem + 0.78vw, 1.5rem);         /* form labels, fine print */
  --text-xs: 0.5rem;                                          /* button micro-label */

  /* ---- Spacing ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 10rem;
  --space-12: 20rem;
  --space-14: 3.5rem;

  /* ---- Misc ---- */
  --radius-sm: 4px;
  --radius-pill: 999px;
  --max-content: 1280px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 220ms;
}