/* one place for all the dark styles */
body {
  /*     --base: #191724; */
  --base: var(--base-dark);
  --surface-subtle-highlight: var(--surface-dark);
  --surface: var(--surface-dark);
  --overlay: var(--overlay-dark);
  --text: var(--text-light);
  --text-highlighted: #000;
  --text-contrasted: #fff;
  --gold-text: var(--gold-muted);
  /*--text-highlighted: #252237;*/
  --link: #9ccfd8;
  /*--muted: #6e6a86;*/
  --muted: rgb(100, 100, 100);
  /*--subtle: #908caa;*/
  --subtle: #b3b3b3;
  --less-subtle: #c3c3c3;
  --highlight-low: #21202e;
  --highlight-med: var(--dark-highlight-med);
  --highlight-high: #524f67;
  /*--border: #403d52;*/
  --border: var(--muted);
  /* --heading-text: #f0f0e2; */
  --heading-text: var(--text);
}

body .highlight {
  color: var(--base);
}

.post-entry {
  background-color: var(--surface);
  border-color: transparent;
}

pre code mark, pre code .z-hl {
  background-color: var(--gold-muted-tr2);
}

.highlight pre ::selection,
pre code ::selection,
pre ::selection {
  background-color: var(--highlight-med);
  color: unset;
}

input[type=text] {
  background-color: var(--surface) !important;
  border: none !important;
  color: var(--text) !important;
}

input[type=text]:focus {
  background-color: var(--overlay) !important;
  border: none !important;
}

.demo-control-button:hover {
  background: var(--text);
}

::selection {
  background-color: var(--pine);
  color: var(--base);
}

body img.light {
  display: none;
}

body img.dark {
  display: unset;
}

.note {
  color: var(--text);
  background-color: var(--note-type-bg);
  --note-type-bg: var(--foam-tr);
  --note-type-color: var(--foam-darker);
  border-color: var(--note-type-color);
}

.tip {
  --note-type-bg: var(--lightgreen-tr);
  --note-type-color: var(--lightgreen);
}

.btw {
  --note-type-bg: var(--iris-muted-tr);
  --note-type-color: var(--iris-muted);
}

.warning {
  --note-type-bg: var(--gold-muted-tr);
  --note-type-color: var(--gold);
}

.note::before {
  color: var(--note-type-color);
}

.note a {
  color: var(--foam);
}

.tombstone::after {
  color: var(--gold-muted);
}