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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 34px;
    border:none;
    outline:none;
    border-radius:var(--radius-md);
    cursor:pointer;
    font-size:var(--fs-sm);
    font-weight:var(--fw-semibold);
    text-decoration:none;
    transition:all var(--transition);
}

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

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

.btn-primary:hover{
    transform:translateY(-3px);
    background:var(--color-primary-dark);
    box-shadow:var(--shadow-card);
}

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

.btn-outline{
    background:transparent;
    color:var(--color-text);

    border:1px solid var(--color-primary);
}

.btn-outline:hover{
    background:var(--color-primary);
    color:var(--color-text);
}