.btn {
    display: inline-block;
    padding: .6rem .9rem;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;

    border: 1px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); /* ✅ fake elevation */
    transition:
        background .22s ease,
        box-shadow .18s ease,
        transform .12s ease;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-cards);
}

.btn-primary:hover,
.btn-primary:focus {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.btn-primary:active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transform: translateY(1px);
}

.btn-secondary {
    background: transparent;
    border: 2px solid rgba(15, 23, 42, 0.12);
    color: var(--color-text)
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: #000;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    outline: none
}

/* small helpers */
.muted {
    color: rgba(15, 23, 42, 0.6)
}