/* SMACSS Base: element defaults, reset and design tokens. Tokens are the single
   source of colour and spacing; modules reference them, never raw values. */
@font-face {
  font-family: "Arimo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/arimo-latin-400-normal.4b3fd0eff760.woff2") format("woff2");
}

@font-face {
  font-family: "Arimo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/arimo-latin-500-normal.8f80240e04b1.woff2") format("woff2");
}

@font-face {
  font-family: "Arimo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/arimo-latin-600-normal.10c8a3c442ce.woff2") format("woff2");
}

:root {
  --color-background: #10121a;
  --color-surface: rgba(20, 24, 33, 0.82);
  --color-surface-translucent: rgba(20, 24, 33, 0.58);
  --color-text: #c9ccd6;
  --color-control: #2b3140;
  --color-control-hover: #3a4255;
  --color-control-text: #eef0f5;
  --color-border: rgba(201, 204, 214, 0.9);
  --color-warning: #e8a33d;
  --space-s: 6px;
  --space-m: 12px;
  --space-l: 24px;
  --radius-m: 10px;
  --control-height: 40px;
  --topbar-height: var(--control-height);
  --dock-tile: 44px;
  /* How far the dock stands off the edge of the picture, and how far it reaches
     into it -- the second is what anything standing clear of the dock reads. */
  --dock-inset: var(--space-m);
  --dock-outset: calc(
    var(--dock-inset) +
    var(--dock-tile) +
    2 *
    var(--space-s) +
    var(--space-m)
  );
  --transition-panel: 0.25s ease;
  --font-ui: "Arimo", "Helvetica Neue", system-ui, sans-serif;
}

@media (max-width: 640px) {
  :root {
    --control-height: 32px;
    /* The dock lies along the foot of the picture here, over the map credit in
       the corner, so it stands further off the edge. */
    --dock-inset: calc(var(--space-m) + var(--space-l));
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--color-background);
  color: var(--color-text);
  font: 14px var(--font-ui);
  overflow: hidden;
}