// TODO: convert uses of these to CSS variables
$sidebarBackground: #f9f9f9;
$headerBackground: #eee;
$contentBackground: #fff;

html:not(.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: black;

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

  --documentBackground: #f3f3f3;
  --contentBackground: $contentBackground;

  --textColor: #333;
  --textColorLight: #666;
  --textColorLighter: #888;
  --textColorRed: #f44336;

  --inputFocusBorder: #35b5f4;

  --focusBackground: #e5e5e5;
  --focusBorder: #d4d4d4;
  --focusText: #000;

  --loadingText: #ccc;
  --splashText: #ccc;

  --selectionBackground: #398df0;
  --selectionBorder: #196fc2;
  --selectionText: #fff;
  --transparentSelectionText: rgba(255, 255, 255, 0.9);

  --highlightBackground: #fffdcd;

  --linkColor: #3377c0;
  --linkColorHover: #2f6cb6;
  --linkTextDecoration: none;

  --headerBackground: $headerBackground;
  --headerBorder: #d7d7d7;

  --sidebarBackground: $sidebarBackground;
  --sidebarBorder: #e1e1e1;

  --scrollbarColor: #ccc;
  --scrollbarColorHover: #999;

  --pathBackground: var(--sidebarBackground);
  --pathBorder: var(--sidebarBorder);

  --noticeBackground: #faf9e2;
  --noticeBorder: #e2e2c1;

  --boxBackground: #fafafa;
  --boxBorder: #d8d8d8;
  --boxBorderLight: #e5e5e5;
  --boxHeaderColor: var(--textColor);
  --boxHeaderBackground: #f5f5f5;

  --noteBackground: #f8f8dd;
  --noteBorder: #d3d952;

  --noteGreenBackground: #e7f8e1;
  --noteGreenBorder: #89da70;

  --noteBlueBackground: #d4f3fd;
  --noteBlueBorder: #94bbeb;

  --noteOrangeBackground: #fbe6d1;
  --noteOrangeBorder: #ec8b01;

  --noteRedBackground: #fed5d3;
  --noteRedBorder: #dc7874;

  --labelBackground: #f4f4f4;

  --notifBackground: rgba(#333, .85);
  --notifBorder: none;
  --notifColor: #fff;
  --notifColorLight: #ccc;

  --tipBackground: rgba(#fffdcd, .95);
  --tipBorder: 1px solid #e7dca9;

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