:root {
--color-primary-25: 241, 249, 254;
--color-primary-50: 213, 243, 248;
--color-primary-100: 189, 229, 250;
--color-primary-200: 131, 208, 246;
--color-primary-300: 65, 184, 239;
--color-primary-400: 23, 150, 209;
--color-primary-500: 11, 128, 190;
--color-primary-600: 11, 102, 153;
--color-primary-700: 13, 86, 127;
--color-primary-800: 17, 72, 105;
--color-primary-900: 17, 31, 69;
--color-primary-950: 8, 15, 34;
--color-secondary-25: 239, 251, 252;
--color-secondary-50: 213, 243, 248;
--color-secondary-100: 177, 230, 240;
--color-secondary-200: 122, 211, 230;
--color-secondary-300: 52, 179, 209;
--color-secondary-400: 33, 154, 185;
--color-secondary-500: 30, 124, 156;
--color-secondary-600: 31, 100, 127;
--color-secondary-700: 34, 82, 104;
--color-secondary-800: 32, 70, 89;
--color-secondary-900: 16, 45, 60;
--color-secondary-950: 10, 30, 40;
--color-tertiary-25: 239, 247, 255;
--color-tertiary-50: 218, 235, 255;
--color-tertiary-100: 189, 222, 255;
--color-tertiary-200: 144, 201, 255;
--color-tertiary-300: 91, 172, 255;
--color-tertiary-400: 53, 137, 252;
--color-tertiary-500: 31, 105, 241;
--color-tertiary-600: 23, 83, 222;
--color-tertiary-700: 26, 68, 179;
--color-tertiary-800: 27, 61, 141;
--color-tertiary-900: 17, 31, 69;
--color-tertiary-950: 10, 18, 41;
--color-body-25: 250, 250, 250;
--color-body-50: 245, 245, 245;
--color-body-100: 230, 230, 230;
--color-body-200: 211, 211, 211;
--color-body-300: 181, 181, 181;
--color-body-400: 114, 114, 114;
--color-body-500: 83, 83, 83;
--color-body-600: 64, 64, 64;
--color-body-700: 39, 39, 39;
--color-body-800: 26, 26, 26;
--color-body-900: 11, 11, 11;
--color-body-950: 0, 0, 0;
--color-gradient-1: linear-gradient(90deg, rgba(17, 31, 69, 1) 15%, rgba(23, 150, 209, 1) 60%, rgba(52, 179, 209, 1) 100%);
--font-family--display:'Din', sans-serif;
--font-family--body:'Aptos', sans-serif;
--typography-text-xs-font-size: 14px; 
 --typography-text-xs-line-height: 18px; 
 --typography-text-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xs-font-size: calc(14px * 1.2);
}
&[data-font-size='3']{
--typography-text-xs-font-size: calc(14px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xs-font-size: calc(14px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xs-font-size: calc(14px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xs-font-size: calc(14px * 2); 
}
&[data-line-height='2']{
--typography-text-xs-line-height: calc(18px * 1.2);
}
&[data-line-height='3']{
--typography-text-xs-line-height: calc(18px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xs-line-height: calc(18px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xs-line-height: calc(18px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xs-line-height: calc(18px * 2); 
}
}

--typography-text-sm-font-size: 16px; 
 --typography-text-sm-line-height: 20px; 
 --typography-text-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-sm-font-size: calc(16px * 1.2);
}
&[data-font-size='3']{
--typography-text-sm-font-size: calc(16px * 1.4); 
}
&[data-font-size='4']{
--typography-text-sm-font-size: calc(16px * 1.6); 
}
&[data-font-size='5']{
--typography-text-sm-font-size: calc(16px * 1.8); 
}
&[data-font-size='6']{
--typography-text-sm-font-size: calc(16px * 2); 
}
&[data-line-height='2']{
--typography-text-sm-line-height: calc(20px * 1.2);
}
&[data-line-height='3']{
--typography-text-sm-line-height: calc(20px * 1.4); 
}
&[data-line-height='4']{
--typography-text-sm-line-height: calc(20px * 1.6); 
}
&[data-line-height='5']{
--typography-text-sm-line-height: calc(20px * 1.8); 
}
&[data-line-height='6']{
--typography-text-sm-line-height: calc(20px * 2); 
}
}

--typography-text-md-font-size: 18px; 
 --typography-text-md-line-height: 22px; 
 --typography-text-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-md-font-size: calc(18px * 1.2);
}
&[data-font-size='3']{
--typography-text-md-font-size: calc(18px * 1.4); 
}
&[data-font-size='4']{
--typography-text-md-font-size: calc(18px * 1.6); 
}
&[data-font-size='5']{
--typography-text-md-font-size: calc(18px * 1.8); 
}
&[data-font-size='6']{
--typography-text-md-font-size: calc(18px * 2); 
}
&[data-line-height='2']{
--typography-text-md-line-height: calc(22px * 1.2);
}
&[data-line-height='3']{
--typography-text-md-line-height: calc(22px * 1.4); 
}
&[data-line-height='4']{
--typography-text-md-line-height: calc(22px * 1.6); 
}
&[data-line-height='5']{
--typography-text-md-line-height: calc(22px * 1.8); 
}
&[data-line-height='6']{
--typography-text-md-line-height: calc(22px * 2); 
}
}

--typography-text-lg-font-size: 20px; 
 --typography-text-lg-line-height: 24px; 
 --typography-text-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-lg-font-size: calc(20px * 1.2);
}
&[data-font-size='3']{
--typography-text-lg-font-size: calc(20px * 1.4); 
}
&[data-font-size='4']{
--typography-text-lg-font-size: calc(20px * 1.6); 
}
&[data-font-size='5']{
--typography-text-lg-font-size: calc(20px * 1.8); 
}
&[data-font-size='6']{
--typography-text-lg-font-size: calc(20px * 2); 
}
&[data-line-height='2']{
--typography-text-lg-line-height: calc(24px * 1.2);
}
&[data-line-height='3']{
--typography-text-lg-line-height: calc(24px * 1.4); 
}
&[data-line-height='4']{
--typography-text-lg-line-height: calc(24px * 1.6); 
}
&[data-line-height='5']{
--typography-text-lg-line-height: calc(24px * 1.8); 
}
&[data-line-height='6']{
--typography-text-lg-line-height: calc(24px * 2); 
}
}

