// See https://make.wordpress.org/design/handbook/design-guide/foundations/colors/
// Colors copied from https://codepen.io/hugobaeta/pen/RNOzoV

$color-wp-blue: #0073aa;
$color-medium-blue: #00a0d2;
$color-light-blue: #00b9eb;

$color-ultra-dark-gray: #191e23;
$color-dark-gray: #23282d;
$color-base-gray: #32373c;
$color-dark-medium-gray: lighten($color-base-gray, 15%);
$color-dark-silver-gray: #82878c;
$color-silver-gray: #a0a5aa;
$color-light-silver-gray: #b4b9be;
// $color-medium-gray: mix($color-base-gray,$color-dark-silver-gray,20%);
$color-medium-gray: #999;

$color-gray-900: $color-ultra-dark-gray;
$color-gray-800: $color-dark-gray;
$color-gray-700: $color-base-gray;
$color-gray-600: lighten($color-base-gray, 6%);
$color-gray-500: lighten($color-base-gray, 15%);
$color-gray-400: lighten($color-base-gray, 20%);
$color-gray-300: lighten($color-base-gray, 25%);
$color-gray-200: lighten($color-base-gray, 32%);
$color-gray-100: lighten($color-base-gray, 38%);

$color--gray-light-900: lighten($color-base-gray, 45%);
$color--gray-light-800: lighten($color-base-gray, 52%);
$color--gray-light-700: lighten($color-base-gray, 60%);
$color--gray-light-600: lighten($color-base-gray, 64%);
$color--gray-light-500: lighten($color-base-gray, 68%);
$color--gray-light-400: lighten($color-base-gray, 70%);
$color--gray-light-300: lighten($color-base-gray, 72%);
$color--gray-light-200: lighten($color-base-gray, 74%);
$color--gray-light-100: lighten($color-base-gray, 77%);

$color-accent-red: #dc3232;
$color-accent-fire-orange: #d54e21;
$color-accent-orange: #f56e28;
$color-accent-yellow: #ffb900;
$color-accent-green: #46b450; //old #64b450;
$color-accent-blue: $color-medium-blue;
$color-accent-purple: #826eb4;


// Tints and Tones and Shades

$color-accent-red-shade30: shade($color-accent-red, 30%);
$color-accent-red-shade20: shade($color-accent-red, 20%);
$color-accent-red-shade10: shade($color-accent-red, 10%);
$color-accent-red-tint20: tint($color-accent-red, 20%);
$color-accent-red-tint40: tint($color-accent-red, 40%);
$color-accent-red-tint60: tint($color-accent-red, 60%);
$color-accent-red-tint90: tint($color-accent-red, 90%);

$color-accent-fire-orange-shade10: shade($color-accent-fire-orange, 10%);
$color-accent-fire-orange-shade5: shade($color-accent-fire-orange, 5%);
$color-accent-orange-tint20: tint($color-accent-orange, 20%);
$color-accent-orange-tint40: tint($color-accent-orange, 40%);
$color-accent-orange-tint60: tint($color-accent-orange, 60%);
$color-accent-orange-tint90: tint($color-accent-orange, 90%);

$color-accent-yellow-tonefire40: mix($color-accent-fire-orange, $color-accent-yellow, 40%);
$color-accent-yellow-tonefire20: mix($color-accent-fire-orange, $color-accent-yellow, 20%);
$color-accent-yellow-tint20: tint($color-accent-yellow, 20%);
$color-accent-yellow-tint40: tint($color-accent-yellow, 40%);
$color-accent-yellow-tint60: tint($color-accent-yellow, 60%);
$color-accent-yellow-tint90: tint($color-accent-yellow, 90%);

$color-accent-green-toneblue5shade25: shade(mix($color-wp-blue, $color-accent-green, 5%), 25%);
$color-accent-green-toneblue5shade15: shade(mix($color-wp-blue, $color-accent-green, 5%), 15%);
$color-accent-green-tint20: tint($color-accent-green, 20%);
$color-accent-green-tint40: tint($color-accent-green, 40%);
$color-accent-green-tint60: tint($color-accent-green, 60%);
$color-accent-green-tint70: tint($color-accent-green, 70%);
$color-accent-green-tint90: tint($color-accent-green, 90%);

$color-accent-wp-blue-shade10: shade($color-wp-blue, 10%);
$color-accent-blue-toneblue80: mix($color-wp-blue, $color-accent-blue, 80%);
$color-accent-blue-toneblue60: mix($color-wp-blue, $color-accent-blue, 60%);
$color-accent-blue-toneblue40: mix($color-wp-blue, $color-accent-blue, 40%);
$color-accent-blue-tint20: tint($color-accent-blue, 20%);
$color-accent-blue-tint40: tint($color-accent-blue, 40%);
$color-accent-blue-tint60: tint($color-accent-blue, 60%);
$color-accent-blue-tint75: tint($color-accent-blue, 75%);
$color-accent-blue-tint90: tint($color-accent-blue, 90%);

$color-accent-purple-shade40: shade($color-accent-purple, 40%);
$color-accent-purple-shade20: shade($color-accent-purple, 20%);
$color-accent-purple-tint20: tint($color-accent-purple, 20%);
$color-accent-purple-tint40: tint($color-accent-purple, 40%);
$color-accent-purple-tint60: tint($color-accent-purple, 60%);
$color-accent-purple-tint90: tint($color-accent-purple, 90%);

// Text Colors
$textcolor-dark: rgba($color-base-gray, .8);
$textcolor-dark-mid: rgba($color-base-gray, .5);
$textcolor-light: rgba(#fff, .8);
$textcolor-light-mid: rgba(#fff, .5);
