/**
  * This is where we'll declare all of our colors and variables
  * I think it's a good idea if we don't just copy direct from Outro,
  * but rather we start clean with the freshest in mocks of new projects
  * so we don't end up with like 50 variations of each color when some
  * might only be used once.
*/

/*
 * Core Colors
 */
$color-blue: #0076FF;
$color-black: #14151A;
$color-dark-grey: #1F2025;
$color-lightest-grey: #F7F8FA;
$color-white: #FFFFFF;

/*
 * Extended Colors
 */
$color-grey: #878992;
$color-red: #D91434;
$color-pink: #FB1D50;
$color-mid-grey: #40454E;
$color-green: #50D0AC;
$color-light-grey: #E5E5E5;

/*
 * State Colors
 */
$color-blue-hover: #0C6EE0;
$color-blue-active: #1163C2;
$color-grey-hover: #F0F2F5;
$color-grey-active: #E3E5E8;
$color-white-hover: #F5F6F7;
$color-white-active: #EDEEF0;
$color-red-hover: #C41230;
$color-red-active: #AD102A;


/*
 * Gradients Colors
 */
$gradient-blue: linear-gradient(180deg, #4D9BF5 0%, #2974CA 100%);
$gradient-grey: linear-gradient(180deg, #FFFFFF 0%, #F3F3F3 100%);


/*
 * Font weights
 */
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;

/*
 * Font sizes
 */
$text-smallest: 14px;
$text-small: 16px;
$text-medium: 20px;
$text-large: 28px;
$text-largest: 48px;

/*
 * Border radii
 */
$border-radius-small: 2px;
$border-radius: 4px;
$border-radius-large: 18px;
$border-radius-circle: 50%;

/**
 * Base spacing
 */
$base-spacing: 4px;
$base-spacing-half: $base-spacing / 2;
$base-spacing-double: $base-spacing * 2;
$base-spacing-triple: $base-spacing * 3;
$base-spacing-quad: $base-spacing * 4;
$base-spacing-quin: $base-spacing * 5;
$base-spacing-sex: $base-spacing * 6;