/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-primary,
.btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding: 0 30px;

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

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

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

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

.btn-primary {

    background: var(--gradient-primary);

    color: var(--color-text-inverted);

    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-lg);
}

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

.btn-secondary {

    background: var(--color-background-elevated);

    color: var(--color-text-primary);

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

.btn-secondary:hover {

    color: var(--color-primary);

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

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

    transform: translateY(-2px);
}