/* Badge - "Whisper, don't shout"
 * Subtle indicators that respect attention
 * Uses design tokens directly for all visual properties
 */

.badge {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--space-breath) * 0.5) calc(var(--space-breath) * 1.5);
  font-size: var(--font-size-xs);
  font-weight: var(--tone-whisper);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition: all var(--motion-micro) var(--ease-natural);
  opacity: 0.95;
}

.badge:hover {
  opacity: 1;
  transform: translateY(-0.5px);
}

/* Variant colors */
.badge-primary {
  background-color: var(--color-badge-primary-bg);
  color: var(--color-badge-primary-text);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-badge-primary-ring), transparent 75%);
}

.badge-secondary,
.badge-neutral {
  background-color: var(--color-badge-neutral-bg);
  color: var(--color-badge-neutral-text);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-badge-neutral-ring), transparent 60%);
}

.badge-success {
  background-color: var(--color-badge-success-bg);
  color: var(--color-badge-success-text);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-badge-success-ring), transparent 75%);
}

.badge-warning {
  background-color: var(--color-badge-warning-bg);
  color: var(--color-badge-warning-text);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-badge-warning-ring), transparent 75%);
}

.badge-error,
.badge-danger {
  background-color: var(--color-badge-error-bg);
  color: var(--color-badge-error-text);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-badge-error-ring), transparent 75%);
}

.badge-info {
  background-color: var(--color-badge-info-bg);
  color: var(--color-badge-info-text);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-badge-info-ring), transparent 75%);
}

/* Dark-mode values flow through --color-badge-*-{bg,text,ring} tokens defined
   in design-tokens.css under @media (prefers-color-scheme: dark) :root and
   [data-theme="dark"]. No selector-based overrides needed. */