@layer kz-components {
  .text {
    --icon-vertical-align: text-bottom;

    margin: 0;

    strong {
      font-weight: var(--typography-paragraph-bold-font-weight);
    }
  }

  .intro-lede {
    font-family: var(--typography-paragraph-intro-lede-font-family);
    font-weight: var(--typography-paragraph-intro-lede-font-weight);
    font-size: var(--typography-paragraph-intro-lede-font-size);
    line-height: var(--typography-paragraph-intro-lede-line-height);
    letter-spacing: var(--typography-paragraph-intro-lede-letter-spacing);
  }

  .body {
    font-family: var(--typography-paragraph-body-font-family);
    font-weight: var(--typography-paragraph-body-font-weight);
    font-size: var(--typography-paragraph-body-font-size);
    line-height: var(--typography-paragraph-body-line-height);
    letter-spacing: var(--typography-paragraph-body-letter-spacing);
  }

  .small {
    font-family: var(--typography-paragraph-small-font-family);
    font-weight: var(--typography-paragraph-small-font-weight);
    font-size: var(--typography-paragraph-small-font-size);
    line-height: var(--typography-paragraph-small-line-height);
    letter-spacing: var(--typography-paragraph-small-letter-spacing);
  }

  .extra-small {
    font-family: var(--typography-paragraph-extra-small-font-family);
    font-weight: var(--typography-paragraph-extra-small-font-weight);
    font-size: var(--typography-paragraph-extra-small-font-size);
    line-height: var(--typography-paragraph-extra-small-line-height);
    letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
  }

  .dark {
    color: var(--color-purple-800);
    opacity: 1;
  }

  .dark-reduced-opacity {
    color: var(--color-purple-800);
    opacity: 0.7;
  }

  .white {
    color: var(--color-white);
    opacity: 1;
  }

  .white-reduced-opacity {
    color: var(--color-white);
    opacity: 0.8;
  }

  .positive {
    color: var(--color-green-600);
  }

  .negative {
    color: var(--color-red-600);
  }
}