/***********************************************
                     BUTTON
***********************************************/

/* Bottone principale */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        var(--space-sm)
        var(--space-md);

    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-wide);

    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    color: var(--color-white);
    background-color: var(--color-primary);

    border:
        var(--border-width)
        var(--border-style)
        var(--color-primary);

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


/* Hover */

.button:hover {
    color: var(--color-white);
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);

    transform: translateY(-2px);
}


/* Navigazione da tastiera */

.button:focus-visible {
    outline: 2px solid var(--color-primary-hover);
    outline-offset: 3px;
}


/* Click */

.button:active {
    transform: translateY(0);
}