/* Kleuren uit de save-the-date: blush, lila, abrikoos, pruim en een klein roze accent. */
:root {
  --paper: #f8f2f7;
  --paper-light: #fff9f6;
  --paper-warm: #e4d6f7;
  --sage: #604858;
  --sage-deep: #523e4d;
  --ink: #604858;
  --body: #665a63;
  --muted: #827681;
  --line: #dfcfdd;
  --peach: #ffd6a2;
  --pink: #dc54a4;
  --lilac: #e4d6f7;
  --blush: #fce7ec;
}

body { background: var(--paper-light); }
:focus-visible { outline-color: var(--pink); }
.skip-link { background: var(--ink); color: var(--paper-light); }

.site-header {
  background: rgba(252, 231, 236, .96);
  color: var(--ink);
  border-bottom-color: #ebd1df;
  backdrop-filter: blur(18px);
}
.site-header.is-scrolled { box-shadow: 0 9px 28px rgba(96, 72, 88, .1); }
.wordmark span { color: var(--pink); }
.desktop-nav a:not(.nav-rsvp)::after { background: var(--pink); }
.desktop-nav .nav-rsvp { border-color: #a688a0; }
.desktop-nav .nav-rsvp:hover { background: var(--ink); color: var(--paper-light); }
.reading-progress { background: var(--pink); }
.mobile-nav nav { background: #fce7ec; border-color: #e8c9d9; box-shadow: 0 18px 30px rgba(96, 72, 88, .15); }
.mobile-nav a:hover { color: var(--pink); }

.hero {
  background: linear-gradient(145deg, #fce7ec 0%, #ffefdf 72%, #f7e9ea 100%);
  color: var(--ink);
}
.hero-frame { border-color: rgba(96, 72, 88, .21); }
.hero .eyebrow { color: #a15b83; }
.hero h1 { color: var(--ink); }
.hero h1 span { color: var(--pink); }
.hero-place { border-top-color: #d8afc8; color: var(--ink); }
.hero-place strong { color: var(--ink); }
.primary-link { background: var(--peach); border-color: #f6c994; color: var(--ink); }
.primary-link:hover { background: #ffe1b9; }
.quiet-link { border-bottom-color: #9b748b; color: var(--ink); }
.quiet-link:hover { border-bottom-color: var(--pink); color: #a83177; }
.hero-arch {
  border-color: #bba3b9;
  background: radial-gradient(ellipse at 50% 68%, #f3f0fb 5%, #e4d6f7 72%, #dccccf 100%);
}
.hero-arch::before { border-color: rgba(96, 72, 88, .25); }
.hero-arch::after { color: var(--ink); }
.hero-arch img { opacity: .67; filter: brightness(0) saturate(100%) invert(32%) sepia(10%) saturate(1050%) hue-rotate(269deg) brightness(94%); }
.hero-foot { border-top-color: #d4b7c8; color: #80687a; }
.hero-foot a:hover { color: var(--pink); }

.story { background: #fff9f6; }
.story::before { background: var(--pink); }
.section-index { color: #a35587; }
.story-copy .lead { color: var(--ink); }
.story-copy .signature { color: #ba5794; }
.memory { border-left-color: #e4cfde; }
.polaroid { background: #fffdfa; box-shadow: 0 20px 40px rgba(96, 72, 88, .18); }
.polaroid:hover, .polaroid:focus-visible { box-shadow: 0 26px 48px rgba(96, 72, 88, .23); }
.polaroid.is-active { box-shadow: 0 29px 54px rgba(96, 72, 88, .26); }

.schedule { background: #f3f0fb; }
.schedule-list::before { background: #d7b3d0; }
.schedule-row::before { border-color: var(--pink); background: #f3f0fb; }
.schedule-row:hover, .schedule-row.is-current { background: #fbe7ec; }
.schedule-row:hover::before, .schedule-row.is-current::before { background: var(--pink); }
.schedule-row time { color: #a35587; }
.text-link:hover { color: #ac3b80; }

.venue { background: linear-gradient(150deg, #ffefdf, #fce7ec); }
.venue-image::after { border-color: rgba(255, 249, 246, .74); }
.venue-content .venue-lead { color: #a35587; }
.venue-content address { border-top-color: #dbbdca; }

.practical { background: #fff9f6; }
.practical-item summary:hover, .practical-item[open] summary { color: #b44789; }
.details-mark { border-color: #cfacc5; }

.rsvp { background: var(--sage); }
.rsvp::before { border-color: rgba(243, 240, 251, .28); }
.rsvp .section-index { color: var(--peach); }
.rsvp-heading p { color: #f2e7ee; }
.rsvp-box { background: #f3f0fb; box-shadow: 16px 16px 0 rgba(255, 214, 162, .12); }
.button:hover { background: #785868; }
.choice-row input { accent-color: var(--pink); }
.fixed-badge { background: #f7dfe9; color: var(--ink); }
.site-footer { background: var(--sage); color: #f2e7ee; border-top-color: rgba(243, 240, 251, .25); }

@media (max-width: 760px) {
  .mobile-nav nav { background: #fce7ec; border-color: #e8c9d9; }
  .memory { border-top-color: #e4cfde; }
}