:root {
  --color-gold-400: #e0bb4f;
  --color-gold-500: #d4af37;
  --color-gold-600: #b5952f;
  --color-dark-bg: #0a0a0b;
  --color-dark-surface: #131416;
  --color-dark-card: #1c1d21;
}
html { scroll-behavior: smooth; }
body {
  background-color: var(--color-dark-bg);
  color: #e5e7eb;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  margin: 0;
  padding: 0;
}
::selection {
  background-color: var(--color-gold-500);
  color: #000;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-dark-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--color-dark-card);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-600);
}

.gradient-text {
  background: linear-gradient(to right, var(--color-gold-400), var(--color-gold-600));
  -webkit-background-clip: text;
  color: transparent;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-border:hover {
  border-color: rgba(212, 175, 55, 0.5) !important;
}

/* Custom styles complementing Tailwind */
.movie-card-overlay {
  background: linear-gradient(to top, var(--color-dark-bg), rgba(10,10,11,0.2), transparent);
}