// Dependent colors
$black: #000000;

$cardinal-700: hsla(359deg, 23%, 35%, 100%);
$cardinal-600: hsla(5deg, 67%, 32%, 100%);
$cardinal-500: hsla(5deg, 72%, 38%, 100%);
$cardinal-400: hsla(9deg, 60%, 44%, 100%);
$cardinal-300: hsla(6deg, 85%, 44%, 100%);

$shrike-base-color: hsla(20deg, 7%, 19%, 100%);
$shrike-primary-color: hsla(36deg, 17%, 57%, 100%);
$shrike-secondary-color: hsla(37deg, 35%, 79%, 100%);
$shrike-highlight-color: $cardinal-500;

$ui-base-color: $shrike-base-color !default;
$ui-base-over-color: lighten($ui-base-color, 8%) !default; // Lighter darkest
$ui-primary-color: $shrike-primary-color !default;
$ui-secondary-color: $shrike-secondary-color !default;
$ui-highlight-color: $shrike-highlight-color !default;

$darker-text-color: lighten($ui-primary-color, 20%) !default;
$dark-text-color: lighten($ui-primary-color, 12%) !default;
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
$highlight-text-color: lighten($ui-highlight-color, 10%) !default;
$action-button-color: lighten($ui-base-color, 50%);

$inverted-text-color: $black !default;
$lighter-text-color: darken($ui-base-color, 6%) !default;
$light-text-color: darken($ui-primary-color, 40%) !default;