@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: #1a6b8a;
  --primary-dark: #104f72;
  --emergency: #dc2626;
  --bg: #f0f4f8;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --muted: #64748b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--bg); color: var(--text); -webkit-tap-highlight-color: transparent; }

@layer components {
  .btn-primary { @apply bg-primary-600 hover:bg-primary-700 text-white font-semibold py-2.5 px-5 rounded-xl transition-all duration-200 active:scale-95 disabled:opacity-60; }
  .btn-secondary { @apply bg-white border border-gray-200 hover:bg-gray-50 text-gray-700 font-semibold py-2.5 px-5 rounded-xl transition-all duration-200; }
  .btn-danger { @apply bg-red-600 hover:bg-red-700 text-white font-semibold py-2.5 px-5 rounded-xl transition-all duration-200; }
  .card { @apply bg-white rounded-2xl shadow-sm border border-gray-100; }
  .input { @apply w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-transparent text-sm transition-all; }
  .badge-emergency { @apply bg-red-100 text-red-700 text-xs font-bold px-2.5 py-1 rounded-full uppercase tracking-wide; }
  .badge-event { @apply bg-purple-100 text-purple-700 text-xs font-bold px-2.5 py-1 rounded-full uppercase tracking-wide; }
  .badge-job { @apply bg-green-100 text-green-700 text-xs font-bold px-2.5 py-1 rounded-full uppercase tracking-wide; }
  .badge-discussion { @apply bg-blue-100 text-blue-700 text-xs font-bold px-2.5 py-1 rounded-full uppercase tracking-wide; }
  .badge-sponsored { @apply bg-amber-100 text-amber-700 text-xs font-bold px-2.5 py-1 rounded-full; }
}

/* Mobile bottom nav safe area */
.bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
/* Smooth scrolling feed */
.feed-container { scroll-snap-type: y proximity; }

/* Emergency alert pulse */
@keyframes emergencyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}
.emergency-card { animation: emergencyPulse 2s infinite; }

/* Star rating */
.star { color: #f59e0b; }
.star-empty { color: #d1d5db; }