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

html,
body {
  @apply bg-gray-900 text-gray-100 font-sans;
}

[data-theme="light"] {
  @apply bg-gray-50 text-gray-900;
}

hr {
  @apply border-gray-700;
}

[data-theme="light"] hr {
  @apply border-gray-200;
}

.card {
  @apply bg-gray-800 rounded-lg shadow-sm border border-gray-700 p-6;
}

[data-theme="light"] .card {
  @apply bg-white border-gray-200;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200;
}

.btn-secondary {
  @apply bg-gray-700 hover:bg-gray-600 text-gray-200 px-4 py-2 rounded-lg font-medium transition-colors duration-200;
}

[data-theme="light"] .btn-secondary {
  @apply bg-gray-100 hover:bg-gray-200 text-gray-700;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-200;
}

.input {
  @apply border border-gray-600 bg-gray-700 text-gray-100 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

[data-theme="light"] .input {
  @apply border-gray-300 bg-white text-gray-900;
}
