@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Inter', system-ui, sans-serif;
}
body {
@apply bg-gray-50 text-gray-900 antialiased;
}
code {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
}
@layer components {
.btn-primary {
@apply bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition-colors;
}
.btn-secondary {
@apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors;
}
.card {
@apply bg-white shadow-sm border border-gray-200 rounded-lg p-4;
}
.input-field {
@apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
}
.badge {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}
.badge-pending {
@apply bg-yellow-100 text-yellow-800;
}
.badge-in-progress {
@apply bg-blue-100 text-blue-800;
}
.badge-completed {
@apply bg-green-100 text-green-800;
}
.badge-high {
@apply bg-red-100 text-red-800;
}
.badge-medium {
@apply bg-orange-100 text-orange-800;
}
.badge-low {
@apply bg-gray-100 text-gray-800;
}
}
