@mixin title-1 {
  // used in text
  @include font-sans-regular;
  font-size: badrem(2.5);
  line-height: badrem(2.5);
  font-weight: normal;
}
.title-1 {
  @include title-1;
}

@mixin title-2 {
  // Used to top a page, a list, a window..
  @include font-sans-regular;
  font-size: badrem(1.8);
  line-height: badrem(2.2);
  letter-spacing: 0.2px;
  font-weight: bold;
}
.title-2 {
  @include title-2;
}

@mixin title-3 {
  // used in lists - of modules (stack), wf list
  @include font-sans-bold;
  font-size: badrem(1.3);
  line-height: badrem(1.3);
}
.title-3 {
  @include title-3;
}

// main fonts for content

@mixin content-1 {
  @include font-sans-regular;
  font-size: badrem(1.4);
  line-height: badrem(2);
}
%content-1 {
  // Main font for parameter's data, metadata, labels...
  @include content-1;
}

@mixin content-2 {
  // option or detail
  @include font-sans-regular;
  font-size: badrem(1.1);
  line-height: badrem(1.1);
}
%content-2 {
  @include content-2;
}

@mixin content-3 {
  @include font-sans-regular;
  font-size: badrem(1.6);
  line-height: badrem(2.3);
}

.content-1 {
  @include content-1;
} // deprecated: use mixin instead
.content-2 {
  @include content-2;
} // deprecated: use mixin instead

@mixin code-1 {
  // used in code snipets
  @include content-1; // TODO nix
  font-family: 'Roboto Mono', monospace;
  line-height: badrem(2.4);
}

@mixin info-1 {
  @include font-sans-light;
  font-size: badrem(1.2);
  line-height: badrem(1.2);
}
%info-1 {
  @include info-1;
}

@mixin info-2 {
  @include font-sans-light;
  font-size: badrem(1.3);
  line-height: badrem(1.3);
  letter-spacing: 0.3px;
}
%info-2 {
  @include info-2;
}

@mixin info-3 {
  // use in blocks of texts such as prompts or info popups
  font-size: badrem(1.3);
  line-height: badrem(2);
  @include font-sans-light;
}
%info-3 {
  @include info-3;
}

.info-1 {
  @include info-1;
}
.info-2 {
  @include info-2;
}
.info-3 {
  @include info-3;
}
