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

:root {
  --primary-pink: #FF85A1;
  --primary-pink-hover: #FF6B8B;
  --soft-pink-bg: #FFF5F7;
  --gold-accent: #D4AF37;
  --text-dark: #111827;
  --text-muted: #6B7280;
  --bg-light: #F9FAFB;
  --border-light: #F3F4F6;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #FFFFFF;
  color: #1F2937;
}

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

/* Custom Soft Pink & Rose Badges (Scarlett style) */
.badge-pink {
  background-color: #FFF0F3;
  color: #E63946;
  border: 1px solid #FFD6E0;
}

.badge-gold {
  background-color: #FFFDF0;
  color: #B59021;
  border: 1px solid #F5E296;
}

.btn-primary-pink {
  background-color: #FF85A1;
  color: #FFFFFF;
  transition: all 0.2s ease-in-out;
}

.btn-primary-pink:hover {
  background-color: #FF6B8B;
}

/* Bottom Nav Active State */
.bottom-nav-active {
  color: #FF85A1 !important;
}

.bottom-nav-active svg {
  fill: #FF85A1;
  color: #FF85A1;
}

/* Custom Smooth Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F9FAFB;
}
::-webkit-scrollbar-thumb {
  background: #E5E7EB;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #D1D5DB;
}

/* Keyframes fadeIn */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Soft card shadow */
.card-soft {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
}

.card-soft:hover {
  border-color: #FFD6E0;
  box-shadow: 0 10px 25px -5px rgba(255, 133, 161, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
  transform: translateY(-2px);
}

/* Infinite Marquee Running Text (Tulisan Berjalan Scarlett Style) */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;
  will-change: transform;
}

.marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.marquee-container:hover .animate-marquee {
  animation-play-state: paused;
}