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

html.light {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body {
  @apply bg-zinc-950 text-zinc-50 antialiased transition-colors;
}

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

.panel {
  @apply rounded-2xl border border-zinc-800 bg-zinc-900 shadow-sm;
}

@layer utilities {
  .light body {
    background-color: rgb(248 250 252);
    color: rgb(15 23 42);
  }

  .light .bg-zinc-950 {
    background-color: rgb(248 250 252);
  }

  .light .bg-zinc-950\/90 {
    background-color: rgb(255 255 255 / 0.9);
  }

  .light .bg-zinc-900 {
    background-color: rgb(255 255 255);
  }

  .light .bg-zinc-800,
  .light .bg-zinc-800\/50 {
    background-color: rgb(241 245 249);
  }

  .light .border-zinc-800,
  .light .border-zinc-700 {
    border-color: rgb(226 232 240);
  }

  .light .text-zinc-100,
  .light .text-zinc-200 {
    color: rgb(15 23 42);
  }

  .light .text-zinc-500 {
    color: rgb(100 116 139);
  }

  .light .text-zinc-400,
  .light .text-zinc-300 {
    color: rgb(71 85 105);
  }

  .light .hover\:bg-zinc-800:hover,
  .light .hover\:bg-zinc-800\/50:hover {
    background-color: rgb(241 245 249);
  }

  .light .hover\:text-zinc-200:hover {
    color: rgb(15 23 42);
  }
}