.button{
    cursor:pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration:none;
}
.button:hover{
    text-decoration:none;
}
/* button disabilitato */
.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.primary-button{
    background-color: var(--color-primary-500);
    color: var(--color-third-100);
    transition: 0.2s;
}
.primary-button:hover{
    background-color: var(--color-primary-700);
    transition:0.2s;
}
.secondary-button{
    background-color: var(--color-secondary-800);
    color: var(--color-third-500);
    transition: 0.2s;
}
.secondary-button:hover{
    background-color: var(--color-secondary-900);
    color: var(--color-third-600);
    transition: 0.2s;
}
.third-button{
    border:1px solid var(--color-primary-500);
    color: var(--color-third-100);
}
/* Linea sotto il link (partenza "chiusa" → scaleX 0, aperta con GSAP) */
.link-underline {
    position: absolute;
    left: 0;
    bottom: -0.15rem; /* regola se la vuoi più vicina/lontana dal testo */
    width: 100%;
    height: 2px;
    background-color: #ffffff; /* oppure currentColor se vuoi il colore del testo */
    transform-origin: left center;
    transform: scaleX(0);
    pointer-events: none;
}

.fifty-button{
    background-color: var(--color-third-200);
    color: var(--color-secondary-950);
    transition: 0.2s;
}
.fifty-button:hover{
    background-color: var(--color-third-300);
    transition: 0.2s;
}
.six-button{
    background-color: var(--color-secondary-950);
    color: var(--color-third-100);
    transition: 0.2s;
}
.six-button:hover{
    background-color: var(--color-secondary-800);
    transition: 0.2s;
}
.seven-button{
    background-color: unset;
    color: var(--color-secondary-950);
    transition: 0.2s;
}
.seven-button:hover{
    background-color: var(--color-third-200);
    color: var(--color-secondary-950);
    transition: 0.2s;
}
/* ===================================
   DIMENSIONI
   =================================== */
.button-xsm {
    padding: var(--space-1) var(--space-2);
}
.button-sm {
    padding: var(--space-2) var(--space-4);
}
.button-md {
    padding: var(--space-3) var(--space-6);
}
.button-lg {
    padding: var(--space-4) var(--space-8);
}
.button-xl {
    padding: var(--space-5) var(--space-10);
}
@media (max-width: 767px) {
    .button{
        padding: var(--space-2) var(--space-4);
    }
    .primary-button{
        padding: var(--space-2) var(--space-4);
    }
    .secondary-button{
        padding: var(--space-2) var(--space-4);
    }
    .third-button{
        padding: var(--space-1) var(--space-1);
        padding-right: var(--space-2);
    }
    .fifty-button{
        padding: var(--space-2) var(--space-4);
    }
}