@import "tailwindcss";

@theme {
  --color-gold-light: #f3e5ab;
  --color-gold: #d4af37;
  --color-gold-dark: #b8860b;
  --color-gold-deep: #8b6508;
  --color-black-rich: #0a0a0a;
  --color-black-light: #1a1a1a;
  --color-black-soft: #2d2d2d;
  
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

@layer base {
  body {
    @apply bg-black-rich text-gray-300 font-sans;
    scroll-behavior: smooth;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-white tracking-tight;
  }
}

@layer components {
  .btn-gold {
    @apply px-6 py-2.5 bg-gold text-black-rich font-bold rounded-lg transition-all duration-300 
           hover:bg-gold-light hover:shadow-[0_0_20px_rgba(212,175,55,0.4)] active:scale-95;
  }

  .btn-outline-gold {
    @apply px-6 py-2.5 border border-gold text-gold font-bold rounded-lg transition-all duration-300 
           hover:bg-gold hover:text-black-rich;
  }

  .glass-card {
    @apply bg-black-light/80 backdrop-blur-md border border-white/5 rounded-2xl p-6;
  }

  .gold-gradient-text {
    @apply bg-clip-text text-transparent bg-linear-to-r from-gold via-gold-light to-gold-dark font-black;
  }

  .nav-link {
    @apply text-gray-400 hover:text-gold transition-colors font-medium;
  }

  .section-title {
    @apply text-3xl md:text-4xl font-bold mb-8 relative inline-block;
  }

  .section-title::after {
    content: '';
    @apply absolute bottom-[-8px] left-0 w-1/2 h-1 bg-gold rounded-full;
  }
}

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

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: #d4af37;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f3e5ab;
}