@import "tailwindcss";

@theme {
  --color-gold: #D4AF37;
  --color-gold-pale: #C5A028;
  --color-black-pale: #121212;
  --color-black-deep: #0A0A0A;
  
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', serif;
}

@layer base {
  body {
    @apply bg-black-deep text-gray-300 font-sans selection:bg-gold selection:text-black-deep;
    scroll-behavior: smooth;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply text-white font-medium tracking-tight;
  }
}

@layer components {
  .btn-gold {
    @apply px-6 py-2 bg-gold hover:bg-gold-pale text-black-deep font-semibold rounded-sm transition-all duration-300 uppercase text-sm tracking-widest;
  }
  
  .btn-outline-gold {
    @apply px-6 py-2 border border-gold text-gold hover:bg-gold hover:text-black-deep rounded-sm transition-all duration-300 uppercase text-sm tracking-widest;
  }

  .nav-link {
    @apply text-gray-400 hover:text-gold transition-colors duration-300 text-sm uppercase tracking-tighter;
  }

  .card-gradient {
    @apply bg-black-pale border border-gray-800 p-6 hover:border-gold/50 transition-all duration-500 rounded-lg;
  }

  .section-title {
    @apply text-4xl md:text-5xl font-serif mb-8 text-center relative;
  }
  
  .section-title::after {
    content: '';
    @apply absolute bottom-[-16px] left-1/2 -translate-x-1/2 w-12 h-1 bg-gold;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  @apply bg-black-deep;
}
::-webkit-scrollbar-thumb {
  @apply bg-gold/30 hover:bg-gold/50 transition-all rounded-full;
}

/* Smooth Fade In Animation */
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }