/* The ground both sites share: page, text and scrollbars. */
html { background: var(--app-background); }
body {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--texture);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scrollbars match web-frontend components/scrollbar.scss. */
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-thumb {
  border-radius: 12px;
  border: 5px solid transparent;
  background: color-mix(in srgb, var(--black) 30%, transparent);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { display: none; width: 0; height: 0; }

/* Colours the browser would otherwise pick itself. Cyan reads on both the
   light pages and the dark bands. */
::selection { background: color-mix(in srgb, var(--palette-cyan-400) 30%, transparent); }
:focus-visible { outline: 2px solid var(--palette-cyan-400); outline-offset: 2px; }
/* As in the app (web-frontend base.scss). */
::placeholder { color: var(--palette-neutral-600); opacity: 1; }