/* ── Badges & tags ─────────────────────────────────────────────
   Two distinct primitives - do not blur them:

   .badge   - business STATE. Published/Draft, Open/Closed, a
              request's workflow stage. Color carries meaning; the
              variant is looked up from the status value, never
              chosen by eye. See apps/core/templatetags/badges.py
              for the status → variant mapping, and ../README.md
              for the full table.

   .tag     - free-form categorisation. Offering type, article
              type, subject, format. Descriptive, not stateful -
              always neutral, never colored.
*/
.badge {
    display: inline-block;
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-weight);
    line-height: var(--type-caption-line-height);
    letter-spacing: var(--type-caption-letter-spacing);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
}

.badge--success {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-text);
}

.badge--info {
    background: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--status-info-text);
}

.badge--warning {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--status-warning-text);
}

.badge--danger {
    background: var(--status-danger-bg);
    border-color: var(--status-danger-border);
    color: var(--status-danger-text);
}

.badge--neutral {
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
    color: var(--status-neutral-text);
}

.tag {
    display: inline-block;
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-weight);
    line-height: var(--type-caption-line-height);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    padding: 2px 10px;
    border-radius: var(--radius-full);
}