@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  
  --color-gold-50: #fdfbed;
  --color-gold-100: #f1e5ac;
  --color-gold-200: #e3cf6a;
  --color-gold-300: #d4af37;
  --color-gold-400: #b8932c;
  --color-gold-500: #9e7b25;
  --color-gold-600: #846220;
  --color-gold-700: #6a4a1b;
  --color-gold-800: #513516;
  --color-gold-900: #3d2612;

  --color-dark-bg: #0a0a0a;
  --color-dark-surface: #1a1a1a;
  --color-dark-lighter: #262626;
}

@layer base {
  body {
    @apply bg-dark-bg text-gray-200 font-sans;
    scroll-behavior: smooth;
  }

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

@layer utilities {
  .gold-gradient {
    background: linear-gradient(135deg, #d4af37 0%, #f1e5ac 50%, #b8932c 100%);
  }

  .text-gold-gradient {
    @apply bg-clip-text text-transparent;
    background: linear-gradient(135deg, #d4af37 0%, #f1e5ac 50%, #b8932c 100%);
  }

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

  .gold-border-hover:hover {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
  }

  .card-surface {
    @apply bg-dark-surface rounded-xl transition-all duration-300;
    border: 1px solid rgba(212, 175, 55, 0.3);
  }

  .nav-link {
    @apply text-gray-400 px-4 py-2 transition-colors duration-200 uppercase text-sm tracking-widest font-medium;
  }
  
  .nav-link:hover {
    @apply text-gold-300;
  }
}

.nav-link.active {
  @apply text-gold-300 border-b-2 border-gold-300;
}

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

.animate-slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

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

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

::-webkit-scrollbar-thumb {
  @apply bg-gold-800 rounded-full hover:bg-gold-700;
}