$black: #000;
$white: #fff;

$background-color: #1e3f51;
$foreground-color: $white;

$link-color: #fd0;

$form-background-color: darken($background-color, 4%);

$board-border-color: #000;
$board-shadow-color: rgba(0, 0, 0, 0.4);

$board-square-size: 9vmin;
$base-font-size: 16px;

$black-square-color: #777;
$white-square-color: #bbb;

$selected-square-color: #0cf;
$available-square-color: #6f0;

$your-turn-background-color: rgba($white, 0.1);

$game-state-background-color: rgba(darken($black-square-color, 10%), 0.9);

$offline-opponent-color: #c33;
$viewing-opponent-color: #6c3;

$square-outline-color: darken($black-square-color, 20%);
$selected-outline-color: lighten($selected-square-color, 20%);
$available-outline-color: rgba(lighten($available-square-color, 20%), 0.5);

$colours: "black" "white";
$pieces: king queen bishop knight rook pawn;

:root {
  --board-size: 64vw;
}

@media (min-aspect-ratio: 14/11) {
  :root {
    --board-size: 80vmin;
  }
}

@media (max-aspect-ratio: 9/11) {
  :root {
    --board-size: 90vmin;
  }
}