/* CSS Custom Properties - Variables */
:root {
	/* Colors */
	--color-primary: var(--color-black-100);
	--color-error: var(--color-red-500);

	/* Neutral colors */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-black-100: #0D0D0D;

	--color-red-500: #FF6A73;

  --color-gray-100: #F2F3F7;
	--color-gray-150: #E3E5EF;
	--color-gray-200: #D3D6E3;
	--color-gray-250: #B1B4C7;
	--color-gray-300: #9194A8;
	--color-gray-350: #7A7E91;
	--color-gray-400: #6B6E7D;
	--color-gray-500: #555869;
	--color-gray-600: #3C3F4D;
	--color-gray-700: #2E303D;
	--color-gray-800: #1F212B;
	--color-gray-900: #0E1017;

	/* Functional Colors */

	--color-purple: #6210CC;
	--color-deep-purple: #1F084C;
	--color-highlight: #9144F4;
	--color-peri: #9E9EFF;
	--color-purple-for-light: #7B39FE;
	--color-purple-for-dark: #8147F4;

	--color-accent-green: #62EEAB;
	--color-red: #ED6565;
	--color-blue: #7092FB;
	--color-light-violet: #E4C9FF;
	--color-light-peri: #CCCCFF;
	--color-light-blue: #C8D9FA;

	--color-grey-01: #F7F7F7;
	--color-grey-02: #F0F0F0;
	--color-grey-03: #E0E0E0;
	--color-grey-04: #CCCCCC;
	--color-grey-05: #A6A6A6;
	--color-grey-06: #757575;
	--color-grey-07: #424242;
}

/* Heading utilities */
h1, .style-h1 {
	color: var(--color-gray-900);
	font-size: 44px;
	font-weight: 600;
	line-height: 104%;
	letter-spacing: -0.88px;

	@media (min-width: 1024px) {
		font-size: 72px;
		line-height: 100%; /* 72px */
		letter-spacing: -1.44px;
	}
}

h2, .style-h2 {
	color: var(--color-gray-800);
	font-size: 36px;
	font-weight: 600;
	line-height: 108%;
	letter-spacing: -0.72px;

	@media (min-width: 1024px) {
		font-size: 48px;
		line-height: 106%; /* 50.88px */
		letter-spacing: -0.96px;
	}
}

h3, .style-h3 {
	color: var(--color-gray-700);
	font-family: 'Helvetica Now Text Medium', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 112%;
	letter-spacing: -0.56px;

	@media (min-width: 1024px) {
		font-size: 32px;
		letter-spacing: -0.64px;
	}
}

h4, .style-h4 {
	color: var(--color-gray-600);
	font-family: 'Helvetica Now Text Medium', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 116%;
	letter-spacing: -0.4px;

	@media (min-width: 1024px) {
		font-size: 24px;
		line-height: 118%; /* 28.32px */
		letter-spacing: -0.48px;
	}
}

/* Text utilities */
.text-b1.text-b1, .style-b1.style-b1 {
	color: var(--color-gray-500);
	font-size: 16px;
	font-weight: 400;
	line-height: 138%; /* 22.08px */
	letter-spacing: -0.32px;

	@media (min-width: 1024px) {
		font-size: 20px;
		line-height: 136%; /* 27.2px */
		letter-spacing: -0.4px;
	}
}

.text-b2.text-b2, .style-b2.style-b2 {
	color: var(--color-gray-500);
	font-size: 15px;
	font-weight: 400;
	line-height: 140%; /* 21px */
	letter-spacing: -0.3px;

	@media (min-width: 1024px) {
		font-size: 18px;
		line-height: 138%; /* 24.84px */
		letter-spacing: -0.36px;
	}
}

.text-b3.text-b3, .style-b3.style-b3 {
	color: var(--color-gray-400);
	font-size: 14px;
	font-weight: 400;
	line-height: 142%; /* 19.88px */
	letter-spacing: -0.28px;

	@media (min-width: 1024px) {
		font-size: 16px;
		line-height: 140%; /* 22.4px */
		letter-spacing: -0.32px;
	}
}

.text-c1.text-c1, .style-c1.style-c1 {
	color: var(--color-gray-350);
	font-size: 13px;
	font-weight: 400;
	line-height: 140%; /* 18.2px */
	letter-spacing: -0.26px;

	@media (min-width: 1024px) {
		font-size: 14px;
		line-height: 136%; /* 19.04px */
		letter-spacing: -0.28px;
	}
}

.text-c2.text-c2, .style-c2.style-c2 {
	color: var(--color-gray-300);
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 142%; /* 18.46px */
	letter-spacing: -0.26px;

	@media (min-width: 1024px) {
		font-size: 13px;
		line-height: 138%; /* 17.94px */
		letter-spacing: -0.26px;
	}
}

.text-c3.text-c3, .style-c3.style-c3 {
	color: var(--color-gray-300);
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	line-height: 144%; /* 15.84px */
	letter-spacing: -0.22px;

	@media (min-width: 1024px) {
		font-size: 12px;
		line-height: 140%; /* 16.8px */
		letter-spacing: -0.24px;
	}
}