@import "tailwindcss";

@theme {
  --color-gold-light: #f1e5ac;
  --color-gold: #d4af37;
  --color-gold-dark: #b8860b;
  --color-black-gold: #1a1a1a;
  --color-black-deep: #0f0f0f;
  
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

@layer base {
  body {
    @apply bg-black-deep text-gray-100 font-sans antialiased;
  }
  
  h1, h2, h3, h4 {
    @apply font-bold tracking-tight text-white;
  }
}

@layer components {
  .btn-gold {
    @apply px-6 py-2 bg-gradient-to-r from-gold to-gold-dark text-black font-semibold rounded-full hover:from-gold-light hover:to-gold shadow-lg transition-all transform hover:-translate-y-1 active:scale-95;
  }
  
  .card-movie {
    @apply relative overflow-hidden rounded-xl border border-gray-800 bg-black-gold transition-all hover:border-gold/50 cursor-pointer;
  }
  
  .gold-gradient-text {
    @apply bg-gradient-to-r from-gold via-gold-light to-gold-dark bg-clip-text text-transparent;
  }
  
  .filter-chip {
    @apply px-4 py-1.5 rounded-full border border-gray-700 bg-gray-900/50 text-sm hover:border-gold hover:text-gold transition-colors cursor-pointer;
  }
  
  .filter-chip.active {
    @apply bg-gold text-black border-gold font-medium;
  }
}

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

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

/* Custom styles for the movie display */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* Floating App Button */
.floating-app {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
  @apply bg-gold p-4 rounded-full shadow-2xl hover:scale-110 transition-transform;
}