/* Custom base styles beyond Tailwind config */

@layer base {
  :root {
    --text-primary: #f0f0f0;
    --bg-primary: #1e1e1e;
    --border-color: #2f3136;
  }
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

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

::-webkit-scrollbar-track {
  background: #1e1e1e;
}

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

::-webkit-scrollbar-thumb:hover {
  background: #4c6ef5;
}

.masonry-grid {
  column-count: 1;
  column-gap: 1.5rem;
}

@media (min-width: 640px) {
  .masonry-grid {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    column-count: 3;
  }
}

@media (min-width: 1280px) {
  .masonry-grid {
    column-count: 4;
  }
}

.masonry-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5rem;
}