/* Follow the system preference; the existing palette is the light fallback. */
:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --p: #141414;
    --i: #f4f1e8;
    --m: #b2b2b2;
    --l: #484848;
    --s: #ff922e;
    --q: #242424;
    --theme-success: #80d98c;
    --theme-error: #ff967e;
  }

  /* These components use fixed light colors in their page styles.
     The root selector keeps these rules above styles loaded in the body. */
  :root .terminal,
  :root .screen,
  :root .flasher-fields select,
  :root .keyboard-page input:not([type=checkbox]),
  :root .keyboard-page select,
  :root .matrix-key,
  :root .composer input,
  :root dialog input {
    border-color: var(--l);
  }

  :root .screen,
  :root .webchat,
  :root .flasher-panel,
  :root .keyboard-panel {
    background: var(--q);
  }

  :root .code,
  :root .doc pre,
  :root .keyboard-page pre,
  :root .flash-log {
    background: #1b1b1b;
  }

  :root .button:not(.primary) {
    background: transparent;
    color: var(--i);
  }

  :root .button.primary {
    background: var(--s);
    border-color: var(--s);
    color: var(--p);
  }

  :root .prompt,
  :root .message .sender {
    color: var(--s);
  }

  :root .flash-status.success,
  :root .chat-head span.online {
    color: var(--theme-success);
  }

  :root #keyboard-status {
    border-color: var(--theme-success);
  }

  :root .flash-status.error,
  :root .chat-head span.offline,
  :root .form-error,
  :root #keyboard-status.error {
    color: var(--theme-error);
  }

  :root #keyboard-status.error {
    border-color: var(--theme-error);
  }
}