/* design_system/badges.css — Badge variants */

/* Badges — radius aligned with inputs/controls, not pill-shaped */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.2rem 0.5rem;
    font-size: var(--text-caption);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-radius: var(--radius-input);
    border: 1px solid transparent;
    vertical-align: middle;
}
.badge-green {
    background: var(--green-soft);
    color: var(--green);
    border-color: var(--green-border);
}
.badge-amber {
    background: var(--amber-soft);
    color: var(--amber);
    border-color: var(--amber-border);
}
.badge-red {
    background: var(--red-soft);
    color: var(--red);
    border-color: var(--red-border);
}
.badge-slate {
    background: var(--slate-soft);
    color: var(--slate);
    border-color: var(--slate-border);
}
.badge-blue {
    background: var(--blue-soft);
    color: var(--blue);
    border-color: var(--blue-border);
}
.badge-gray {
    background: var(--slate-soft);
    color: var(--slate);
    border-color: var(--slate-border);
}

/* Flash toasts — must sit above .site-header (1000) and mobile shell overlays (1040/1050) */