/* Chip: a small label in a pill — a seat, an applied code, a status.
   data-tone  accent | success | warning | danger (default: a quiet surface) */
.chip {
  align-items: center;
  background: var(--chip-bg, var(--color-surface-2));
  border-radius: var(--radius-pill);
  color: var(--chip-fg, var(--color-text));
  display: inline-flex;
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  gap: var(--space-3xs);
  line-height: var(--leading-snug);
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  padding: var(--space-3xs) var(--space-xs);

  .icon {
    --icon-color: var(--chip-icon, var(--color-muted));
    --icon-size: 1em;
  }
}

.chip[data-tone="accent"] {
  --chip-bg: var(--color-accent-fill);
  --chip-fg: var(--color-on-accent);
  --chip-icon: currentColor;
}

.chip[data-tone="success"] {
  --chip-bg: oklch(from var(--color-green) l c h / 0.14);
  --chip-icon: var(--color-green);
}

.chip[data-tone="warning"] {
  --chip-bg: oklch(from var(--color-amber) l c h / 0.16);
  --chip-icon: var(--color-amber);
}

.chip[data-tone="danger"] {
  --chip-bg: oklch(from var(--color-red) l c h / 0.14);
  --chip-fg: var(--color-red);
  --chip-icon: var(--color-red);
}