$fontSmallTitle: 'SackersGothic';
$fontRegular: 'SackersGothic';
$fontRegularItalic: 'SackersGothic';
$css-var-version: 1;

$menu-color: #000000;

$color-pink: #ed1846;
$color-purple: #3e0c3f; //#400b2b;
$color-purple-light: #5d1e50;

$color-salmon: #fab69c;
$color-salmon-dark: #e17348;
$color-salmon-light: #ffede6;
$color-salmon-lighter: #fef9f7;

$color-black: #000000;
$color-white: #ffffff;
$color-grey: #b2b2b2;
$color-grey-dark: #515151;
$color-dark-grey: #22001b;

$color-primary: #7c7c7c;
$color-primaryLight: #d9d9d9;
$color-primaryLighter: white;
$color-primaryDark: #111;
$color-headerIcons: #ababab;

$color-form-placeholder: #b2b2b2;
$color-form: #000000;

/* Margins & Paddings */
$marginLeftDesktop: 90px;
$marginLeftMobile: 30px;

$marginBottomMobile: 70px;
$marginBottomSmallMobile: 55px;

$menuHeightDesktop: 90px;
$menuHeightMobile: 60px;

$maxWidthDesktop: 1920px;

$duration-fast: 0.3s;
$duration: 0.6s;
$duration-slow: 0.8s;
$sineout: cubic-bezier(0.39, 0.575, 0.565, 1);

/*
@custom-media --desktop (min-width: 769px);
@custom-media --desktop-xl (min-width: 1281px);
@custom-media --desktop-1440 (min-width: 1440px);
@custom-media --desktop-1920 (min-width: 1920px);
@custom-media --desktop-2560 (min-width: 2560px);
@custom-media --tablet only screen and (max-width: 991px);
@custom-media --mobile only screen and (max-width: 767px);
@custom-media --small-mobile only screen and (max-device-height: 568px);
*/

:root {
	// Fonts
	--font-small-title: #{$fontSmallTitle};
	--font-regular: #{$fontRegular};
	--font-regular-italic: #{$fontRegularItalic};
	--font-body: 'Raleway', 'sans-serif';
	--font-heading: 'SackersGothic', sans-serif;
	--font-italic: 'MrsEavesItalic', serif;
	--font-cursive: 'Bodoni Moda', serif;

	// Menu
	--menu-color: #{$menu-color};

	// Brand Colors
	--color-pink: #{$color-pink};
	--color-purple: #{$color-purple};
	--color-purple-light: #{$color-purple-light};

	// Salmon Colors
	--color-salmon: #{$color-salmon};
	--color-salmon-dark: #{$color-salmon-dark};
	--color-salmon-light: #{$color-salmon-light};
	--color-salmon-lighter: #{$color-salmon-lighter};

	// Neutral Colors
	--color-black: #{$color-black};
	--color-white: #{$color-white};
	--color-grey: #{$color-grey};
	--color-grey-dark: #{$color-grey-dark};
	--color-dark-grey: #{$color-dark-grey};

	// Primary Colors
	--color-primary: #{$color-primary};
	--color-primary-light: #{$color-primaryLight};
	--color-primary-lighter: #{$color-primaryLighter};
	--color-primary-dark: #{$color-primaryDark};
	--color-header-icons: #{$color-headerIcons};

	// Form Colors
	--color-form-placeholder: #{$color-form-placeholder};
	--color-form: #{$color-form};

	// Spacing
	--margin-left-desktop: #{$marginLeftDesktop};
	--margin-left-mobile: #{$marginLeftMobile};
	--margin-bottom-mobile: #{$marginBottomMobile};
	--margin-bottom-small-mobile: #{$marginBottomSmallMobile};
	--menu-height-desktop: #{$menuHeightDesktop};
	--menu-height-mobile: #{$menuHeightMobile};
	--max-width-desktop: #{$maxWidthDesktop};
	--duration-fast: #{$duration-fast};
	--duration: #{$duration};
	--duration-slow: #{$duration-slow};
	--sineout: #{$sineout};
}
