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

@layer base {
  body {
    @apply text-modesta-navy antialiased;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-semibold;
  }
  a {
    @apply transition-colors duration-200;
  }
}

@layer components {
  .btn-primary {
    @apply bg-modesta-navy text-white px-6 py-3 rounded font-medium
           hover:bg-modesta-navy-light transition-colors duration-200
           inline-flex items-center justify-center;
  }
  .btn-secondary {
    @apply bg-modesta-steel text-white px-6 py-3 rounded font-medium
           hover:bg-modesta-steel-light transition-colors duration-200
           inline-flex items-center justify-center;
  }
  .btn-accent {
    @apply bg-modesta-accent text-modesta-navy px-6 py-3 rounded font-bold
           hover:bg-modesta-accent-light transition-colors duration-200
           inline-flex items-center justify-center;
  }
  .btn-danger {
    @apply bg-modesta-danger text-white px-4 py-2 rounded font-medium
           hover:opacity-90 transition-opacity duration-200
           inline-flex items-center justify-center;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }
  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden
           border border-gray-100 hover:shadow-lg transition-shadow duration-300;
  }
  .form-input {
    @apply w-full rounded border-gray-300 shadow-sm
           focus:border-modesta-navy focus:ring-modesta-navy;
  }
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
  .form-error {
    @apply text-modesta-danger text-sm mt-1;
  }
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  .badge-success {
    @apply bg-green-100 text-green-800;
  }
  .badge-warning {
    @apply bg-yellow-100 text-yellow-800;
  }
  .badge-danger {
    @apply bg-red-100 text-red-800;
  }
  .badge-info {
    @apply bg-blue-100 text-blue-800;
  }
  .table-admin {
    @apply min-w-full divide-y divide-gray-200;
  }
  .table-admin thead {
    @apply bg-gray-50;
  }
  .table-admin th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }
  .table-admin td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
  }
  .table-admin tbody tr {
    @apply hover:bg-gray-50 transition-colors;
  }
}