import React from "react";
export function Badge({ tone = "neutral", children, style }) {
  const tones = {
    neutral: { color: "var(--fg-soft)", border: "1px solid var(--border-strong)", background: "var(--surface-muted)" },
    gold: { color: "var(--rr-gold)", border: "1px solid rgba(232,178,74,0.45)", background: "var(--rr-gold-soft)" },
    emerald: { color: "var(--rr-jade)", border: "1px solid rgba(21,146,113,0.5)", background: "var(--rr-emerald-soft)" },
    garnet: { color: "var(--rr-garnet-bright)", border: "1px solid rgba(168,58,63,0.55)", background: "rgba(168,58,63,0.16)" }
  };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: "6px", padding: "4px 12px", borderRadius: "9999px",
      fontFamily: "var(--font-sans)", fontSize: "10px", fontWeight: 900, letterSpacing: "0.16em", textTransform: "uppercase",
      ...tones[tone], ...style
    }}>{children}</span>
  );
}