:root {
--color-primary-25: 229, 252, 255;
--color-primary-50: 205, 234, 237;
--color-primary-100: 184, 222, 226;
--color-primary-200: 140, 196, 203;
--color-primary-300: 94, 166, 175;
--color-primary-400: 51, 135, 145;
--color-primary-500: 19, 103, 113;
--color-primary-600: 0, 78, 87;
--color-primary-700: 0, 59, 66;
--color-primary-800: 0, 41, 46;
--color-primary-900: 0, 23, 26;
--color-primary-950: 0, 9, 10;
--color-secondary-25: 243, 252, 244;
--color-secondary-50: 232, 247, 235;
--color-secondary-100: 220, 243, 225;
--color-secondary-200: 206, 236, 213;
--color-secondary-300: 179, 220, 188;
--color-secondary-400: 147, 200, 159;
--color-secondary-500: 115, 181, 130;
--color-secondary-600: 87, 163, 104;
--color-secondary-700: 64, 140, 81;
--color-secondary-800: 42, 119, 59;
--color-secondary-900: 22, 92, 38;
--color-secondary-950: 7, 57, 18;
--color-tertiary-25: 241, 247, 250;
--color-tertiary-50: 212, 230, 238;
--color-tertiary-100: 192, 218, 231;
--color-tertiary-200: 170, 208, 228;
--color-tertiary-300: 145, 197, 225;
--color-tertiary-400: 118, 187, 223;
--color-tertiary-500: 113, 189, 228;
--color-tertiary-600: 56, 164, 221;
--color-tertiary-700: 41, 141, 194;
--color-tertiary-800: 25, 110, 155;
--color-tertiary-900: 15, 81, 116;
--color-tertiary-950: 8, 51, 74;
--color-body-25: 252, 252, 253;
--color-body-50: 249, 250, 251;
--color-body-100: 242, 244, 247;
--color-body-200: 228, 231, 236;
--color-body-300: 208, 213, 221;
--color-body-400: 152, 162, 179;
--color-body-500: 102, 112, 133;
--color-body-600: 71, 84, 103;
--color-body-700: 52, 64, 84;
--color-body-800: 24, 34, 48;
--color-body-900: 16, 24, 40;
--color-body-950: 12, 17, 29;
--color-quaternary-25: 254, 246, 245;
--color-quaternary-50: 249, 237, 235;
--color-quaternary-100: 245, 221, 218;
--color-quaternary-200: 241, 205, 200;
--color-quaternary-300: 234, 185, 178;
--color-quaternary-400: 229, 164, 155;
--color-quaternary-500: 207, 129, 119;
--color-quaternary-600: 176, 89, 77;
--color-quaternary-700: 153, 70, 59;
--color-quaternary-800: 125, 47, 37;
--color-quaternary-900: 98, 31, 22;
--color-quaternary-950: 66, 16, 9;
--font-family--display:'Outfit', sans-serif;
--font-family--body:'Outfit', sans-serif;
--typography-text-xs-font-size: 12px; 
 --typography-text-xs-line-height: 18px; 
 --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(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: 14px; 
 --typography-text-sm-line-height: 20px; 
 --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(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: 16px; 
 --typography-text-md-line-height: 24px; 
 --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(24px * 1.2);
}
&[data-line-height='3']{
--typography-text-md-line-height: calc(24px * 1.4); 
}
&[data-line-height='4']{
--typography-text-md-line-height: calc(24px * 1.6); 
}
&[data-line-height='5']{
--typography-text-md-line-height: calc(24px * 1.8); 
}
&[data-line-height='6']{
--typography-text-md-line-height: calc(24px * 2); 
}
}

--typography-text-lg-font-size: 18px; 
 --typography-text-lg-line-height: 28px; 
 --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(28px * 1.2);
}
&[data-line-height='3']{
--typography-text-lg-line-height: calc(28px * 1.4); 
}
&[data-line-height='4']{
--typography-text-lg-line-height: calc(28px * 1.6); 
}
&[data-line-height='5']{
--typography-text-lg-line-height: calc(28px * 1.8); 
}
&[data-line-height='6']{
--typography-text-lg-line-height: calc(28px * 2); 
}
}

