/* ------------------------------------------------------------------
   base.css - colours, type and the page shell.
   Shared by the viewer (index.html) and the editor (editor.html).
   ------------------------------------------------------------------ */

/* Alegreya: a calligraphic serif, drawn with a broad-nib feel that sits
   well next to inked linework. One file covers every weight from 400-900. */
@font-face {
  font-family: "Alegreya";
  src: url("../vendor/alegreya/alegreya-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../vendor/alegreya/alegreya-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* The Crossroads palette: old paper, and a blazing torch in a mossy,
     rusty dungeon. Change a colour here and it changes everywhere, on the
     map and in the editor. */
  --paper: #f3ecdb;        /* off-white paper: every box and pane */
  --paper-light: #fbf7ec;  /* a shade lighter: text boxes in the editor */
  --paper-deep: #e5dbc3;   /* a shade darker: the selected row, quiet backgrounds */

  --ink: #3b1f2b;          /* dark violet-brown: text and outlines */
  --ink-soft: #6d4a58;     /* the same, faded: secondary text */
  --night: #1c1016;        /* the same, at its darkest: the page behind the map */

  --pine: #1e4b3b;         /* pine green: links, buttons, subtitles */
  --pine-light: #3d7059;   /* lighter pine: focus outlines */

  --torch: #f07f1f;        /* torch orange: the glow around places, highlights */
  --ember: #ffd27a;        /* the bright edge of the flame, right against a place */
  --rust: #a8451f;         /* rust: delete buttons and error messages */

  --serif: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* The map's painted shadows are hard-edged and fall down and to the left.
     Boxes on the page cast the same kind. */
  --cast: -6px 6px 0 rgba(28, 16, 22, 0.55);
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--night);
}

#map {
  position: fixed;
  inset: 0;
  background: var(--night); /* shows around the edges of the map */
  font-family: var(--serif);
}

/* Shown instead of the map if something can't be loaded. */
#load-error {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-content: center;
  padding: 24px;
  font: 18px/1.5 var(--serif);
  color: var(--paper);
  text-align: center;
}