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

@layer base {
  .dark body {
    @apply bg-slate-950 text-slate-100;
  }

  .dark input,
  .dark select,
  .dark textarea {
    color-scheme: dark;
  }

  .dark ::selection {
    @apply bg-blue-500 text-white;
  }
}

@layer utilities {
  .dark .bg-white {
    @apply bg-slate-900;
  }

  .dark .bg-slate-50 {
    @apply bg-slate-950;
  }

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

  .dark .bg-blue-50 {
    @apply bg-blue-950;
  }

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

  .dark .bg-green-50 {
    @apply bg-green-950;
  }

  .dark .bg-red-50 {
    @apply bg-red-950;
  }

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

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

  .dark .text-slate-500 {
    color: rgb(148 163 184);
  }

  .dark .text-slate-400 {
    color: rgb(100 116 139);
  }

  .dark .text-blue-700,
  .dark .text-blue-600 {
    @apply text-blue-400;
  }

  .dark .text-green-700 {
    @apply text-green-300;
  }

  .dark .text-red-700,
  .dark .text-red-600 {
    @apply text-red-400;
  }

  .dark .text-orange-600 {
    @apply text-orange-400;
  }

  .dark .text-violet-700 {
    @apply text-violet-300;
  }

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

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

  .dark .border-blue-500,
  .dark .border-blue-600 {
    @apply border-blue-400;
  }

  .dark .border-green-200 {
    @apply border-green-800;
  }

  .dark .border-red-200 {
    @apply border-red-800;
  }

  .dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    @apply border-slate-700;
  }

  .dark .hover\:bg-slate-50:hover,
  .dark .hover\:bg-slate-100:hover {
    @apply bg-slate-800;
  }

  .dark .hover\:bg-blue-50:hover {
    @apply bg-blue-950;
  }

  .dark .hover\:bg-red-50:hover {
    @apply bg-red-950;
  }

  .dark .hover\:text-slate-950:hover,
  .dark .hover\:text-slate-700:hover {
    @apply text-white;
  }

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

  .dark .focus\:ring-offset-2:focus {
    @apply ring-offset-slate-900;
  }

  .dark .focus\:ring-blue-100:focus {
    @apply ring-blue-900;
  }
}