--typography-text-xl-font-size: 20px; 
 --typography-text-xl-line-height: 30px; 
 --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(30px * 1.2);
}
&[data-line-height='3']{
--typography-text-xl-line-height: calc(30px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xl-line-height: calc(30px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xl-line-height: calc(30px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xl-line-height: calc(30px * 2); 
}
}

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

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

--typography-display-md-font-size: 36px; 
 --typography-display-md-line-height: 44px; 
 --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(44px * 1.2);
}
&[data-line-height='3']{
--typography-display-md-line-height: calc(44px * 1.4); 
}
&[data-line-height='4']{
--typography-display-md-line-height: calc(44px * 1.6); 
}
&[data-line-height='5']{
--typography-display-md-line-height: calc(44px * 1.8); 
}
&[data-line-height='6']{
--typography-display-md-line-height: calc(44px * 2); 
}
}

--typography-display-lg-font-size: 48px; 
 --typography-display-lg-line-height: 60px; 
 --typography-display-lg-letter-spacing: -1px;
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(60px * 1.2);
}
&[data-line-height='3']{
--typography-display-lg-line-height: calc(60px * 1.4); 
}
&[data-line-height='4']{
--typography-display-lg-line-height: calc(60px * 1.6); 
}
&[data-line-height='5']{
--typography-display-lg-line-height: calc(60px * 1.8); 
}
&[data-line-height='6']{
--typography-display-lg-line-height: calc(60px * 2); 
}
}

--typography-display-xl-font-size: 60px; 
 --typography-display-xl-line-height: 64px; 
 --typography-display-xl-letter-spacing: -1px;
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: 76px; 
 --typography-display-2xl-letter-spacing: -1px;
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(76px * 1.2);
}
&[data-line-height='3']{
--typography-display-2xl-line-height: calc(76px * 1.4); 
}
&[data-line-height='4']{
--typography-display-2xl-line-height: calc(76px * 1.6); 
}
&[data-line-height='5']{
--typography-display-2xl-line-height: calc(76px * 1.8); 
}
&[data-line-height='6']{
--typography-display-2xl-line-height: calc(76px * 2); 
}
}

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

--button-md--primary-pt: var(--spacing-lg); 
--button-md--primary-pr: var(--spacing-2xl); 
--button-md--primary-pb: var(--spacing-lg); 
--button-md--primary-pl: var(--spacing-2xl); 
--button-md--primary-gap: var(--spacing-md); 
--button-md--primary-border: 1px; 
--button-md--primary-rounded: var(--radius-sm); 
--button-md--primary-font-family: var(--font-family--body); 
--button-md--primary-font-weight: 600; 
--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-md); 
--button-sm--primary-pr: var(--spacing-md); 
--button-sm--primary-pb: var(--spacing-md); 
--button-sm--primary-pl: var(--spacing-md); 
--button-sm--primary-gap: var(--spacing-md); 
--button-sm--primary-border: 1px; 
--button-sm--primary-rounded: var(--radius-sm); 
--button-sm--primary-font-family: var(--font-family--body); 
--button-sm--primary-font-weight: 600; 
--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-md--link-pt: var(--spacing-none); 
--button-md--link-pr: var(--spacing-none); 
--button-md--link-pb: var(--spacing-xs); 
--button-md--link-pl: var(--spacing-none); 
--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); 

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

