/* The site follows the browser's light or dark preference. Printing stays light. */
:root {
  color-scheme: light;
  --background-color: #fff;
  --heading-color: #222;
  --text-color: #444;
  --link-color: #3273dc;
  --visited-color: #8b6fcb;
  --blockquote-color: #222;
  --muted-color: #666;
  --border-color: #e5e5e5;
  --blockquote-border-color: #999;
}

html {
  background-color: var(--background-color);
}

.byline {
  color: var(--muted-color);
}

blockquote {
  border-left-color: var(--blockquote-border-color);
}

/* Material Design's dark theme: the #121212 surface, with white text at the
   light palette's emphasis levels (87%, 73%, 60%) and 200-tone accents. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background-color: #121212;
    --heading-color: #e0e0e0;
    --text-color: #bfbfbf;
    --link-color: #90caf9;
    --visited-color: #b39ddb;
    --blockquote-color: #e0e0e0;
    --muted-color: #a0a0a0;
    --border-color: #2e2e2e;
    --blockquote-border-color: #717171;
  }
}

/* The same palette when Dark Reader is on while the browser is light: the
   inline script in each page sets data-theme="dark" and locks Dark Reader
   out, so these colours show unaltered.  Keep in step with the block above. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --background-color: #121212;
    --heading-color: #e0e0e0;
    --text-color: #bfbfbf;
    --link-color: #90caf9;
    --visited-color: #b39ddb;
    --blockquote-color: #e0e0e0;
    --muted-color: #a0a0a0;
    --border-color: #2e2e2e;
    --blockquote-border-color: #717171;
  }
}