/* =========================================
   BOUTONS — .btn + variantes --primary, --secondary, --large
   ========================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--button-padding);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-button);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover {
    transform: translateY(var(--lift));
}

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

.btn--primary:hover {
    background-color: var(--color-action-hover);
    color: var(--color-on-action);
}

.btn--secondary {
    background-color: transparent;
    border-color: var(--color-action);
    color: var(--color-action);
}

.btn--secondary:hover {
    background-color: var(--color-action);
    color: var(--color-on-action);
}

.btn--large {
    padding: var(--button-padding-large);
    font-size: var(--text-lg);
}