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

@layer base {
  html {
    font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-500 focus:ring-indigo-500;
  }

  .btn-secondary {
    @apply bg-white text-slate-700 shadow-sm ring-1 ring-inset ring-slate-200 hover:bg-slate-50 hover:text-slate-900 focus:ring-indigo-500;
  }

  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-500 focus:ring-red-500;
  }

  .link-primary {
    @apply text-blue-600 hover:text-blue-500 font-medium;
  }

  .form-input {
    @apply block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2.5 pl-4 pr-3;
  }

  .form-label {
    @apply block text-sm font-medium text-slate-700;
  }

  .form-hint {
    @apply mt-2 text-sm text-slate-500;
  }

  .form-error {
    @apply mt-2 text-sm text-red-600;
  }

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

  .card-body {
    @apply p-6 sm:p-8;
  }

  .card-header {
    @apply border-b border-slate-200 px-6 py-4 sm:px-8;
  }

  .card-footer {
    @apply border-t border-slate-200 px-6 py-4 sm:px-8;
  }

  .table-container {
    @apply overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg;
  }

  .table-header {
    @apply bg-gray-50;
  }

  .table-cell {
    @apply text-gray-900;
  }
}