/* serv's design tokens — the application's stylesheet, and not a reference
   document to copy from (#30, ADR-0008). Every surface consumes this very
   file at runtime: <link> from the two shells, CSS(filename=…) in
   WeasyPrint's stylesheets= for the documents. There is no second place a
   value could be wrong, because there is no second place a value exists.

   A token is colour and type family and nothing else. Ground, spacing and
   type sizes stay local to each shell on purpose (#30): the phone and the
   desktop are different objects, and a shared ramp would be a claim of
   kinship that is not true. The values were drawn against the three surfaces
   rather than argued (#36). */

:root {
  /* The type family, and nothing else about type. */
  --fjf-font: "Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  /* Paper's fine print, and paper's alone: no screen is set in it (#30), so
     declaring it here costs a browser nothing — an unused face is not fetched. */
  --fjf-font-narrow: "Archivo Narrow", "Archivo", -apple-system, sans-serif;

  /* The mark's teal, at the three grounds serv renders on: one hue ray, and
     ADR-0008 says why a ray. */
  --fjf-teal: #129180;          /* unadapted: fills, the mark, 3:1 surfaces */
  --fjf-teal-ink: #107f70;      /* AA text and rules on a light ground */
  --fjf-teal-light: #14a390;    /* AA text on the operator's dark header */

  /* One ink, the three it replaced having measured under the just-noticeable
     difference apart (ADR-0008). */
  --serv-ink: #101418;

  /* The two attention levels that take a hue, each at a base and an outdoor
     strength. Why a wash is not a tint, and why there is no third: ADR-0008. */
  --serv-high: #b3261e;         --serv-high-strong: #a3221a;
  --serv-high-tint: #fdecea;    --serv-high-bar: #c8342a;
  --serv-high-wash: #fdf6f5;
  --serv-medium: #a4600a;       --serv-medium-strong: #8a5008;
  --serv-medium-tint: #fdf3e0;  --serv-medium-bar: #c58318;
  --serv-medium-wash: #fdfaf3;

  /* A tier that is up to date carries no hue, no tint and no bar: the shells
     paint nothing at all for it, which is a rule and not a value (#36). */
  --serv-ok: #5a6472;           --serv-ok-strong: #39434f;

  --serv-link: var(--fjf-teal-ink);
  --serv-select: var(--fjf-teal-ink);
  --serv-select-tint: #e6f4f1;
}

/* The faces both images carry, by one path that resolves in both media, and
   swap rather than block: a signal must not hold text hostage (ADR-0003). */
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap;
             src: url(../../deploy/fonts/Archivo-Regular.ttf) format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap;
             src: url(../../deploy/fonts/Archivo-Medium.ttf) format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap;
             src: url(../../deploy/fonts/Archivo-SemiBold.ttf) format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap;
             src: url(../../deploy/fonts/Archivo-Bold.ttf) format("truetype"); }
@font-face { font-family: "Archivo Narrow"; font-weight: 400; font-display: swap;
             src: url(../../deploy/fonts/ArchivoNarrow-Regular.ttf) format("truetype"); }
@font-face { font-family: "Archivo Narrow"; font-weight: 500; font-display: swap;
             src: url(../../deploy/fonts/ArchivoNarrow-Medium.ttf) format("truetype"); }
@font-face { font-family: "Archivo Narrow"; font-weight: 600; font-display: swap;
             src: url(../../deploy/fonts/ArchivoNarrow-SemiBold.ttf) format("truetype"); }