/* Main Design System & Custom CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg-primary: #141414;
  --bg-secondary: #1a1a1a;
  --bg-card: #1e1e1e;
  --bg-pill: #242424;
  --border-color: #2e2e2e;
  --border-pill: #333333;
  --accent-color: #FF2743;
  --accent-hover: #e01f3b;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  color: #f3f4f6;
}

/* Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Scrollbar for rest of page */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 4px;
}

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

/* Card Hover Effects */
.video-card-hover {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.video-card-hover:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
  box-shadow: 0 10px 25px -5px rgba(255, 39, 67, 0.15);
}