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

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

@layer base {
  body {
    @apply font-['Poppins'] text-[#4a4a4a] bg-[#faf8f5] antialiased selection:bg-[#c97a3e] selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Playfair_Display'] text-[#2c3e35];
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-8 py-4 bg-[#c97a3e] text-white text-sm font-medium tracking-widest uppercase hover:bg-[#a66230] transition-colors duration-300 rounded-sm shadow-md hover:shadow-lg;
  }
  
  .btn-outline {
    @apply inline-flex items-center justify-center px-8 py-4 border border-[#2c3e35] text-[#2c3e35] text-sm font-medium tracking-widest uppercase hover:bg-[#2c3e35] hover:text-white transition-colors duration-300 rounded-sm;
  }
}

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

.nav-scrolled {
  @apply bg-white/95 backdrop-blur-md shadow-sm py-4 border-b border-gray-100;
}

.hero-overlay {
  background: linear-gradient(to bottom, rgba(44, 62, 53, 0.6) 0%, rgba(44, 62, 53, 0.4) 100%);
}

.menu-item {
  position: relative;
  transition: all 0.3s ease;
}

.menu-item:hover {
  transform: translateX(10px);
}

.menu-dots {
  flex-grow: 1;
  border-bottom: 2px dotted #e5e7eb;
  margin: 0 1rem 0.5rem 1rem;
}