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

/* Tailwind component classes (prefixed with tw- to avoid collision with legacy styles.css) */
@layer components {
  .tw-card {
    @apply bg-white/80 backdrop-blur dark:bg-slate-800/70 rounded-xl shadow-card p-6 transition hover:shadow-lg border border-slate-200/60 dark:border-slate-700/60;
  }
  .tw-btn {
    @apply inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium bg-brand-blue text-white hover:bg-blue-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-brand-blue disabled:opacity-50 disabled:cursor-not-allowed shadow;
  }
  .tw-badge {
    @apply inline-block rounded-full bg-brand-yellow/20 text-yellow-800 text-xs font-semibold px-2 py-1 dark:text-yellow-200 dark:bg-yellow-500/20 tracking-wide uppercase;
  }
  .tw-container-page {
    @apply max-w-5xl mx-auto px-4 lg:px-6;
  }
  .tw-prose h1 { @apply text-3xl font-semibold tracking-tight mb-4; }
  .tw-prose h2 { margin-top:2.5rem; margin-bottom:1rem; font-size:1.25rem; font-weight:600; padding-left:.75rem; border-left:4px solid #FCD34D; position:relative; }
  /* Removed pseudo-element due to linter/@apply limitations */
  .tw-prose h3 { margin-top:2rem; margin-bottom:.75rem; font-size:1.125rem; font-weight:500; color:#60A5FA; letter-spacing:.02em; }
  .tw-prose p { @apply leading-relaxed mb-4; }
  .tw-prose ul { @apply list-disc pl-6 mb-4 space-y-1; }
  .tw-prose ol { @apply list-decimal pl-6 mb-4 space-y-1; }
  .tw-prose a { @apply text-brand-blue hover:underline; }
}