.smu-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: var(--smu-space-2);
    padding: 0.8rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--smu-radius-button);
    font-family: var(--smu-font-body);
    font-size: var(--smu-text-sm);
    font-weight: var(--smu-font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        color var(--smu-duration-fast) var(--smu-ease-standard),
        background-color var(--smu-duration-fast) var(--smu-ease-standard),
        border-color var(--smu-duration-fast) var(--smu-ease-standard),
        transform var(--smu-duration-fast) var(--smu-ease-standard);
}

.smu-button:hover {
    transform: translateY(-1px);
}

.smu-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--smu-color-accent) 32%, transparent);
    outline-offset: 3px;
}

.smu-button--primary {
    background: var(--smu-color-accent);
    color: var(--smu-color-text-inverse);
}

.smu-button--primary:hover {
    background: var(--smu-color-accent-hover);
}

.smu-button--secondary {
    border-color: var(--smu-color-border);
    background: transparent;
    color: var(--smu-color-text);
}