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

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

@layer base {
  body {
    @apply font-['Lato'] text-[#333333] bg-[#fbf9f6] antialiased selection:bg-[#cda434] selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Playfair_Display'] text-[#1c352d] font-normal;
  }
}

@layer components {
  .btn-gold {
    @apply inline-flex items-center justify-center px-8 py-3 bg-transparent border border-[#cda434] text-[#cda434] font-['Lato'] uppercase tracking-widest text-xs hover:bg-[#cda434] hover:text-white transition-all duration-500;
  }
  
  .btn-solid-gold {
    @apply inline-flex items-center justify-center px-8 py-3 bg-[#cda434] text-white font-['Lato'] uppercase tracking-widest text-xs hover:bg-[#1c352d] hover:text-[#cda434] transition-all duration-500;
  }
}

.text-gold { color: #cda434; }
.bg-gold { background-color: #cda434; }
.text-forest { color: #1c352d; }
.bg-forest { background-color: #1c352d; }

.nav-scrolled {
  @apply bg-[#fbf9f6]/95 backdrop-blur-md border-b border-[#1c352d]/10 py-4;
}

.ivy-card {
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

.ivy-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(205, 164, 52, 0);
  transition: all 0.5s ease;
  pointer-events: none;
}

.ivy-card:hover::after {
  border: 1px solid rgba(205, 164, 52, 0.5);
  inset: 10px;
}

.ivy-card img {
  transition: transform 1.5s ease;
}

.ivy-card:hover img {
  transform: scale(1.05);
}