refactor: Define semantic font family LESS vars

[lokesh]

https://github.com/internetarchive/openlibrary/issues/11555

Creates a set of semantic font family variables. Their names communicate where they should be used. This provides a single point of control for updating font families across the app.

A separate PR will update the codebase to utilize the new variables.

@font-family-body: @font-family-sans; // body text, paragraphs, lists
@font-family-code: @font-family-mono; // code, pre, inline code
@font-family-title: @font-family-serif; // large text in banners and hero sections, book titles
@font-family-subtitle: @font-family-sans; // small text in banners and hero sections, book subtitles
@font-family-heading: @font-family-sans; // headings in body text
@font-family-subheading: @font-family-sans; // subheadings in body text
@font-family-button:  @font-family-sans; // buttons

Technical

These new variables continue to use LESS, but in the future we can convert them in one fell swoop to CSS custom properties.

Screenshot

These should be no visual change.

Production

Local dev environment with PR applied

Stakeholders

@cdrini @mekarpeles @jimchamp

@benbdeitch @RayBB @jdlrobson

[mekarpeles]

This seems like a great change to me.

[RayBB]

+1 it looks like the right direction but I'm not the CSS guru