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

@layer components {
    /* Tag Colors */
    .tag-1 {
        @apply bg-blue-100 text-blue-800;
    }
    .tag-1:hover {
        @apply bg-blue-200;
    }
    
    .tag-2 {
        @apply bg-green-100 text-green-800;
    }
    .tag-2:hover {
        @apply bg-green-200;
    }
    
    .tag-3 {
        @apply bg-purple-100 text-purple-800;
    }
    .tag-3:hover {
        @apply bg-purple-200;
    }
    
    .tag-4 {
        @apply bg-red-100 text-red-800;
    }
    .tag-4:hover {
        @apply bg-red-200;
    }
    
    .tag-5 {
        @apply bg-yellow-100 text-yellow-800;
    }
    .tag-5:hover {
        @apply bg-yellow-200;
    }
    
    .tag-6 {
        @apply bg-indigo-100 text-indigo-800;
    }
    .tag-6:hover {
        @apply bg-indigo-200;
    }
    
    .tag-7 {
        @apply bg-pink-100 text-pink-800;
    }
    .tag-7:hover {
        @apply bg-pink-200;
    }
    
    .tag-8 {
        @apply bg-teal-100 text-teal-800;
    }
    .tag-8:hover {
        @apply bg-teal-200;
    }
    
    .tag-9 {
        @apply bg-orange-100 text-orange-800;
    }
    .tag-9:hover {
        @apply bg-orange-200;
    }
    
    .tag-10 {
        @apply bg-cyan-100 text-cyan-800;
    }
    .tag-10:hover {
        @apply bg-cyan-200;
    }
}

/* Custom styles */
.bg-custom-blue {
    background-color: #27ae60;
}

/* Tag card styles */
.tag-card {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    transition: all 0.2s ease-in-out;
}

.tag-card:hover {
    background-color: #60a5fa;
    border-color: #3b82f6;
    color: white;
}
