/* badges.css */

/* ---- BADGES ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.badge-success { color: var(--c-success); background: var(--c-success-soft); }
.badge-success::before { background: var(--c-success); }
.badge-warning { color: var(--c-warning); background: var(--c-warning-soft); }
.badge-warning::before { background: var(--c-warning); }
.badge-danger { color: var(--c-danger); background: var(--c-danger-soft); }
.badge-danger::before { background: var(--c-danger); }
.badge-info { color: var(--c-info); background: var(--c-info-soft); }
.badge-info::before { background: var(--c-info); }
.badge-neutral { color: var(--c-neutral); background: var(--c-neutral-soft); }
.badge-neutral::before { background: var(--c-neutral); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  background: var(--c-surface-strong);
  color: var(--c-body);
}

/* swatch grid */
.swatch {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  vertical-align: middle;
  margin-right: 12px;
  box-shadow: inset 0 0 0 1px rgba(11, 16, 32, 0.06);
}
.sw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sw-card { border: 1px solid var(--c-hairline-soft); border-radius: var(--r-md); overflow: hidden; }
.sw-block { height: 88px; }
.sw-meta { padding: 12px; }
.sw-name { font-size: 13px; font-weight: 600; color: var(--c-ink); }
.sw-val { font-family: var(--f-mono); font-size: 11px; color: var(--c-muted); margin-top: 2px; }