:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-script: 'Great Vibes', cursive;
  --color-cream: #fdf8f3;
  --color-rose-wedding: #af1d3f;
  --bs-rose: #f43f5e;
}

body {
  font-family: var(--font-sans);
}

.font-serif { font-family: var(--font-serif); }
.font-script { font-family: var(--font-script); }

/* ---------------------------------------------------------------------
   Rose brand accent — Bootstrap has no "rose" theme color, so these
   fill in for the couple few spots that need it (buttons, active tab,
   heart marks) instead of pulling in Bootstrap's Sass build to add one.
   --------------------------------------------------------------------- */

.btn-rose {
  color: #fff;
  background-color: var(--bs-rose);
  border-color: var(--bs-rose);
}

.btn-rose:hover,
.btn-rose:focus {
  color: #fff;
  background-color: #e11d48;
  border-color: #e11d48;
}

.text-rose {
  color: var(--bs-rose) !important;
}

.nav-pills .nav-link.active.bg-rose {
  background-color: var(--bs-rose) !important;
}

/* Bootstrap's badge has no "violet"; the media-type badge needs a
   fifth hue distinct from the blue/green/yellow/red status badges. */
.badge-violet {
  color: #7c3aed;
  background-color: #f5f3ff;
}

.media-thumb {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.media-thumb-placeholder {
  aspect-ratio: 1 / 1;
}