// COLORS

// Basic
$color-black: hsl(210, 20%, 4%);
$color-white: hsl(186, 28%, 93%);

// Primary
$color-primary-light: #ec5b6c;
$color-primary-regular: #e7364b;
$color-primary-dark: #db1a30;

// Accent
$color-accent: hsl(35, 100%, 63%);

// Grey
$color-grey-light: hsl(210, 22%, 20%);
$color-grey-regular: #16283c;
$color-grey-dark: hsl(213, 22%, 10%);

// Special
$color-text-caption: $color-grey-light;

// Gradients
$color-gradient-regular: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark);
$color-gradient-radial: radial-gradient(circle, $color-primary-light, $color-primary-dark);

// FONTS
$font-size-large: 2.6rem;
$font-size-larger: 1.8rem;
$font-size-regular: 1.6rem;
$font-size-small: 1.4rem;

$font-family-regular: "Prompt", sans-serif;
$font-family-headings: "Hind", sans-serif;
$font-family-handwritten: "Cormorant Infant", cursive;

// SHADOWS
$shadow-grey: 0 4px 24px hsla(210, 48%, 11%, 0.3);
$shadow-grey-distracted: 0 8px 24px 8px hsla(210, 48%, 11%, 0.3);

$shadow-color: 0 4px 24px hsla(353, 79%, 48%, 0.3);
$shadow-color-distracted: 0 4px 24px 8px hsla(353, 79%, 48%, 0.3);

// $text-shadow-grey: 0px 2px 8px hsla(0, 0%, 0%, 25%), 0px 4px 18px hsla(0, 0%, 0%, 20%),
//   0px 9px 32px hsla(0, 0%, 0%, 20%);
$text-shadow-grey: $shadow-grey;

// $text-shadow-grey-distracted: 0px 2px 12px hsla(0, 0%, 0%, 25%), 0px 4px 24px hsla(0, 0%, 0%, 20%),
//   0px 9px 38px hsla(0, 0%, 0%, 20%);
$text-shadow-grey-distracted: $shadow-color-distracted;

// $text-shadow-color: 0px 2px 8px hsla(353, 79%, 56%, 25%), 0px 4px 18px hsla(353, 79%, 56%, 15%),
//   0px 9px 32px hsla(353, 79%, 56%, 15%);

$text-shadow-color: $shadow-color;

// $text-shadow-color-distracted: 0px 2px 12px hsla(353, 79%, 56%, 25%),
//   0px 4px 24px hsla(353, 79%, 56%, 15%), 0px 9px 38px hsla(353, 79%, 56%, 15%);
$text-shadow-color-distracted: $shadow-color-distracted;

// TRANSITIONS
$transition-regular: all 0.1s ease-out;
$transition-slow: all 1.5s ease-out;

// SPACING

$spacer: 1rem;

$spacings: (
	1: $spacer * 0.5,
	2: $spacer,
	3: $spacer * 1.6,
	4: $spacer * 3.2,
	5: $spacer * 4.8,
	6: $spacer * 6,
	7: $spacer * 8,
	8: $spacer * 10
);
