frontend/src/index.css

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

@layer base {
  * { box-sizing: border-box; }
  body { 
    @apply font-sans antialiased text-neutral-200 bg-[#09090b] selection:bg-neutral-800; 
    background-image: 
      radial-gradient(circle at 50% -20%, rgba(120, 119, 198, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.005) 0%, transparent 35%);
    background-attachment: fixed;
  }
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { @apply bg-[#09090b]; }
  ::-webkit-scrollbar-thumb { @apply bg-neutral-800 hover:bg-neutral-700 rounded-full transition-colors; }
}

@layer components {
  /* Premium Minimalistic Card */
  .card {
    @apply bg-[#0e0e11] border border-neutral-800/80 rounded-xl shadow-xl transition-all duration-300 relative overflow-hidden;
  }
  .card:hover {
    @apply border-neutral-700/80 shadow-[0_8px_30px_rgb(0,0,0,0.6)] transform -translate-y-[1px];
  }
  
  /* Buttons - Monochromatic Premium Theme */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-5 py-2
           bg-neutral-100 hover:bg-neutral-200 text-neutral-950 font-medium text-sm rounded-lg
           transition-all duration-200 active:scale-[0.98] 
           disabled:opacity-50 disabled:cursor-not-allowed shadow-md;
  }
  
  .btn-ghost {
    @apply inline-flex items-center gap-2 px-4 py-2 text-neutral-400 hover:text-neutral-100
           hover:bg-neutral-900 border border-transparent hover:border-neutral-800 text-sm rounded-lg transition-all duration-200 active:scale-[0.98];
  }
  
  /* Badges - Monochromatic & Muted Slate */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium border tracking-tight;
  }
  .badge-sql   { @apply bg-neutral-900/80 text-neutral-300 border-neutral-800; }
  .badge-pandas { @apply bg-neutral-900/80 text-neutral-300 border-neutral-800; }
  .badge-cache  { @apply bg-neutral-900/80 text-neutral-300 border-neutral-800; }
  
  /* Custom Inputs */
  .input-premium {
    @apply bg-neutral-950 border border-neutral-800 rounded-lg px-3.5 py-2 text-neutral-200 
           focus:outline-none focus:ring-1 focus:ring-neutral-700 focus:border-neutral-700 
           transition-all duration-200 placeholder:text-neutral-600 text-sm;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-b from-white to-neutral-400;
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}