/* Velvet & Ivory — boutique matchmaking design system. All colors HSL. */
:root {
  --background: 36 33% 97%; /* warm ivory */
  --foreground: 345 35% 12%; /* deep velvet ink */

  --card: 36 33% 99%;
  --card-foreground: 345 35% 12%;

  --popover: 36 33% 99%;
  --popover-foreground: 345 35% 12%;

  --primary: 345 65% 22%; /* velvet burgundy */
  --primary-foreground: 36 40% 97%;

  --secondary: 36 25% 92%;
  --secondary-foreground: 345 65% 22%;

  --muted: 36 22% 93%;
  --muted-foreground: 345 12% 38%;

  --accent: 36 55% 55%; /* antique gold */
  --accent-foreground: 345 35% 12%;

  --destructive: 0 70% 45%;
  --destructive-foreground: 36 40% 97%;

  --border: 36 18% 86%;
  --input: 36 18% 86%;
  --ring: 345 65% 22%;

  --velvet: 345 65% 22%;
  --velvet-deep: 345 70% 14%;
  --velvet-rose: 345 45% 38%;
  --champagne: 36 55% 78%;
  --gold: 36 60% 52%;
  --ivory: 36 33% 97%;

  --gradient-velvet: linear-gradient(
    135deg,
    hsl(345 70% 14%) 0%,
    hsl(345 65% 22%) 50%,
    hsl(345 55% 32%) 100%
  );
  --gradient-overlay: linear-gradient(
    180deg,
    hsl(345 70% 8% / 0.2) 0%,
    hsl(345 70% 8% / 0.85) 100%
  );
  --gradient-gold: linear-gradient(
    135deg,
    hsl(36 60% 52%) 0%,
    hsl(36 70% 68%) 100%
  );

  --shadow-velvet: 0 25px 60px -20px hsl(345 65% 22% / 0.35);
  --shadow-soft: 0 12px 40px -12px hsl(345 35% 12% / 0.15);
  --shadow-gold: 0 10px 30px -10px hsl(36 60% 52% / 0.4);

  --radius: 0.25rem;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
.serif {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.font-serif {
  font-family: "Cormorant Garamond", serif;
}
.font-sans {
  font-family: "Inter", sans-serif;
}
.text-balance {
  text-wrap: balance;
}
.bg-velvet-gradient {
  background: var(--gradient-velvet);
}
.bg-overlay-gradient {
  background: var(--gradient-overlay);
}
.shadow-velvet {
  box-shadow: var(--shadow-velvet);
}
.shadow-soft {
  box-shadow: var(--shadow-soft);
}
.tracking-luxe {
  letter-spacing: 0.25em;
}
.container-luxe {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px) {
  .container-luxe {
    padding: 0 2.5rem;
  }
}

.divider-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.divider-gold::before,
.divider-gold::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: hsl(var(--gold));
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: fade-up 0.8s ease-out both;
}

/* Navbar transitions */
header.scrolled {
  background-color: hsl(var(--background) / 0.95);
  backdrop-filter: blur(8px);
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-soft);
}

header.transparent {
  background-color: transparent;
  color: hsl(var(--ivory));
}

header img {
  transition: filter 0.5s ease;
}

header.transparent .container-luxe img {
  filter: brightness(0) invert(1);
}