/* ============================================================
   BADGE.CSS — Tagi, etykiety, statusy
   ============================================================ */

/* --- Baza --- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* --- Warianty --- */

.badge--blue {
    background-color: var(--color-blue-100);
    color: var(--color-primary-hover);
}

.badge--green {
    background-color: #d1fae5;
    color: #065f46;
}

.badge--amber {
    background-color: #fef3c7;
    color: #92400e;
}

.badge--slate {
    background-color: var(--color-slate-100);
    color: var(--color-slate-700);
}

/* --- Na ciemnym tle --- */

.badge--dark-blue {
    background-color: rgba(37, 99, 235, 0.2);
    color: var(--color-primary-light);
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.badge--dark-green {
    background-color: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

/* --- Z kropką statusu --- */

.badge--dot::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: currentColor;
}