/* CSS media queries also react immediately to browser/OS preference changes. */
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --memory-opcode: #392c49;
    --memory-register: #22394e;
    --memory-immediate: #453720;
    --memory-address: #452b3b;
    --memory-data: #203e35;
    --memory-padding: #343444;
    --memory-unused: #252a33;
  }
  * {
    scrollbar-color: #808b9e #252b36;
  }
  body.simulator {
    background: #191d25;
    color: #e4e8f0;
  }
  .top,
  .specialdata {
    background: #191d25;
  }
  button,
  input,
  select {
    color: #e4e8f0;
    background-color: #292f3b;
    border-color: #808b9e;
  }
  button:enabled:hover {
    background-color: #394356;
  }
  button:disabled,
  input:disabled,
  select:disabled {
    color: #adb7c8;
    background-color: #222833;
    opacity: 1;
  }
  :focus-visible {
    outline: 2px solid #95c8ff;
    outline-offset: 2px;
  }
  a {
    color: #a8d1ff;
  }
  .memory {
    background: #252a33;
  }
  .memoryhide,
  .registerhide {
    background: #394252;
    color: #f1f4fa;
  }
  .specialdata h1 {
    background: #454323;
    color: #f5efb1;
  }
  .specgroup:nth-of-type(odd) .specgrcontent,
  .cacheset:nth-of-type(odd) {
    background: #252b36;
  }
  .specgroup:nth-of-type(even) .specgrcontent,
  .cacheset:nth-of-type(even) {
    background: #2e3542;
  }
  .cachelevelno {
    background: #254c3d;
    color: #b7f0d4;
  }
  .cachesetline span {
    border-color: #8590a3;
  }
  .br_table td,
  .br_table th {
    border-color: #8590a3;
  }
  .br_table tr:nth-child(even) {
    background: #252b36;
  }
  .br_table th {
    background: #254c3d;
    color: #e4e8f0;
  }

  #editor {
    background: #191d25;
    color: #e4e8f0;
    border-color: #808b9e;
  }
  #editor .ace_gutter {
    background: #252b36;
    color: #bcc6d7;
  }
  #editor .ace_gutter-active-line {
    background: #343d4b;
  }
  #editor .ace_cursor {
    color: #ffffff;
  }
  #editor .ace_print-margin {
    background: #414a5a;
  }
  #editor .ace_invisible {
    color: #8c98ad;
  }
  #editor .ace_indent-guide {
    background-image: none;
    border-right: 1px dotted #515b6c;
    box-sizing: border-box;
  }
  #editor .ace_marker-layer .ace_active-line {
    background: #ffffff08;
  }
  #editor .ace_marker-layer .ace_selection {
    background: #304560;
  }
  #editor .ace_marker-layer .ace_selected-word {
    background: transparent;
    border-color: #a4b9da;
  }
  #editor .ace_marker-layer .ace_bracket {
    border-color: #b7c7e0;
  }
  #editor .ace_fold {
    background: #7c6eaf;
    border-color: #d5c9ef;
  }
  #editor .ace_keyword.ace_instruction {
    color: #ddb5ff;
  }
  #editor .ace_keyword.ace_directive {
    color: #99dfbf;
  }
  #editor .ace_variable.ace_register {
    color: #a2ceff;
  }
  #editor .ace_constant.ace_numeric {
    color: #f4d093;
  }
  #editor .ace_entity.ace_name.ace_label,
  #editor .ace_variable.ace_label {
    color: #ffb4d1;
  }
  #editor .ace_comment {
    color: #b0bcb6;
  }
  #editor .ace_punctuation.ace_operator {
    color: #c2cada;
  }
  #editor .ace_invalid {
    color: #ffb4b4;
    background: #502b35;
  }
  .ace_tooltip {
    color: #e4e8f0;
    background: #292f3b;
    border-color: #808b9e;
    background-image: none;
  }
  .codeerror {
    text-decoration-color: #ff9292;
  }
  .ace_gutter-cell.ace_breakpoint::before {
    background: #ff777f;
  }

  .mem-kind-opcode {
    color: #ddb5ff;
    background: var(--memory-opcode);
  }
  .mem-kind-register {
    color: #a2ceff;
    background: var(--memory-register);
  }
  .mem-kind-immediate {
    color: #f4d093;
    background: var(--memory-immediate);
  }
  .mem-kind-address {
    color: #ffb4d1;
    background: var(--memory-address);
  }
  .mem-kind-data {
    color: #99dfbf;
    background: var(--memory-data);
  }
  .mem-kind-padding {
    color: #ccc8e3;
    background: var(--memory-padding);
  }
  .mem-kind-unused {
    color: #b1bac8;
    background: var(--memory-unused);
  }
  .mem-kind-mixed {
    color: #f1f4fa;
  }
  .mem-source-start {
    box-shadow: -1px 0 0 #aab5c7;
  }
  .memory .memcurline {
    color: #ffb4d1;
    text-decoration-color: #ffb4d1;
  }

  /* Dark access backgrounds preserve contrast with every semantic text color. */
  .memory .memread,
  #editor .memread,
  .genreg.memread .regval,
  .cachesetline.memread {
    background-color: #254638;
  }
  .memory .cachemiss,
  #editor .cachemiss,
  .cachesetline.cachemiss {
    background-color: #49401f;
  }
  .memory .memwrite,
  #editor .memwrite,
  .genreg.memwrite .regval,
  .cachesetline.memwrite {
    background-color: #502d36;
  }
}