/************************************************************************************
VARIABLES
*************************************************************************************/
:root {
	--clr-primary-100: #ccccda;
	--clr-primary-100-low-opacity: #ccccda8c;
	--clr-primary-100-high-opacity: #ccccda4a;
	--clr-primary-200: #a7a6bc;
	--clr-primary-300: #84839d;
	--clr-primary-400: #61607d;
	--clr-primary-450: #403f5b;
	--clr-primary-500: #36354e;
	--clr-primary-600: #2c2c40;
	--clr-primary-700: #232233;
	--clr-primary-800: #191925;
	--clr-primary-900: #100f17;
	/* --clr-primary-100: #cdd9d9;
	--clr-primary-100-low-opacity: #cdd9d98c;
	--clr-primary-100-high-opacity: #cdd9d94a;
	--clr-primary-200: #a9bbbc;
	--clr-primary-300: #869c9d;
	--clr-primary-400: #647c7d;
	--clr-primary-450: #435b5c;
	--clr-primary-500: #394e4f;
	--clr-primary-600: #2e4041;
	--clr-primary-700: #243333;
	--clr-primary-800: #1a2525;
	--clr-primary-900: #101718; */
	--clr-secondary-100: #ffbfc2;
	--clr-secondary-100-low-opacity: #ffbfc28c;
	--clr-secondary-100-high-opacity: #ffbfc24a;
	--clr-secondary-200: #ff8f9a;
	--clr-secondary-300: #ff6077;
	--clr-secondary-400: #ff305a;
	--clr-secondary-450: #ee0141;
	--clr-secondary-500: #cd0036;
	--clr-secondary-600: #ac002b;
	--clr-secondary-700: #890021;
	--clr-secondary-800: #650017;
	--clr-secondary-900: #40000e;
	--clr-neutral-100: #ffffff;
	--clr-neutral-150: #f9f9f9;
	--clr-neutral-200: #f2f2f2;
	--clr-neutral-300: #e5e5e5;
	--clr-neutral-400: #d9d9d9;
	--clr-neutral-450: #cccccc;
	--clr-neutral-500: #a3a3a3;
	--clr-neutral-600: #7a7a7a;
	--clr-neutral-700: #525252;
	--clr-neutral-800: #292929;
	--clr-neutral-900: #000000;

	/* --ffamily-primary: 'Abel', sans-serif; */
	--ffamily-primary: 'Roboto', sans-serif;
	--ffamily-accent: 'Roboto', sans-serif;

	--fsize-xxs: 12px;
	--fsize-xs: 14px;
	--fsize-s: 16px;
	--fsize-base: 18px;
	--fsize-base-l: 19px;
	--fsize-m: 20px;
	--fsize-l: 22px;
	--fsize-xl: 24px;
	--fsize-xxl: 26px;
	--fsize-xxxl: 28px;
	--fsize-subheading: 30px;
	--fsize-subheading-xl: 32px;
	--fsize-heading: 35px;
	--fsize-heading-xl: 38px;
	--fsize-heading-xxl: 42px;
	--fsize-monster: 50px;
	--fsize-monster-xl: 54px;
	--fsize-monster-xxl: 56px;

	--line-height-xs: 1.1;
	--line-height-s: 1.3;
	--line-height-base: 1.5;
	--line-height-l: 1.7;
	--line-height-xl: 2;

	--letter-spacing-s: -0.25px;
	--letter-spacing-base: 0px;
	--letter-spacing-l: 0.25px;

	--fweight-xs: 100;
	--fweight-s: 300;
	--fweight-base: 400;
	--fweight-l: 500;
	--fweight-xl: 700;
	--fweight-xxl: 900;

	--border-radius-xs: 4px;
	--border-radius-s: 8px;
	--border-radius-m: 12px;
	--border-radius-l: 40px;

	--transition-all-1: all 1s ease-in-out;
	--transition-all-05: all 0.5s ease-in-out;
	--transition-all-025: all 0.25s ease-in-out;

	--gap-col: 22px;
	--col-container: 1240px;
}