/* Fonts and design tokens. Michroma and IBM Plex are under the SIL Open Font
   License; the licence texts sit next to the font files. */

@font-face {
  font-family: "Michroma";
  src: url("../fonts/michroma-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour: true black and one family of blues. */
  --void: #000;
  --panel: #050b1a;
  --line: #12244a;
  --line-strong: #1f3f85;
  --signal: #2d7bff;
  --arc: #7fd4ff;
  --text: #dce8ff;
  --muted: #8296c2;

  /* Type */
  --font-display: "Michroma", "Bahnschrift", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --text-small: 0.8125rem;
  --text-base: 1.0625rem;
  --text-lead: 1.25rem;
  --text-title: clamp(1.125rem, 0.9rem + 1.1vw, 1.75rem);
  --text-name: clamp(2.25rem, 0.9rem + 6.6vw, 6.25rem);
  --measure: 62ch;

  /* The schematic: a vertical bus on the left, every component tapped off it. */
  --grid: 28px; /* also the cell size in js/traces.js */
  --bus-x: clamp(1.25rem, 5vw, 5.5rem);
  --tap: clamp(1.5rem, 3.5vw, 3.5rem);
  --content-x: calc(var(--bus-x) + var(--tap));
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --block-space: clamp(4.5rem, 9vw, 8rem);
  --cut: 16px;
}