:root {
    body {
        &[data-theme='dark'] {
            --color-primary-25: 12, 39, 35;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-50: 18, 59, 53;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-100: 30, 98, 88;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-200: 1, 131, 122;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-300: 2, 176, 164;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-400: 2, 202, 188;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-500: 125, 216, 204;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-600: 149, 223, 213;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-700: 149, 223, 213;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-800: 149, 223, 213;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-900: 165, 228, 219;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-primary-950: 192, 236, 230;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-25: 12, 17, 29;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-50: 22, 27, 38;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-100: 31, 36, 47;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-200: 51, 55, 65;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-300: 148, 150, 156;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-400: 133, 136, 142;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-500: 148, 150, 156;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-600: 206, 207, 210;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-700: 236, 236, 237;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-800: 240, 241, 241;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-900: 245, 245, 246;
        }
    }

    body {
        &[data-theme='dark'] {
            --color-body-950: 250, 250, 250;
        }
    }

    --color-primary-25: 231, 248, 246;
    --color-primary-50: 208, 241, 237;
    --color-primary-100: 192, 236, 230;
    --color-primary-200: 165, 228, 219;
    --color-primary-300: 149, 223, 213;
    --color-primary-400: 125, 216, 204;
    --color-primary-500: 2, 202, 188;
    --color-primary-600: 2, 176, 164;
    --color-primary-700: 1, 131, 122;
    --color-primary-800: 30, 98, 88;
    --color-primary-900: 18, 59, 53;
    --color-primary-950: 12, 39, 35;
    --color-secondary-25: 252, 252, 253;
    --color-secondary-50: 248, 249, 252;
    --color-secondary-100: 234, 236, 245;
    --color-secondary-200: 213, 217, 235;
    --color-secondary-300: 179, 184, 219;
    --color-secondary-400: 113, 123, 188;
    --color-secondary-500: 78, 91, 166;
    --color-secondary-600: 62, 71, 132;
    --color-secondary-700: 54, 63, 114;
    --color-secondary-800: 41, 48, 86;
    --color-secondary-900: 16, 19, 35;
    --color-secondary-950: 13, 15, 28;
    --color-tertiary-25: 252, 252, 253;
    --color-tertiary-50: 249, 249, 251;
    --color-tertiary-100: 239, 241, 245;
    --color-tertiary-200: 220, 223, 234;
    --color-tertiary-300: 185, 192, 212;
    --color-tertiary-400: 125, 137, 176;
    --color-tertiary-500: 93, 107, 152;
    --color-tertiary-600: 74, 85, 120;
    --color-tertiary-700: 64, 73, 104;
    --color-tertiary-800: 48, 55, 79;
    --color-tertiary-900: 17, 19, 34;
    --color-tertiary-950: 14, 16, 27;
    --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;
    --font-family--body: 'Roboto', sans-serif;
    --font-family--display: 'Inter', 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: 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(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: 48px;
    --typography-display-xl-line-height: 72px;
    --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(72px * 1.2);
        }

        &[data-line-height='3'] {
            --typography-display-xl-line-height: calc(72px * 1.4);
        }

        &[data-line-height='4'] {
            --typography-display-xl-line-height: calc(72px * 1.6);
        }

        &[data-line-height='5'] {
            --typography-display-xl-line-height: calc(72px * 1.8);
        }

        &[data-line-height='6'] {
            --typography-display-xl-line-height: calc(72px * 2);
        }
    }

    --typography-display-2xl-font-size: 72px;
    --typography-display-2xl-line-height: 90px;
    --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(90px * 1.2);
        }

        &[data-line-height='3'] {
            --typography-display-2xl-line-height: calc(90px * 1.4);
        }

        &[data-line-height='4'] {
            --typography-display-2xl-line-height: calc(90px * 1.6);
        }

        &[data-line-height='5'] {
            --typography-display-2xl-line-height: calc(90px * 1.8);
        }

        &[data-line-height='6'] {
            --typography-display-2xl-line-height: calc(90px * 2);
        }
    }

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

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

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

    --badge-lg--color-pt: var(--spacing-xl);
    --badge-lg--color-pr: var(--spacing-lg);
    --badge-lg--color-pb: var(--spacing-xl);
    --badge-lg--color-pl: var(--spacing-lg);
    --badge-lg--color-gap: var(--spacing-lg);
    --badge-lg--color-border: 1px;
    --badge-lg--color-rounded: var(--radius-lg);
    --badge-lg--color-font-family: var(--font-family--body);
    --badge-lg--color-font-weight: 600;
    --badge-lg--color-typography-fz: var(--typography-text-lg-font-size);
    --badge-lg--color-typography-lh: var(--typography-text-lg-line-height);
    --badge-lg--color-typography-ls: var(--typography-text-lg-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: 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: 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: 44px;
        --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(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: 42px;
        --typography-display-lg-line-height: 52px;
        --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(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: 42px;
        --typography-display-xl-line-height: 62px;
        --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(62px * 1.2);
            }

            &[data-line-height='3'] {
                --typography-display-xl-line-height: calc(62px * 1.4);
            }

            &[data-line-height='4'] {
                --typography-display-xl-line-height: calc(62px * 1.6);
            }

            &[data-line-height='5'] {
                --typography-display-xl-line-height: calc(62px * 1.8);
            }

            &[data-line-height='6'] {
                --typography-display-xl-line-height: calc(62px * 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: 16px;
        --typography-text-lg-line-height: 22px;
        --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(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: 18px;
        --typography-text-xl-line-height: 26px;
        --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(26px * 1.2);
            }

            &[data-line-height='3'] {
                --typography-text-xl-line-height: calc(26px * 1.4);
            }

            &[data-line-height='4'] {
                --typography-text-xl-line-height: calc(26px * 1.6);
            }

            &[data-line-height='5'] {
                --typography-text-xl-line-height: calc(26px * 1.8);
            }

            &[data-line-height='6'] {
                --typography-text-xl-line-height: calc(26px * 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: 28px;
        --typography-display-md-line-height: 38px;
        --typography-display-md-letter-spacing: 0px;

        body {
            &[data-font-size='2'] {
                --typography-display-md-font-size: calc(28px * 1.2);
            }

            &[data-font-size='3'] {
                --typography-display-md-font-size: calc(28px * 1.4);
            }

            &[data-font-size='4'] {
                --typography-display-md-font-size: calc(28px * 1.6);
            }

            &[data-font-size='5'] {
                --typography-display-md-font-size: calc(28px * 1.8);
            }

            &[data-font-size='6'] {
                --typography-display-md-font-size: calc(28px * 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: 36px;
        --typography-display-lg-line-height: 44px;
        --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(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: 36px;
        --typography-display-xl-line-height: 48px;
        --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(48px * 1.2);
            }

            &[data-line-height='3'] {
                --typography-display-xl-line-height: calc(48px * 1.4);
            }

            &[data-line-height='4'] {
                --typography-display-xl-line-height: calc(48px * 1.6);
            }

            &[data-line-height='5'] {
                --typography-display-xl-line-height: calc(48px * 1.8);
            }

            &[data-line-height='6'] {
                --typography-display-xl-line-height: calc(48px * 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);
            }
        }

    }
}