@use '@angular/material' as mat;

$font-family: 'Montserrat, sans-serif';

$custom-typography: mat.define-typography-config(
  $font-family: $font-family,
  $headline-1: mat.define-typography-level(
    $font-size: 96px,
  ),
  $headline-2: mat.define-typography-level(
    $font-size: 60px,
  ),
  $headline-3: mat.define-typography-level(
    $font-size: 48px,
  ),
  $headline-4: mat.define-typography-level(
    $font-size: 34px,
  ),
  $headline-5: mat.define-typography-level(
    $font-size: 24px,
  ),
  $headline-6: mat.define-typography-level(
    $font-size: 20px,
  ),
  $subtitle-1: mat.define-typography-level(
    $font-size: 16px,
  ),
  $subtitle-2: mat.define-typography-level(
    $font-size: 14px,
  ),
  $body-1: mat.define-typography-level(
    $font-size: 16px,
  ),
  $body-2: mat.define-typography-level(
    $font-size: 14px,
  ),
  $caption: mat.define-typography-level(
    $font-size: 12px,
  ),
  $button: mat.define-typography-level(
    $font-size: 14px,
  ),
  $overline: mat.define-typography-level(
    $font-size: 10px,
  )
);

@include mat.typography-hierarchy($custom-typography);