--typography-text-xl-font-size: 24px; 
 --typography-text-xl-line-height: 28px; 
 --typography-text-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xl-font-size: calc(24px * 1.2);
}
&[data-font-size='3']{
--typography-text-xl-font-size: calc(24px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xl-font-size: calc(24px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xl-font-size: calc(24px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xl-font-size: calc(24px * 2); 
}
&[data-line-height='2']{
--typography-text-xl-line-height: calc(28px * 1.2);
}
&[data-line-height='3']{
--typography-text-xl-line-height: calc(28px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xl-line-height: calc(28px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xl-line-height: calc(28px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xl-line-height: calc(28px * 2); 
}
}

--typography-display-xs-font-size: 20px; 
 --typography-display-xs-line-height: 20px; 
 --typography-display-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xs-font-size: calc(20px * 1.2);
}
&[data-font-size='3']{
--typography-display-xs-font-size: calc(20px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xs-font-size: calc(20px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xs-font-size: calc(20px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xs-font-size: calc(20px * 2); 
}
&[data-line-height='2']{
--typography-display-xs-line-height: calc(20px * 1.2);
}
&[data-line-height='3']{
--typography-display-xs-line-height: calc(20px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xs-line-height: calc(20px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xs-line-height: calc(20px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xs-line-height: calc(20px * 2); 
}
}

--typography-display-sm-font-size: 24px; 
 --typography-display-sm-line-height: 26px; 
 --typography-display-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-sm-font-size: calc(24px * 1.2);
}
&[data-font-size='3']{
--typography-display-sm-font-size: calc(24px * 1.4); 
}
&[data-font-size='4']{
--typography-display-sm-font-size: calc(24px * 1.6); 
}
&[data-font-size='5']{
--typography-display-sm-font-size: calc(24px * 1.8); 
}
&[data-font-size='6']{
--typography-display-sm-font-size: calc(24px * 2); 
}
&[data-line-height='2']{
--typography-display-sm-line-height: calc(26px * 1.2);
}
&[data-line-height='3']{
--typography-display-sm-line-height: calc(26px * 1.4); 
}
&[data-line-height='4']{
--typography-display-sm-line-height: calc(26px * 1.6); 
}
&[data-line-height='5']{
--typography-display-sm-line-height: calc(26px * 1.8); 
}
&[data-line-height='6']{
--typography-display-sm-line-height: calc(26px * 2); 
}
}

--typography-display-md-font-size: 36px; 
 --typography-display-md-line-height: 40px; 
 --typography-display-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-md-font-size: calc(36px * 1.2);
}
&[data-font-size='3']{
--typography-display-md-font-size: calc(36px * 1.4); 
}
&[data-font-size='4']{
--typography-display-md-font-size: calc(36px * 1.6); 
}
&[data-font-size='5']{
--typography-display-md-font-size: calc(36px * 1.8); 
}
&[data-font-size='6']{
--typography-display-md-font-size: calc(36px * 2); 
}
&[data-line-height='2']{
--typography-display-md-line-height: calc(40px * 1.2);
}
&[data-line-height='3']{
--typography-display-md-line-height: calc(40px * 1.4); 
}
&[data-line-height='4']{
--typography-display-md-line-height: calc(40px * 1.6); 
}
&[data-line-height='5']{
--typography-display-md-line-height: calc(40px * 1.8); 
}
&[data-line-height='6']{
--typography-display-md-line-height: calc(40px * 2); 
}
}

--typography-display-lg-font-size: 48px; 
 --typography-display-lg-line-height: 52px; 
 --typography-display-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-lg-font-size: calc(48px * 1.2);
}
&[data-font-size='3']{
--typography-display-lg-font-size: calc(48px * 1.4); 
}
&[data-font-size='4']{
--typography-display-lg-font-size: calc(48px * 1.6); 
}
&[data-font-size='5']{
--typography-display-lg-font-size: calc(48px * 1.8); 
}
&[data-font-size='6']{
--typography-display-lg-font-size: calc(48px * 2); 
}
&[data-line-height='2']{
--typography-display-lg-line-height: calc(52px * 1.2);
}
&[data-line-height='3']{
--typography-display-lg-line-height: calc(52px * 1.4); 
}
&[data-line-height='4']{
--typography-display-lg-line-height: calc(52px * 1.6); 
}
&[data-line-height='5']{
--typography-display-lg-line-height: calc(52px * 1.8); 
}
&[data-line-height='6']{
--typography-display-lg-line-height: calc(52px * 2); 
}
}

--typography-display-xl-font-size: 60px; 
 --typography-display-xl-line-height: 64px; 
 --typography-display-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xl-font-size: calc(60px * 1.2);
}
&[data-font-size='3']{
--typography-display-xl-font-size: calc(60px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xl-font-size: calc(60px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xl-font-size: calc(60px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xl-font-size: calc(60px * 2); 
}
&[data-line-height='2']{
--typography-display-xl-line-height: calc(64px * 1.2);
}
&[data-line-height='3']{
--typography-display-xl-line-height: calc(64px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xl-line-height: calc(64px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xl-line-height: calc(64px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xl-line-height: calc(64px * 2); 
}
}

--typography-display-2xl-font-size: 72px; 
 --typography-display-2xl-line-height: 72px; 
 --typography-display-2xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-2xl-font-size: calc(72px * 1.2);
}
&[data-font-size='3']{
--typography-display-2xl-font-size: calc(72px * 1.4); 
}
&[data-font-size='4']{
--typography-display-2xl-font-size: calc(72px * 1.6); 
}
&[data-font-size='5']{
--typography-display-2xl-font-size: calc(72px * 1.8); 
}
&[data-font-size='6']{
--typography-display-2xl-font-size: calc(72px * 2); 
}
&[data-line-height='2']{
--typography-display-2xl-line-height: calc(72px * 1.2);
}
&[data-line-height='3']{
--typography-display-2xl-line-height: calc(72px * 1.4); 
}
&[data-line-height='4']{
--typography-display-2xl-line-height: calc(72px * 1.6); 
}
&[data-line-height='5']{
--typography-display-2xl-line-height: calc(72px * 1.8); 
}
&[data-line-height='6']{
--typography-display-2xl-line-height: calc(72px * 2); 
}
}

--shadow-xs: 0px 1px 2px 0px rgba(var(--color-body-900), 0.05);
--shadow-sm: 0px 1px 2px 0px rgba(var(--color-body-900), 0.06), 0px 1px 3px 0px rgba(var(--color-body-900), 0.1);
--shadow-md: 0px 2px 4px -2px rgba(var(--color-body-900), 0.06), 0px 4px 8px -2px rgba(var(--color-body-900), 0.1);
--shadow-lg: 0px 4px 6px -2px rgba(var(--color-body-900), 0.03), 0px 12px 16px -4px rgba(var(--color-body-900), 0.08);
--shadow-xl: 0px 8px 8px -4px rgba(var(--color-body-900), 0.03), 0px 20px 24px -4px rgba(var(--color-body-900), 0.08);
--shadow-2xl: 0px 24px 48px -12px rgba(var(--color-body-900), 0.12);
--button-md--primary-pt: var(--spacing-xl); 
--button-md--primary-pr: var(--spacing-4xl); 
--button-md--primary-pb: var(--spacing-xl); 
--button-md--primary-pl: var(--spacing-4xl); 
--button-md--primary-gap: var(--spacing-md); 
--button-md--primary-border: 1px; 
--button-md--primary-rounded: var(--radius-none); 
--button-md--primary-font-family: var(--font-family--body); 
--button-md--primary-font-weight: 400; 
--button-md--primary-typography-fz: var(--typography-text-md-font-size); 
--button-md--primary-typography-lh: var(--typography-text-md-line-height); 
--button-md--primary-typography-ls: var(--typography-text-md-letter-spacing); 

--button-sm--primary-pt: var(--spacing-xl); 
--button-sm--primary-pr: var(--spacing-2xl); 
--button-sm--primary-pb: var(--spacing-xl); 
--button-sm--primary-pl: var(--spacing-2xl); 
--button-sm--primary-gap: var(--spacing-md); 
--button-sm--primary-border: 1px; 
--button-sm--primary-rounded: var(--radius-none); 
--button-sm--primary-font-family: var(--font-family--body); 
--button-sm--primary-font-weight: 400; 
--button-sm--primary-typography-fz: var(--typography-text-md-font-size); 
--button-sm--primary-typography-lh: var(--typography-text-md-line-height); 
--button-sm--primary-typography-ls: var(--typography-text-md-letter-spacing); 

--button-lg--primary-pt: var(--spacing-2xl); 
--button-lg--primary-pr: var(--spacing-6xl); 
--button-lg--primary-pb: var(--spacing-2xl); 
--button-lg--primary-pl: var(--spacing-6xl); 
--button-lg--primary-gap: var(--spacing-lg); 
--button-lg--primary-border: 1px; 
--button-lg--primary-rounded: var(--radius-none); 
--button-lg--primary-font-family: var(--font-family--body); 
--button-lg--primary-font-weight: 400; 
--button-lg--primary-typography-fz: var(--typography-text-lg-font-size); 
--button-lg--primary-typography-lh: var(--typography-text-lg-line-height); 
--button-lg--primary-typography-ls: var(--typography-text-lg-letter-spacing); 

--button-sm--link-pt: var(--spacing-xl); 
--button-sm--link-pr: var(--spacing-none); 
--button-sm--link-pb: var(--spacing-xl); 
--button-sm--link-pl: var(--spacing-2xl); 
--button-sm--link-gap: var(--spacing-md); 
--button-sm--link-border: 0px; 
--button-sm--link-rounded: var(--radius-none); 
--button-sm--link-font-family: var(--font-family--body); 
--button-sm--link-font-weight: 400; 
--button-sm--link-typography-fz: var(--typography-text-md-font-size); 
--button-sm--link-typography-lh: var(--typography-text-md-line-height); 
--button-sm--link-typography-ls: var(--typography-text-md-letter-spacing); 

--button-md--link-pt: var(--spacing-xl); 
--button-md--link-pr: var(--spacing-4xl); 
--button-md--link-pb: var(--spacing-xl); 
--button-md--link-pl: var(--spacing-4xl); 
--button-md--link-gap: var(--spacing-md); 
--button-md--link-border: 0px; 
--button-md--link-rounded: var(--radius-none); 
--button-md--link-font-family: var(--font-family--body); 
--button-md--link-font-weight: 400; 
--button-md--link-typography-fz: var(--typography-text-md-font-size); 
--button-md--link-typography-lh: var(--typography-text-md-line-height); 
--button-md--link-typography-ls: var(--typography-text-md-letter-spacing); 

--button-lg--link-pt: var(--spacing-2xl); 
--button-lg--link-pr: var(--spacing-6xl); 
--button-lg--link-pb: var(--spacing-2xl); 
--button-lg--link-pl: var(--spacing-6xl); 
--button-lg--link-gap: var(--spacing-lg); 
--button-lg--link-border: 0px; 
--button-lg--link-rounded: var(--radius-none); 
--button-lg--link-font-family: var(--font-family--body); 
--button-lg--link-font-weight: 400; 
--button-lg--link-typography-fz: var(--typography-text-lg-font-size); 
--button-lg--link-typography-lh: var(--typography-text-lg-line-height); 
--button-lg--link-typography-ls: var(--typography-text-lg-letter-spacing); 

--badge-sm--color-pt: var(--spacing-md); 
--badge-sm--color-pr: var(--spacing-lg); 
--badge-sm--color-pb: var(--spacing-md); 
--badge-sm--color-pl: var(--spacing-lg); 
--badge-sm--color-gap: var(--spacing-sm); 
--badge-sm--color-border: 1px; 
--badge-sm--color-rounded: var(--radius-4xl); 
--badge-sm--color-font-family: var(--font-family--body); 
--badge-sm--color-font-weight: 600; 
--badge-sm--color-typography-fz: var(--typography-text-xs-font-size); 
--badge-sm--color-typography-lh: var(--typography-text-xs-line-height); 
--badge-sm--color-typography-ls: var(--typography-text-xs-letter-spacing); 

--badge-md--color-pt: var(--spacing-md); 
--badge-md--color-pr: var(--spacing-lg); 
--badge-md--color-pb: var(--spacing-md); 
--badge-md--color-pl: var(--spacing-lg); 
--badge-md--color-gap: var(--spacing-sm); 
--badge-md--color-border: 1px; 
--badge-md--color-rounded: var(--radius-4xl); 
--badge-md--color-font-family: var(--font-family--body); 
--badge-md--color-font-weight: 700; 
--badge-md--color-typography-fz: var(--typography-text-sm-font-size); 
--badge-md--color-typography-lh: var(--typography-text-sm-line-height); 
--badge-md--color-typography-ls: var(--typography-text-sm-letter-spacing); 

--badge-lg--color-pt: var(--spacing-xl); 
--badge-lg--color-pr: var(--spacing-4xl); 
--badge-lg--color-pb: var(--spacing-xl); 
--badge-lg--color-pl: var(--spacing-4xl); 
--badge-lg--color-gap: var(--spacing-lg); 
--badge-lg--color-border: 0px; 
--badge-lg--color-rounded: var(--radius-none); 
--badge-lg--color-font-family: var(--font-family--display); 
--badge-lg--color-font-weight: 700; 
--badge-lg--color-typography-fz: var(--typography-display-xl-font-size); 
--badge-lg--color-typography-lh: var(--typography-display-xl-line-height); 
--badge-lg--color-typography-ls: var(--typography-display-xl-letter-spacing); 

}
@media screen and (max-width: 1280px) and (min-width: 745px) {
:root {
--typography-text-xs-font-size: 12px; 
 --typography-text-xs-line-height: 16px; 
 --typography-text-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xs-font-size: calc(12px * 1.2);
}
&[data-font-size='3']{
--typography-text-xs-font-size: calc(12px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xs-font-size: calc(12px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xs-font-size: calc(12px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xs-font-size: calc(12px * 2); 
}
&[data-line-height='2']{
--typography-text-xs-line-height: calc(16px * 1.2);
}
&[data-line-height='3']{
--typography-text-xs-line-height: calc(16px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xs-line-height: calc(16px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xs-line-height: calc(16px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xs-line-height: calc(16px * 2); 
}
}

--typography-text-sm-font-size: 14px; 
 --typography-text-sm-line-height: 18px; 
 --typography-text-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-sm-font-size: calc(14px * 1.2);
}
&[data-font-size='3']{
--typography-text-sm-font-size: calc(14px * 1.4); 
}
&[data-font-size='4']{
--typography-text-sm-font-size: calc(14px * 1.6); 
}
&[data-font-size='5']{
--typography-text-sm-font-size: calc(14px * 1.8); 
}
&[data-font-size='6']{
--typography-text-sm-font-size: calc(14px * 2); 
}
&[data-line-height='2']{
--typography-text-sm-line-height: calc(18px * 1.2);
}
&[data-line-height='3']{
--typography-text-sm-line-height: calc(18px * 1.4); 
}
&[data-line-height='4']{
--typography-text-sm-line-height: calc(18px * 1.6); 
}
&[data-line-height='5']{
--typography-text-sm-line-height: calc(18px * 1.8); 
}
&[data-line-height='6']{
--typography-text-sm-line-height: calc(18px * 2); 
}
}

--typography-text-md-font-size: 16px; 
 --typography-text-md-line-height: 20px; 
 --typography-text-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-md-font-size: calc(16px * 1.2);
}
&[data-font-size='3']{
--typography-text-md-font-size: calc(16px * 1.4); 
}
&[data-font-size='4']{
--typography-text-md-font-size: calc(16px * 1.6); 
}
&[data-font-size='5']{
--typography-text-md-font-size: calc(16px * 1.8); 
}
&[data-font-size='6']{
--typography-text-md-font-size: calc(16px * 2); 
}
&[data-line-height='2']{
--typography-text-md-line-height: calc(20px * 1.2);
}
&[data-line-height='3']{
--typography-text-md-line-height: calc(20px * 1.4); 
}
&[data-line-height='4']{
--typography-text-md-line-height: calc(20px * 1.6); 
}
&[data-line-height='5']{
--typography-text-md-line-height: calc(20px * 1.8); 
}
&[data-line-height='6']{
--typography-text-md-line-height: calc(20px * 2); 
}
}

--typography-text-lg-font-size: 18px; 
 --typography-text-lg-line-height: 22px; 
 --typography-text-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-lg-font-size: calc(18px * 1.2);
}
&[data-font-size='3']{
--typography-text-lg-font-size: calc(18px * 1.4); 
}
&[data-font-size='4']{
--typography-text-lg-font-size: calc(18px * 1.6); 
}
&[data-font-size='5']{
--typography-text-lg-font-size: calc(18px * 1.8); 
}
&[data-font-size='6']{
--typography-text-lg-font-size: calc(18px * 2); 
}
&[data-line-height='2']{
--typography-text-lg-line-height: calc(22px * 1.2);
}
&[data-line-height='3']{
--typography-text-lg-line-height: calc(22px * 1.4); 
}
&[data-line-height='4']{
--typography-text-lg-line-height: calc(22px * 1.6); 
}
&[data-line-height='5']{
--typography-text-lg-line-height: calc(22px * 1.8); 
}
&[data-line-height='6']{
--typography-text-lg-line-height: calc(22px * 2); 
}
}

--typography-text-xl-font-size: 20px; 
 --typography-text-xl-line-height: 24px; 
 --typography-text-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xl-font-size: calc(20px * 1.2);
}
&[data-font-size='3']{
--typography-text-xl-font-size: calc(20px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xl-font-size: calc(20px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xl-font-size: calc(20px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xl-font-size: calc(20px * 2); 
}
&[data-line-height='2']{
--typography-text-xl-line-height: calc(24px * 1.2);
}
&[data-line-height='3']{
--typography-text-xl-line-height: calc(24px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xl-line-height: calc(24px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xl-line-height: calc(24px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xl-line-height: calc(24px * 2); 
}
}

--typography-display-xs-font-size: 18px; 
 --typography-display-xs-line-height: 22px; 
 --typography-display-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xs-font-size: calc(18px * 1.2);
}
&[data-font-size='3']{
--typography-display-xs-font-size: calc(18px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xs-font-size: calc(18px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xs-font-size: calc(18px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xs-font-size: calc(18px * 2); 
}
&[data-line-height='2']{
--typography-display-xs-line-height: calc(22px * 1.2);
}
&[data-line-height='3']{
--typography-display-xs-line-height: calc(22px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xs-line-height: calc(22px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xs-line-height: calc(22px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xs-line-height: calc(22px * 2); 
}
}

--typography-display-sm-font-size: 20px; 
 --typography-display-sm-line-height: 24px; 
 --typography-display-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-sm-font-size: calc(20px * 1.2);
}
&[data-font-size='3']{
--typography-display-sm-font-size: calc(20px * 1.4); 
}
&[data-font-size='4']{
--typography-display-sm-font-size: calc(20px * 1.6); 
}
&[data-font-size='5']{
--typography-display-sm-font-size: calc(20px * 1.8); 
}
&[data-font-size='6']{
--typography-display-sm-font-size: calc(20px * 2); 
}
&[data-line-height='2']{
--typography-display-sm-line-height: calc(24px * 1.2);
}
&[data-line-height='3']{
--typography-display-sm-line-height: calc(24px * 1.4); 
}
&[data-line-height='4']{
--typography-display-sm-line-height: calc(24px * 1.6); 
}
&[data-line-height='5']{
--typography-display-sm-line-height: calc(24px * 1.8); 
}
&[data-line-height='6']{
--typography-display-sm-line-height: calc(24px * 2); 
}
}

--typography-display-md-font-size: 24px; 
 --typography-display-md-line-height: 26px; 
 --typography-display-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-md-font-size: calc(24px * 1.2);
}
&[data-font-size='3']{
--typography-display-md-font-size: calc(24px * 1.4); 
}
&[data-font-size='4']{
--typography-display-md-font-size: calc(24px * 1.6); 
}
&[data-font-size='5']{
--typography-display-md-font-size: calc(24px * 1.8); 
}
&[data-font-size='6']{
--typography-display-md-font-size: calc(24px * 2); 
}
&[data-line-height='2']{
--typography-display-md-line-height: calc(26px * 1.2);
}
&[data-line-height='3']{
--typography-display-md-line-height: calc(26px * 1.4); 
}
&[data-line-height='4']{
--typography-display-md-line-height: calc(26px * 1.6); 
}
&[data-line-height='5']{
--typography-display-md-line-height: calc(26px * 1.8); 
}
&[data-line-height='6']{
--typography-display-md-line-height: calc(26px * 2); 
}
}

--typography-display-lg-font-size: 36px; 
 --typography-display-lg-line-height: 40px; 
 --typography-display-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-lg-font-size: calc(36px * 1.2);
}
&[data-font-size='3']{
--typography-display-lg-font-size: calc(36px * 1.4); 
}
&[data-font-size='4']{
--typography-display-lg-font-size: calc(36px * 1.6); 
}
&[data-font-size='5']{
--typography-display-lg-font-size: calc(36px * 1.8); 
}
&[data-font-size='6']{
--typography-display-lg-font-size: calc(36px * 2); 
}
&[data-line-height='2']{
--typography-display-lg-line-height: calc(40px * 1.2);
}
&[data-line-height='3']{
--typography-display-lg-line-height: calc(40px * 1.4); 
}
&[data-line-height='4']{
--typography-display-lg-line-height: calc(40px * 1.6); 
}
&[data-line-height='5']{
--typography-display-lg-line-height: calc(40px * 1.8); 
}
&[data-line-height='6']{
--typography-display-lg-line-height: calc(40px * 2); 
}
}

--typography-display-xl-font-size: 48px; 
 --typography-display-xl-line-height: 52px; 
 --typography-display-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xl-font-size: calc(48px * 1.2);
}
&[data-font-size='3']{
--typography-display-xl-font-size: calc(48px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xl-font-size: calc(48px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xl-font-size: calc(48px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xl-font-size: calc(48px * 2); 
}
&[data-line-height='2']{
--typography-display-xl-line-height: calc(52px * 1.2);
}
&[data-line-height='3']{
--typography-display-xl-line-height: calc(52px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xl-line-height: calc(52px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xl-line-height: calc(52px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xl-line-height: calc(52px * 2); 
}
}

--typography-display-2xl-font-size: 60px; 
 --typography-display-2xl-line-height: 64px; 
 --typography-display-2xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-2xl-font-size: calc(60px * 1.2);
}
&[data-font-size='3']{
--typography-display-2xl-font-size: calc(60px * 1.4); 
}
&[data-font-size='4']{
--typography-display-2xl-font-size: calc(60px * 1.6); 
}
&[data-font-size='5']{
--typography-display-2xl-font-size: calc(60px * 1.8); 
}
&[data-font-size='6']{
--typography-display-2xl-font-size: calc(60px * 2); 
}
&[data-line-height='2']{
--typography-display-2xl-line-height: calc(64px * 1.2);
}
&[data-line-height='3']{
--typography-display-2xl-line-height: calc(64px * 1.4); 
}
&[data-line-height='4']{
--typography-display-2xl-line-height: calc(64px * 1.6); 
}
&[data-line-height='5']{
--typography-display-2xl-line-height: calc(64px * 1.8); 
}
&[data-line-height='6']{
--typography-display-2xl-line-height: calc(64px * 2); 
}
}

}
}
@media screen and (max-width: 744px) {
:root {
--typography-text-xs-font-size: 11px; 
 --typography-text-xs-line-height: 14px; 
 --typography-text-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xs-font-size: calc(11px * 1.2);
}
&[data-font-size='3']{
--typography-text-xs-font-size: calc(11px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xs-font-size: calc(11px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xs-font-size: calc(11px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xs-font-size: calc(11px * 2); 
}
&[data-line-height='2']{
--typography-text-xs-line-height: calc(14px * 1.2);
}
&[data-line-height='3']{
--typography-text-xs-line-height: calc(14px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xs-line-height: calc(14px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xs-line-height: calc(14px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xs-line-height: calc(14px * 2); 
}
}

--typography-text-sm-font-size: 12px; 
 --typography-text-sm-line-height: 16px; 
 --typography-text-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-sm-font-size: calc(12px * 1.2);
}
&[data-font-size='3']{
--typography-text-sm-font-size: calc(12px * 1.4); 
}
&[data-font-size='4']{
--typography-text-sm-font-size: calc(12px * 1.6); 
}
&[data-font-size='5']{
--typography-text-sm-font-size: calc(12px * 1.8); 
}
&[data-font-size='6']{
--typography-text-sm-font-size: calc(12px * 2); 
}
&[data-line-height='2']{
--typography-text-sm-line-height: calc(16px * 1.2);
}
&[data-line-height='3']{
--typography-text-sm-line-height: calc(16px * 1.4); 
}
&[data-line-height='4']{
--typography-text-sm-line-height: calc(16px * 1.6); 
}
&[data-line-height='5']{
--typography-text-sm-line-height: calc(16px * 1.8); 
}
&[data-line-height='6']{
--typography-text-sm-line-height: calc(16px * 2); 
}
}

--typography-text-md-font-size: 14px; 
 --typography-text-md-line-height: 18px; 
 --typography-text-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-md-font-size: calc(14px * 1.2);
}
&[data-font-size='3']{
--typography-text-md-font-size: calc(14px * 1.4); 
}
&[data-font-size='4']{
--typography-text-md-font-size: calc(14px * 1.6); 
}
&[data-font-size='5']{
--typography-text-md-font-size: calc(14px * 1.8); 
}
&[data-font-size='6']{
--typography-text-md-font-size: calc(14px * 2); 
}
&[data-line-height='2']{
--typography-text-md-line-height: calc(18px * 1.2);
}
&[data-line-height='3']{
--typography-text-md-line-height: calc(18px * 1.4); 
}
&[data-line-height='4']{
--typography-text-md-line-height: calc(18px * 1.6); 
}
&[data-line-height='5']{
--typography-text-md-line-height: calc(18px * 1.8); 
}
&[data-line-height='6']{
--typography-text-md-line-height: calc(18px * 2); 
}
}

--typography-text-lg-font-size: 16px; 
 --typography-text-lg-line-height: 20px; 
 --typography-text-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-lg-font-size: calc(16px * 1.2);
}
&[data-font-size='3']{
--typography-text-lg-font-size: calc(16px * 1.4); 
}
&[data-font-size='4']{
--typography-text-lg-font-size: calc(16px * 1.6); 
}
&[data-font-size='5']{
--typography-text-lg-font-size: calc(16px * 1.8); 
}
&[data-font-size='6']{
--typography-text-lg-font-size: calc(16px * 2); 
}
&[data-line-height='2']{
--typography-text-lg-line-height: calc(20px * 1.2);
}
&[data-line-height='3']{
--typography-text-lg-line-height: calc(20px * 1.4); 
}
&[data-line-height='4']{
--typography-text-lg-line-height: calc(20px * 1.6); 
}
&[data-line-height='5']{
--typography-text-lg-line-height: calc(20px * 1.8); 
}
&[data-line-height='6']{
--typography-text-lg-line-height: calc(20px * 2); 
}
}

--typography-text-xl-font-size: 18px; 
 --typography-text-xl-line-height: 22px; 
 --typography-text-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xl-font-size: calc(18px * 1.2);
}
&[data-font-size='3']{
--typography-text-xl-font-size: calc(18px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xl-font-size: calc(18px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xl-font-size: calc(18px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xl-font-size: calc(18px * 2); 
}
&[data-line-height='2']{
--typography-text-xl-line-height: calc(22px * 1.2);
}
&[data-line-height='3']{
--typography-text-xl-line-height: calc(22px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xl-line-height: calc(22px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xl-line-height: calc(22px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xl-line-height: calc(22px * 2); 
}
}

--typography-display-xs-font-size: 16px; 
 --typography-display-xs-line-height: 20px; 
 --typography-display-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xs-font-size: calc(16px * 1.2);
}
&[data-font-size='3']{
--typography-display-xs-font-size: calc(16px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xs-font-size: calc(16px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xs-font-size: calc(16px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xs-font-size: calc(16px * 2); 
}
&[data-line-height='2']{
--typography-display-xs-line-height: calc(20px * 1.2);
}
&[data-line-height='3']{
--typography-display-xs-line-height: calc(20px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xs-line-height: calc(20px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xs-line-height: calc(20px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xs-line-height: calc(20px * 2); 
}
}

--typography-display-sm-font-size: 18px; 
 --typography-display-sm-line-height: 22px; 
 --typography-display-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-sm-font-size: calc(18px * 1.2);
}
&[data-font-size='3']{
--typography-display-sm-font-size: calc(18px * 1.4); 
}
&[data-font-size='4']{
--typography-display-sm-font-size: calc(18px * 1.6); 
}
&[data-font-size='5']{
--typography-display-sm-font-size: calc(18px * 1.8); 
}
&[data-font-size='6']{
--typography-display-sm-font-size: calc(18px * 2); 
}
&[data-line-height='2']{
--typography-display-sm-line-height: calc(22px * 1.2);
}
&[data-line-height='3']{
--typography-display-sm-line-height: calc(22px * 1.4); 
}
&[data-line-height='4']{
--typography-display-sm-line-height: calc(22px * 1.6); 
}
&[data-line-height='5']{
--typography-display-sm-line-height: calc(22px * 1.8); 
}
&[data-line-height='6']{
--typography-display-sm-line-height: calc(22px * 2); 
}
}

--typography-display-md-font-size: 20px; 
 --typography-display-md-line-height: 24px; 
 --typography-display-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-md-font-size: calc(20px * 1.2);
}
&[data-font-size='3']{
--typography-display-md-font-size: calc(20px * 1.4); 
}
&[data-font-size='4']{
--typography-display-md-font-size: calc(20px * 1.6); 
}
&[data-font-size='5']{
--typography-display-md-font-size: calc(20px * 1.8); 
}
&[data-font-size='6']{
--typography-display-md-font-size: calc(20px * 2); 
}
&[data-line-height='2']{
--typography-display-md-line-height: calc(24px * 1.2);
}
&[data-line-height='3']{
--typography-display-md-line-height: calc(24px * 1.4); 
}
&[data-line-height='4']{
--typography-display-md-line-height: calc(24px * 1.6); 
}
&[data-line-height='5']{
--typography-display-md-line-height: calc(24px * 1.8); 
}
&[data-line-height='6']{
--typography-display-md-line-height: calc(24px * 2); 
}
}

--typography-display-lg-font-size: 24px; 
 --typography-display-lg-line-height: 26px; 
 --typography-display-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-lg-font-size: calc(24px * 1.2);
}
&[data-font-size='3']{
--typography-display-lg-font-size: calc(24px * 1.4); 
}
&[data-font-size='4']{
--typography-display-lg-font-size: calc(24px * 1.6); 
}
&[data-font-size='5']{
--typography-display-lg-font-size: calc(24px * 1.8); 
}
&[data-font-size='6']{
--typography-display-lg-font-size: calc(24px * 2); 
}
&[data-line-height='2']{
--typography-display-lg-line-height: calc(26px * 1.2);
}
&[data-line-height='3']{
--typography-display-lg-line-height: calc(26px * 1.4); 
}
&[data-line-height='4']{
--typography-display-lg-line-height: calc(26px * 1.6); 
}
&[data-line-height='5']{
--typography-display-lg-line-height: calc(26px * 1.8); 
}
&[data-line-height='6']{
--typography-display-lg-line-height: calc(26px * 2); 
}
}

--typography-display-xl-font-size: 36px; 
 --typography-display-xl-line-height: 40px; 
 --typography-display-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xl-font-size: calc(36px * 1.2);
}
&[data-font-size='3']{
--typography-display-xl-font-size: calc(36px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xl-font-size: calc(36px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xl-font-size: calc(36px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xl-font-size: calc(36px * 2); 
}
&[data-line-height='2']{
--typography-display-xl-line-height: calc(40px * 1.2);
}
&[data-line-height='3']{
--typography-display-xl-line-height: calc(40px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xl-line-height: calc(40px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xl-line-height: calc(40px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xl-line-height: calc(40px * 2); 
}
}

--typography-display-2xl-font-size: 48px; 
 --typography-display-2xl-line-height: 52px; 
 --typography-display-2xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-2xl-font-size: calc(48px * 1.2);
}
&[data-font-size='3']{
--typography-display-2xl-font-size: calc(48px * 1.4); 
}
&[data-font-size='4']{
--typography-display-2xl-font-size: calc(48px * 1.6); 
}
&[data-font-size='5']{
--typography-display-2xl-font-size: calc(48px * 1.8); 
}
&[data-font-size='6']{
--typography-display-2xl-font-size: calc(48px * 2); 
}
&[data-line-height='2']{
--typography-display-2xl-line-height: calc(52px * 1.2);
}
&[data-line-height='3']{
--typography-display-2xl-line-height: calc(52px * 1.4); 
}
&[data-line-height='4']{
--typography-display-2xl-line-height: calc(52px * 1.6); 
}
&[data-line-height='5']{
--typography-display-2xl-line-height: calc(52px * 1.8); 
}
&[data-line-height='6']{
--typography-display-2xl-line-height: calc(52px * 2); 
}
}

}
}