export function StatusTag({ children, tone = "accent" }: { children: React.ReactNode; tone?: "accent" | "down" | "degraded" | "neutral" }) {
  const toneClass = {
    accent: "bg-accent/15 text-accent border-accent/40",
    down: "bg-status-down/15 text-status-down border-status-down/40",
    degraded: "bg-status-degraded/15 text-status-degraded border-status-degraded/40",
    neutral: "bg-surface-raised text-fg-muted border-border",
  }[tone];

  return (
    <span className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] tracking-wide ${toneClass}`}>
      {children}
    </span>
  );
}