// Font Colors
$color-text: #4f6c8d;
$color-text-light: #a3adb4;
$color-text-lighter: #ccd6e1;

$color-text-contrast: #ffffff;
$color-text-contrast-light: #a7b5c6;
$color-text-contrast-lighter: #5f5f63;

// Background Colors
$color-dropdown-background: #363645;

// Primary Colors
$color-accent: #fc7777;
$color-normal: #545569;
$color-white: #ffffff;
$color-blue: #68d6f8;

// Light Primary Colors
$color-accent-light: lighten($color-accent, 4);
$color-normal-light: lighten($color-normal, 4);

// Dark Primary Colors
$color-accent-dark: darken($color-accent, 4);
$color-normal-dark: darken($color-normal, 30);

// Auxiliary Colors
$color-grey-light: #f0f0f0;
$color-grey: #41404e;
$color-grey-dark: #31313c;
$color-blue-light: #9393a1;
$color-blue-dark: #292934;
$color-indigo-light: #48485c;
$color-indigo: #3c3c4b;
$color-red: #dd3c57;
$color-yellow: #f2c94c;
$color-yellow-dark: darken($color-yellow, 10);

// Gradients
$gradient-accent-horizontal: linear-gradient(90deg, $color-accent, $color-red);
$gradient-accent-angled: linear-gradient(135deg, $color-accent, $color-red);
$gradient-normal-angled: linear-gradient(94deg, $color-normal, $color-blue-dark);
$gradient-normal-vertical: linear-gradient(180deg, $color-normal, $color-blue-dark);
$gradient-grey-horizontal: linear-gradient(90deg, $color-grey, $color-grey-dark);

// Effects
$protrude: 2px 2px 9px darken($color-blue-dark, 11),
  -2px -2px 9px lighten($color-blue-dark, 14);
$sink: inset 3px 3px 8px darken($color-blue-dark, 6),
  inset -2px -2px 6px lighten($color-blue-dark, 10);

// State colors
$color-medium-blue: #4b4b5b;
$color-blue-light-secondary: #5d5e74;
$color-accent-coral: #fa737529;
$color-dark-blue: #131317;
$color-accent-hover: #ee918e;
$color-accent-active: #b35c5d;
$color-grey-medium: #bbbbbb;

$color-light-gray: #d4d4d4;