/* ============================================================
   Component Library
   :root tokens. Theme-ready.
   ============================================================ */

/* --- C12: BADGE --- */
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:.7rem;font-weight:700;letter-spacing:.03em;line-height:1.5;white-space:nowrap}
.badge--default{background:var(--color-bg-secondary);color:var(--color-text-secondary)}
.badge--primary{background:color-mix(in srgb,var(--color-link)14%,transparent);color:var(--color-link)}
.badge--success{background:color-mix(in srgb, var(--color-success) 14%, transparent);color:var(--color-success-hover)}
.badge--warning{background:color-mix(in srgb, var(--color-warning) 14%, transparent);color:var(--color-warning-hover)}
.badge--danger{background:color-mix(in srgb, var(--color-danger) 12%, transparent);color:var(--color-danger-hover)}

/* Dot badge */
.badge--dot{padding:0;width:8px;height:8px;min-width:8px;border-radius:50%}
.badge--dot.badge--success{background:var(--color-success)}
.badge--dot.badge--warning{background:var(--color-warning)}
.badge--dot.badge--danger{background:var(--color-danger)}

/* Pill count */
.badge--count{padding:1px 7px;font-size:.66rem;min-width:18px;text-align:center}