.btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--st-radius-sm);
    padding: 0 16px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .24);
    outline-offset: 2px;
}

.btn--primary {
    background: var(--st-primary);
    color: #fff;
}

.btn--primary:hover {
    background: var(--st-primary-dark);
}

.btn--secondary {
    border-color: var(--st-border);
    background: var(--st-surface);
    color: var(--st-text);
}

.btn--secondary:hover {
    border-color: var(--st-border-strong);
    background: var(--st-surface-muted);
}

.btn--ghost {
    background: transparent;
    color: var(--st-primary);
}

.btn--ghost:hover {
    background: var(--st-primary-soft);
}

.btn--block {
    width: 100%;
}