$gray-900: #1d1d1d;
$gray-800: #212121;
$gray-600: #707070;
$gray-300: #d6d6d6;
$gray-100: #f9f9f9;
$gray-50: #ffffff;

$teal-600: #6bc2bd;
$teal-500: #4edcca;
$teal-300: #caf4ef;

$blue-800: #484d6d;
$blue-500: #08b2e3;

$yellow-600: #e8d823;
$yellow-500: #ffff00;
$yellow-300: #ffffa4;

$main-text: $gray-800;
$main-background: $gray-50;
$inverse-text: $gray-50;

@mixin block-shadow {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

@mixin card-shadow($base-color: $gray-900) {
	box-shadow: 0.1rem 0.4rem 0.4rem #{transparentize($base-color, 0.9)},
		0.25rem 1rem 1rem #{transparentize($base-color, 0.9)};
}