:root {
    --badge-font-size: 0.75rem;
    --badge-font-weight: 600;
    --badge-radius: 9999px;
    --badge-radius-sm: 4px;
    --badge-padding: 0.25rem 0.625rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: var(--badge-padding);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    border-radius: var(--badge-radius);
    line-height: 1;
}

.btn .badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    line-height: 1;
}

.nav .badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.4375rem;
    line-height: 1;
}

.alert .badge {
    font-size: 0.6875rem;
    font-weight: 700;
    vertical-align: middle;
}

.badge--blue {
    background-color: #dbeafe;
    color: #1d4ed8;
    border-radius: var(--badge-radius);
}

.badge--blue-solid {
    background-color: #2563eb;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--indigo {
    background-color: #e0e7ff;
    color: #4338ca;
    border-radius: var(--badge-radius);
}

.badge--indigo-solid {
    background-color: #4f46e5;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--violet {
    background-color: #ede9fe;
    color: #6d28d9;
    border-radius: var(--badge-radius);
}

.badge--violet-solid {
    background-color: #7c3aed;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--purple {
    background-color: #f3e8ff;
    color: #7e22ce;
    border-radius: var(--badge-radius);
}

.badge--purple-solid {
    background-color: #9333ea;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--pink {
    background-color: #fce7f3;
    color: #be185d;
    border-radius: var(--badge-radius);
}

.badge--pink-solid {
    background-color: #db2777;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--rose {
    background-color: #ffe4e6;
    color: #be123c;
    border-radius: var(--badge-radius);
}

.badge--rose-solid {
    background-color: #e11d48;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--red {
    background-color: #fee2e2;
    color: #b91c1c;
    border-radius: var(--badge-radius);
}

.badge--red-solid {
    background-color: #dc2626;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--orange {
    background-color: #ffedd5;
    color: #c2410c;
    border-radius: var(--badge-radius);
}

.badge--orange-solid {
    background-color: #ea580c;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--amber {
    background-color: #fef3c7;
    color: #b45309;
    border-radius: var(--badge-radius);
}

.badge--amber-solid {
    background-color: #d97706;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--yellow {
    background-color: #fef9c3;
    color: #854d0e;
    border-radius: var(--badge-radius);
}

.badge--yellow-solid {
    background-color: #ca8a04;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--lime {
    background-color: #ecfccb;
    color: #3f6212;
    border-radius: var(--badge-radius);
}

.badge--lime-solid {
    background-color: #65a30d;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--green {
    background-color: #dcfce7;
    color: #15803d;
    border-radius: var(--badge-radius);
}

.badge--green-solid {
    background-color: #16a34a;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--emerald {
    background-color: #d1fae5;
    color: #065f46;
    border-radius: var(--badge-radius);
}

.badge--emerald-solid {
    background-color: #059669;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--teal {
    background-color: #ccfbf1;
    color: #0f766e;
    border-radius: var(--badge-radius);
}

.badge--teal-solid {
    background-color: #0d9488;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--cyan {
    background-color: #cffafe;
    color: #0e7490;
    border-radius: var(--badge-radius);
}

.badge--cyan-solid {
    background-color: #0891b2;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--sky {
    background-color: #e0f2fe;
    color: #0369a1;
    border-radius: var(--badge-radius);
}

.badge--sky-solid {
    background-color: #0284c7;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--gray {
    background-color: #f3f4f6;
    color: #374151;
    border-radius: var(--badge-radius);
}

.badge--gray-solid {
    background-color: #4b5563;
    color: #ffffff;
    border-radius: var(--badge-radius);
}

.badge--dark {
    background-color: #1f2937;
    color: #f9fafb;
    border-radius: var(--badge-radius);
}

.badge--square-blue {
    background-color: #dbeafe;
    color: #1d4ed8;
    border-radius: var(--badge-radius-sm);
}

.badge--square-green {
    background-color: #dcfce7;
    color: #15803d;
    border-radius: var(--badge-radius-sm);
}

.badge--square-red {
    background-color: #fee2e2;
    color: #b91c1c;
    border-radius: var(--badge-radius-sm);
}

.badge--square-purple {
    background-color: #f3e8ff;
    color: #7e22ce;
    border-radius: var(--badge-radius-sm);
}

.card .badge {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.card .badge--blue {
    background-color: #dbeafe;
    color: #1e40af;
}

.card .badge--green {
    background-color: #dcfce7;
    color: #166534;
}

.card .badge--red {
    background-color: #fee2e2;
    color: #991b1b;
}

.card .badge--gray {
    background-color: #f3f4f6;
    color: #374151;
}

.card--dark .badge {
    font-size: 0.6875rem;
    font-weight: 700;
}

.card--dark .badge--blue {
    background-color: #1e3a5f;
    color: #93c5fd;
}

.card--dark .badge--green {
    background-color: #14532d;
    color: #86efac;
}

.card--dark .badge--red {
    background-color: #450a0a;
    color: #fca5a5;
}

.card--elevated .card__header .badge {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.card--blue .card__body .badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-weight: 700;
}
