/* 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 variants */
.dark .badge-primary {
  background-color: oklch(28% 0.05 220);
  color: oklch(70% 0.04 220);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(38% 0.04 220), transparent 65%);
}

.dark .badge-secondary,
.dark .badge-neutral {
  background-color: oklch(26% 0.01 270);
  color: oklch(68% 0.01 270);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(36% 0.01 270), transparent 55%);
}

.dark .badge-success {
  background-color: oklch(30% 0.06 155);
  color: oklch(72% 0.08 155);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(40% 0.07 155), transparent 70%);
}

.dark .badge-warning {
  background-color: oklch(31% 0.07 55);
  color: oklch(74% 0.09 55);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(41% 0.08 55), transparent 70%);
}

.dark .badge-error,
.dark .badge-danger {
  background-color: oklch(29% 0.07 25);
  color: oklch(71% 0.09 25);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(39% 0.08 25), transparent 70%);
}

.dark .badge-info {
  background-color: oklch(29% 0.06 210);
  color: oklch(70% 0.07 210);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(39% 0.06 210), transparent 70%);
}