/* Status badges: small pills. Colour says the state; the words say it too. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .badge {
    display: inline-flex; align-items: center; gap: .35em;
    padding: .1rem .6rem; border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
    background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink-soft);
  }
  .badge::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; opacity: .8; }
  .badge--approved, .badge--ready { color: var(--positive); }
  .badge--awaiting-approval, .badge--waiting { color: var(--warning); }
  .badge--changes-requested { color: var(--negative); }
  .badge--in-production { color: var(--info); }
  .badge--superseded, .badge--completed, .badge--not-started { color: var(--muted); }
}