@layer reset {
  .heading {
    margin: 0;
  }
}

@layer kz-components {
  .display-0 {
    font-family: var(--typography-display-0-font-family);
    font-weight: var(--typography-display-0-font-weight);
    font-size: var(--typography-display-0-font-size);
    line-height: var(--typography-display-0-line-height);
    letter-spacing: var(--typography-display-0-letter-spacing);
  }

  .composable-header-title {
    font-family: var(--typography-display-0-font-family); /* Tiempos */
    font-weight: 500; /* Medium */
    font-size: var(--typography-heading-1-font-size);
    line-height: var(--typography-heading-1-line-height);
    letter-spacing: var(--typography-heading-1-letter-spacing);
  }

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

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

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

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

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

  .heading-6 {
    font-family: var(--typography-heading-6-font-family);
    font-weight: var(--typography-heading-6-font-weight);
    font-size: var(--typography-heading-6-font-size);
    line-height: var(--typography-heading-6-line-height);
    letter-spacing: var(--typography-heading-6-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 {
    &.small {
      color: var(--color-green-600);
    }

    &.large {
      color: var(--color-green-500);
    }
  }

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

    &.large {
      color: var(--color-red-500);
    }
  }
}