@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Playfair Display", serif;
  
  --color-gold-50: #fefcf1;
  --color-gold-100: #fdf6d9;
  --color-gold-200: #f9eaaf;
  --color-gold-300: #f4d67c;
  --color-gold-400: #ecbc48;
  --color-gold-500: #d4af37; /* Primary Gold */
  --color-gold-600: #ba8c29;
  --color-gold-700: #936722;
  --color-gold-800: #7b5321;
  --color-gold-900: #684520;
}

@layer base {
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

  body {
    background-color: #0c0c0c;
    color: #f5f5f5;
    scroll-behavior: smooth;
  }
}

.gold-gradient {
  background: linear-gradient(135deg, #d4af37 0%, #f1c40f 100%);
}

.text-gold-gradient {
  background: linear-gradient(135deg, #d4af37 0%, #f1c40f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-link {
  @apply relative py-2 transition-colors duration-300 hover:text-gold-500;
}

.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gold-500 transition-all duration-300;
}

.nav-link:hover::after {
  @apply w-full;
}

.glass-card {
  @apply bg-white/5 backdrop-blur-md border border-white/10 rounded-xl overflow-hidden;
}

.filter-btn {
  @apply px-4 py-1.5 rounded-full text-xs border border-white/5 bg-white/5 hover:border-gold-500 hover:text-gold-500 transition-all font-medium;
}
.filter-btn.active {
  @apply bg-gold-500 text-black border-gold-500;
}
.sort-btn {
  @apply px-4 py-2 text-xs font-bold tracking-widest uppercase transition-all rounded-md;
}
.sort-btn.active {
  @apply bg-white/10 text-gold-500;
}
.sort-btn:not(.active) {
  @apply text-gray-500 hover:text-gray-300;
}