@import "tailwindcss";

/* Configure dark mode to use class instead of media query */
@custom-variant dark (&:where(.dark, .dark *));

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Dark mode configuration */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
}

/* Custom dark mode styles for the application */
@layer components {
  .dark .bg-slate-50 {
    @apply bg-slate-900;
  }

  .dark .bg-white {
    @apply bg-slate-800;
  }

  .dark .border-slate-200 {
    @apply border-slate-700;
  }

  .dark .text-slate-900 {
    @apply text-slate-100;
  }

  .dark .text-slate-600 {
    @apply text-slate-300;
  }

  .dark .text-slate-500 {
    @apply text-slate-400;
  }

  .dark .text-slate-400 {
    @apply text-slate-500;
  }

  .dark .bg-slate-100 {
    @apply bg-slate-700;
  }

  .dark .hover\:text-slate-900:hover {
    @apply hover:text-slate-100;
  }

  .dark .hover\:text-slate-700:hover {
    @apply hover:text-slate-200;
  }

  .dark .hover\:shadow-md:hover {
    @apply hover:shadow-slate-900/20;
  }

  .dark .bg-red-100 {
    @apply bg-red-900/20;
  }

  .dark .bg-amber-100 {
    @apply bg-amber-900/20;
  }

  .dark .bg-yellow-50 {
    @apply bg-yellow-900/20;
  }

  .dark .bg-green-100 {
    @apply bg-green-900/20;
  }

  .dark .bg-sky-100 {
    @apply bg-sky-900/20;
  }

  .dark .bg-blue-100 {
    @apply bg-blue-900/20;
  }

  .dark .bg-orange-100 {
    @apply bg-orange-900/20;
  }
  .dark .text-orange-800 {
    @apply text-orange-300;
  }
  .dark .text-red-800 {
    @apply text-red-300;
  }

  /* Custom green overrides (consider removing if not broadly used) */
  .dark .bg-green-100 {
    @apply bg-green-900/20;
  }
  .dark .text-green-700 {
    @apply text-green-300;
  }

  /* Custom purple overrides */
  .dark .bg-purple-100 {
    @apply bg-purple-900/20;
  }
}