$bg-0: #121212;

// Dark theme needs a bigger contrast compared to the white theme.
$bg-1: lighten($bg-0, 5%);
$bg-2: lighten($bg-1, 10%);

$text-0: lighten($bg-0, 87%);
$text-1: lighten($bg-0, 60%);

:root.dark {
  --text-0: #{$text-0};
  --text-1: #{$text-1};

  --bg-0: #{$bg-0};
  --bg-1: #{$bg-1};
  --bg-2: #{$bg-2};

  --border-color: var(--bg-2);

  --primary-color: #ef5350;
  --hover-color: white;

  .social>img {
    filter: invert(1);
  }
}