/* Faces and the first paint. Linked straight from index.html so the sheet has its ground and its
   type before the module graph loads.

   Technor is the chamfered machine face his own wordmark is cut in (square bowls, cut corners, a Q
   with a straight diagonal tail), Nippo the squared interface face that rhymes with it.
   Both: Fontshare, ITF Free Font Licence, self hosted. */
@font-face {
  font-family: "Technor";
  src: url("/fonts/Technor-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Technor";
  src: url("/fonts/Technor-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Technor";
  src: url("/fonts/Technor-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Technor";
  src: url("/fonts/Technor-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Technor";
  src: url("/fonts/Technor-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Nippo";
  src: url("/fonts/Nippo-Extralight.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Nippo";
  src: url("/fonts/Nippo-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Nippo";
  src: url("/fonts/Nippo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nippo";
  src: url("/fonts/Nippo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Nippo";
  src: url("/fonts/Nippo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Every colour sampled out of his avatar and his header. */
:root {
  --ice-0: #f6fbff; /* the brightest glass */
  --ice-1: #eef6fd; /* the page ground */
  --ice-2: #e2effb;
  --ice-3: #d6e9f8; /* the deepest ice in the gradient */
  --glass: #fbfeff;
  --trace: #c5e4f8; /* his circuit traces */
  --line: #a9cfed; /* a hairline that still reads on glass */
  --line-soft: #cfe4f7;
  --neon: #2f8fd8; /* the cold blue of his neon core */
  --neon-bright: #6abaeb;
  --ink: #0a2b3e; /* the darkest value in his kit */
  --ink-2: #2a4a63;
  --ink-3: #5c7893;
  --ink-dim: #8aa2b8;
}

html {
  background: var(--ice-1);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ice-1);
  color: var(--ink-2);
  font-family: "Nippo", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}