/* Import elegant fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lato:wght@300;400;500;600;700&display=swap');

/* Match React container layout */
/* Full-width base container (no max-width media rules) */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Centered content wrapper for non-full sections */
.content-wrap {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Full-width sections (header/footer/hero) */
.landing-root .landing-full .container {
  max-width: 100% !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.landing-root .landing-full .mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Centered hero content */
.landing-root .hero-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Definition of the design system - Luxury Pink/Rose Gold Theme */
:root {
  /* Deep pink dark theme */
  --background: 340 30% 8%;
  --foreground: 340 20% 95%;

  --card: 340 35% 12%;
  --card-foreground: 340 20% 95%;

  --popover: 340 35% 10%;
  --popover-foreground: 340 20% 95%;

  --primary: 340 85% 55%;
  --primary-foreground: 340 100% 98%;

  --secondary: 340 60% 25%;
  --secondary-foreground: 340 20% 95%;

  --muted: 340 30% 18%;
  --muted-foreground: 340 20% 70%;

  --accent: 25 90% 55%;
  --accent-foreground: 25 100% 98%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 340 40% 20%;
  --input: 340 40% 20%;
  --ring: 340 85% 55%;

  --radius: 0.75rem;

  /* Legacy semantic helpers */
  --rose-gold: 340 85% 55%;
  --rose-gold-light: 340 85% 60%;
  --rose-gold-dark: 340 90% 45%;
  --blush: 340 35% 14%;
  --blush-dark: 340 40% 18%;
  --cream: 340 30% 10%;
  --cream-dark: 340 35% 8%;
  --charcoal: 340 20% 95%;
  --charcoal-light: 340 20% 70%;
  --emerald: 160 60% 45%;
  --emerald-light: 160 50% 55%;

  /* Gradients and shadows */
  --gradient-primary: linear-gradient(135deg, hsl(340 85% 55%), hsl(340 90% 45%));
  --gradient-accent: linear-gradient(135deg, hsl(25 90% 55%), hsl(340 85% 55%));
  --gradient-glow: linear-gradient(135deg, hsl(340 85% 60% / 0.3), hsl(25 90% 55% / 0.3));
  --gradient-dark: linear-gradient(180deg, hsl(340 30% 8%), hsl(340 35% 5%));

  --shadow-glow: 0 0 40px hsl(340 85% 55% / 0.3);
  --shadow-card: 0 10px 40px hsl(340 50% 10% / 0.5);
}

.font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-sans {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Vibrant rose pink gradient */
.bg-rose-gold-gradient {
  background: linear-gradient(135deg, hsl(340 80% 50%) 0%, hsl(350 75% 60%) 50%, hsl(340 80% 50%) 100%);
}

/* Bold button styling */
.btn-primary-bold {
  background: linear-gradient(135deg, hsl(340 80% 50%) 0%, hsl(350 70% 58%) 100%);
  color: white;
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 30px -8px hsl(340 80% 50% / 0.5),
              0 4px 15px -4px hsl(340 80% 40% / 0.3);
  transition: all 0.3s ease;
}

.btn-primary-bold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -8px hsl(340 80% 50% / 0.6),
              0 6px 20px -4px hsl(340 80% 40% / 0.4);
}

/* Premium shimmer effect */
.shimmer {
  background: linear-gradient(
    110deg,
    transparent 20%,
    hsl(var(--rose-gold-light) / 0.4) 40%,
    hsl(var(--rose-gold-light) / 0.4) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Premium shadow */
.shadow-elegant {
  box-shadow: 0 10px 40px -10px hsl(var(--rose-gold) / 0.2),
              0 4px 15px -5px hsl(var(--charcoal) / 0.08);
}

.shadow-elegant-lg {
  box-shadow: 0 20px 60px -15px hsl(var(--rose-gold) / 0.25),
              0 8px 25px -8px hsl(var(--charcoal) / 0.1);
}

/* Gradient accents and glass effect */
.text-gradient {
  background-image: linear-gradient(135deg, hsl(340 85% 55%), hsl(25 90% 55%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-gradient-accent {
  background: var(--gradient-accent);
}

.shadow-glow {
  box-shadow: var(--shadow-glow);
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-glow {
  background: var(--gradient-glow);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px hsl(340 85% 55% / 0.25);
}

.glass-effect {
  backdrop-filter: blur(16px);
  background: hsl(var(--background) / 0.85);
  border-bottom: 1px solid hsl(var(--border) / 0.6);
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmer 3s linear infinite;
  background-size: 200% 100%;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px hsl(340 85% 55% / 0.3); }
  50% { box-shadow: 0 0 40px hsl(340 85% 55% / 0.6); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(340 30% 10%);
}

::-webkit-scrollbar-thumb {
  background: hsl(340 60% 40%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(340 70% 45%);
}

/* Color utilities */
.text-primary { color: hsl(var(--primary)); }
.text-charcoal { color: hsl(var(--charcoal)); }
.text-charcoal-light { color: hsl(var(--charcoal-light)); }
.bg-cream { background-color: hsl(var(--cream)); }
.bg-blush { background-color: hsl(var(--blush)); }
.bg-emerald { background-color: hsl(var(--emerald)); }
.text-emerald { color: hsl(var(--emerald)); }


/* Override Tailwind spacing scale for py-28 on landing */
.py-28 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}


/* Override Tailwind sizing for w-12/h-12 on landing */
.landing-root .w-12 {
  width: 2rem;
}
.landing-root .h-12 {
  height: 2rem;
}