@import "tailwindcss";

@theme {
  --color-gold-light: #f1d279;
  --color-gold: #d4af37;
  --color-gold-dark: #aa8a2e;
  --color-dark-bg: #0a0a0a;
  --color-dark-surface: #1a1a1a;
  --color-dark-card: #242424;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
}

@layer base {
  body {
    @apply bg-dark-bg text-gray-200 font-sans selection:bg-gold selection:text-dark-bg;
  }
}

@utility gold-gradient {
  background: linear-gradient(135deg, #d4af37 0%, #f1d279 50%, #aa8a2e 100%);
}

@utility gold-text {
  background: linear-gradient(135deg, #d4af37 0%, #f1d279 50%, #aa8a2e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-link {
  @apply relative px-3 py-2 transition-colors hover:text-gold;
}

.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-3 right-3 h-0.5 bg-gold scale-x-0 transition-transform origin-right;
}

.nav-link.active::after {
  @apply scale-x-100 origin-left;
}

.btn-gold {
  @apply px-6 py-2 gold-gradient text-black font-semibold rounded-md transition-all hover:brightness-110 active:scale-95 shadow-[0_0_15px_rgba(212,175,55,0.3)];
}

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

.section-title::after {
  content: '';
  @apply absolute -bottom-2 left-0 w-1/3 h-1 bg-gold;
}

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

::-webkit-scrollbar-track {
  @apply bg-dark-bg;
}

::-webkit-scrollbar-thumb {
  @apply bg-gold/30 rounded-full hover:bg-gold/50;
}

.glass-card {
  @apply bg-dark-surface/80 backdrop-blur-md border border-white/5 rounded-xl;
}

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

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