/* Gage. Nokia overhaul: fonts, colour tokens and the LCD pixel grid.

   Everything snaps to one "LCD pixel" (--u). Jersey 10 is drawn on its own pixel grid:
   75 font units per pixel on a 1400-unit em, capitals 10 pixels tall. So a font-size of
   18.6667 x --u makes every glyph pixel exactly one LCD pixel, and line heights are whole
   numbers of LCD pixels. Spacing, borders, icons and photos use whole --u steps too. */

@font-face {
  font-family: "Jersey 10";
  src: url("../fonts/jersey10.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ink scale, navy cast */
  --ink-950: #0b1017; --ink-900: #141b25; --ink-800: #1e2734; --ink-700: #2c3644;
  --ink-600: #444f5e; --ink-500: #66707e; --ink-400: #8e97a3; --ink-300: #b5bcc6;
  --ink-200: #d0d5dc; --ink-100: #e3e7ec; --ink-50: #f1f3f5;
  --accent: #ff461f;

  /* roles */
  --lcd-screen: var(--ink-200);
  --lcd-pixel: var(--ink-900);       /* text on LCD, 11.8:1 */
  --lcd-dim: var(--ink-500);         /* secondary text, 3.4:1 at these sizes */
  --lcd-ghost: var(--ink-300);       /* unlit pixels, decoration only */
  --lcd-inverse-bg: var(--ink-900);  /* selected row */
  --lcd-inverse-text: var(--ink-200);
  --casing-bg: var(--ink-950);
  --casing-surface: var(--ink-800);
  --casing-text: var(--ink-100);
  --casing-muted: var(--ink-400);

  --font-display: "Jersey 10", "Courier New", monospace;
  --font-body: "Jersey 10", "Courier New", monospace;  /* pixel fonts only, everywhere */

  /* ---- the LCD grid ---- */
  --u: 2px;                                   /* one LCD pixel */
  /* text: Jersey 10 at whole "font pixels" (1, 2 or 3 screen px each) so it stays crisp.
     Small text uses the font's native size; titles are 2x and 3x of it. */
  --fp: 18.6667px;                            /* 1 glyph pixel = 1px, capitals 10px tall */
  --t1: var(--fp);                            /* body, rows, labels */
  --t2: calc(var(--fp) * 2);                  /* page titles, price */
  --t3: calc(var(--fp) * 3);                  /* home title */
  --t4: calc(var(--fp) * 4);                  /* boot screen */
  --lh1: 16px;                                /* list line */
  --lh1-body: 20px;                           /* reading line */
  --lh2: 32px;
  --lh3: 42px;
  --lh4: 56px;
  --bezel: calc(var(--u) * 10);               /* dark housing above and below the screen */
  --gutter: calc(var(--u) * 8);
  --photo-k: 1;                               /* photo pixels per LCD pixel */
}
@media (min-width: 760px) {
  :root { --bezel: calc(var(--u) * 16); --gutter: calc(var(--u) * 30); }
}
@media (min-width: 1700px) { :root { --photo-k: 2; } }

/* type classes used by the boot screen and the softkeys */
.display-xl { font: 400 var(--t4)/var(--lh4) var(--font-display); }
.display-l  { font: 400 var(--t2)/var(--lh2) var(--font-display); }
.label-softkey, .label-status { font: 400 var(--t1)/var(--lh1) var(--font-display); text-transform: uppercase; letter-spacing: 1px; }

/* keep pixel art crisp at any size */
.pixel, img[src*="assets/img/"], img[src*="icons/"] { image-rendering: pixelated; }