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

html.light {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --accent: #f59e0b;
  --sidebar-bg: #0f172a;
  --sidebar-text: #94a3b8;
  --sidebar-active: #ffffff;
}

@layer base {
  * {
    box-sizing: border-box;
  }

  body {
    @apply bg-slate-50 text-slate-900 antialiased transition-colors dark:bg-slate-950 dark:text-slate-100;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800;
  }

  .btn-danger {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50;
  }

  .input-field {
    @apply w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition-colors placeholder:text-slate-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500;
  }

  .card {
    @apply rounded-xl border border-slate-200 bg-white shadow-sm transition-colors dark:border-slate-800 dark:bg-slate-900;
  }

  .badge-green {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700;
  }

  .badge-blue {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700;
  }

  .badge-amber {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700;
  }

  .badge-red {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700;
  }

  .badge-gray {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600;
  }

  .badge-purple {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700;
  }
}

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

  .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 {
    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 .hover\:bg-slate-100:hover {
    background-color: rgb(30 41 59);
  }

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