:root {
  --color-body-50: 252, 252, 236;
  --color-body-400: 246, 246, 246;
  --color-body-500: 217, 217, 217;
  --color-body-600: 106, 106, 106;
  --color-body-700: 61, 61, 61;
  --color-body-900: 25, 25, 25;
  --color-primary-400: 244, 248, 255;
  --color-primary-500: 232, 240, 254;
  --color-primary-600: 100, 149, 247;
  --color-primary-700: 47, 98, 194;
  --color-secondary-400: 244, 255, 249;
  --color-secondary-500: 230, 255, 244;
  --color-secondary-600: 33, 227, 133;
  --color-secondary-700: 14, 117, 70;
  --color-tertiary-400: 255, 252, 237;
  --color-tertiary-500: 255, 247, 217;
  --color-tertiary-600: 255, 222, 102;
  --color-tertiary-700: 138, 111, 21;
  --color-quaternary-400: 242, 253, 255;
  --color-quaternary-500: 229, 251, 255;
  --color-quaternary-600: 55, 217, 241;
  --color-quaternary-700: 21, 122, 136;
  --font-family--display: "Sora", sans-serif;
  --font-family--body: "Inter", sans-serif;
  --typography-text-xs-font-size: 14px;
  --typography-text-xs-line-height: 20px;
  --typography-text-xs-letter-spacing: 0px;
  body {
    &[data-font-size="2"] {
      --typography-text-xs-font-size: calc(14px * 1.2);
    }
    &[data-font-size="3"] {
      --typography-text-xs-font-size: calc(14px * 1.4);
    }
    &[data-font-size="4"] {
      --typography-text-xs-font-size: calc(14px * 1.6);
    }
    &[data-font-size="5"] {
      --typography-text-xs-font-size: calc(14px * 1.8);
    }
    &[data-font-size="6"] {
      --typography-text-xs-font-size: calc(14px * 2);
    }
    &[data-line-height="2"] {
      --typography-text-xs-line-height: calc(20px * 1.2);
    }
    &[data-line-height="3"] {
      --typography-text-xs-line-height: calc(20px * 1.4);
    }
    &[data-line-height="4"] {
      --typography-text-xs-line-height: calc(20px * 1.6);
    }
    &[data-line-height="5"] {
      --typography-text-xs-line-height: calc(20px * 1.8);
    }
    &[data-line-height="6"] {
      --typography-text-xs-line-height: calc(20px * 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: 16px;
  --typography-text-lg-line-height: 24px;
  --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(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: 16px;
  --typography-text-xl-line-height: 24px;
  --typography-text-xl-letter-spacing: 0px;
  body {
    &[data-font-size="2"] {
      --typography-text-xl-font-size: calc(16px * 1.2);
    }
    &[data-font-size="3"] {
      --typography-text-xl-font-size: calc(16px * 1.4);
    }
    &[data-font-size="4"] {
      --typography-text-xl-font-size: calc(16px * 1.6);
    }
    &[data-font-size="5"] {
      --typography-text-xl-font-size: calc(16px * 1.8);
    }
    &[data-font-size="6"] {
      --typography-text-xl-font-size: calc(16px * 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: 16px;
  --typography-display-xs-line-height: 24px;
  --typography-display-xs-letter-spacing: 0px;
  body {
    &[data-font-size="2"] {
      --typography-display-xs-font-size: calc(16px * 1.2);
    }
    &[data-font-size="3"] {
      --typography-display-xs-font-size: calc(16px * 1.4);
    }
    &[data-font-size="4"] {
      --typography-display-xs-font-size: calc(16px * 1.6);
    }
    &[data-font-size="5"] {
      --typography-display-xs-font-size: calc(16px * 1.8);
    }
    &[data-font-size="6"] {
      --typography-display-xs-font-size: calc(16px * 2);
    }
    &[data-line-height="2"] {
      --typography-display-xs-line-height: calc(24px * 1.2);
    }
    &[data-line-height="3"] {
      --typography-display-xs-line-height: calc(24px * 1.4);
    }
    &[data-line-height="4"] {
      --typography-display-xs-line-height: calc(24px * 1.6);
    }
    &[data-line-height="5"] {
      --typography-display-xs-line-height: calc(24px * 1.8);
    }
    &[data-line-height="6"] {
      --typography-display-xs-line-height: calc(24px * 2);
    }
  }

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

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

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

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

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

  --shadow-xs: 0px 0px 0px 1px rgba(var(--color-body-900), 0.18) inset,
    0px -2px 0px 0px rgba(var(--color-body-900), 0.05) inset,
    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 2px 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 20px 24px -4px rgba(var(--color-body-900), 0.08),
    0px 8px 8px -4px rgba(var(--color-body-900), 0.03);
  --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: 2px;
  --button-sm--primary-rounded: var(--radius-full);
  --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-md);
  --button-md--primary-pr: var(--spacing-xl);
  --button-md--primary-pb: var(--spacing-md);
  --button-md--primary-pl: var(--spacing-xl);
  --button-md--primary-gap: var(--spacing-sm);
  --button-md--primary-border: 2px;
  --button-md--primary-rounded: var(--radius-full);
  --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-3xl);
  --button-lg--primary-pb: var(--spacing-xl);
  --button-lg--primary-pl: var(--spacing-3xl);
  --button-lg--primary-gap: var(--spacing-md);
  --button-lg--primary-border: 2px;
  --button-lg--primary-rounded: var(--radius-full);
  --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--secondary-pt: var(--spacing-md);
  --button-sm--secondary-pr: var(--spacing-lg);
  --button-sm--secondary-pb: var(--spacing-md);
  --button-sm--secondary-pl: var(--spacing-lg);
  --button-sm--secondary-gap: var(--spacing-none);
  --button-sm--secondary-border: 2px;
  --button-sm--secondary-rounded: var(--radius-full);
  --button-sm--secondary-font-family: var(--font-family--body);
  --button-sm--secondary-font-weight: 600;
  --button-sm--secondary-typography-fz: var(--typography-text-sm-font-size);
  --button-sm--secondary-typography-lh: var(--typography-text-sm-line-height);
  --button-sm--secondary-typography-ls: var(
    --typography-text-sm-letter-spacing
  );

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

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

  --badge-md--color-pt: var(--spacing-xxs);
  --badge-md--color-pr: var(--spacing-md);
  --badge-md--color-pb: var(--spacing-xxs);
  --badge-md--color-pl: var(--spacing-md);
  --badge-md--color-gap: var(--spacing-sm);
  --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-xs);
  --badge-lg--color-pr: var(--spacing-lg);
  --badge-lg--color-pb: var(--spacing-xs);
  --badge-lg--color-pl: var(--spacing-lg);
  --badge-lg--color-gap: var(--spacing-sm);
  --badge-lg--color-border: 1px;
  --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-sm-font-size);
  --badge-lg--color-typography-lh: var(--typography-text-sm-line-height);
  --badge-lg--color-typography-ls: var(--typography-text-sm-letter-spacing);

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

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

  --badge-lg--outline-pt: var(--spacing-xs);
  --badge-lg--outline-pr: var(--spacing-lg);
  --badge-lg--outline-pb: var(--spacing-xs);
  --badge-lg--outline-pl: var(--spacing-lg);
  --badge-lg--outline-gap: var(--spacing-sm);
  --badge-lg--outline-border: 2px;
  --badge-lg--outline-rounded: var(--radius-full);
  --badge-lg--outline-font-family: var(--font-family--body);
  --badge-lg--outline-font-weight: 500;
  --badge-lg--outline-typography-fz: var(--typography-text-sm-font-size);
  --badge-lg--outline-typography-lh: var(--typography-text-sm-line-height);
  --badge-lg--outline-typography-ls: var(--typography-text-sm-letter-spacing);
}
@media screen and (max-width: 1280px) and (min-width: 745px) {
  :root {
    --typography-text-xs-font-size: 14px;
    --typography-text-xs-line-height: 20px;
    --typography-text-xs-letter-spacing: 0px;
    body {
      &[data-font-size="2"] {
        --typography-text-xs-font-size: calc(14px * 1.2);
      }
      &[data-font-size="3"] {
        --typography-text-xs-font-size: calc(14px * 1.4);
      }
      &[data-font-size="4"] {
        --typography-text-xs-font-size: calc(14px * 1.6);
      }
      &[data-font-size="5"] {
        --typography-text-xs-font-size: calc(14px * 1.8);
      }
      &[data-font-size="6"] {
        --typography-text-xs-font-size: calc(14px * 2);
      }
      &[data-line-height="2"] {
        --typography-text-xs-line-height: calc(20px * 1.2);
      }
      &[data-line-height="3"] {
        --typography-text-xs-line-height: calc(20px * 1.4);
      }
      &[data-line-height="4"] {
        --typography-text-xs-line-height: calc(20px * 1.6);
      }
      &[data-line-height="5"] {
        --typography-text-xs-line-height: calc(20px * 1.8);
      }
      &[data-line-height="6"] {
        --typography-text-xs-line-height: calc(20px * 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: 16px;
    --typography-text-lg-line-height: 24px;
    --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(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: 16px;
    --typography-text-xl-line-height: 24px;
    --typography-text-xl-letter-spacing: 0px;
    body {
      &[data-font-size="2"] {
        --typography-text-xl-font-size: calc(16px * 1.2);
      }
      &[data-font-size="3"] {
        --typography-text-xl-font-size: calc(16px * 1.4);
      }
      &[data-font-size="4"] {
        --typography-text-xl-font-size: calc(16px * 1.6);
      }
      &[data-font-size="5"] {
        --typography-text-xl-font-size: calc(16px * 1.8);
      }
      &[data-font-size="6"] {
        --typography-text-xl-font-size: calc(16px * 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: 16px;
    --typography-display-xs-line-height: 24px;
    --typography-display-xs-letter-spacing: 0px;
    body {
      &[data-font-size="2"] {
        --typography-display-xs-font-size: calc(16px * 1.2);
      }
      &[data-font-size="3"] {
        --typography-display-xs-font-size: calc(16px * 1.4);
      }
      &[data-font-size="4"] {
        --typography-display-xs-font-size: calc(16px * 1.6);
      }
      &[data-font-size="5"] {
        --typography-display-xs-font-size: calc(16px * 1.8);
      }
      &[data-font-size="6"] {
        --typography-display-xs-font-size: calc(16px * 2);
      }
      &[data-line-height="2"] {
        --typography-display-xs-line-height: calc(24px * 1.2);
      }
      &[data-line-height="3"] {
        --typography-display-xs-line-height: calc(24px * 1.4);
      }
      &[data-line-height="4"] {
        --typography-display-xs-line-height: calc(24px * 1.6);
      }
      &[data-line-height="5"] {
        --typography-display-xs-line-height: calc(24px * 1.8);
      }
      &[data-line-height="6"] {
        --typography-display-xs-line-height: calc(24px * 2);
      }
    }

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

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

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

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

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

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

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

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

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

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

    --typography-display-xl-font-size: 36px;
    --typography-display-xl-line-height: 44px;
    --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(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: 40px;
    --typography-display-2xl-line-height: 48px;
    --typography-display-2xl-letter-spacing: 0px;
    body {
      &[data-font-size="2"] {
        --typography-display-2xl-font-size: calc(40px * 1.2);
      }
      &[data-font-size="3"] {
        --typography-display-2xl-font-size: calc(40px * 1.4);
      }
      &[data-font-size="4"] {
        --typography-display-2xl-font-size: calc(40px * 1.6);
      }
      &[data-font-size="5"] {
        --typography-display-2xl-font-size: calc(40px * 1.8);
      }
      &[data-font-size="6"] {
        --typography-display-2xl-font-size: calc(40px * 2);
      }
      &[data-line-height="2"] {
        --typography-display-2xl-line-height: calc(48px * 1.2);
      }
      &[data-line-height="3"] {
        --typography-display-2xl-line-height: calc(48px * 1.4);
      }
      &[data-line-height="4"] {
        --typography-display-2xl-line-height: calc(48px * 1.6);
      }
      &[data-line-height="5"] {
        --typography-display-2xl-line-height: calc(48px * 1.8);
      }
      &[data-line-height="6"] {
        --typography-display-2xl-line-height: calc(48px * 2);
      }
    }
  }
}