/* Badge: a model's status as a pill; each model maps its statuses to a tone. */
@layer components {
  .badge {
    --badge-color: var(--color-subtle);
    --badge-background: var(--color-bg);

    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    padding: 0.25rem var(--inline-space-double);
    font-size: var(--text-x-small);
    font-weight: 600;
    color: var(--color-text); /* ink on every tint; the dot carries the colour */
    white-space: nowrap;
    background: var(--badge-background);
    border-radius: var(--radius-pill);
  }

  .badge__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--badge-color);
    border-radius: var(--radius-pill);
  }

  .badge--positive { --badge-color: var(--color-positive); --badge-background: var(--color-positive-tint); }

  .badge--warning { --badge-color: var(--color-warning); --badge-background: var(--color-warning-tint); }
  .badge--negative { --badge-color: var(--color-negative); --badge-background: var(--color-negative-tint); }
  .badge--neutral { --badge-color: var(--color-link); --badge-background: var(--color-link-tint); } /* Figma: Borrador in lavender */
}