@props([
    'variant' => 'primary',
    'size' => 'md',
    'type' => 'button',
    'loading' => false,
])
@php
    $base = 'inline-flex items-center justify-center gap-2 rounded font-semibold transition select-none disabled:opacity-50 disabled:pointer-events-none';

    $sizes = [
        'sm' => 'px-3 py-1.5 text-sm',
        'md' => 'px-4 py-2.5 text-sm',
    ];

    // Accent buttons use the AA-safe darker fill (#c2560a) so white text passes
    // WCAG AA; #f97316 alone is only ~2.8:1 (design handoff §6.1).
    $variants = [
        'primary'   => 'bg-accent-active text-on-accent hover:bg-accent-press',
        'secondary' => 'border border-line-strong bg-surface text-body hover:bg-surface-hover',
        'ghost'     => 'text-body hover:bg-surface-hover',
        'danger'    => 'bg-danger text-on-accent hover:opacity-90',
    ];

    $classes = $base.' '.($sizes[$size] ?? $sizes['md']).' '.($variants[$variant] ?? $variants['primary']);
@endphp
<button
    type="{{ $type }}"
    {{ $attributes->merge(['class' => $classes]) }}
    @disabled($loading)
    @if ($loading) aria-busy="true" @endif
>
    @if ($loading)
        <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.4 0 0 5.4 0 12h4z"></path>
        </svg>
    @endif
    {{ $slot }}
</button>