// Color values
$blue-dark: hsla(227, 77%, 25%, 0.5);
$blue-light: hsl(226, 47%, 49%);
$blue-medium: hsl(227, 51%, 38%);
$gray: hsl(198, 16%, 84%);
$gray-semi-transparent: rgba(0, 0, 0, 0.5);
$white: hsl(0, 0%, 97%);
$yellow-dark: hsl(43, 96%, 58%);
$yellow-medium: hsl(54, 100%, 67%);

// Background colors
$background-body: $blue-light;
$background-game: $blue-dark;
$background-game-stats-after-game: $blue-dark;
$background-header: $blue-dark;

// Foreground colors
$color-highlight: $yellow-dark;
$color-header: $white;
$color-accent: $yellow-medium;
$color-accent-light: $white;
$color-main: $gray;
$color-score-panel: $white;
$color-shadow: $gray-semi-transparent;

// Color values
$blue-dark-semi-transparent: hsla(227, 77%, 25%, 0.5);
$blue-light: hsl(226, 47%, 49%);
$blue-medium: hsl(227, 51%, 38%);
$gray: hsl(198, 16%, 84%);
$gray-semi-transparent: rgba(0, 0, 0, 0.5);
$white: hsl(0, 0%, 97%);
$yellow-dark: hsl(43, 96%, 58%);
$yellow-medium: hsl(54, 100%, 67%);

// Background colors
$background-body: $blue-light;
$background-game: $blue-dark-semi-transparent;
$background-game-stats-after-game: $blue-dark-semi-transparent;
$background-header: $blue-dark-semi-transparent;

// Foreground colors
$color-highlight: $yellow-dark;
$color-header: $white;
$color-accent: $yellow-medium;
$color-accent-light: $white;
$color-main: $gray;
$color-score-panel: $white;
$color-shadow: $gray-semi-transparent;

Rename blue-dark color to blue-dark-semi-transparent
Rename blue-dark color to blue-dark-semi-transparent

We will have a fully opaque version of the color too, that will be named
blue-dark.
