/* ── Buttons ────────────────────────────────────────────── */

.btn-brand,
.card-brand .btn-primary {
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
        rgb(var(--brand-primary)) 0%, rgb(var(--brand-primary-hover)) 100%);
    border: none;
    color: #fff;
    letter-spacing: .05em;
    transition: box-shadow .4s cubic-bezier(.22, .61, .36, 1);
}
.btn-brand:hover,
.card-brand .btn-primary:hover {
    color: #fff;
    box-shadow:
        0 4px 16px rgb(var(--brand-primary) / .3),
        0 12px 40px rgb(var(--brand-dark) / .2);
}
.btn-brand:disabled,
.card-brand .btn-primary:disabled {
    opacity: .75;
    pointer-events: none;
}

.card-brand .btn-outline-secondary,
.btn-brand-ghost {
    border-color: #ddd6d8;
    color: #6c6068;
    transition: all .2s ease;
}
.card-brand .btn-outline-secondary:hover,
.btn-brand-ghost:hover {
    background: rgb(var(--brand-primary) / .06);
    border-color: rgb(var(--brand-primary) / .3);
    color: rgb(var(--brand-primary));
}
.card-brand .btn-outline-primary {
    border-color: rgb(var(--brand-primary));
    color: rgb(var(--brand-primary));
    transition: all .2s ease;
}
.card-brand .btn-outline-primary:hover {
    background: rgb(var(--brand-primary));
    border-color: rgb(var(--brand-primary));
    color: #fff;
}
.card-brand .btn-outline-danger,
.btn-brand-danger {
    border-color: #e0a0a0;
    color: #c06060;
    transition: all .2s ease;
}
.card-brand .btn-outline-danger:hover,
.btn-brand-danger:hover {
    background: #c06060;
    border-color: #c06060;
    color: #fff;
}

.btn-brand-ghost,
.btn-brand-danger {
    background: transparent;
    border-radius: .5rem;
    padding: .4rem 1rem;
    font-size: .85rem;
}