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

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

@layer base {
  body {
    @apply bg-navy-950 text-gray-100 font-body antialiased;
  }
  h1, h2, h3, h4 {
    @apply font-display;
  }
}

@layer components {
  .btn-primary {
    @apply bg-gold-500 hover:bg-gold-400 text-navy-950 font-semibold py-2 px-6 
           rounded-lg transition-colors duration-200 shadow-lg shadow-gold-500/20;
  }
  .btn-secondary {
    @apply border border-gold-500/30 hover:border-gold-400 text-gold-400 
           hover:text-gold-300 font-medium py-2 px-6 rounded-lg transition-colors duration-200;
  }
  .card {
    @apply bg-navy-900/80 backdrop-blur-sm border border-navy-700/50 rounded-xl p-6;
  }
  .badge-green {
    @apply bg-emerald-500/20 text-emerald-400 text-xs font-medium px-2 py-0.5 rounded-full;
  }
  .badge-red {
    @apply bg-red-500/20 text-red-400 text-xs font-medium px-2 py-0.5 rounded-full;
  }
  .badge-yellow {
    @apply bg-amber-500/20 text-amber-400 text-xs font-medium px-2 py-0.5 rounded-full;
  }
}