@import "tailwindcss";

@theme {
  --color-gold-light: #f9d423;
  --color-gold: #d4af37;
  --color-gold-dark: #b8860b;
  --color-bg-dark: #0a0a0a;
  --color-bg-card: #1a1a1a;
  --font-body: '"Inter", system-ui, sans-serif';
}

@layer base {
  body {
    @apply bg-bg-dark text-gray-100 font-body scroll-smooth;
  }
}

@utility gold-gradient {
  background: linear-gradient(135deg, #f9d423, #b8860b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@utility gold-border {
  border: 1px solid rgba(212, 175, 55, 0.3);
}

@utility gold-hover {
  &:hover {
    border-color: #d4af37;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
  }
}

@utility nav-link {
  @apply text-gray-400 hover:text-gold transition-colors duration-300;
}

@utility btn-gold {
  @apply bg-gradient-to-r from-gold to-gold-dark text-bg-dark px-6 py-2 rounded-full font-bold hover:brightness-110 transition-all duration-300 inline-block text-center;
}

@utility card {
  @apply bg-bg-card p-6 rounded-lg transition-all duration-300 border border-gold/30;
}

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

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

.scroll-smooth {
  scroll-behavior: smooth;
}