/**
 * ==================================================
 * BUTTONS
 * Francesco Cugini Theme
 * Design System v1.0
 * ==================================================
 */


/*==================================================
BASE BUTTON
==================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    padding:.9rem 2rem;

    border:none;

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

    cursor:pointer;

    font-family:var(--font-body);

    font-size:var(--font-size-base);

    font-weight:var(--font-weight-semibold);

    text-decoration:none;

    white-space:nowrap;

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

}


/*==================================================
PRIMARY
==================================================*/

.btn-primary{

    color:#fff;

    background:var(--color-accent);

}

.btn-primary:hover{

    background:var(--color-accent-dark);

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);

}


/*==================================================
SECONDARY
==================================================*/

.btn-secondary{

    color:var(--color-text);

    background:var(--color-gold);

}

.btn-secondary:hover{

    background:var(--color-gold-light);

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);

}


/*==================================================
OUTLINE
==================================================*/

.btn-outline{

    color:var(--color-accent);

    background:transparent;

    border:2px solid var(--color-accent);

}

.btn-outline:hover{

    color:#fff;

    background:var(--color-accent);

}


/*==================================================
GHOST
==================================================*/

.btn-ghost{

    color:var(--color-text);

    background:transparent;

}

.btn-ghost:hover{

    background:rgba(0,0,0,.05);

}


/*==================================================
LIGHT
==================================================*/

.btn-light{

    color:var(--color-text);

    background:var(--color-surface);

}

.btn-light:hover{

    box-shadow:var(--shadow-md);

}


/*==================================================
SIZES
==================================================*/

.btn-sm{

    padding:.65rem 1.3rem;

    font-size:var(--font-size-sm);

}

.btn-lg{

    padding:1.15rem 2.8rem;

    font-size:var(--font-size-md);

}


/*==================================================
FULL WIDTH
==================================================*/

.btn-block{

    width:100%;

}


/*==================================================
DISABLED
==================================================*/

.btn:disabled,

.btn.disabled{

    opacity:.5;

    cursor:not-allowed;

    pointer-events:none;

}


/*==================================================
FOCUS
==================================================*/

.btn:focus-visible{

    outline:3px solid var(--color-gold);

    outline-offset:4px;

}


/*==================================================
ACTIVE
==================================================*/

.btn:active{

    transform:translateY(0);

}