--badge-md--color-pt: var(--spacing-xs); 
--badge-md--color-pr: var(--spacing-lg); 
--badge-md--color-pb: var(--spacing-xs); 
--badge-md--color-pl: var(--spacing-lg); 
--badge-md--color-gap: var(--spacing-none); 
--badge-md--color-border: 1px; 
--badge-md--color-rounded: var(--radius-full); 
--badge-md--color-font-family: var(--font-family--body); 
--badge-md--color-font-weight: 500; 
--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-sm); 
--badge-lg--color-pr: var(--spacing-xl); 
--badge-lg--color-pb: var(--spacing-sm); 
--badge-lg--color-pl: var(--spacing-xl); 
--badge-lg--color-gap: var(--spacing-none); 
--badge-lg--color-border: 2px; 
--badge-lg--color-rounded: var(--radius-full); 
--badge-lg--color-font-family: var(--font-family--body); 
--badge-lg--color-font-weight: 500; 
--badge-lg--color-typography-fz: var(--typography-text-md-font-size); 
--badge-lg--color-typography-lh: var(--typography-text-md-line-height); 
--badge-lg--color-typography-ls: var(--typography-text-md-letter-spacing); 

}
@media screen and (max-width: 1280px) and (min-width: 745px) {
:root {
--typography-text-xs-font-size: 12px; 
 --typography-text-xs-line-height: 18px; 
 --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(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: 14px; 
 --typography-text-sm-line-height: 20px; 
 --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(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: 16px; 
 --typography-text-md-line-height: 24px; 
 --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(24px * 1.2);
}
&[data-line-height='3']{
--typography-text-md-line-height: calc(24px * 1.4); 
}
&[data-line-height='4']{
--typography-text-md-line-height: calc(24px * 1.6); 
}
&[data-line-height='5']{
--typography-text-md-line-height: calc(24px * 1.8); 
}
&[data-line-height='6']{
--typography-text-md-line-height: calc(24px * 2); 
}
}

--typography-text-lg-font-size: 18px; 
 --typography-text-lg-line-height: 24px; 
 --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(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: 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: 24px; 
 --typography-display-xs-line-height: 32px; 
 --typography-display-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xs-font-size: calc(24px * 1.2);
}
&[data-font-size='3']{
--typography-display-xs-font-size: calc(24px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xs-font-size: calc(24px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xs-font-size: calc(24px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xs-font-size: calc(24px * 2); 
}
&[data-line-height='2']{
--typography-display-xs-line-height: calc(32px * 1.2);
}
&[data-line-height='3']{
--typography-display-xs-line-height: calc(32px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xs-line-height: calc(32px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xs-line-height: calc(32px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xs-line-height: calc(32px * 2); 
}
}

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

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

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

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

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

}
}
@media screen and (max-width: 744px) {
:root {
--typography-text-xs-font-size: 10px; 
 --typography-text-xs-line-height: 16px; 
 --typography-text-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xs-font-size: calc(10px * 1.2);
}
&[data-font-size='3']{
--typography-text-xs-font-size: calc(10px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xs-font-size: calc(10px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xs-font-size: calc(10px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xs-font-size: calc(10px * 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: 12px; 
 --typography-text-sm-line-height: 18px; 
 --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(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: 14px; 
 --typography-text-md-line-height: 20px; 
 --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(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: 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: 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: 20px; 
 --typography-display-xs-line-height: 30px; 
 --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(30px * 1.2);
}
&[data-line-height='3']{
--typography-display-xs-line-height: calc(30px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xs-line-height: calc(30px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xs-line-height: calc(30px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xs-line-height: calc(30px * 2); 
}
}

--typography-display-sm-font-size: 24px; 
 --typography-display-sm-line-height: 34px; 
 --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(34px * 1.2);
}
&[data-line-height='3']{
--typography-display-sm-line-height: calc(34px * 1.4); 
}
&[data-line-height='4']{
--typography-display-sm-line-height: calc(34px * 1.6); 
}
&[data-line-height='5']{
--typography-display-sm-line-height: calc(34px * 1.8); 
}
&[data-line-height='6']{
--typography-display-sm-line-height: calc(34px * 2); 
}
}

--typography-display-md-font-size: 24px; 
 --typography-display-md-line-height: 28px; 
 --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(28px * 1.2);
}
&[data-line-height='3']{
--typography-display-md-line-height: calc(28px * 1.4); 
}
&[data-line-height='4']{
--typography-display-md-line-height: calc(28px * 1.6); 
}
&[data-line-height='5']{
--typography-display-md-line-height: calc(28px * 1.8); 
}
&[data-line-height='6']{
--typography-display-md-line-height: calc(28px * 2); 
}
}

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

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

--typography-display-2xl-font-size: 48px; 
 --typography-display-2xl-line-height: 60px; 
 --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(60px * 1.2);
}
&[data-line-height='3']{
--typography-display-2xl-line-height: calc(60px * 1.4); 
}
&[data-line-height='4']{
--typography-display-2xl-line-height: calc(60px * 1.6); 
}
&[data-line-height='5']{
--typography-display-2xl-line-height: calc(60px * 1.8); 
}
&[data-line-height='6']{
--typography-display-2xl-line-height: calc(60px * 2); 
}
}

}
}