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

@layer base {
  body {
    @apply bg-slate-50 text-slate-900 font-sans antialiased;
  }
  h1, h2, h3, h4 {
    @apply font-bold tracking-tight text-slate-950;
  }
}

@layer components {
  .btn-primary {
    @apply bg-dop-red hover:bg-dop-red-dark text-white font-bold py-3 px-6 rounded shadow-lg transition-all duration-200 ease-in-out transform hover:-translate-y-0.5;
  }
  .badge-tier1 {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 ring-1 ring-inset ring-green-600/20;
  }
  .badge-tier2 {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 ring-1 ring-inset ring-yellow-600/20;
  }
  .leak-alert {
    @apply border-l-4 border-dop-red bg-red-50 p-4 text-sm text-red-700;
  }
}