// important functions for deriving colors
@function whiten($color, $percent){
  @return mix(white, $color, $percent);
}
@function blacken($color, $percent){
  @return mix(black, $color, $percent);
}

// These should only be used to derive main colors
$s-color-primaryRoot: #08b5e5; // a bright brand color
$s-color-neutralRoot: #222;

// Themes that override root colors will need to regenerate these
// These color names are stable and will not change
$s-color-dark1: $s-color-neutralRoot;
$s-color-dark2: whiten($s-color-neutralRoot, 10%);
$s-color-dark3: whiten($s-color-neutralRoot, 20%);
$s-color-dark4: whiten($s-color-neutralRoot, 35%);

$s-color-light1: whiten($s-color-neutralRoot, 65%);
$s-color-light2: whiten($s-color-neutralRoot, 80%);
$s-color-light3: whiten($s-color-neutralRoot, 95%);
$s-color-light4: whiten($s-color-neutralRoot, 100%);

$s-color-primary1: blacken($s-color-primaryRoot, 40%);
$s-color-primary2: blacken($s-color-primaryRoot, 20%);
$s-color-primary3: $s-color-primaryRoot;
$s-color-primary4: whiten($s-color-primaryRoot, 25%);
$s-color-primary5: whiten($s-color-primaryRoot, 50%);
$s-color-primary6: whiten($s-color-primaryRoot, 75%);

// Lists of all the colors
$s-color-neutralList:
  dark1 $s-color-dark1,
  dark2 $s-color-dark2,
  dark3 $s-color-dark3,
  dark4 $s-color-dark4,
  light1 $s-color-light1,
  light2 $s-color-light2,
  light3 $s-color-light3,
  light4 $s-color-light4;

$s-color-primaryList:
  primary1 $s-color-primary1,
  primary2 $s-color-primary2,
  primary3 $s-color-primary3,
  primary4 $s-color-primary4,
  primary5 $s-color-primary5,
  primary6 $s-color-primary6;

$s-color-listList: $s-color-neutralList $s-color-primaryList;

// These are saturated colors that can stand alone on a white (#fff) background
$s-color-success: #383;
$s-color-info: #69f;
$s-color-warning: #ee8;
$s-color-alert: #d12;