/**
 * Clean Tailwind CSS v4 Configuration
 * Simple, native Tailwind classes with class-based dark mode
 */

/* Import Tailwind CSS */
@import "tailwindcss";

/* Configure class-based dark mode - the key for proper theme switching */
@custom-variant dark (&:where(.dark, .dark *));

/* Optional: Add some custom color variables if needed */
@theme {
  /* You can add custom colors here if needed, but we'll keep it minimal */
}

/* Dark mode specific styles */
@layer base {
  /* Ensure smooth transitions for theme switching */
  * {
    @apply transition-colors duration-200;
  }

  /* Custom dark mode body styles */
  .dark body {
    @apply bg-gray-900 text-gray-100;
  }
}
@keyframes fade-slide {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-slide {
  animation: fade-slide 0.35s ease-out both;
}
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(200, 200, 200, 0.15) 25%,
    rgba(200, 200, 200, 0.3) 50%,
    rgba(200, 200, 200, 0.15) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.animate-slideUp {
  animation: slideUp 0.25s ease-out;
}