/* buttons.css */

button {
    background: var(--gradient-secondary);
    color: var(--color-text-light);
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-right: var(--spacing-sm); /* Adding spacing between buttons */
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); /* Adding transition for shadow */
    cursor: pointer;
    font-family: var(--font-family-futuristic); /* Applying futuristic font */
}

button:hover, button:focus {
    background: var(--color-accent);
    transform: scale(1.05);
    box-shadow: var(--shadow-md), 0 8px 16px rgba(0, 0, 0, 0.2); /* Adding shadow on hover */
}

button:active {
    transform: scale(1);
    box-shadow: var(--shadow-sm);
}

button.primary {
    background: var(--gradient-primary);
}

button.primary:hover, button.primary:focus {
    background: var(--color-highlight);
}