/* ==========================================================================
   THEME — edit this file to change the look of the whole site.
   Fonts, colors, and the hero photos all live here.
   ========================================================================== */

/* 1. FONTS
   Pick fonts at https://fonts.google.com, click "Get embed code",
   copy the @import line it gives you, and paste it below (replacing this one).
   Then put the font names in --font-heading / --font-body. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Pinyon+Script&display=swap');

:root {
  --font-heading: 'Pinyon Script', cursive;
  --font-title: 'Pinyon Script', cursive;   /* big names at the top of each page */
  --font-body: 'Libre Baskerville', Georgia, serif;
  --heading-thinning: 0.5px;   /* makes the big names at the top thinner: 0 = off, try 0.3px–1px */
  --heading-thinning-phone: 0.2px;  /* same, on phones. The names are smaller there, so thinning makes them faint. Try 0.2px */

  /* 2. COLORS */
  --color-bg: #ffffff;          /* page background */
  --color-surface: #ffffff;     /* cards, forms */
  --color-text: #010101;        /* main text */
  --color-muted: #010101;       /* secondary text */
  --color-accent: #010101;      /* buttons, links (sage green) */
  --color-accent-dark: #010101; /* button hover */
  --color-border: #121211;

  /* 3. PHOTOS — drop your files into the /images folder and update the names */
  --hero-image-home: url('../images/hero.jpg');
  --hero-image-registry: url('../images/registry.jpg');

  /* 4. SIZING */
  --max-width: 960px;
  --radius: 8px;
}