:root {
--vuu-font-family: "Nunito Sans";
--vuu-heading1-fontSize: 60px;
--vuu-heading1-fontWeight: 300;
--vuu-heading1-lineHeight: 84px;
--vuu-heading2-fontSize: 46px;
--vuu-heading2-fontWeight: 300;
--vuu-heading3-fontSize: 40px;
--vuu-heading3-fontWeight: 300;
--vuu-heading3-lineHeight: 56px;

--vuu-heading5-fontSize: 30px;
--vuu-heading5-fontWeight: 300;
--vuu-heading5-lineHeight: 42px;


/* deviates from figma, needed for alignment, otw we need to use positioning */
--vuu-heading2-lineHeight: 50px;

--vuu-paragraph-small-fontSize: 20px;
--vuu-paragraph-small-fontWeight: 400;
--vuu-paragraph-small-lineHeight: 28px;

--vuu-paragraph-medium-fontSize: 24px;
--vuu-paragraph-medium-fontWeight: 400;
--vuu-paragraph-medium-lineHeight: 33.6px;

--vuu-paragraph-large-fontSize: 28px;
--vuu-paragraph-large-fontWeight: 400;
--vuu-paragraph-large-lineHeight: 44px;

--vuu-action-fontSize: 18px;
--vuu-action-fontWeight: 700;
--vuu-action-lineHeight: 24px;


--vuu-dark-bg-background1: #1D0142;
--vuu-dark-bg-background2: #2A015F;
--vuu-dark-background-bg3: rgba(29,0,65,.5); 
--vuu-dark-background-bg4: rgba(42,1,95,.5);
--vuu-accent1: #F37880;
--vuu-accent2:#6D18BD;
--vuu-dark-text-primary: #FFFFFF;
--vuu-dark-text-secondary: rgba(255,255,255.8);
--vuu-light-text-primary: #15171B;
--vuu-light-text-secondary: ##606477;
--vuu-light-icon: #777C94;

--vuu-dark-body-bg: black;
--vuu-desktop-width: 1440px;
--vuu-mobile-width: 100%;
--vuu-viewport-width: var(var(--vuu-desktop-width));

}