/**
 * The four type roles, named and ordered once.
 *
 * ── One list, two sections ──
 *
 * Fonts picks the FACE for a role and Font Sizes picks its SIZE. They are the same four things, so a
 * reader moving between the two sections is entitled to find them in the same order under the same
 * names — and that only holds if there is one list.
 *
 * ── The names are the site's, not the stylesheet's ──
 *
 * `font_display` is the largest statements and `font_title` is a section heading, which is the reverse
 * of what those two words suggest. So the labels say Titles and Headings, in the order somebody reads
 * a page: the menu above it, the title, the headings under that, the words.
 */
export const ROLES = [
  { size: 'sub' as const, font: 'font_sub' as const, label: 'Menu' },
  { size: 'display' as const, font: 'font_display' as const, label: 'Titles' },
  { size: 'title' as const, font: 'font_title' as const, label: 'Headings' },
  { size: 'body' as const, font: 'font_body' as const, label: 'Body' },
];