@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Tenor+Sans&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-['Jost'] text-gray-500 bg-[#fffdfb] antialiased selection:bg-[#E8C4C4] selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Tenor_Sans'] text-gray-800;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-8 py-4 bg-[#E8C4C4] text-gray-800 text-sm tracking-widest uppercase hover:bg-gray-800 hover:text-white transition-all duration-300;
  }
  
  .btn-outline {
    @apply inline-flex items-center justify-center px-8 py-4 border border-gray-800 text-gray-800 text-sm tracking-widest uppercase hover:bg-gray-800 hover:text-white transition-all duration-300;
  }
}

.text-primary { color: #E8C4C4; }
.bg-primary { background-color: #E8C4C4; }

.nav-scrolled {
  @apply bg-white/95 backdrop-blur-md shadow-sm py-4 border-b border-[#f5ecec];
}

.hero-overlay {
  background: linear-gradient(to right, rgba(255, 253, 251, 0.95) 0%, rgba(255, 253, 251, 0.4) 100%);
}

.service-card {
  transition: all 0.4s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(232, 196, 196, 0.2);
}

.service-icon-wrapper {
  transition: all 0.4s ease;
}

.service-card:hover .service-icon-wrapper {
  background-color: #E8C4C4;
  color: white;
}