// frontend/components/Badge.tsx
type Tone = "coral" | "blue" | "green" | "violet" | "amber" | "ink";
export function Badge({
  children,
  tone = "coral",
  variant = "pill",
}: {
  children: React.ReactNode;
  tone?: Tone;
  variant?: "pill" | "count";
}) {
  if (variant === "count") return <span className="badge-count">{children}</span>;
  return (
    <span className="badge-pill" data-tone={tone}>
      {children}
    </span>
  );
}