@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .bg-grid-pattern {
    background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .dark .bg-grid-pattern {
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  }
  .text-gradient {
    background: linear-gradient(135deg, #06b6d4, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

::selection {
  background-color: #ec4899;
  color: #ffffff;
}

pre {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}
pre::-webkit-scrollbar {
  height: 6px;
}
pre::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}