/* ─────────────────────────────────────────────────────────────
   Marketing — Theme tokens
   Shares core palette and typography with the Provence wedding
   template (so the marketing site feels of-a-piece with the product).
   Adds marketing-specific scale and a few utility tones.
   ───────────────────────────────────────────────────────────── */

:root {

  /* ── Color palette ──────────────────────────────────────── */
  --c-bg:           #FEF8F3;   /* ivory, same as Provence */
  --c-surface-2:    #F2EDE8;   /* alt section background */
  --c-surface-3:    #E8E2D7;   /* deeper alt for accent strips */
  --c-text:         #1F1B16;
  --c-text-muted:   #4C463F;
  --c-text-subtle:  #7D766E;
  --c-accent:       #B08D57;   /* antique gold, same as Provence */
  --c-accent-hover: #9A7A47;
  --c-accent-soft:  rgba(176, 141, 87, 0.16);
  --c-line:         #B08D57;
  --c-border:       #D8D2C8;
  --c-white:        #FFFFFF;

  /* ── Typography ─────────────────────────────────────────── */
  --font-serif:     "Noto Serif", "Playfair Display", Georgia, serif;
  --font-sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:        clamp(36px, 8vw, 96px);
  --fs-h1:          clamp(36px, 4.5vw, 64px);
  --fs-h2:          clamp(24px, 2.6vw, 36px);
  --fs-h3:          clamp(20px, 1.8vw, 26px);
  --fs-italic-lg:   clamp(20px, 2vw, 28px);
  --fs-body-lg:     20px;
  --fs-body:        17px;
  --fs-body-sm:     15px;
  --fs-label:       12px;
  --fs-tiny:        11px;

  --lh-tight:       1.1;
  --lh-snug:        1.3;
  --lh-normal:      1.55;
  --lh-relaxed:     1.75;

  --tracking-wide:  0.16em;
  --tracking-wider: 0.28em;
  --tracking-widest:0.36em;

  /* ── Spacing ────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  --section-gap:    var(--s-32);
  --container-max:  1180px;
  --container-narrow: 720px;
  --container-text: 640px;
  --page-pad:       64px;
  --page-pad-sm:    24px;

  /* ── Borders & radii ────────────────────────────────────── */
  --hairline:       1px solid var(--c-line);
  --border-soft:    1px solid var(--c-border);
  --r-sm:           4px;
  --r:              6px;

  /* ── Motion ─────────────────────────────────────────────── */
  --t-fast:         150ms ease-out;
  --t-base:         300ms ease-out;
  --t-slow:         600ms ease-out;

  /* ── Hero background ───────────────────────────────────── */
  --hero-overlay:   0.55;
  --hero-image:     url("images/hero.jpg");
}