@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

.filter-btn {
    @apply px-4 py-2 rounded-full text-sm font-medium transition-all;
    @apply bg-gray-100 text-gray-600 hover:bg-gray-200;
}

.filter-btn.active {
    @apply bg-primary-500 text-white hover:bg-primary-600;
}

.resource-card {
    @apply bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all;
    @apply border border-gray-100 hover:border-primary-100;
}

.resource-card:hover .resource-title {
    @apply text-primary-500;
}

.resource-badge {
    @apply px-2 py-1 rounded-md text-xs font-medium;
}

.badge-model {
    @apply bg-purple-100 text-purple-800;
}

.badge-dataset {
    @apply bg-emerald-100 text-emerald-800;
}

.badge-tutorial {
    @apply bg-amber-100 text-amber-800;
}

.badge-space {
    @apply bg-blue-100 text-blue-800;
}

.dark .resource-card {
    @apply bg-gray-800 border-gray-700;
}

.dark .filter-btn {
    @apply bg-gray-700 text-gray-300 hover:bg-gray-600;
}

.dark .filter-btn.active {
    @apply bg-primary-600 text-white hover:bg-primary-700;
}