.slf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--slf-space-2);
    min-height: 44px;
    padding: 0 var(--slf-space-5);
    border: 1px solid transparent;
    border-radius: var(--slf-radius-medium);
    font: inherit;
    font-weight: var(--slf-font-weight-bold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--slf-transition-fast), border-color var(--slf-transition-fast), color var(--slf-transition-fast), transform var(--slf-transition-fast), box-shadow var(--slf-transition-fast);
}

.slf-button--primary { background: var(--slf-color-primary); color: var(--slf-color-text-inverse); }
.slf-button--primary:hover { background: var(--slf-color-primary-hover); color: var(--slf-color-text-inverse); }
.slf-button--secondary { background: var(--slf-color-secondary); color: var(--slf-color-text-inverse); }
.slf-button--secondary:hover { background: var(--slf-color-secondary-hover); color: var(--slf-color-text-inverse); }
.slf-button--outline { background: transparent; border-color: var(--slf-color-primary); color: var(--slf-color-primary-hover); }
.slf-button--outline:hover { background: var(--slf-color-primary-soft); }
.slf-button--ghost { background: transparent; color: var(--slf-color-heading); }
.slf-button--ghost:hover { background: var(--slf-color-surface-subtle); }
.slf-button--small { min-height: 36px; padding-inline: var(--slf-space-4); font-size: var(--slf-font-size-200); }
.slf-button--medium { font-size: var(--slf-font-size-300); }
.slf-button--large { min-height: 52px; padding-inline: var(--slf-space-6); font-size: var(--slf-font-size-400); }
.slf-button:hover { text-decoration: none; transform: translateY(-1px); }
.slf-button:active { transform: translateY(0); }
.slf-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--slf-color-focus) 42%, transparent); outline-offset: 3px; }
.slf-button.is-disabled,
.slf-button:disabled,
.slf-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .slf-button { transition: none; }
    .slf-button:hover { transform: none; }
}