.btn-primary {
    --bs-btn-bg: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: var(--color-brand-hover);
    --bs-btn-hover-border-color: var(--color-brand-hover);
    --bs-btn-active-bg: var(--color-brand-hover);
    --bs-btn-active-border-color: var(--color-brand-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-disabled-bg: var(--color-brand);
    --bs-btn-disabled-border-color: var(--color-brand);
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-weight: 600;
    border-radius: var(--radius-pill);
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover,
    .btn-primary:focus-visible {
        transform: none;
    }
}

.btn-outline-secondary {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--color-ink);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-bg: var(--color-surface);
    --bs-btn-hover-border-color: var(--color-brand);
    --bs-btn-hover-color: var(--color-brand);
    --bs-btn-active-bg: var(--color-brand-soft);
    --bs-btn-active-border-color: var(--color-brand);
    --bs-btn-active-color: var(--color-brand-hover);
    border-radius: var(--radius-pill);
}

/* Misma lógica de padding/line-height que .btn de Bootstrap */
.btn-tsx-secondary {
    --btn-tsx-padding-x: 1.5rem;
    --btn-tsx-padding-y: 0.75rem;
    display: inline-block;
    padding: var(--btn-tsx-padding-y) var(--btn-tsx-padding-x);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        color 160ms ease,
        background-color 160ms ease;
}

.btn-tsx-secondary:hover,
.btn-tsx-secondary:focus-visible {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background: var(--color-surface);
}

.btn-tsx-secondary:disabled,
.btn-tsx-secondary.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.section-dark .btn-tsx-secondary {
    border-color: var(--color-dark-border);
    background: transparent;
    color: var(--color-dark-text);
}

.section-dark .btn-tsx-secondary:hover,
.section-dark .btn-tsx-secondary:focus-visible {
    border-color: var(--color-brand);
    color: #fff;
}