/*****************************************************************************\
  base colors
\*****************************************************************************/

$greyLightest: #edf1f1;
$greyLight: #e0e4e4;
$grey: #e1e1e1;
$greyMedium: #cecdcc;
$greyMediumish: #bdb9b7;
$greyMediumish2: #a8a3a1;
$greyMediumer: #616868;
$greyDark: rgba(125, 125, 125);
$greyDarkish: rgba(56, 56, 56);
$greyDarker: #212424;

$blueLighter: #b2bbee;
$blueLight: #808ee1;
$blue: #576de7;
$blueDark: #273aa2;

$pinkLightest: #d3bbf2;
$pinkLighter: #d68df0;
$pinkLight: #ec75cb;
// $pink: #ec2f95; // contrast too low
// $pink: #f649a7; // better contrast
$pink: #f95db2;
// $pink: #f055a9; // even better contrast but looks washed out

$greenLighter: #e7ffed;
$greenLight: #acffc3;
$green: #85eba2;
$greenDark: #59df7f;
$greenTransparent: rgba(89, 223, 127, 0.3);

$tealLighter: #94eeee;
$tealLight: #65e0e0;
$teal: #41c7c7;
$tealDark: #2ba7a7;
$tealDarker: #1d7e7e;

$purpleLight: #b096e7;
$purple: #7854c3;
$purpleDark: #57457c;

$redLighter: #f8a8a8;
$redLight: #fc8f8f;
$red: #fe6a6a;
$redDark: #ec5555;
$redDarker: #d13f3f;
$redTransparent: rgba(254, 106, 106, 0.3);

$yellow: #fbf34c;
$yellowDark: #d4cc33;
$aqua: #1ea0f2;

$white: #ffffff;

$navyLightest: #7e86ad;
$navyLighter: #484f73;
$navyLight: #303652;
$navy: #232840;
$navyDark: #1a1f35;

/*****************************************************************************\
  "functional" colors
\*****************************************************************************/

$active-color: $teal;
$active-color-dark: $tealDark;

$contrast-color: $red;
$contrast-color-dark: $redDark;

$bg-color: $greyDarker;
$bg-color-light: $greyDarkish;
$bg-color-lighter: $greyMediumer;
$bg-color-lightest: $greyLight;
$bg-color-inverted: $greyLight;

$border-color: $greyMedium;
$dark-border-color: $greyDark;
$darker-border-color: rgba(125, 125, 125, 0.4);

$text-color: $grey;
$text-color-dark: $greyMediumish;
$text-color-darker: $greyMediumish2;
$text-color-inverted: $greyDarker;
$text-color-error: $redLight;

$link-color: $active-color;
$hover-color: $contrast-color;

:root {
  --bg-color: #{$bg-color};
  --bg-color-light: #{$bg-color-light};
  --bg-color-lighter: #{$bg-color-lighter};
  --text-color: #{$text-color};
  --text-color-dark: #{$text-color-dark};
  --text-color-darker: #{$text-color-darker};
  --text-color-inverted: #{$text-color-inverted};
  --text-color-error: #{$text-color-error};
  --link-color: #{$link-color};
  --hover-color: #{$contrast-color};
  --border-color: #{$border-color};
  --dark-border-color: #{$dark-border-color};
  --darker-border-color: #{$darker-border-color};
  --active-color: #{$active-color};
  --contrast-color: #{$contrast-color};
  --accent-color: #{$contrast-color};
  --accent-color-2: #{$active-color-dark};
}
