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

:root {
  color-scheme: dark;
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(10, 15, 30, 0.7);
  --neon-green: #39ff14;
  --neon-blue: #00ffff;
}

body {
  @apply bg-slate-950 text-slate-100 antialiased;
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(0, 255, 255, 0.05), transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(57, 255, 20, 0.08), transparent 30%);
  min-height: 100vh;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .glass-panel {
    @apply bg-slate-900/60 backdrop-blur-xl border border-white/5 shadow-xl;
    /* Optional: Add a subtle glow on hover for that "premium" feel */
    transition: all 0.3s ease;
  }

  .glass-panel:hover {
     @apply border-white/10 shadow-2xl;
     box-shadow: 0 0 20px rgba(0, 255, 255, 0.05);
  }
  
  .glass-header {
    @apply bg-slate-950/80 backdrop-blur-md border-b border-white/5 sticky top-0 z-50;
  }
  
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-emerald-400 to-cyan-400;
  }
}