@import "tailwindcss";

@theme {
  --color-gold-50: #fff9e6;
  --color-gold-100: #ffefcc;
  --color-gold-200: #ffd8a0;
  --color-gold-300: #ffbc6d;
  --color-gold-400: #ffa140;
  --color-gold-500: #d4a017;
  --color-gold-600: #b8860b;
  
  --color-bg-black: #0a0a0a;
  --color-bg-dark: #121212;
  --color-bg-card: #1c1c1c;

  --font-sans: 'Noto Sans SC', sans-serif;
}

@layer base {
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

  body {
    @apply bg-bg-black text-gray-200 font-sans leading-relaxed overflow-x-hidden;
    scroll-behavior: smooth;
  }
}

@layer components {
  .gold-gradient {
    background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
  }
  
  .gold-text-gradient {
    background: linear-gradient(135deg, #ffd8a0 0%, #d4a017 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

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

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

  .nav-link:hover::after {
    @apply w-full;
  }
  
  .movie-card {
    @apply relative overflow-hidden rounded-xl bg-bg-card border border-white/5 transition-all duration-500 hover:-translate-y-2 hover:border-gold-500/50 hover:shadow-[0_10px_30px_rgba(212,160,23,0.1)];
  }

  /* Filter items for movies page */
  .filter-item {
    @apply px-4 py-1.5 rounded-full border border-white/10 text-sm hover:border-gold-500 hover:text-gold-500 transition-all cursor-pointer;
  }

  .filter-item.active {
    @apply bg-gold-500 text-black border-gold-500 font-bold;
  }
  
  /* Input fields */
  .input-gold {
    @apply w-full bg-bg-dark border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-gold-500 transition-all text-white;
  }
  
  /* App page specific */
  .gold-glow {
    box-shadow: 0 0 50px rgba(212, 160, 23, 0.2);
  }
  
  .bg-mesh {
    background: radial-gradient(at 0% 0%, rgba(212, 160, 23, 0.1) 0, transparent 50%), 
                radial-gradient(at 50% 0%, rgba(212, 160, 23, 0.05) 0, transparent 50%);
  }
}

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

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