@import "tailwindcss";
@import "tw-animate-css";

@theme {
  --color-brand-blue: #2563eb;
  --color-brand-purple: #9333ea;
  --color-brand-cyan: #06b6d4;
  --color-brand-dark: #020617;
  
  --font-sans: var(--font-inter);
  --font-display: var(--font-space-grotesk);
  --font-mono: var(--font-jetbrains-mono);
}

@layer utilities {
  .glass {
    @apply bg-white/5 backdrop-blur-xl border border-white/5;
  }
  
  .glass-card {
    @apply bg-white/10 backdrop-blur-xl border border-white/20 hover:bg-white/10 transition-all duration-300;
  }
  
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-cyan-300 to-purple-400 italic;
  }

  .text-gradient-cyan {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-cyan-300 to-purple-400 italic;
  }

  .bg-mesh {
    @apply bg-[#020617];
  }
}

body {
  @apply bg-[#020617] text-white antialiased overflow-x-hidden selection:bg-blue-500/30 selection:text-blue-200;
}

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

::-webkit-scrollbar-track {
  @apply bg-[#020617];
}

::-webkit-scrollbar-thumb {
  @apply bg-white/10 rounded-full hover:bg-white/20 transition-colors;
}