/* Shared by the live app, loading/recovery screens and downloaded guide.
   Cream and ink surfaces follow the supplied Citylit reference in every runtime state. */
:root {
  --night-bg: #0e0f13;
  --day-bg: #f4efe6;
  --night-ink: #f3eee4;
  --day-ink: #1b1a1f;
  --night-muted: #aba69b;
  --day-muted: #6b665e;
  --night-accent: #b74720;
  --day-accent: #ba4029;
  --night-accent-ink: #ffb089;
  --day-accent-ink: #b43922;
  --night-line: #34353b;
  --day-line: #d9d2c8;
  --night-surface: #191a21;
  --day-surface: #fcfaf6;
  --night-surface-glass: #191a21f5;
  --day-surface-glass: #fcfaf6f5;
  color-scheme: dark;
  --bg: var(--night-bg);
  --ink: var(--night-ink);
  --muted: var(--night-muted);
  --accent: var(--night-accent);
  --accent-ink: var(--night-accent-ink);
  --line: var(--night-line);
  --surface: var(--night-surface);
  --surface-glass: var(--night-surface-glass);
}
/* An OS-aware first paint also works when JavaScript or storage is unavailable. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="night"]) {
    color-scheme: light;
    --bg: var(--day-bg);
    --ink: var(--day-ink);
    --muted: var(--day-muted);
    --accent: var(--day-accent);
    --accent-ink: var(--day-accent-ink);
    --line: var(--day-line);
    --surface: var(--day-surface);
    --surface-glass: var(--day-surface-glass);
  }
}
:root[data-theme="day"] {
  color-scheme: light;
  --bg: var(--day-bg);
  --ink: var(--day-ink);
  --muted: var(--day-muted);
  --accent: var(--day-accent);
  --accent-ink: var(--day-accent-ink);
  --line: var(--day-line);
  --surface: var(--day-surface);
  --surface-glass: var(--day-surface-glass);
}
html,
body {
  background-color: var(--bg);
  color: var(--ink);
}
html {
  min-height: 100%;
  min-height: 100dvh;
  background-color: var(--bg);
  accent-color: var(--accent);
}
/* The same colour sits behind overscroll, collapsing toolbars and the first frame. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
  pointer-events: none;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
}
::selection {
  background: var(--accent);
  color: #fff;
}