.tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15em 0.6em 0.25em 0.6em;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.4;
  font-family: var(--font-code);

  background: color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--text);
  white-space: nowrap;


}

/* Optional semantic variants */
.tag--note {
  background: color-mix(in srgb, var(--note) 50%, transparent);
  color: var(--text);
}

.tag--success {
  background: color-mix(in srgb, var(--success) 25%, transparent);
  color: var(--success);
}

.tag--minimal {
  background-color: transparent;
  border: 1px solid #6d687566;
  color: var(--muted);
}

.tag--warning {
  background: color-mix(in srgb, var(--warn) 50%, transparent);
  color: var(--muted);
}

.tag--danger {
  background: color-mix(in srgb, var(--danger) 70%, transparent);
  color: white;
}