// =============================================================================
// :: Colors
// =============================================================================
/**
 * Every color is defined as a HSL (HUE-STATURATION_LIGHTNESS) notation. Based
 * on the HUE and the LIGHTNESS we give the color a meaningfull and unique name.
 * These colors are not to be used outside of this file.
 *
 * The global colors are used within the different components and should
 * get a more reusable logical name.
 *
 * IMPORTANT TO NOTE: KEEP THIS FILE MANAGEABLE, CLEAN AND CONSISTENT!
 */

// =============================================================================
// :: Internal colors
// =============================================================================
// Black - white variants
$black: hsla(0, 0%, 0%, 1);
$white: hsla(0, 0%, 100%, 1);
$grey: hsla(247, 43%, 25%, 0.14);

// Pink - Green - Purple variants
$pink: hsla(331, 100%, 45%, 1);
$pink-dark: hsla(331, 100%, 39%, 1);
$green: hsla(87, 43%, 79%, 1);
$blue: hsla(2047, 68.8%, 12.5%, 0.94);
$purple: hsla(247, 43%, 25%, 1);
$purple-light-solid: hsla(235.7, 77.8%, 96.5%, 1);
$purple-lighter: hsla(247, 43%, 25%, 0.04);
$purple-light: hsla(247, 43%, 25%, 0.14);
$purple-medium: hsla(247, 43%, 25%, 0.6);

// =============================================================================
// :: Global Colors
// =============================================================================
// Primary colors
$primary-color: $pink;

// Secondary colors
$secondary-color-green: $green;
$secondary-color-purple: $purple;

// Text colors
$text-color-base: $purple;
$text-color-highlight: $pink;
$text-color-lighter: rgba($white, 0.5);
$text-color-light: $white;
$text-color-medium: $purple-light;
$text-color-dark: $purple-medium;

// Border colors
$border-color-base: $pink;
$border-color-light: $white;
$border-color-medium: $purple-light;
$border-color-dark: $purple;
$border-color-grey: $grey;

// Background colors
$background-color-white: $white;
$background-color-lighter: $purple-lighter;
$background-color-light: $purple-light;
$background-color-base: $white;
$background-color-medium: rgba($black, 0.05);
$background-color-pink: $pink;
$background-color-pink-dark: $pink-dark;
$background-color-purple: $purple;
$background-color-green: $green;
$background-color-blue: $blue;

// Box shadow colors
$box-shadow-color-light: rgba($black, 0.1);
$box-shadow-color-medium: rgba($black, 0.3);
$box-shadow-color-base: rgba($black, 0.5);
$box-shadow-color-light: rgba($black, 0.1);