/* What the home page (room.css) and the Books page (shelf.css) share: Newsreader, and the colours. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/newsreader.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/newsreader-italic.woff2") format("woff2");
}

:root {
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", "Times New Roman", serif;
  --ink: #222;
  --text: #333;
  --muted: #6e6e6e; /* 5.1:1 on white */
  --faint: #767676; /* labels only; 4.5:1 on white */
  --rule: #ebebeb;
  --mark: #f4f3ef;
}

/* Going between pages (the room and Books, say), the browser crossfades one into the next where it can, so the
   pages' own animations read as one movement. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}