/* The typographies of the interface.
 *
 * Source: TouchGFX/assets/texts/texts.xml (<Typography>) and
 * TouchGFX/generated/fonts/src/Table_Geist_*.cpp (line height, baseline).
 * Five are drawn on screen; the other typographies in texts.xml (verdana,
 * tahoma, Geist Bold 48) are Designer leftovers nothing uses.
 *
 * Two things describe a typography here:
 *
 *   --acu-font           which of the firmware's glyph tables <acu-text>
 *                        draws from (core/text.js)
 *   font-family/-size/   the same typography for a browser that renders the
 *   -weight/line-height  TTF itself - what a later surface (the PWA) uses,
 *                        and what a redesign changes first
 *
 * The TTF files are the firmware's own (TouchGFX/assets/fonts, Geist, SIL
 * Open Font License 1.1 - see src/fonts/OFL.txt).
 */

@font-face {
  font-family: "Geist";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/Geist-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Geist";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/Geist-SemiBold.ttf") format("truetype");
}

:root {
  --font-family: "Geist", sans-serif;

  /* size / line height (GeneratedFont height) / baseline from the line's top */
  --type-14-size: 14px;  --type-14-line: 16px;  --type-14-baseline: 14px;
  --type-16-size: 16px;  --type-16-line: 18px;  --type-16-baseline: 16px;
  --type-20-size: 20px;  --type-20-line: 23px;  --type-20-baseline: 20px;
  --type-24-size: 24px;  --type-24-line: 28px;  --type-24-baseline: 24px;
  --type-34-size: 34px;  --type-34-line: 39px;  --type-34-baseline: 34px;
}

/* GeistSans_Normal_14: a tile's caption, the note on a motor tile */
.type-14 {
  --acu-font: geist-regular-14;
  font: 400 var(--type-14-size)/var(--type-14-line) var(--font-family);
}

/* GeistSans_Normal_16: labels, headings, captions (T_LIVELABEL, T_HEADERSMALL) */
.type-16 {
  --acu-font: geist-regular-16;
  font: 400 var(--type-16-size)/var(--type-16-line) var(--font-family);
}

/* GeistSans_Semibold_20: what is written on a button (T_HEADERBOLD, T_INFOVALUERIGHT) */
.type-20 {
  --acu-font: geist-semibold-20;
  font: 600 var(--type-20-size)/var(--type-20-line) var(--font-family);
}

/* GeistSans_Semibold_24: a value, a page's headline (T_LIVEVALUE, T_HEADLINEWILDCARD) */
.type-24 {
  --acu-font: geist-semibold-24;
  font: 600 var(--type-24-size)/var(--type-24-line) var(--font-family);
}

/* GeistSans_Semibold_34: the large value of a gauge (T_BIGVALUECENTERED) */
.type-34 {
  --acu-font: geist-semibold-34;
  font: 600 var(--type-34-size)/var(--type-34-line) var(--font-family);
}

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.ink     { color: var(--color-ink); }
.muted   { color: var(--color-muted); }
.on-accent { color: var(--color-on-accent); }