.button {
    font-family: var(--a-font-mono);
    padding: 16px 24px;
    border-radius: 80px;
    cursor: pointer;
    font-size: var(--a-fs-base);
    transition: background-color 0.3s ease;
    font-weight: var(--a-font-weight-bold);
    border: 2px solid var(--a-color-black);
    line-height: 24px;
}

.button--primary {
    background-color: var(--a-color-black);
    color: var(--a-color-white);
}

.button--primary:hover {
    background-color: var(--a-color-black-800);
}

/* Responsive Buttons */
@media (max-width: 768px) {
    .button {
        padding: 14px 20px;
        font-size: 15px;
        line-height: 22px;
    }
}

@media (max-width: 480px) {
    .button {
        padding: 12px 18px;
        font-size: 14px;
        line-height: 20px;
        border-width: 1.5px;
    }
}

@media (max-width: 375px) {
    .button {
        padding: 10px 16px;
        font-size: 13px;
        line-height: 18px;
    }
}