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

@layer base {
  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  .glass-card {
    @apply bg-surface/50 backdrop-blur-md border border-white/10 rounded-2xl;
  }
  
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-white to-secondary;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-full bg-primary text-background font-semibold transition-all hover:bg-primary-hover hover:scale-105 active:scale-95;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-full border border-white/20 bg-white/5 font-semibold transition-all hover:bg-white/10 hover:border-white/30 hover:scale-105 active:scale-95;
  }
}

.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.glow-orb {
  filter: blur(80px);
  z-index: -1;
}