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

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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Inter', sans-serif;
    background-color: #f3e8d3;
    color: #3b2f1e;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', serif;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-green text-white px-6 py-3 rounded-lg font-semibold hover:bg-dark-green transition-all duration-300 shadow-lg hover:shadow-xl;
  }
  
  .btn-secondary {
    @apply bg-gold-accent text-white px-6 py-3 rounded-lg font-semibold hover:bg-yellow-600 transition-all duration-300 shadow-lg hover:shadow-xl;
  }
  
  .card {
    @apply bg-card-bg rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-300;
  }
  
  .text-gradient {
    @apply bg-gradient-to-r from-primary-green to-dark-green bg-clip-text text-transparent;
  }
  
  .hero-overlay {
    @apply absolute inset-0 bg-gradient-to-r from-black/50 to-black/30;
  }
  
  .nav-link {
    @apply text-text-main hover:text-primary-green transition-colors duration-300 font-medium;
  }
    
  .section-padding {
    @apply py-16 px-4;
  }
  
  .container-custom {
    @apply max-w-7xl mx-auto;
    margin: 0 1rem;
    padding: 1.5rem 0;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
  }
  
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }
  
  .fade-in {
    animation: fadeIn 0.8s ease-in-out;
  }
  
  .slide-up {
    animation: slideUp 0.6s ease-out;
  }
}