earlymarket/CoPosition

$primary-color: #47b8e0;
$primary-color-lighter: lighten(#47b8e0, 15%);
$primary-color-darker: darken(#47b8e0, 15%);

$secondary-color: #ffc952;
$secondary-color-lighter: lighten(#ffc952, 15%);
$secondary-color-darker: darken(#ffc952, 15%);

$dark-text-color: rgba(0, 0, 0, 0.8);
$light-text-color: rgba(255, 255, 255, 1);

.dark-text{
  color: $dark-text-color;

  &.secondary{
    color: rgba(0, 0, 0, 0.7);
  }
  &.hint{
    color: rgba(0, 0, 0, 0.38);
  }
}

.light-text{

  color: $light-text-color;

  &.secondary{
    color: rgba(255, 255, 255, 0.7);
  }
  &.hint{
    color: rgba(255, 255, 255, 0.3);
  }
}

.primary-color{
  background-color: $primary-color;

  &.lighten{
    @extend .dark-text;
    background-color: $primary-color-lighter;
  }

  &.darken{
    @extend .light-text;
    background-color: $primary-color-darker;
  }
}

.secondary-color{
  @extend .dark-text;
  background-color: $secondary-color;

  &.lighten{
    background-color: $secondary-color-lighter;
  }

  &.darken{
    background-color: $secondary-color-darker;
  }
}