// ============================================================================
// :: Colors
// ============================================================================
/**
 * 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
// ============================================================================
$green-2x-light:  #C3D478;
$green-1x-light: #BFDE57;
$green: #A9C23F;
$green-1x-medium: #69B029;
$green-2x-medium: #68B745;
$green-dark: #009A44;

$dark-brown: #968C83;

$black: #000000;
$white: #FFFFFF;

$grey-extra-dark: #575552;
$grey-dark: #938F88;
$grey-medium: #C5C3C0;
$grey-light: #EAE9E8;
$grey-extra-light: #F7F7F6;
$grey-lightest: #F1F1EF;

$blue: #6EAAE3;
$orange: #FFBD50;
$orange-dark: #D2611F;
$red: #FF6D6D;
$yellow: #FDD835;

// ============================================================================
// :: Global Colors
// ============================================================================
// primary
$primary-color: $green;

// secondaries
$secondary-color: $green-dark;

// text
$text-color-black: $black;
$text-color: $grey-extra-dark;
$text-color-white: $white;
$text-color-grey: $grey-dark;
$text-color-grey-medium: $grey-medium;
$text-color-grey-light: $grey-light;
$text-color-grey-extra-light: $grey-extra-light;
$text-color-grey-lightest: $grey-lightest;
$text-color-white-1x-light: rgba($text-color-white, 0.7);
$text-color-white-2x-light: rgba($text-color-white, 0.52);
$text-color-white-3x-light: rgba($text-color-white, 0.1);
$text-color-primary: $primary-color;
$text-color-secondary: $secondary-color;
$text-color-dark-brown: $dark-brown;
$text-color-green: $green;

// borders
$border-color: rgba($dark-brown, 0.1);
$border-color-grey-extra-light: $grey-extra-light;
$border-color-grey-light: $grey-light;
$border-color-grey: $grey-medium;
$border-color-primary: $primary-color;
$border-color-white: $white;

// background-colors
$background-color-white: $white;
$background-color-black: $black;
$background-color-dark-brown: $dark-brown;
$background-color-green-light: $green-2x-light;
$background-color-grey-extra-light: $grey-extra-light;
$background-color-grey-light: $grey-light;
$background-color-grey: $grey-medium;
$background-color-grey-dark: $grey-dark;
$background-color-grey-extra-dark: $grey-extra-dark;
$background-color-green-dark: $green-dark;
$background-color-green: $green;
$background-color-white-1x-light: rgba($background-color-white, 0.7);
$background-color-white-2x-light: rgba($background-color-white, 0.52);
$background-color-white-3x-light: rgba($background-color-white, 0.1);
$background-color-primary: $primary-color;
$background-color-secondary: $secondary-color;


//UI colors
$ui-color: $blue;
$ui-color-info: $yellow;
$ui-color-warning: $orange;
$ui-color-error: $red;

// ============================================================================
// :: Gradients
// ============================================================================
$gradient-primary: linear-gradient(135deg, $green-2x-light -50%, $green 100%);
$gradient-warning: linear-gradient(-219deg, $orange 0%, #E69133 100%);
$overlay-gradient: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
$gradient-app-cta: linear-gradient(135deg, $green-1x-light 40%, $green-1x-medium 100%);