:root {
  --base03:  #002b36;
  --base02:  #073642;
  --base01:  #586e75;
  --base00:  #657b83;
  --base0:   #839496;
  --base1:   #93a1a1;
  --base2:   #eee8d5;
  --base3:   #fdf6e3;
  --yellow:  #b58900;
  --orange:  #cb4b16;
  --red:     #dc322f;
  --magenta: #d33682;
  --violet:  #6c71c4;
  --blue:    #268bd2;
  --cyan:    #2aa198;
  --green:   #859900;
}

::selection {
  color: var(--blue);
  background-color: var(--base2);
}


body {
  background-color: var(--base2);
  color: var(--base01);
}

h2,
.cross-reference,
.help-link {
  color: var(--blue);
}

.pericope + .pericope {
  border-top-color: var(--base1);
}

.didascalia-handle,
.source-option-description,
.commentary-text a,
.verse e,
.verse n,
.verse f,
.didascalia-duplicate,
.didascalia-remove {
  color: var(--base1);
}

.didascalia-handle:hover,
.didascalia-handle:focus-visible {
  color: var(--cyan);
}

.didascalia-duplicate:hover,
.didascalia-duplicate:focus-visible {
  color: var(--blue);
}

.didascalia-remove:hover,
.didascalia-remove:focus-visible {
  color: var(--red);
}

.search-input-group input,
.didascalia .address.editing input,
.didascalia .source.editing input {
  background-color: var(--base3);
  color: var(--base00);
}

.margin .selected-address, .verse.selected {
  color: var(--green);
}

.source {
  color: var(--violet);
}

.source-list {
  background-color: var(--base3);
  border-color: var(--base1);
}

.source-language {
  color: var(--base0);
  background-color: var(--base2);
}

.source-option:hover {
  background-color: var(--base2);
}

.source-option-name {
  color: var(--violet);
}

.textus {
  background-color: var(--base3);
}

.cross-references-loading,
.cross-references-empty,
.commentary,
.commentary-text,
.help-modal h3 {
  color: var(--base01);
}

.commentary-marker {
  color: var(--magenta);
}

.verse::before {
  color: var(--red);
}

.verse s {
  color: var(--violet);
}

.verse m {
  color: var(--magenta);
}

.verse j {
  text-shadow-color: 0 0 var(--orange);
}

.help-modal {
  background-color: var(--base3);
  color: var(--base01);
}

.help-modal ul {
  color: var(--base00);
}

.help-close {
  background-color: var(--blue);
  color: var(--base3);
}

.help-close:hover {
  background-color: var(--cyan);
}