// Primary
$dark_green: #367845;
$medium_green: #C4D8C8;
$light_green: #EBF1EC;

.tx-green {
  color: $dark_green;
}

.bg-green, .bg-m_green {
  background: $dark_green;
}

.bg-md-green, .bg-light-m_green {
  background: $medium_green;
}

.bg-light-green {
  background: $light_green;
}

// Secondary
// old color: #F39325;
$dark_orange: #DD7113;
$medium_orange: #FACF9E;
$light_orange: #FCE7CF;

.tx-orange {
  color: $dark_orange;
}

.bg-orange, .bg-m_orange {
  background: $dark_orange;
}

.bg-md-orange, .bg-light-m_orange {
  background: $medium_orange;
}

.bg-light-orange {
  background: $light_orange;
}

// Tertiary
$dark_blue: #0A6C88;
$medium_blue: #8CC8D9;
$medium_light_blue: #C8E0E6;
$light_blue: #E0F0F5;

.tx-blue {
  color: $dark_blue;
}

.bg-blue, .bg-m_blue {
  background: $dark_blue;
}

.bg-md-blue, .bg-light-m_blue {
  background: $medium_blue;
}

.bg-light-blue {
  background: $light_blue;
}

// Base
$black: #455448;
$grey: #7C837D;
$light_grey: #B0B5B1;
$white: #FFFFFF;
$red: #C73130;

.tx-white {
  color: $white;
}

.bg-white {
  background-color: $white;
}

// to align with cms plugins background color scheme
.bg-light-white {
  background-color: $white;
}

// Accents
$pink: #D29DB4;
$sky: #0CA4D1;
$violet: #8164B2;
$yellow: #F6D009;

// css variables as scss are compiled and do not know the value from the runtime
:root {
  --course-color-dark: #455448;
  --course-color-medium: #7C837D;
  --course-color-light: #B0B5B1;
}