// Primary Palette
$blue: #00aeff;
$green: #00a859;
$purple: #6e53a3;
$red: #f13c45;
$orange: #f8961d;

// Neutral Palette
$white: #fff;
$black: #000;
$offblack: #333;
$shadow: rgba(0, 0, 0, 0.15);
$dark-blue: #006d9a;
$charcoal-blue: #384655;
$slate-blue: #262f34;

$slate-gray-100: #f0f3f6;
$slate-gray-150: #e0e3e6;
$slate-gray-200: #d7dde4;
$slate-gray-300: #c0c5cc;
$slate-gray-400: #708090;
$slate-gray-500: #5e676f;
$slate-gray-600: #4f565c;

$gray-100: #f1f1f1;
$gray-200: #e0e0e0;
$gray-300: #cccccc;
$gray-400: #a1a1a1;
$gray-500: #6d6e70;
$gray-600: #515353;

// Secondary Palette
$ruby-red: #951c1e;
$deep-red: #cc2027;
$red-orange: #f05323;
$pink: #ef4767;
$light-pink: #f8c8db;
$brown: #553e36;
$magenta: #a94c9d;
$purple-gray: #776c7f;
$azure: #007bff;
$teal: #00acac;
$dark-green: #006c4e;
$light-green: #9fd4ae;
$ai-green: #38A188;
$tan: #ebba82;
$yellow: #f5ed56;
$yellow-orange: #e7c447;

// General Color Vars
$primary-brand: $blue;
$primary-action: $green;
$primary-alt-action: $purple;
$destructive-action: $red;
$neutral-action: $gray-500;
$error: $deep-red;
$text: $offblack;
$block-text-background: $slate-gray-100;


// sets the background color with the given color variable and sets the appropriate foreground color to pair with it
@mixin hc-color-bg($color) {
    color: map-get($color-pairing, $color);
    background-color: $color;
}

$color-pairing: (
    $blue: $white,
    $green: $white,
    $purple: $white,
    $red: $white,
    $orange: $white,
    $ruby-red: $white,
    $deep-red: $white,
    $red-orange: $white,
    $magenta: $white,
    $pink: $white,
    $light-pink: $white,
    $azure: $white,
    $teal: $white,
    $ai-green: $white,
    $dark-green: $white,
    $light-green: $white,
    $brown: $white,
    $purple-gray: $white,
    $yellow: $offblack,
    $yellow-orange: $white,
    $tan: $white,
    $white: $offblack,
    $black: $white,
    $offblack: $white,
    $shadow: $offblack,
    $dark-blue: $white,
    $charcoal-blue: $white,
    $slate-gray-100: $offblack,
    $slate-gray-200: $offblack,
    $slate-gray-300: $white,
    $slate-gray-400: $white,
    $slate-gray-500: $white,
    $slate-gray-600: $white,
    $gray-100: $offblack,
    $gray-200: $offblack,
    $gray-300: $white,
    $gray-400: $white,
    $gray-500: $white,
    $gray-600: $white
) !default;