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

/* UX: design tokens and reusable components */
@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors;
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors;
  }
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
  }
  .card-body {
    @apply p-6;
  }
  .page-heading {
    @apply text-2xl md:text-3xl font-bold text-gray-900 tracking-tight;
  }
  .page-subheading {
    @apply text-gray-600 mt-1;
  }
  .dashboard-shell {
    @apply space-y-1;
  }
  .dashboard-glass {
    @apply rounded-2xl border border-blue-100/70 bg-gradient-to-br from-blue-50 via-white to-indigo-50 shadow-sm;
  }
  .stat-card {
    @apply rounded-xl border border-gray-200 bg-white/90 px-4 py-3;
  }
  .stat-card-label {
    @apply text-xs uppercase tracking-wide text-gray-500 font-medium;
  }
  .stat-card-value {
    @apply mt-1 text-2xl font-bold text-gray-900;
  }
  .pill-tab {
    @apply px-4 py-2 rounded-lg text-sm font-medium transition-colors;
  }
  .pill-tab-active {
    @apply bg-blue-600 text-white;
  }
  .pill-tab-inactive {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
  }

  .media-search-input {
    @apply w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30;
  }
  .media-filter-btn {
    @apply rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 cursor-pointer;
  }
  .media-filter-btn-active {
    @apply border-blue-200 bg-blue-50 text-blue-700;
  }
}