:root {
  --color-primary: #B08F64;
  --color-primary-contrast: #000000;
  --color-background: #FFFFFF;
  --color-text: #222222;
  --color-soft: color-mix(in srgb, var(--color-primary) 13%, #FFFFFF);
  --color-soft-strong: color-mix(in srgb, var(--color-primary) 24%, #FFFFFF);
  --color-line: color-mix(in srgb, var(--color-primary) 62%, #FFFFFF);
  --color-accent-text: color-mix(in srgb, var(--color-primary) 65%, #000000);
}

::selection { background: var(--color-primary); color: var(--color-primary-contrast); }
body { background: var(--color-background); color: var(--color-text); }
.site-header { background: color-mix(in srgb, var(--color-primary) 9%, #FFFFFF 91%); border-bottom-color: var(--color-line); }
.mobile-menu { background: color-mix(in srgb, var(--color-primary) 9%, #FFFFFF 91%); border-bottom-color: var(--color-line); }
.hero-eyebrow { background: var(--color-soft); }
.hero-intro { color: var(--color-accent-text); }
.hero-date { text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 8px; }

.countdown { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.countdown-grid div:not(:last-child)::after { background: color-mix(in srgb, var(--color-primary-contrast) 42%, transparent); }
.countdown .overline { color: var(--color-primary-contrast); }
.venue-link, .text-button, .calendar-options a, .calendar-options button { border-bottom-color: var(--color-primary); }
.venue-content h2, .venue-time { text-decoration-color: var(--color-primary); }
.itinerary { background: var(--color-soft); border-top-color: var(--color-line); }
.itinerary-item:not(:last-child)::after { background: var(--color-primary); }
.story { border-top: 1px solid var(--color-line); }
.gallery > .section-title { text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 12px; }
.details { background: var(--color-soft); }
.detail-block { border-color: var(--color-primary); }

.rsvp-panel { background: var(--color-primary); color: var(--color-primary-contrast); }
.light-button { border-bottom-color: var(--color-primary-contrast); color: var(--color-primary-contrast); }
.dark-button { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast); }
.dark-button:hover { opacity: .86; }
.photo-sharing .overline { color: var(--color-accent-text); }
.site-footer { background: var(--color-primary); color: var(--color-primary-contrast); }
.music-toggle { border-color: color-mix(in srgb, var(--color-primary-contrast) 35%, transparent); background: var(--color-primary); color: var(--color-primary-contrast); }

.modal-dialog { background: color-mix(in srgb, var(--color-primary) 5%, #FFFFFF); scrollbar-color: var(--color-primary) transparent; }
.rsvp-progress { background: var(--color-soft-strong); }
.rsvp-progress span { background: var(--color-primary); }
.form-section, .rsvp-final { border-color: var(--color-line); }
.form-section-heading span, .rsvp-deadline, .field-hint { color: var(--color-accent-text); }
.rsvp-form input:not([type="radio"]):not([type="checkbox"]), .rsvp-form textarea, .rsvp-form select { border-color: var(--color-line); }
.rsvp-form input:focus, .rsvp-form textarea:focus, .rsvp-form select:focus { border-color: var(--color-primary); box-shadow: 0 1px 0 var(--color-primary); }
.choice input, .check-choice input { accent-color: var(--color-primary); }
.attendance-choices .choice, .person-block { border-color: var(--color-line); }
.rsvp-summary strong, .rsvp-success h3 { color: var(--color-accent-text); }
.modal-close:focus-visible, .rsvp-form :focus-visible { outline-color: var(--color-primary); }