/* ------- Root colors ------- */
:root {
  color-scheme: light dark;
  --headfoot: #707564;
  --imgbg: url("/images/tilebgbr.webp");
  --main: #e8ead2;
  --imgmain: url("/images/redox-02.png");
  --bg-darker: rgba(120,120,100,0.08);
  --text: #140d00;
  --lighttext: #40553f;
  --headfoot-text: #f9f0e4;
  --header-stroke: #4d4f44;
  --link: #23530E;
  --visitedlink: #702E5C;
  --accent: #c2bca0;
  --accent2: #929983;
  --focus: red;
  --mark: #f4f5a4;
  --emphasis: #7a3334;
}

/* --- Dark theme overrides -------- */

@media (prefers-color-scheme: dark) {
  :root {
  color-scheme: only dark;
  --headfoot: #272c23;
  --bg-darker: #1e221b;
  --imgbg: url("/images/darkheader.webp");
  --main: #272c23;
  --imgmain: #272c23;
  --text: #f8faff;
  --lighttext: #d0d0d0;
  --link: #b0f5d8;
  --visitedlink: #bc9dff;
  --accent: #525e48;
  --mark: #656653;
  --emphasis: #fad8da;
}
  header, footer, header a, footer a {color: var(--text) !important;}
  /* Dim images so they're not blinding! */
  img {filter: brightness(.8) contrast(1.2);}
  body {background-image: none !important;}
}

/* --- High contrast overrides -------- */

@media (prefers-contrast: more) {
  :root {
  color-scheme: light;
  --headfoot: white;
  --imgbg: none;
  --main: #ffffff;
  --imgmain: none;
  --bg-darker: rgba(120,120,100,0.1);
  --text: #000000;
  --lighttext: #343434;
  --headfoot-text: #000000;
  --link: #001aff;
  --visitedlink: #8518b4;
  --accent: #e1dcd1;
  --accent2: #d0d3c4;
  --focus: black;
  --mark: #f3f57b;
  --emphasis: #8a0002;
  }
  header, footer {background-image: none !important;}

  @media (prefers-color-scheme: dark) {
  :root {
  --headfoot: #242424;
  --bg-darker: #242424;
  --imgbg: none;
  --main: #000000;
  --imgmain: none;
  --text: #ffffff;
  --lighttext: #f0f0f0;
  --link: #cae7f5;
  --visitedlink: #e4ddff;
  --accent: #4d423c;
  --mark: #26241f;
  --focus: white;
  --emphasis: #fff0f0;
  }
  }
}

/* ------ Color setting ------- */

/* General */
header, footer {background: var(--headfoot);}
header h1 {text-shadow: 1px -1px 0 var(--header-stroke), -1px -1px 0 var(--header-stroke), -2px 2px 0 var(--header-stroke), 2px 2px 0 var(--header-stroke);}
header, footer {background-image: var(--imgbg);}
body {background: var(--main); color: var(--text); background-image: var(--imgmain); background-blend-mode: darken;}
main :is(h1, h2, h3, h4, h5, h6, .bg-darker) {background: var(--bg-darker);}

/* Links */
a:link:not(header a, footer a) {color: var(--link);}
a:visited:not(header a, footer a) {color: var(--visitedlink);}
main a:hover, main a:focus {color: var(--headfoot);}
header a:hover, footer a:hover {color: var(--headfoot-text);}

/* Inverted and lightened text */
header, footer, header a, footer a {color: var(--headfoot-text);}
blockquote, figcaption, details[open] > summary, summary:hover {color: var(--lighttext);}

/* Boxes and set-off text */
nav p, main h2, h3, h4, h5, h6, .lined-bottom {border-bottom: 1px solid var(--accent);}

/* Other */
.box, .scrollbox, iframe {border: 2px solid var(--accent); background: rgba(150, 150, 130, 0.1);}
.box, .scrollbox {background: rgba(170, 170, 150, 0.1);}
mark {background-color: var(--mark); color: var(--text); border: 1px solid var(--accent);}
hr {background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--accent), rgba(0, 0, 0, 0)); border: 0; height: 2px;}
*:focus {outline: var(--focus) solid 3px; border-radius: 5px;}