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

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --color-accent: #00df9a;
  --color-accent-dark: #00c789;
  --color-bg-dark: #0c0e10;
  --color-card-dark: #1a1d21;
}

@layer base {
  body {
    @apply bg-bg-dark text-slate-100 font-sans antialiased;
  }
}

.glass-card {
  @apply bg-card-dark border border-white/5 rounded-3xl shadow-xl hover:border-accent/30 transition-all duration-300;
}

.btn-primary {
  @apply px-8 py-3 bg-accent text-white font-bold rounded-full hover:bg-accent-dark transition-all duration-300 shadow-lg shadow-accent/20;
}

.btn-outline {
  @apply px-8 py-3 border-2 border-accent text-accent font-bold rounded-full hover:bg-accent hover:text-white transition-all duration-300;
}