button {
    background-color: var(--primary-color);
    color: var(--text-light-color);
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

button:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
}

.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform var(--transition-speed);
}

.icon-button:hover {
    transform: scale(1.1);
}

.icon-button i {
    font-size: 1.2rem;
    color: var(--primary-color);
}

.icon-button:hover i {
    color: var(--accent-color);
}

@media (min-width: 320px) {
    button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

@media (min-width: 768px) {
    button {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

@media (min-width: 1440px) {
    button {
        padding: 1rem 2rem;
        font-size: 1.125rem;
    }
}