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

:root {
  --color-charcoal: #121212;
  --color-obsidian: #0A0A0A;
  --color-gold: #D4AF37;
  --color-gold-hover: #F3E5AB;
  --color-flame: #E65100;
  --color-flame-light: #FF8F00;
}

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

::-webkit-scrollbar-track {
  background: var(--color-obsidian);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 4px;
  border: 2px solid var(--color-obsidian);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-hover);
}

/* Custom fonts */
.font-serif {
  font-family: 'Playfair Display', serif;
}

.font-sans {
  font-family: 'Inter', sans-serif;
}

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-obsidian);
  color: #E2E8F0;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* Luxury Glow Effects */
.gold-glow {
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

.gold-glow-hover:hover {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.35);
  border-color: var(--color-gold);
  transform: translateY(-4px);
}

.flame-glow {
  box-shadow: 0 0 15px rgba(230, 81, 0, 0.25);
}

.flame-glow-hover:hover {
  box-shadow: 0 0 25px rgba(230, 81, 0, 0.45);
}

/* Text Gradients */
.text-gold-gradient {
  background: linear-gradient(135deg, #F3E5AB 0%, #D4AF37 50%, #AA7C11 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

/* Background Gradients */
.bg-gold-gradient {
  background: linear-gradient(135deg, #D4AF37 0%, #AA7C11 100%);
}

.bg-flame-gradient {
  background: linear-gradient(135deg, #E65100 0%, #FF8F00 100%);
}

.bg-dark-glass {
  background: rgba(18, 18, 18, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.1);
}

/* Animations */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
    transform: scale(1.05);
  }
}

.animate-pulse-glow {
  animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseFlame {
  0%, 100% {
    box-shadow: 0 0 15px rgba(230, 81, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(230, 81, 0, 0.8);
  }
}

.animate-pulse-flame {
  animation: pulseFlame 2.5s infinite ease-in-out;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float {
  animation: float 4s infinite ease-in-out;
}

/* Shimmer overlay */
.shimmer-bg {
  position: relative;
  overflow: hidden;
}

.shimmer-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: skewX(-25deg);
  transition: 0.75s;
}

.shimmer-bg:hover::after {
  left: 150%;
  transition: 0.75s;
}

/* Active filter state styling */
.filter-btn-active {
  background: var(--color-gold);
  color: var(--color-obsidian);
  font-weight: 600;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

/* Spice Level Glowing Chili Colors */
.spice-active {
  color: #EF4444; /* bright red */
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.spice-inactive {
  color: #4B5563; /* grey */
}