//
// Typography
//

@use 'rfs';

// Font families
$primary-font: 'Saira', sans-serif !default;
$font-families: (
  'primary': $primary-font
);

// Font scale
$base-font-size: 1rem !default;
$h1-font-size: $base-font-size * 3.75 !default;
$h2-font-size: $base-font-size * 2 !default;
$h3-font-size: $base-font-size * 1.5 !default;
$h4-font-size: $base-font-size * 1.25 !default;
$h5-font-size: $base-font-size !default;
$h6-font-size: $base-font-size !default;
$font-size-scale: (
  'base': $base-font-size,
  'h1': $h1-font-size,
  'h2': $h2-font-size,
  'h3': $h3-font-size,
  'h4': $h4-font-size,
  'h5': $h5-font-size,
  'h6': $h6-font-size
);

// line heights
$line-heights: (
  'heading-line-height': 1.2,
  'body-line-height': 1.5
);

// font weights
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weights: (
  'light': $font-weight-light,
  'normal': $font-weight-normal,
  'medium': $font-weight-medium,
  'semibold': $font-weight-semibold,
  'bold': $font-weight-bold
);

// Element & classes
h1,
.fu-text-h1 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--heading-line-height);

  @include rfs.font-size($h1-font-size);
}

h2,
.fu-text-h2 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--heading-line-height);

  @include rfs.font-size($h2-font-size);
}

h3,
.fu-text-h3 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--heading-line-height);

  @include rfs.font-size($h3-font-size);
}

h4,
.fu-text-h4 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--heading-line-height);

  @include rfs.font-size($h4-font-size);
}

h5,
.fu-text-h5 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--heading-line-height);

  @include rfs.font-size($h5-font-size);
}

h6,
.fu-text-h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--heading-line-height);

  @include rfs.font-size($h6-font-size);
}

p,
.fu-text-base {
  color: var(--high-emphasis-text-color);
  line-height: var(--body-line-height);
}