@props(['tone' => 'neutral', 'size' => 'sm'])
@php
    $c = [
        'neutral' => 'text-ink-2 border-line bg-line',
        'accent'  => 'text-accent-text border-accent/25 bg-accent/10',
        'cyan'    => 'text-cyan-bright border-cyan/20 bg-cyan/10',
        'warning' => 'text-warning border-warning/25 bg-warning/10',
    ][$tone] ?? 'text-ink-2 border-line bg-line';
    // md = control-row height (matches x-status-pill/x-btn h-8) for badges sitting in a row
    // with pills/buttons; sm stays the compact inline chip for badges next to plain text.
    $s = $size === 'md' ? 'h-8 px-2.5 text-xs' : 'px-2 py-0.5 text-[11px]';
@endphp
<span {{ $attributes->merge(['class' => "inline-flex items-center gap-1 rounded-sm border font-mono $s $c"]) }}>{{ $slot }}</span>