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

html.light {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body {
  @apply bg-white text-slate-900 antialiased;
}

.shell {
  @apply mx-auto max-w-6xl px-4 sm:px-6 lg:px-8;
}

.card {
  @apply rounded-2xl border border-slate-200 bg-white shadow-sm;
}

@layer base {
  body {
    @apply transition-colors dark:bg-slate-950 dark:text-slate-100;
  }

  .card {
    @apply transition-colors dark:border-slate-800 dark:bg-slate-900;
  }
}

@layer utilities {
  .dark .bg-slate-50 {
    background-color: rgb(2 6 23);
  }

  .dark .bg-slate-100 {
    background-color: rgb(15 23 42);
  }

  .dark .bg-white {
    background-color: rgb(15 23 42);
  }

  .dark .bg-white\/90 {
    background-color: rgb(15 23 42 / 0.9);
  }

  .dark .border-slate-200,
  .dark .border-stone-200,
  .dark .border-slate-300 {
    border-color: rgb(30 41 59);
  }

  .dark .text-slate-900 {
    color: rgb(241 245 249);
  }

  .dark .text-slate-700 {
    color: rgb(203 213 225);
  }

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

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

  .dark .text-sky-700 {
    color: rgb(125 211 252);
  }

  .dark .bg-sky-100 {
    background-color: rgb(12 74 110);
  }

  .dark .text-sky-800 {
    color: rgb(224 242 254);
  }

  .dark .hover\:bg-slate-100:hover,
  .dark .hover\:bg-stone-100:hover {
    background-color: rgb(30 41 59);
  }

  .dark .hover\:text-slate-900:hover,
  .dark .hover\:text-stone-900:hover {
    color: rgb(248 250 252);
  }
}
