/* ============================================
   Badges - Corporate Status & Category Badges
   Aligneer Design System v1.0
   ============================================ */

/* ===== BASE BADGE ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* ===== BADGE VARIANTS ===== */
.badge-primary,
.badge-default {
    background: var(--primary-50);
    color: var(--primary);
    border: 1px solid var(--primary-light);
}

.badge-success,
.badge-active {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success);
}

.badge-warning {
    background: var(--warning-light);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.badge-error,
.badge-danger {
    background: var(--error-light);
    color: var(--error);
    border: 1px solid var(--error);
}

.badge-info {
    background: var(--info-light);
    color: var(--info);
    border: 1px solid var(--info);
}

.badge-neutral {
    background: var(--slate-100);
    color: var(--slate-600);
    border: 1px solid var(--slate-300);
}

/* ===== SOLID BADGES ===== */
.badge-solid-primary {
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
}

.badge-solid-success {
    background: var(--success);
    color: white;
    border: 1px solid var(--success);
}

.badge-solid-warning {
    background: var(--warning);
    color: white;
    border: 1px solid var(--warning);
}

.badge-solid-error {
    background: var(--error);
    color: white;
    border: 1px solid var(--error);
}

/* ===== CATEGORY BADGE ===== */
.category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--slate-100);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    color: var(--slate-600);
    font-weight: var(--font-medium);
}

/* ===== BADGE SIZES ===== */
.badge-sm {
    padding: 0.125rem 0.5rem;
    font-size: var(--font-2xs);
}

.badge-lg {
    padding: 0.375rem 1rem;
    font-size: var(--font-sm);
}

/* ===== BADGE WITH DOT ===== */
.badge-dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 0.375rem;
    background: currentColor;
}

/* ===== DARK MODE ===== */
/* Semantic badges inherit correctly via --success-light, --error-light, etc.
   Only the neutral / category badges need explicit overrides since they
   reference --slate-100 / --slate-300 / --slate-600 which are now remapped
   in body.dark-mode via base.css. No extra rules needed here. */
body.dark-mode .badge-primary,
body.dark-mode .badge-default {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-light);
    border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .badge-neutral {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-primary);
    border-color: rgba(148, 163, 184, 0.3);
}