:root {
	/* color variables */
	--strokes-medium: var(--grey-500);
	--text-primary: var(--primary-500);
	--icons-genesal-dark: var(--grey-700);
	--bg-fill-primary: var(--primary-500);
	--bg-surface-accent: var(--primary-500);
	--strokes-primary: var(--primary-500);
	--bg-surface-dark: var(--grey-900);
	--grey-200: #e1e1e1;
	--strokes-soft: var(--grey-200);
	--grey-500: #767676;
	--text-medium: var(--grey-500);
	--text-darker: var(--grey-900);
	--grey-600: #626262;
	--icons-genesal-white: var(--grey-50);
	--text-white: var(--grey-50);
	--grey-50: #fff;
	--bg-surface-primary: var(--grey-50);
	--primary-500: #cf0540;
	--icons-genesal-primary: var(--primary-500);
	--grey-900: #000;
	--icons-genesal-darker: var(--grey-900);
	--corporate-secondary: #151515;
	--grey-700: #434343;
	--text-dark: var(--grey-700);

	/* number variables */
	--section-section: 1440px;
	--padding-padding-80: var(--spacing-80);
	--spacing-72: 72px;
	--padding-padding-72: var(--spacing-72);
	--container-6-columns: 628px;
	--container-8-columns: 846px;
	--spacing-200: 16px;
	--gap-gap-200: var(--spacing-200);
	--size-4: 4px;
	--padding-padding-2: var(--size-4);
	--gap-gap-4: var(--spacing-4);
	--radius-radius-050: var(--spacing-050);
	--spacing-050: 4px;
	--gap-gap-050: var(--spacing-050);
	--spacing-300: 24px;
	--padding-padding-300: var(--spacing-300);
	--spacing-100: 8px;
	--padding-padding-100: var(--spacing-100);
	--gap-gap-0: var(--spacing-0);
	--spacing-0: 0px;
	--padding-padding-0: var(--spacing-0);
	--padding-padding-16: var(--spacing-16);
	--container-12-columns: 1280px;
	--padding-padding-8: var(--spacing-8);
	--spacing-112: 112px;
	--gap-gap-112: var(--spacing-112);
	--gap-gap-32: var(--spacing-32);
	--container-5-columns: 519px;
	--container-4-columns: 410px;
	--spacing-12: 12px;
	--gap-gap-12: var(--spacing-12);
	--spacing-56: 56px;
	--gap-gap-56: var(--spacing-56);
	--spacing-80: 80px;
	--gap-gap-80: var(--spacing-80);
	--spacing-40: 40px;
	--gap-gap-40: var(--spacing-40);
	--spacing-24: 24px;
	--gap-gap-24: var(--spacing-24);
	--gap-gap-8: var(--spacing-8);
	--spacing-16: 16px;
	--gap-gap-16: var(--spacing-16);
	--spacing-8: 8px;
	--corner-radius-corner-8: var(--spacing-8);
	--spacing-32: 32px;
	--padding-padding-32: var(--spacing-32);
	--spacing-4: 4px;
	--padding-padding-4: var(--spacing-4);
	--spacing-48: 48px;
	--gap-gap-48: var(--spacing-48);

	/* responsive margins / paddings */
	--margin-sm: 16px;
	--margin-md: 32px;
}

* {
	--min-screen-size: 430;
	--max-screen-size: 1440;
	--interpolate-diff: calc(var(--max-font-size) - var(--min-font-size));
	--interpolate: clamp(calc(var(--min-font-size) * 1px), calc((var(--min-font-size) * 1px) + var(--interpolate-diff) * ((100vw - calc(var(--min-screen-size) * 1px)) / (var(--max-screen-size) - var(--min-screen-size)))), calc(var(--max-font-size) * 1px));
}

html {
	height: 100%;
	font-size: 16px;
}



/* text utility classes */

.heading-lg {
	color: var(--text-white);
	--min-font-size: 23; --max-font-size: 39; font-size: var(--interpolate);
	font-style: normal;
	font-weight: 700;
	line-height: 1.128;
	letter-spacing: -0.5px;
}
.text-darker {
	color: var(--text-darker) !important;
}
.uppercase {
	text-transform: uppercase !important;
}

.body-body-sm-regular {
	color: var(--text-medium);
	font-size: 13px;
	font-family: 'Helvetica Neue';
	font-style: normal;
	font-weight: 400;
	line-height: 1.231;
	letter-spacing: 0.5px;
}

.buttons-button-md {
	color: var(--text-white);
	font-size: 15px;
	font-family: 'Helvetica Neue';
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0px;
}

.ui-caption-md {
	color: var(--text-white);
	font-size: 12px;
	font-family: 'Helvetica Neue';
	font-style: normal;
	font-weight: 500;
	line-height: 1.667;
	letter-spacing: 0px;
}

.body-body-xs-regular {
	color: var(--text-white);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.333;
	letter-spacing: 0.5px;
}

.heading-sm {
	color: rgba(0, 0, 0, 0.5);
	--min-font-size: 18; --max-font-size: 25; font-size: var(--interpolate);
	font-style: normal;
	font-weight: 500;
	line-height: 1.24;
	letter-spacing: -0.5px;
}

.heading-md {
	color: var(--text-darker);
	--min-font-size: 20; --max-font-size: 31; font-size: var(--interpolate);
	font-style: normal;
	font-weight: 500;
	line-height: 1.226;
	letter-spacing: -0.5px;
}

.body-body-md-regular {
	color: var(--text-darker);
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0px;
}

.ui-label-sm {
	color: var(--text-dark);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.667;
	letter-spacing: 0px;
}

.pretittle-pretittle {
	color: var(--text-white);
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.231;
	letter-spacing: 0.3px;
}

.subtittles-md {
	--min-font-size: 16; --max-font-size: 18; font-size: var(--interpolate);
	font-style: normal;
	font-weight: 500;
	line-height: 1.333;
	letter-spacing: -0.2px;
}

.sub-text-black {
	color: #000;
}

.sub-text {
	font-weight: 400;
}

.bold {
	font-weight: 700;
}



/* ui objects utility classes */

.btn {
	display: flex;
	background-color: var(--bg-surface-accent);
	padding: 13px 23px 13px 24px;
	border: 1px solid var(--strokes-primary);
	border-radius: 4px;
}



/* button hover utility classes */

.hover-bright:hover {
	filter: brightness(1.2);
}