$background: #000000;
$subtle: #292929;
$foreground: #909090;
$vivid: #3F8BC0;
$link: #3878A5;

$background-green: #005e2d;

// lighter tints of the background
$subtle-green: #287343;
$foreground-green: #559965;
$subtle-vivid-green: #2d8041;

// a yellow green
$vivid-green: #7ab84a;

.dashboard {
  background: $background;
  color: $foreground;
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;

  &.red {
    background: #5C1608;
    color: rgba(255, 255, 230, 0.435);
    .refresher-track { fill: rgba(255, 255, 100, 0.07); }
    .refresher-path { fill: rgba(255, 255, 230, 0.2); }
    .label { color: rgba(255, 255, 230, 0.9); }
  }

  &.green {
    background: $background-green;
    color: $foreground-green;
    .refresher-track { fill: rgba(255, 255, 100, 0.07); }
    .refresher-path { fill: rgba(255, 255, 210, 0.2); }
    .label { color: rgba(255, 255, 210, 0.9); }

    .axis {
      text { fill: $foreground-green; }
      text.legend { fill: $subtle-green; }
      path, line { stroke: $subtle-green; }
    }

    .burndown-chart {
      circle { fill: $background-green; }

      .circle-completed, .line.line-completed { stroke: $vivid-green; }
      .effort-remaining.effort-completed { fill: $vivid-green; }

      .circle-committed, .line.line-committed { stroke: $subtle-vivid-green; }
      .effort-remaining.effort-committed { fill: $subtle-vivid-green; }
    }
  }

  #container {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
  }

  h1 {
    color: inherit;
    font-size: 4em;
    font-weight: 100;
    margin: 0 0 0.5em 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  a, a:visited { color: inherit; }
  a:hover, a:active { color: #ccc; }

  .refresher {
    position: absolute;
    top: 0;
    right: 0;
  }
  .refresher-track { fill: rgba(255,255,255,0.1); }
  .refresher-path { fill: rgba(255,255,255,0.2); }


  .axis {
    text { font-size: 13px; fill: $foreground; }
    text.legend { fill: $subtle; }
    path, line { stroke: $subtle; }
  }

  .burndown-chart {
    circle { fill: $background; }
    .effort-remaining { font-weight: 400; }

    .circle-completed, .line.line-completed { stroke: $vivid; }
    .effort-remaining.effort-completed { fill: $vivid; }

    .circle-committed, .line.line-committed { stroke: $foreground; }
    .effort-remaining.effort-committed { fill: $foreground; }
  }

  .label {
    text-shadow: none;
    font-weight: 400;
    background: $subtle;
    color: $foreground;
  }
}