@st-global-custom-property --wsr-font-family, --wsr-font-weight-regular, --wsr-font-weight-medium, --wsr-font-weight-bold;

/* Fonts */
:vars {
  fontsfallback: '"Helvetica Neue", "Helvetica", "Arial", "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", "sans-serif"';
  helveticanueu45: 'HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh';
  helveticanueu55: 'HelveticaNeueW01-55Roma, HelveticaNeueW02-55Roma, HelveticaNeueW10-55Roma';
  helveticanueu65: 'HelveticaNeueW01-65Medi, HelveticaNeueW02-65Medi, HelveticaNeueW10-65Medi';
  helveticanueu75: 'HelveticaNeueW01-75Bold, HelveticaNeueW02-75Bold, HelveticaNeueW10-75Bold';
}

/* Family mixin */
.family-mixin {
  font-family: value(family), value(fontsfallback); /* IE11 */
  font-family: var(--wsr-font-family, value(family)), value(fontsfallback);
}

/* Weight mixin */
.weight-mixin {
  font-weight: 400; /* IE11 */
  font-weight: value(weight);
}

/* Size mixin */
.size-mixin {
  font-size: value(font-size);
  line-height: value(line-height);
}

/* Sizes */
.tiny {
  -st-mixin: size-mixin(font-size 12px, line-height 15px );
}

.small {
  -st-mixin: size-mixin(font-size 14px, line-height 18px );
}

.medium {
  -st-mixin: size-mixin(font-size 16px, line-height 24px );
}

/* Weights */
.thin {
  -st-mixin: weight-mixin(weight var(--wsr-font-weight-regular, 400));
}

.normal {
  -st-mixin: weight-mixin(weight var(--wsr-font-weight-medium, 400));
}

.bold {
  -st-mixin: weight-mixin(weight var(--wsr-font-weight-bold, 400));
}

/* Typography API */
.text-tiny-thin {
  -st-mixin: tiny, thin, family-mixin(family value(helveticanueu55));
}

.text-tiny-normal {
  -st-mixin: tiny, normal, family-mixin(family value(helveticanueu65));
}

.text-tiny-bold {
  -st-mixin: tiny, bold, family-mixin(family value(helveticanueu75));
}

.text-small-thin {
  -st-mixin: small, thin, family-mixin(family value(helveticanueu45));
}

.text-small-normal {
  -st-mixin: small, normal, family-mixin(family value(helveticanueu55));
}

.text-small-bold {
  -st-mixin: small, bold, family-mixin(family value(helveticanueu65));
}

.text-medium-thin {
  -st-mixin: medium, thin, family-mixin(family value(helveticanueu45));
}

.text-medium-normal {
  -st-mixin: medium, normal, family-mixin(family value(helveticanueu55));
}

.text-medium-bold {
  -st-mixin: medium, bold, family-mixin(family value(helveticanueu65));
}

/* Heading */
.heading-h1 {
  -st-mixin: family-mixin(family value(helveticanueu65)),
    weight-mixin(weight var(--wsr-font-weight-bold, 400)),
    size-mixin(font-size 36px, line-height 48px);
}

.heading-h2 {
  -st-mixin: family-mixin(family value(helveticanueu65)),
    weight-mixin(weight var(--wsr-font-weight-bold, 400)),
    size-mixin(font-size 28px, line-height 36px);
}

.heading-h3 {
  -st-mixin: family-mixin(family value(helveticanueu55)),
    weight-mixin(weight var(--wsr-font-weight-medium, 400)),
    size-mixin(font-size 20px, line-height 24px);
}

.heading-h4 {
  -st-mixin: family-mixin(family value(helveticanueu55)),
    weight-mixin(weight var(--wsr-font-weight-medium, 400)),
    size-mixin(font-size 18px, line-height 24px);
}

.heading-h5 {
  -st-mixin: family-mixin(family value(helveticanueu65)),
    weight-mixin(weight var(--wsr-font-weight-bold, 400)),
    size-mixin(font-size 12px, line-height 24px);
}

.heading-h6 {
  -st-mixin: family-mixin(family value(helveticanueu65)),
    weight-mixin(weight var(--wsr-font-weight-bold, 400)),
    size-mixin(font-size 10px, line-height 18px);
}

/* Heading Spacing Toggle */
.heading-h1-spacing {
  -st-mixin: family-mixin(family value(helveticanueu65)),
  weight-mixin(weight var(--wsr-font-weight-bold, 400)),
  size-mixin(font-size 32px, line-height 42px);
}

.heading-h2-spacing {
  -st-mixin: family-mixin(family value(helveticanueu65)),
  weight-mixin(weight var(--wsr-font-weight-bold, 400)),
  size-mixin(font-size 24px, line-height 30px);
}

.heading-h3-spacing {
  -st-mixin: family-mixin(family value(helveticanueu55)),
  weight-mixin(weight var(--wsr-font-weight-bold, 400)),
  size-mixin(font-size 20px, line-height 24px);
}

/* Caption */
.caption-1 {
  -st-mixin: bold, family-mixin(family value(helveticanueu65)), size-mixin(font-size 10px, line-height 12px);
}