.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
}

.badge-gold {
    background-color: #fff7d1; /* Light gold */
    color: #b88900 !important; /* Gold text */
    box-shadow: inset 0 0 0 1px rgba(184, 137, 0, 0.2); /* Gold ring effect */
}

.badge-gray {
    background-color: #f9fafb; /* bg-gray-50 */
    color: #4b5563 !important; /* text-gray-600 */
    box-shadow: inset 0 0 0 1px rgba(107, 114, 128, 0.1); /* ring-gray-500/10 */
}

.badge-darkgray {
    background-color: #cdcdcd; /* Light dark gray */
    color: #56606e !important; /* Dark gray text */
    box-shadow: inset 0 0 0 1px rgba(55, 65, 81, 0.2); /* Dark gray ring effect */
}

.badge-red {
    background-color: #fef2f2; /* bg-red-50 */
    color: #b91c1c !important; /* text-red-700 */
    box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.1); /* ring-red-600/10 */
}

.badge-darkred {
    background-color: #f3d1d1; /* Light dark red */
    color: #7f1d1d !important; /* Dark red text */
    box-shadow: inset 0 0 0 1px rgba(127, 29, 29, 0.2); /* Dark red ring effect */
}

.badge-yellow {
    background-color: #fefce8; /* bg-yellow-50 */
    color: #92400e !important; /* text-yellow-800 */
    box-shadow: inset 0 0 0 1px rgba(146, 64, 14, 0.2); /* ring-yellow-600/20 */
}

.badge-green {
    background-color: #f0fdf4; /* bg-green-50 */
    color: #047857 !important; /* text-green-700 */
    box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.2); /* ring-green-600/20 */
}

.badge-blue {
    background-color: #eff6ff; /* bg-blue-50 */
    color: #1d4ed8; /* text-blue-700 */
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.1); /* ring-blue-700/10 */
}

.badge-indigo {
    background-color: #eef2ff; /* bg-indigo-50 */
    color: #4338ca; /* text-indigo-700 */
    box-shadow: inset 0 0 0 1px rgba(67, 56, 202, 0.1); /* ring-indigo-700/10 */
}

.badge-purple {
    background-color: #f5f3ff; /* bg-purple-50 */
    color: #6b21a8; /* text-purple-700 */
    box-shadow: inset 0 0 0 1px rgba(107, 33, 168, 0.1); /* ring-purple-700/10 */
}

.badge-pink {
    background-color: #fdf2f8; /* bg-pink-50 */
    color: #be185d; /* text-pink-700 */
    box-shadow: inset 0 0 0 1px rgba(190, 24, 93, 0.1); /* ring-pink-700/10 */
}