@props(['variant' => 'secondary', 'icon' => false, 'href' => null, 'size' => 'sm'])
@php
    // One button style for the whole app — EVERY variant carries a persistent
    // border + background (R10). No borderless variants: low-emphasis actions use
    // `secondary`, destructive ones use `danger-soft` (red-tinted, always — not
    // only on hover). Unknown variants fall back to the bordered `secondary`.
    $variants = [
        'primary' => 'bg-accent text-void hover:bg-accent-bright',
        'accent' => 'border border-accent/25 bg-accent/10 text-accent-text hover:bg-accent/15',
        'secondary' => 'border border-line bg-inset text-ink-2 hover:bg-raised hover:text-ink',
        'danger' => 'bg-offline text-void hover:bg-offline/90',
        'danger-soft' => 'border border-offline/25 bg-offline/10 text-offline hover:bg-offline/15',
    ];
    // sm = compact toolbar/row buttons; lg = full-height primary CTA (≥44px touch target, R7).
    $sizes = [
        'sm' => ($icon ? 'h-8 w-8' : 'h-8 px-3').' text-xs',
        'lg' => ($icon ? 'h-11 w-11' : 'h-11 px-4').' text-sm',
    ];
    $classes = 'inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors '
        .'disabled:opacity-50 disabled:pointer-events-none '
        .($sizes[$size] ?? $sizes['sm']).' '.($variants[$variant] ?? $variants['secondary']);
@endphp
@if ($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>{{ $slot }}</a>
@else
    <button {{ $attributes->merge(['type' => 'button', 'class' => $classes]) }}>{{ $slot }}</button>
@endif