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

@layer base {
  body {
    font-family: 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  input, textarea, select {
    @apply transition-all duration-200;
  }
}

@layer components {

  .section-title {
    @apply text-4xl md:text-5xl font-bold bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 bg-clip-text text-transparent;
  }

  .section-subtitle {
    @apply text-slate-600 mt-3 text-lg;
  }

  .card {
    @apply bg-white rounded-2xl shadow-sm border border-slate-200 p-6 hover:shadow-md transition-all duration-300 hover:border-slate-300;
  }

  .card-hover {
    @apply card hover:shadow-lg;
  }

  .primary-btn {
    @apply bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-3 rounded-xl font-semibold
           hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-md hover:shadow-lg
           active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }

  .secondary-btn {
    @apply bg-slate-100 text-slate-900 px-6 py-3 rounded-xl font-semibold
           hover:bg-slate-200 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2;
  }

  .outline-btn {
    @apply border-2 border-slate-300 text-slate-700 px-6 py-3 rounded-xl font-semibold
           hover:bg-slate-50 hover:border-slate-400 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }

  .danger-btn {
    @apply bg-red-600 text-white px-6 py-3 rounded-xl font-semibold
           hover:bg-red-700 transition-all duration-300 shadow-md hover:shadow-lg
           focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
  }

  .success-btn {
    @apply bg-green-600 text-white px-6 py-3 rounded-xl font-semibold
           hover:bg-green-700 transition-all duration-300 shadow-md hover:shadow-lg
           focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2;
  }

  /* Input Styling */
  .form-input {
    @apply w-full px-4 py-3 border-2 border-slate-200 rounded-xl 
           focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-100
           transition-all duration-200 bg-white text-slate-900 placeholder-slate-400;
  }

  .form-label {
    @apply block text-sm font-semibold text-slate-700 mb-2;
  }

  .upload-title {
    @apply text-lg font-bold text-slate-900 mb-2;
  }

  .upload-desc {
    @apply text-slate-600 text-sm mb-4 leading-relaxed;
  }

  .file-input {
    @apply form-input cursor-pointer file:cursor-pointer file:border-0 file:bg-blue-50 
           file:text-blue-600 file:font-semibold file:px-4 file:py-2 file:mr-3 hover:file:bg-blue-100;
  }

  .file-hint {
    @apply text-xs text-slate-500 mt-2 block font-medium;
  }

  /* Animations */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes pulse-slow {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  .animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
  }

  .animate-slide {
    animation: slideInRight 0.6s ease-out forwards;
  }

  .pulse-slow {
    animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Stagger animations */
  .stagger-1 { animation-delay: 100ms; }
  .stagger-2 { animation-delay: 200ms; }
  .stagger-3 { animation-delay: 300ms; }
  .stagger-4 { animation-delay: 400ms; }
  .stagger-5 { animation-delay: 500ms; }

  /* Loading spinner */
  .spinner {
    @apply inline-block w-5 h-5 border-3 border-current border-r-transparent rounded-full animate-spin;
  }

  /* Badge styles */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold gap-1;
  }

  .badge-blue {
    @apply badge bg-blue-100 text-blue-700;
  }

  .badge-green {
    @apply badge bg-green-100 text-green-700;
  }

  .badge-red {
    @apply badge bg-red-100 text-red-700;
  }

  .badge-yellow {
    @apply badge bg-yellow-100 text-yellow-700;
  }
}