/* Miratlas design tokens, mirrored from miratlas.com. js/render/palette.js holds the same colours for WebGL. */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg-0: #0b1121;
  --bg-1: #111a2d;
  --bg-2: #182337;
  --bg-3: #1f2c45;
  --ink-1: #eaf0fa;
  --ink-2: #b7c3d9;
  --ink-3: #8290ab;
  --ink-4: #56637d;
  --line-1: #eaf0fa14;
  --line-2: #eaf0fa24;
  --line-3: #eaf0fa3d;
  --sky-300: #86c6ff;
  --sky-400: #5bb8ff;
  --sky-500: #3ea2f2;
  --accent: var(--sky-400);
  --accent-soft: #5bb8ff1f;
  --accent-glow: 0 0 0 1px #5bb8ff59, 0 0 32px #5bb8ff40;
  --land-day: #8290ab;
  --land-night: #1f66a4;
  --ok: #8fd25a;
  --warn: #f7d400;
  --alert: #ff5a60;
  --spectrum: linear-gradient(90deg, #8b2568, #e5222b, #f0862b, #f7d400, #7fc241, #2a6db0);

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --fs-display: clamp(28px, 3.4vw, 44px);
  --fs-body: 15.5px;
  --fs-small: 13.5px;
  --fs-label: 11.5px;
  --ls-display: -0.03em;
  --ls-label: 0.12em;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --radius: 10px;
  --panel: #111a2dcc;
}