Wireframes are used to define the framework, the information hierarchy, demonstrate workflow, provide details on what is on the screen, and a description on how a component works (annotation). Depending on the complexity of the application or site, wireframes should be built upon another requirement deliverable; process models. Wireframes can be used to elicit requirements from a client, and eventually confirm requirements with a client. Wireframes are a visual model of the structure of a site or application. They do not define the font that will be used, the padding, the color, the style etc. They are not to scale, and they have no tones or gradients. All of this needs to be communicated with the client so they understand the process and the context of the wireframe deliverable, in conjunction with other requirement deliverables.
A mock-up is typically created in Photoshop and while it is based on the structure, or framework of the confirmed wireframe deliverable, it is a distinct deliverable, with a distinct schedule and approval process. Mock-ups or comps, define the visual style, or tone of the interface. Once accepted, mock-ups translate into a number of additional requirements or work products, such as CSS code, style guides, graphical assets, etc.
Wireframes are never to be mock-ups. Mock-ups could be used as wireframes but this would have implications for any revisions that may be required and impact your budget significantly.
Source: 15 years as Communications Designer, UX Lead, Business Analyst in a corporate environment developing websites and applications. And the beloved BABOK