/* ============================================================
    badge.css
    Hyomin Design System v1.0 — Badge Component

    사용법:
    <span class="badge badge--primary">New</span>
    <span class="badge badge--outline">Draft</span>
    ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 28px;
    padding: var(--spacing-1) var(--spacing-2); /* 4px 8px */
    border-radius: var(--radius-full);
    font-family: var(--font-secondary);
    font-size: 14px; /* Figma: Body xs 14px */
    font-weight: var(--font-weight-regular);
    line-height: 20px;
    color: #ffffff;
    white-space: nowrap;
}

.badge--primary   { background-color: var(--color-primary-main); }
.badge--secondary { background-color: var(--color-secondary-main); }
.badge--error     { background-color: var(--color-error-main); }
.badge--warning   { background-color: var(--color-warning-main); }
.badge--success   { background-color: var(--color-success-main); }

.badge--outline {
    background-color: #ffffff;
    border: var(--border-width) solid var(--gray-300);
    color: var(--gray-600);
}