$mediumScreen: '(max-width: 800px)';
// TODO: convert uses of these to CSS variables
$selectionText: #fff;
$sidebarBackground: #24282a;
$headerBackground: #1c1c1c;
$contentBackground: #33373a;

html.dark {
  --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  --boldFontWeight: 500;
  --bolderFontWeight: 600;

  --absolute: white;

  --maxWidth: 80rem;
  --headerHeight: 3rem;
  --sidebarWidth: 20rem;
  --sidebarMediumWidth: 16rem;

  --documentBackground: #222;
  --contentBackground: $contentBackground;

  --textColor: #cbd0d0;
  --textColorLight: #9da5ad;
  --textColorLighter: #77787a;
  --textColorRed: #f44336;

  --inputFocusBorder: transparent;

  --focusBackground: #3f4042;
  --focusBorder: #000;
  --focusText: #f7f2f2;

  --loadingText: #5d6164;
  --splashText:   --loadingText;

  --selectionBackground: #007acc;
  --selectionBorder: #000;
  --selectionText: $selectionText;

  --highlightBackground: #64675f;

  --linkColor: var(--textColor);
  --linkColorHover: white;
  --linkTextDecoration: underline;

  --headerBackground: $headerBackground;
  --headerBorder: #000;

  --sidebarBackground: $sidebarBackground;
  --sidebarBorder: #000;

  --scrollbarColor: #6c6c6f;
  --scrollbarColorHover: #949697;

  --pathBackground: var(--headerBackground);
  --pathBorder: var(--headerBorder);

  --noticeBackground: var(--sidebarBackground);
  --noticeBorder: var(--sidebarBorder);

  --boxBackground: var(--sidebarBackground);
  --boxBorder: var(--headerBorder);
  --boxBorderLight: var(--headerBorder);
  --boxHeaderColor: #dbe4e4;
  --boxHeaderBackground: var(--sidebarBackground);

  --noteBackground: #45474b;
  --noteBorder: #000;

  --noteGreenBackground: #284a2a;
  --noteGreenBorder: #000;

  --noteBlueBackground: #2a4151;
  --noteBlueBorder: #000;

  --noteOrangeBackground: #563322;
  --noteOrangeBorder: #000;

  --noteRedBackground: #603033;
  --noteRedBorder: #000;

  --labelBackground: var(--boxBackground);

  --notifBackground: rgba(#555, .95);
  --notifBorder: 1px solid #000;
  --notifColor: #fff;
  --notifColorLight: #ccc;

  --tipBackground: var(--notifBackground);
  --tipBorder: var(--notifBorder);

  --contentZ: 1;
  --sidebarZ: 2;
  --headerZ: 3;
  --noticeZ: 4;
  --hoverZ: 5;
}