/* ================================================================
   BADGE COMPONENT
   6 variants × 3 styles × 3 sizes + dot/removable/pill
   Budget: < 2KB minified
   ================================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    line-height: 1;
}

/* ── SIZES ───────────────────────────────────────────────────── */

.badge--sm { height: var(--badge-height-sm); padding: 0 var(--badge-padding-x-sm); font-size: var(--badge-text-sm); border-radius: var(--badge-radius); }
.badge--md { height: var(--badge-height-md); padding: 0 var(--badge-padding-x-md); font-size: var(--badge-text-md); border-radius: var(--badge-radius); }
.badge--lg { height: var(--badge-height-lg); padding: 0 var(--badge-padding-x-lg); font-size: var(--badge-text-lg); border-radius: var(--badge-radius); }

.badge--pill { border-radius: var(--badge-radius-pill); }

/* ── SOLID VARIANTS ──────────────────────────────────────────── */

.badge--default.badge--solid  { background: var(--bg-hover); color: var(--text-secondary); }
.badge--accent.badge--solid   { background: var(--accent-primary); color: var(--accent-primary-fg); }
.badge--success.badge--solid  { background: var(--success); color: #fff; }
.badge--warning.badge--solid  { background: #D97706; color: #fff; }
.badge--danger.badge--solid   { background: var(--danger); color: #fff; }
.badge--info.badge--solid     { background: #3B82F6; color: #fff; }

/* ── SUBTLE VARIANTS ─────────────────────────────────────────── */

.badge--default.badge--subtle  { background: color-mix(in srgb, var(--text-secondary) 12%, transparent); color: var(--text-secondary); }
.badge--accent.badge--subtle   { background: var(--accent-alpha-15); color: var(--accent-primary); }
.badge--success.badge--subtle  { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.badge--warning.badge--subtle  { background: color-mix(in srgb, #D97706 15%, transparent); color: #FBB03B; }
.badge--danger.badge--subtle   { background: var(--danger-muted); color: var(--danger); }
.badge--info.badge--subtle     { background: color-mix(in srgb, #3B82F6 15%, transparent); color: #60A5FA; }

/* ── OUTLINE VARIANTS ────────────────────────────────────────── */

.badge--default.badge--outline  { border-color: var(--border-default); color: var(--text-secondary); }
.badge--accent.badge--outline   { border-color: var(--accent-primary); color: var(--accent-primary); }
.badge--success.badge--outline  { border-color: var(--success); color: var(--success); }
.badge--warning.badge--outline  { border-color: #D97706; color: #FBB03B; }
.badge--danger.badge--outline   { border-color: var(--danger); color: var(--danger); }
.badge--info.badge--outline     { border-color: #3B82F6; color: #60A5FA; }

/* ── DOT ─────────────────────────────────────────────────────── */

.badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ── ICON ────────────────────────────────────────────────────── */

.badge__icon {
    display: inline-flex;
    flex-shrink: 0;
}
.badge__icon svg { width: 1em; height: 1em; }

/* ── REMOVABLE ───────────────────────────────────────────────── */

.badge__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    margin-right: -2px;
    padding: 0;
    border: none;
    background: none;
    color: currentColor;
    opacity: 0.5;
    cursor: pointer;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.badge__remove:hover { opacity: 1; }
.badge__remove svg { width: 10px; height: 10px; }