---
interface Props {
    class?: string;
    tone?: 'accent' | 'neutral' | 'signal' | 'warm';
}

const { class: className = '', tone = 'accent' } = Astro.props;

const toneClasses = {
    accent: 'bg-[var(--color-accent)] text-[var(--color-accent-foreground)]',
    neutral: 'bg-white/78 text-[var(--color-ink-800)]',
    signal: 'bg-[var(--surface-trust)] text-[var(--color-signal)]',
    warm: 'bg-[rgba(175,109,67,0.14)] text-[var(--color-warm)]',
};
---

<span
    class:list={[
        'inline-flex w-fit items-center rounded-[var(--radius-pill)] px-3 py-1 text-[0.72rem] font-semibold uppercase tracking-[var(--tracking-eyebrow)]',
        toneClasses[tone],
        className,
    ]}
    data-badge-tone={tone}
>
    <slot />
</span>