@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-[#0a0c10] text-white antialiased selection:bg-indigo-500/30 selection:text-white;
  }
}

@layer utilities {
  .bg-grain {
    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
    background-repeat: repeat;
    opacity: 0.05;
    pointer-events: none;
  }
  
  .glass {
    @apply bg-white/5 backdrop-blur-2xl border border-white/10;
  }

  .glass-card {
    @apply bg-white/5 backdrop-blur-xl border border-white/5 hover:border-white/20 hover:bg-white/10 transition-all duration-300;
  }
}