/**
 * Button styles
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer-2);
    padding: var(--spacer-3) var(--spacer-4);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.btn:active {
    transform: scale(0.98);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Primary button */
.btn-primary {
    background: var(--accent-color);
    color: var(--text-inverse);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
}

/* Secondary button */
.btn-secondary {
    background: var(--bg-color);
    color: var(--text-color);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--border-color);
}

/* Ghost button */
.btn-ghost {
    background: transparent;
    color: var(--text-color);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--bg-subtle);
}

/* Link style button */
.btn-link {
    background: none;
    padding: 0;
    color: var(--accent-color);
}

.btn-link:hover:not(:disabled) {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Small button */
.btn-sm {
    padding: var(--spacer-2) var(--spacer-3);
    font-size: 0.875rem;
}

@media (max-width: 640px) {
    .btn {
        padding: var(--spacer-2) var(--spacer-2);
    }
}