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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-surface-950 text-white font-sans antialiased;
  }

  ::selection {
    @apply bg-brand-500/30 text-white;
  }
}

@layer components {
  .glass-card {
    @apply bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl;
  }

  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-brand-300 via-brand-400 to-pink-400;
  }

  .gradient-border {
    @apply relative;
  }

  .gradient-border::before {
    content: '';
    @apply absolute inset-0 rounded-2xl p-[1px];
    background: linear-gradient(135deg, rgba(124,58,237,0.5), rgba(236,72,153,0.3), rgba(124,58,237,0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .shimmer {
    @apply relative overflow-hidden;
  }

  .shimmer::after {
    content: '';
    @apply absolute inset-0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: shimmer 2s infinite;
  }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  @apply bg-surface-900;
}

::-webkit-scrollbar-thumb {
  @apply bg-surface-700 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-surface-600;
}