/* Uppercase mono status pill — the app's only badge shape. Tints are a 135°
   wash from the lightest step of a hue to the next one up. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent;
  white-space: nowrap;
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge--neutral {
  background: linear-gradient(135deg, #f7f7f4, #ebebe6);
  color: var(--ink-700);
  border-color: var(--line);
}

.badge--win {
  background: linear-gradient(135deg, #effbf7, #cdf2e5);
  color: var(--mint-800);
  border-color: var(--mint-300);
}

.badge--loss {
  background: linear-gradient(135deg, #fef1ef, #fbd6d2);
  color: var(--coral-700);
  border-color: var(--coral-100);
}

.badge--live {
  background: linear-gradient(135deg, #fdf6e7, #f8e8c4);
  color: var(--amber-700);
  border-color: #f0e0b8;
}

.badge--solid {
  background: linear-gradient(135deg, #2b2e37, #14151a);
  color: #fff;
}

.badge--blue {
  background: linear-gradient(135deg, #eef2ff, #d9e1ff);
  color: #3552d6;
  border-color: var(--side-blue-line);
}

.badge--red {
  background: linear-gradient(135deg, #fdf0ef, #fad7d4);
  color: var(--coral-700);
  border-color: var(--side-red-line);
}