/* ============================================================
   Danielle & Jared — Carmel Highlands, November 6, 2026
   Coastal Autumn Romance — Colors & Type
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Italiana&family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Halimun&family=Pinyon+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Josefin+Sans:wght@300;400;500&family=Inter:wght@300;400;500&display=swap');

:root {
  /* ---------- COLOR · Coastal Autumn Romance ----------
     The setting (bluffs, Pacific, late autumn light) does the work.
     Palette is muted, warm, slightly sun-faded — like linen left in the sun.
  */

  /* Paper & ground — warm ivory, antique cream, oyster */
  --ivory:           #F6F0E4;   /* primary background */
  --cream:           #EFE6D2;   /* secondary paper */
  --bone:            #E8DCC4;   /* tertiary, envelope liner */
  --shell:           #FBF7EE;   /* lightest wash */

  /* Botanical greens — earthy, layered: lichen → cypress ink */
  --lichen:          #D8DCC8;   /* lichen, lightest wash */
  --sage-pale:       #C8D0BD;   /* pale sage */
  --sage:            #A8B49A;   /* dusty sage */
  --eucalyptus:      #8C9A87;   /* muted eucalyptus */
  --moss:            #7A8466;   /* moss — the warm middle green */
  --olive-deep:      #5C6650;   /* deep olive */
  --forest:          #3F4A38;   /* forest, grounding */
  --cypress-ink:     #2E3829;   /* deepest green-black */

  /* Earth — DEPRECATED: terracotta family removed from palette per direction.
     Tokens kept as aliases pointing to gold/slate so existing components
     compile; do not introduce new uses. */
  --terracotta:      #8C6E3C;   /* now alias of gold-deep */
  --clay:            #B8975A;   /* now alias of gold */
  --rust:            #6E848C;   /* now alias of slate */
  --terracotta-pale: #D4B981;   /* now alias of gold-pale */

  /* Romance — blush, dusty rose, mauve */
  --blush:           #E4C4B8;   /* soft blush */
  --rose-dust:       #C9A097;   /* dusty rose */
  --mauve:           #A88278;   /* grounded mauve */

  /* Coastal blues — Pacific mist, slate, deep ocean.
     Pulled from the bluffs at Carmel Highlands: not navy, not teal —
     muted, slightly green-shifted, sun-faded. */
  --mist:            #C9D2D6;   /* sea mist, lightest */
  --pacific:         #93A6AC;   /* dusty pacific blue */
  --slate:           #6E848C;   /* slate ocean */
  --indigo-deep:    #3F5560;   /* deep ocean — for grounding */

  /* Ground — charcoal, espresso, ink */
  --espresso:        #3A2E26;   /* primary text */
  --charcoal:        #2B2520;   /* deepest */
  --ink:             #4A3F36;   /* secondary text */
  --smoke:           #6B5F54;   /* tertiary text, captions */

  /* Antique gold — sparingly */
  --gold:            #B8975A;   /* antique gold */
  --gold-pale:       #D4B981;   /* gilded edge */
  --gold-deep:       #8C6E3C;   /* engraved */

  /* ---------- SEMANTIC ---------- */
  --bg:              var(--ivory);
  --bg-alt:          var(--cream);
  --bg-deep:         var(--bone);
  --fg:              var(--espresso);
  --fg-2:            var(--ink);
  --fg-3:            var(--smoke);
  --fg-on-dark:      var(--shell);
  --accent:          var(--gold-deep);
  --accent-soft:     var(--blush);
  --accent-botanical:var(--sage);
  --accent-gold:     var(--gold);
  --accent-ocean:    var(--slate);
  --rule:            rgba(58, 46, 38, 0.18);  /* hairline on cream */
  --rule-soft:       rgba(58, 46, 38, 0.10);

  /* ---------- TYPE ----------
     Display: Cormorant Garamond — elegant serif, slight Didone tension,
              lovely italics. Used for invitation-style headings.
     Title:   Italiana — high-contrast, editorial display for grand moments.
     Script:  Pinyon Script — delicate, copperplate-feeling accent script.
              Used SPARINGLY for "&", "the", names in formal pieces.
     Body:    Cormorant Infant — soft humanist serif for paragraphs.
     Sans:    Inter (light) — for utility (forms, RSVP fields, captions).
  */
  --font-display:    'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --font-title:      'Italiana', 'Cormorant Garamond', serif;
  --font-script:     'Halimun', 'Pinyon Script', 'Apple Chancery', cursive;
  --font-body:       'Cormorant Infant', 'Cormorant Garamond', Georgia, serif;
  --font-utility:    'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  --font-numeral:    'Josefin Sans', 'Montserrat', system-ui, sans-serif;

  /* Scale — generous, airy. Anchored at 18px body. */
  --fs-script-xl:    clamp(72px, 9vw, 144px);
  --fs-display-xl:   clamp(56px, 7vw, 104px);
  --fs-display-lg:   clamp(40px, 5vw, 72px);
  --fs-display:      clamp(32px, 4vw, 52px);
  --fs-h1:           clamp(28px, 3.2vw, 40px);
  --fs-h2:           clamp(22px, 2.4vw, 30px);
  --fs-h3:           20px;
  --fs-body:         18px;
  --fs-body-sm:      16px;
  --fs-caption:      13px;
  --fs-eyebrow:      11px;

  /* Tracking — letter-spaced caps are a key motif */
  --track-eyebrow:   0.32em;   /* "S A V E   T H E   D A T E" */
  --track-caps:      0.18em;
  --track-display:   0.01em;
  --track-tight:     -0.01em;

  /* Leading */
  --lh-tight:        1.05;
  --lh-display:      1.12;
  --lh-body:         1.55;
  --lh-loose:        1.75;

  /* ---------- SPACING — generous, paper-margin feel ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --margin-paper: 64px;        /* default page margin on print pieces */

  /* ---------- RULES & EDGES ---------- */
  --radius-none: 0;
  --radius-soft: 2px;          /* nearly square — invitation feel */
  --radius-card: 4px;
  --radius-pill: 999px;        /* used only for tags/RSVP chips */
  --hairline: 1px;
  --hairline-color: var(--rule);

  /* ---------- SHADOW · soft, paper on linen ---------- */
  --shadow-paper:    0 1px 2px rgba(58,46,38,0.06), 0 8px 24px rgba(58,46,38,0.08);
  --shadow-lift:     0 2px 4px rgba(58,46,38,0.08), 0 24px 48px rgba(58,46,38,0.12);
  --shadow-pressed:  inset 0 1px 2px rgba(58,46,38,0.10);

  /* ---------- MOTION · unhurried ---------- */
  --ease-quiet:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-linen:      cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-quick:       180ms;
  --dur-soft:        320ms;
  --dur-luxe:        520ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display heading — formal invitation headline */
.h-display, h1.display {
  font-family: var(--font-title);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--fg);
  font-weight: 400;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  color: var(--fg);
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  font-weight: 400;
  font-style: italic;
  color: var(--fg);
  margin: 0;
}

h3 {
  font-family: var(--font-utility);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--smoke);
  margin: 0;
}

/* Eyebrow — the "S A V E   T H E   D A T E" treatment */
.eyebrow {
  font-family: var(--font-utility);
  font-size: var(--fs-eyebrow);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--smoke);
}

/* Script accent — for "&", "the", first names in formal pieces */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  color: var(--fg);
  letter-spacing: 0;
  line-height: 1;
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 1em;
  text-wrap: pretty;
}

small, .caption {
  font-family: var(--font-utility);
  font-size: var(--fs-caption);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color var(--dur-soft) var(--ease-quiet),
              color var(--dur-soft) var(--ease-quiet);
}
a:hover {
  border-bottom-color: var(--terracotta);
  color: var(--terracotta);
}

hr, .rule {
  border: none;
  height: 1px;
  background: var(--rule);
  margin: var(--s-7) 0;
}

/* Decorative ornament rule — used between blocks on invitations */
.ornament-rule {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--smoke);
}
.ornament-rule::before, .ornament-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}