@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,500i,400italic,700,700italic|Caveat+Brush);

@define-mixin typography $fontSize, $fontWeight {
  font-family: var(--font-family-primary);
  font-size: $fontSize;
  font-weight: $fontWeight;
}

html,
body {
  font-family: var(--font-family-primary);
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-neutral-text);
}

/* OLD TYPOGRAPHY STYLES */
 .u-h1 {
  @mixin typography 24px, normal;
}

.u-h2 {
  @mixin typography 18px, normal;
}

.u-h3 {
  @mixin typography 14px, normal;
  text-transform: uppercase;
}

.u-h4 {
  @mixin typography 20px, normal;
}

.u-titleXS {
  @mixin typography 27px, normal;
}

.u-titleS {
  @mixin typography 32px, normal;
}

.u-titleL {
  @mixin typography 40px, var(--font-weight-regular);
}

/* NEW TYPOGRAPY STYLES */

.display-xx-large {
  @mixin typography 40px, var(--font-weight-regular);
}

.display-x-large {
  @mixin typography 32px, normal;
}

.display-large {
  @mixin typography 27px, normal;
}

.display-medium {
  @mixin typography 24px, normal;
}

.display-small {
  @mixin typography 18px, var(--font-weight-medium);
}

.display-x-small {
  @mixin typography 14px, normal;
  text-transform: uppercase;
}

.large {
  @mixin typography 20px, normal;
}

.body {
  @mixin typography 16px, normal;
}

.tiny {
 @mixin typography 14px, normal;
}


.display-xx-large--soft {
  @mixin typography 40px, var(--font-weight-regular);
  color: var(--color-neutral-700);
}

.display-x-large--soft {
  @mixin typography 32px, normal;
  color: var(--color-neutral-700);
}

.display-large--soft {
  @mixin typography 27px, normal;
  color: var(--color-neutral-700);
}

.display-medium--soft {
  @mixin typography 24px, normal;
  color: var(--color-neutral-700);
}

.display-small--soft {
  @mixin typography 18px, var(--font-weight-medium);
  color: var(--color-neutral-700);
}

.display-x-small--soft {
  @mixin typography 14px, normal;
  color: var(--color-neutral-700);
  text-transform: uppercase;
}

.large--soft {
  @mixin typography 20px, normal;
  color: var(--color-neutral-700);
}

.body--soft {
  @mixin typography 16px, normal;
  color: var(--color-neutral-700);
}

.tiny--soft {
  @mixin typography 14px, normal;
  color: var(--color-neutral-700);
}

.bold {
  @mixin typography 16px, var(--font-weight-bold);
}

.italic {
  @mixin typography 16px, normal;
  font-style: italic;
}

.link {
  @mixin typography 16px, var(--font-weight-bold);
  color: var(--color-brand-500);
  text-decoration: underline;
}

.error {
  @mixin typography 16px, var(--font-weight-bold);
  color: var(--color-red-500);
  font-style: italic;
}