$bg-0: #fff;
$bg-1: darken($bg-0, 2%);
$bg-2: darken($bg-1, 8%);

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

:root.light {
  --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;

  // invert colour on hover for consistency 
  .social :hover {
    filter: invert(1)
  }
}