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

@layer base {
  :root {
    --foreground-rgb: 15, 23, 42;
    --background-start-rgb: 248, 250, 252;
    --background-end-rgb: 241, 245, 249;
    --primary-rgb: 79, 70, 229;
    --secondary-rgb: 14, 165, 233;
  }

  body {
    @apply bg-slate-50 text-slate-900 antialiased;
    background: linear-gradient(to bottom right, rgb(var(--background-start-rgb)), rgb(var(--background-end-rgb)));
    min-height: 100vh;
  }
}

@layer components {
  .glass-panel {
    @apply bg-white/70 backdrop-blur-xl border border-white/20 shadow-xl;
  }

  .bento-card {
    @apply bg-white/80 backdrop-blur-md border border-white/50 shadow-lg rounded-3xl p-6 transition-all duration-300 hover:shadow-xl hover:bg-white/90 flex flex-col;
  }

  .btn-primary {
    @apply px-8 py-4 bg-indigo-600 text-white rounded-full font-semibold shadow-lg shadow-indigo-500/30 transition-all duration-300 hover:bg-indigo-700 hover:shadow-indigo-500/40 hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2;
  }

  .btn-secondary {
    @apply px-8 py-4 bg-white text-slate-700 border border-slate-200 rounded-full font-semibold shadow-sm transition-all duration-300 hover:bg-slate-50 hover:border-slate-300 hover:-translate-y-0.5 active:translate-y-0 flex items-center justify-center gap-2;
  }

  .card-feature {
    @apply p-8 rounded-2xl bg-white border border-slate-100 shadow-sm transition-all duration-300 hover:shadow-md hover:border-indigo-100 group;
  }

  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-cyan-500;
  }

  .upload-zone {
    @apply border-2 border-dashed border-slate-300 rounded-2xl p-12 text-center cursor-pointer transition-all duration-300 bg-slate-50/50 hover:bg-indigo-50/50 hover:border-indigo-400 hover:scale-[1.01];
  }

  .upload-zone.active {
    @apply border-indigo-500 bg-indigo-50/50 scale-[1.01];
  }

  .badge {
    @apply px-3 py-1 rounded-full text-xs font-bold border;
  }

  .badge-purple {
    @apply bg-purple-50 text-purple-700 border-purple-200;
  }

  .badge-pink {
    @apply bg-pink-50 text-pink-700 border-pink-200;
  }

  .badge-cyan {
    @apply bg-cyan-50 text-cyan-700 border-cyan-200;
  }

  .badge-blue {
    @apply bg-blue-50 text-blue-700 border-blue-200;
  }

  .badge-gray {
    @apply bg-slate-50 text-slate-700 border-slate-200;
  }
}

@layer utilities {
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .delay-100 {
    animation-delay: 100ms;
  }

  .delay-200 {
    animation-delay: 200ms;
  }

  .delay-300 {
    animation-delay: 300ms;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}