/* web/styles/palette.css */
/* The two themes the application can be read in: light and dark.
 *
 * A theme is one whole set of surfaces: the shell and the page being read are separate documents
 * with separate stylesheets, and this is the one place both take their colours from, so a theme
 * is stated once and holds everywhere. The theme names are `http/views/themes.rs`'s list.
 *
 * Every theme states the same colour roles:
 *   --background  the surface a page is read on
 *   --text        the text on it
 *   --muted       text that is present but not being read
 *   --line        borders and rules
 *   --accent      links, and the surface of a button whose text is --background
 *   --sidebar     the surface beside the page
 *   --raised      a row or control reached by the pointer
 *   --held        one being held open or shown as chosen
 *   --pressed     one being pressed
 *   --focus       the ring around whatever the keyboard is on
 *   --success     completed local downloads
 *   --shadow      what a surface above another one casts
 *
 * Roles drawn from those for every theme (below the themes):
 *   --control, --control-text, --control-line   a toolbar control's surface, text and border
 *
 * Black on white until a reader chooses otherwise. */
:root,
:root[data-theme='light'] {
  color-scheme: light;
  --success: #16803c;
  --background: #ffffff;
  --text: #000000;
  --muted: #595959;
  --line: #d6d6d6;
  --accent: #000000;
  --sidebar: #f5f5f5;
  --raised: #ececec;
  --held: #e0e0e0;
  --pressed: #d2d2d2;
  --focus: #000000;
  --shadow: rgb(0 0 0 / 22%);
}

/* The same, inverted — but a shade off the extremes at both ends: pure black leaves no room
   under it for a surface to sit on, and a page of pure white on it glares. The range between
   them is what a field of code or a raised row is drawn from. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --success: #67d88b;
  --background: #131313;
  --text: #f2f2f2;
  --muted: #a3a3a3;
  --line: #363636;
  --accent: #f2f2f2;
  --sidebar: #1b1b1b;
  --raised: #262626;
  --held: #303030;
  --pressed: #3c3c3c;
  --focus: #f2f2f2;
  --shadow: rgb(0 0 0 / 70%);
}

/* The toolbar's controls, in every theme: drawn from the theme's own colours toward the
   toolbar's surface (--sidebar), so they sit in the bar rather than on it. The commit control
   keeps the accent, softened the same way, and stands out more than the others. */
:root {
  --control: color-mix(in srgb, var(--background) 55%, var(--sidebar));
  --control-text: color-mix(in srgb, var(--text) 82%, var(--sidebar));
  --control-line: color-mix(in srgb, var(--line) 70%, var(--sidebar));
}

/* What is wrong, in every theme: a red the theme's own text colour is mixed into, so it reads
   as a warning against a light background and against a dark one alike. */
:root {
  --alert: color-mix(in srgb, #e04b4b 58%, var(--text));
  --comment-marker-size: 25px;
  /* How far the arrows to discussions beyond the view stand in from the page's top and bottom
     edges. The shell draws them; the page keeps a jumped-to passage's number clear of them. */
  --beyond-inset: 6px;
  /* How far the control that goes to a discussion by its number, and the field it opens, stand
     from the top arrow and from each other: the arrows' own inset. */
  --beyond-gap: var(--beyond-inset);
}

/* Comparison colors retain readable text in every theme. */
:root, :root[data-theme='light'] {
  --diff-added: color-mix(in srgb, #16803c 16%, var(--background));
  --diff-removed: color-mix(in srgb, #c43131 16%, var(--background));
  --diff-added-text: color-mix(in srgb, var(--text) 85%, #16803c);
  --diff-removed-text: color-mix(in srgb, var(--text) 85%, #c43131);
  /* A word marked inside a changed unit, deeper than a unit marked whole. */
  --diff-added-word: color-mix(in srgb, #16803c 32%, var(--background));
  --diff-removed-word: color-mix(in srgb, #c43131 30%, var(--background));
}
:root[data-theme='dark'] {
  --diff-added: color-mix(in srgb, #67d88b 20%, var(--background));
  --diff-removed: color-mix(in srgb, #ff7b7b 20%, var(--background));
  --diff-added-text: #b7f1c8;
  --diff-removed-text: #ffd1d1;
  --diff-added-word: color-mix(in srgb, #67d88b 38%, var(--background));
  --diff-removed-word: color-mix(in srgb, #ff7b7b 38%, var(--background));
}

/* Code, colored by its language (`tok-*` classes, `styles/document.css`): GitHub's syntax colors,
   which readers of a repository know. Each is readable on the code field in its theme (contrast
   4.5:1 or more, `tests/browser/code-coloring.mjs`). */
:root, :root[data-theme='light'] {
  --code-keyword: #cf222e;
  --code-string: #0a3069;
  --code-constant: #0550ae;
  --code-definition: #8250df;
  --code-type: #953800;
  --code-comment: #59636e;
  --code-invalid: #82071e;
}
:root[data-theme='dark'] {
  --code-keyword: #ff7b72;
  --code-string: #a5d6ff;
  --code-constant: #79c0ff;
  --code-definition: #d2a8ff;
  --code-type: #ffa657;
  --code-comment: #8b949e;
  --code-invalid: #ffa198;
}

/* Every surface that scrolls, in the shell and in the page alike, scrolls with one bar: a thin
   square in the text's colour, on no track and with no arrows. It is stated here, in the one sheet
   every document loads, so it is the same bar everywhere and in either theme. An element that
   names its own `scrollbar-width` or `scrollbar-color` is not drawn by these rules, so none does. */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: transparent;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--text);
  border-radius: 0;
}
::-webkit-scrollbar-button {
  display: none;
}
/* A browser without those parts draws the nearest it can: its thin bar, in the text's colour, on no
   track. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--text) transparent;
  }
}