/* ============================================================================
 * zen/components/badge/badge.css
 * ----------------------------------------------------------------------------
 * Small pill that appears/disappears with `.show` — used to flag warnings,
 * confirmations, or short annotations next to a panel or card.
 *
 * HTML:
 *   <span class="zen-badge zen-badge--warn">auto-updates</span>
 *   <span class="zen-badge zen-badge--good">signé</span>
 *
 * Show/hide via `.show` (not `.a-active`, since badges are binary reveals).
 * Legacy alias: `.d-badge` (same API).
 * ============================================================================ */

.zen-badge, .d-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-family: 'Courier New', monospace;
    margin: 3px 4px 3px 0;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
    color: var(--gray);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--d-fast) var(--ease-natural),
                transform var(--d-fast) var(--ease-natural);
}

.zen-badge.show, .d-badge.show { opacity: 1; transform: translateY(0); }

/* Variants via modifier class OR data-variant ------------------------------ */
.zen-badge--warn, .zen-badge[data-variant="warn"],
.d-badge.warn        { border-color: var(--yellow); color: var(--yellow); }

.zen-badge--bad,  .zen-badge[data-variant="bad"],
.d-badge.bad         { border-color: var(--red);    color: var(--red); }

.zen-badge--good, .zen-badge[data-variant="good"],
.d-badge.good        { border-color: var(--green);  color: var(--green); }

.zen-badge--info, .zen-badge[data-variant="info"],
.d-badge.info        { border-color: var(--cyan);   color: var(--cyan); }