Simplify using text color for links

Using `inherit` is IMHO more expressive since it means "use the color of
the parent element".

This is particularly useful for CONSUL installations using custom
styles. Consider the following code:

```
h2 {
  color: $white;

  a {
    color: $white;
  }
}
```

If we'd like to customize the way headings look, we'd have to override
two colors:

```
h2 {
  color: $red;

  a {
    color: $red;
  }
}
```

Consider the scenario where we use `inherit`:

```
h2 {
  color: $white;

  a {
    color: inherit;
  }
}
```

Now we only need to override one color to change the styles:

```
h2 {
  color: $red;
}
```

app/assets/stylesheets/budgets/ballot/investment.scss

@@ -11,7 +11,7 @@
   position: relative;
 
   a {
-    color: $text;
+    color: inherit;
   }
 
   .ballot-list-title {
@@ -42,9 +42,8 @@
   &:hover {
     @include brand-background;
 
-    a,
     span {
-      color: #fff;
+      color: inherit;
       outline: 0;
       text-decoration: none;
     }

app/assets/stylesheets/budgets/phases.scss

@@ -75,13 +75,13 @@
 
     a {
       background: $white;
-      color: $black;
+      color: inherit;
       height: 100%;
       padding: $line-height $line-height * 1.5;
 
       &:hover {
         background: #e6e6e6;
-        color: $black;
+        color: inherit;
       }
 
       &:focus {