:root {
  --bg-left: hsl(202, 74%, 30%);
  --bg-main: hsl(202, 72%, 41%);

  --tree-bg-2: hsl(202, 59%, 47%);
  --tree-bg-2-lighter: hsl(202, 50%, 56%);

  --tree-bg-1: hsl(202, 48%, 60%);
  --tree-bg-1-lighter: hsl(202, 43%, 67%);

  --active-bg: hsl(202, 100%, 100%);

  --selection-color: hsl(86, 54%, 51%);
  --host-select-color: #c44715;

  --emphasis-color: hsl(36, 100%, 50%);

  /* --edit-bg is not defined here,
     so that we can fallback to
     "handmadepaper.png" background
     image.
   */
  --edit-text-color: hsl(27,28%,22%);
  --edit-text-shadow: -1px -1px 0px rgba(0,0,0,0.1), 1px 1px 0px rgba(255,255,255,0.8);
  --normal-text-color: hsl(0, 20%, 17%);
  --normal-text-color-medium: #333;

  --background-sidebar: hsl(200, 15%, 90%);
  --background-sidebar-menu: hsl(200, 13%, 95%);

  --small-shadow: 1px 1px 3px rgba(0,0,0,0.4);

  --ui-1-fg: #334;
  --ui-1-bg: white;

  --ui-2-fg: black;
  --ui-2-bg: hsl(202, 34%, 96%);
  --ui-2-border-color: hsl(212deg 5% 58%);

  --ui-3-fg: #334;
  --ui-3-bg: rgb(217,217,217);
  --ui-3-border-color: #c8d3d8;

  --ui-4-fg: hsl(212deg 4% 30%);
}