.btn {
    border-radius: var(--pp-radius-pill);
    font-weight: 700;
    letter-spacing: 0;
    min-height: 2.625rem;
    padding: .625rem 1rem;
    transition: background-color var(--pp-transition-base), border-color var(--pp-transition-base), box-shadow var(--pp-transition-base), color var(--pp-transition-base), transform var(--pp-transition-fast);
}

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

.btn:focus-visible {
    box-shadow: 0 0 0 var(--pp-focus-ring-width) var(--pp-color-focus-ring);
    outline: var(--pp-focus-ring-width) solid var(--pp-color-focus-ring);
    outline-offset: var(--pp-focus-ring-offset);
}

.btn-primary {
    --bs-btn-bg: var(--pp-color-brand-700);
    --bs-btn-border-color: var(--pp-color-brand-700);
    --bs-btn-hover-bg: var(--pp-color-brand-800);
    --bs-btn-hover-border-color: var(--pp-color-brand-800);
    --bs-btn-active-bg: var(--pp-color-brand-900);
    --bs-btn-active-border-color: var(--pp-color-brand-900);
    --bs-btn-color: var(--pp-color-on-brand);
    --bs-btn-hover-color: var(--pp-color-on-brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--pp-color-brand-700);
    --bs-btn-border-color: var(--pp-color-border-strong);
    --bs-btn-hover-bg: var(--pp-color-brand-700);
    --bs-btn-hover-border-color: var(--pp-color-brand-700);
    --bs-btn-hover-color: var(--pp-color-on-brand);
}

.btn-light {
    --bs-btn-bg: var(--pp-color-surface);
    --bs-btn-border-color: var(--pp-color-border);
    --bs-btn-hover-bg: var(--pp-color-brand-50);
    --bs-btn-hover-border-color: var(--pp-color-border-strong);
    color: var(--pp-color-ink);
}

.btn-icon {
    align-items: center;
    display: inline-flex;
    gap: var(--pp-space-2);
    justify-content: center;
}