@import 'tailwindcss';

@layer base {
  body {
    @apply antialiased bg-slate-900 text-slate-100;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  }

  #root {
    @apply min-h-screen;
  }
}

@layer components {
  .lms-input {
    @apply w-full rounded-md border border-slate-600 bg-slate-900 px-3 py-2 text-sm text-white focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .lms-btn-primary {
    @apply rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50;
  }

  .lms-btn-secondary {
    @apply rounded-md border border-slate-600 px-3 py-2 text-sm font-medium text-slate-300 transition-colors hover:bg-slate-800 hover:text-white;
  }

  .lms-card {
    @apply rounded-lg border border-slate-700 bg-slate-800 p-4;
  }

  .lms-form-panel {
    @apply space-y-3 rounded-lg border border-slate-700 bg-slate-800 p-4;
  }

  .lms-list-item {
    @apply rounded-lg border border-slate-700 bg-slate-800 p-4;
  }

  .lms-label {
    @apply mb-1 block text-sm font-medium text-slate-300;
  }

  .lms-alert-success {
    @apply mb-4 rounded-md border border-green-800 bg-green-950/80 px-3 py-2 text-sm text-green-400;
  }

  .lms-alert-error {
    @apply mb-4 rounded-md border border-red-800 bg-red-950/80 px-3 py-2 text-sm text-red-400;
  }
}
