/* ------------------------------------------------------------------
   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 {
  /* ---- Colours used by every theme ---- */
  --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;

  /* ---- Theme: Paper (the default) --------------------------------
     Off-white paper, violet-brown ink, pine green.

     Each theme fills in the same set of roles. The rest of the CSS only
     ever asks for a role ("the surface colour"), never a specific colour,
     which is what lets a theme swap everything at once. */
  --page: #1c1016;           /* behind the map, around its edges */
  --surface: #f3ecdb;        /* every box and pane */
  --surface-deep: #e5dbc3;   /* a step away from the surface: the selected row */
  --surface-light: #fbf7ec;  /* text boxes in the editor */
  --text: #3b1f2b;           /* writing */
  --text-soft: #6d4a58;      /* quieter writing */
  --line: #3b1f2b;           /* outlines of boxes */
  --accent: #1e4b3b;         /* links, subtitles, main buttons */
  --accent-soft: #3d7059;    /* focus outlines in the editor */
  --on-accent: #f3ecdb;      /* writing on top of the accent colour */
  --tag: #f3ecdb;            /* the name tag over a hovered place */
  --tag-text: #3b1f2b;

  /* 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);
  --bloom: 0 0 0 transparent;       /* firelight around boxes: none on paper */
  --shade: transparent;             /* darkness laid over the map: none on paper */
}

/* ---- Theme: Pine -------------------------------------------------
   A torch in a mossy dungeon: dark green boxes outlined in firelight,
   and the map itself dimmed except around the pointer. */
[data-theme="pine"] {
  --page: #07120e;
  --surface: #14342a;
  --surface-deep: #1f4a3b;
  --surface-light: #0d241d;
  --text: #f2e9d4;
  --text-soft: #b3b89e;
  --line: #e8801f;
  --accent: #ffbe63;
  --accent-soft: #f07f1f;
  --on-accent: #10261f;
  --tag: #ffca75;
  --tag-text: #1c0f08;
  --cast: -6px 6px 0 rgba(0, 0, 0, 0.6);
  --bloom: 0 0 28px rgba(240, 127, 31, 0.3);
  --shade: rgba(5, 14, 10, 0.66);
}

/* ---- Theme: Plum -------------------------------------------------
   The same idea in the warm violet-brown of the ink. */
[data-theme="plum"] {
  --page: #120a0e;
  --surface: #351b27;
  --surface-deep: #4c2938;
  --surface-light: #26121b;
  --text: #f4ebd9;
  --text-soft: #c9aeb7;
  --line: #e8801f;
  --accent: #ffbe63;
  --accent-soft: #f07f1f;
  --on-accent: #26121a;
  --tag: #ffca75;
  --tag-text: #1c0f08;
  --cast: -6px 6px 0 rgba(0, 0, 0, 0.6);
  --bloom: 0 0 28px rgba(240, 127, 31, 0.3);
  --shade: rgba(16, 7, 11, 0.66);
}

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

#map {
  position: fixed;
  inset: 0;
  background: var(--page); /* 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: #f3ecdb;
  text-align: center;
}