/* Custom base styles beyond Tailwind config */

@layer base {
  :root {
    --text-primary: #f0f0f0;
    --bg-primary: #0D0D0D;
    --brand: #F83C45;
  }
}

body {
  background-color: var(--bg-primary);
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(248, 60, 69, 0.08), transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(248, 60, 69, 0.12), transparent 25%);
  color: var(--text-primary);
  /* A smooth grainy texture for the "stencil" ink feel */
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 50;
  opacity: 0.02;
  background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="1" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)"/%3E%3C/svg%3E');
}

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

::-webkit-scrollbar-track {
  background: #0D0D0D;
}

::-webkit-scrollbar-thumb {
  background: #1A1A1A;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
}

.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;
  transition: transform 0.3s ease;
}

.masonry-item:hover {
  transform: translateY(-4px) scale(1.01);
}

/* Rounded and glowing interactive elements */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 2px rgba(248, 60, 69, 0.3);
}

.sidebar-item.border-l-4 {
  box-shadow: -15px 0 20px -10px rgba(248, 60, 69, 0.2) inset;
}