/* ==========================================================================
   VARIABLES — change colours, fonts, spacing and radii here.
   Every other CSS file reads these tokens, so one edit updates the whole site.
   ========================================================================== */
:root {
  /* Brand colours */
  --ivory: #FAF8F4;       /* page background */
  --white: #FFFFFF;       /* cards, header */
  --champagne: #E9DDC9;   /* soft accents, announcement bar */
  --gold: #B79A6B;        /* borders, icons, button hover */
  --charcoal: #292724;    /* main text, primary buttons */
  --muted: #77716A;       /* secondary text (use on ivory / white only) */
  --gold-text: #7F6538;   /* darker gold, safe for small text (AA contrast) */
  --line: rgba(41, 39, 36, 0.14);
  --line-gold: rgba(183, 154, 107, 0.6);
  --focus: #7F6538;

  /* Fonts (loaded from Google Fonts in each page <head>) */
  --font-heading: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", Lato, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale */
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h3: clamp(1.45rem, 2.4vw, 1.75rem);
  --fs-h2: clamp(2.2rem, 4.6vw, 3.5rem);
  --fs-h1: clamp(2.9rem, 7.2vw, 5.6rem);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --header-h: 72px;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 10px;
  --shadow-soft: 0 14px 34px -18px rgba(41, 39, 36, 0.3);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Hero image focal point: "x% y%". Move it so the couple stays in frame
     on small screens, e.g. "50% 30%" keeps faces higher in the crop. */
  --hero-focus: 60% 40%;
}