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

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

@layer base {
  body {
    @apply font-montserrat text-stone-300 bg-stone-950 antialiased selection:bg-amber-600 selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-cinzel;
  }
}

@layer components {
  .btn-gold {
    @apply inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-amber-600 via-yellow-500 to-amber-600 text-stone-950 font-bold tracking-widest uppercase text-sm hover:scale-105 transition-all duration-300 shadow-[0_0_20px_rgba(217,119,6,0.3)] hover:shadow-[0_0_30px_rgba(217,119,6,0.5)];
  }
  
  .btn-outline-gold {
    @apply inline-flex items-center justify-center px-8 py-4 border border-amber-500 text-amber-500 font-bold tracking-widest uppercase text-sm hover:bg-amber-500 hover:text-stone-950 transition-all duration-300;
  }
}

.bg-radial-gradient {
  background: radial-gradient(circle at center, rgba(30, 28, 25, 1) 0%, rgba(12, 10, 9, 1) 100%);
}

.gold-text-gradient {
  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card-hover-effect {
  transition: all 0.5s ease;
}

.card-hover-effect:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px -10px rgba(217,119,6,0.15);
  border-color: rgba(217,119,6,0.5);
}

.hero-overlay {
  background: linear-gradient(to bottom, rgba(12, 10, 9, 0.4) 0%, rgba(12, 10, 9, 0.9) 100%);
}

.glass-nav {
  background: rgba(12, 10, 9, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(217, 119, 6, 0.1);
}