// ============================================================================
/**
 * This file contains the internal and globally defined colors. Every color has
 * a unique and memorable name and should be defined with that name. This name
 * is not to be used outside of this file and is called an internal/private color
 * variable.
 *
 * The global colors are used within the different components and should
 * get a name that defines in what context they will be used. For example:
 * primary, secondary, tertiary, accent, focus, highlight, disabled, ... in order
 * for them to be reusable within multiple components.
 */

// ============================================================================
// :: Internal colors
// ============================================================================
// White
$white: #ffffff;

// Grey variants
$black: #1a1a1a;
$grey-95: #252525;
$grey-90: #313131;
$grey-85: #3c3c3c;
$grey-50: #8d8d8d;
$grey-15: #dddddd;
$grey-10: #e8e8e8;
$grey-5: #f4f4f4;

// Blue variants
$blue-dark: #037eb3; // same as blue, ok?
$blue: #037eb3;
$blue-65: #59c4e4;
$blue-25: #bfe8f5;
$blue-5: #f2fbfd;

// Red variants
$red: #e50000;
$red-65: #ee5959;
$red-25t: #f9bfbf;
$red-5: #fef2f2;

// Orange variants
$orange: #ad5c06;
$orange-1x-light: #fff6ec;

// Green variants
$green: #00833e;
$green-1x-light: #e9faf0;

// ============================================================================
// :: Contextual colors
// ============================================================================
// Primary
$primary-color-base: $blue;
$primary-color-1x-light: $blue-65;
$primary-color-2x-light: $blue-25;
$primary-color-3x-light: $blue-5;
$primary-color-dark: $blue-dark;

// Secondary
$secondary-color-base: $red;
$secondary-color-1x-light: $red-65;
$secondary-color-2x-light: $red-25t;
$secondary-color-3x-light: $red-5;

// Text colors
$text-color-base: $grey-95;
$text-color-medium: $grey-90;
$text-color-1x-light: $grey-85;
$text-color-2x-light: $grey-15;
$text-color-3x-light: $grey-10;
$text-color-4x-light: $grey-5;
$text-color-white: $white;
$text-color-black: $black;
$text-color-disabled: $grey-50;

// Background colors
$background-color-base: $grey-5;
$background-color-light: $grey-10;
$background-color-white: $white;
$background-color-black: $black;
$background-color-disabled: $grey-15;
$background-color-dark: $grey-95;

// Border colors
$border-color-base: $grey-50;
$border-color-1x-light: $grey-50;
$border-color-2x-light: $grey-50;
$border-color-blue: $blue-dark;

// Shadow colors
$shadow-color-base: rgba(26, 26, 26, 0.12);
$shadow-color-light: rgba(26, 26, 26, 0.04);

// UI colors
$ui-success: $green;
$ui-success-background: $green-1x-light;
$ui-warning: $orange;
$ui-warning-background: $orange-1x-light;
$ui-error: $red;
$ui-error-background: $red-5;
$ui-info: $grey-95;
$ui-info-background: $blue-5;