@use '@angular/material' as mat;

$igo-typography: mat.m2-define-typography-config(
  $headline-1: mat.m2-define-typography-level(110px, 110px, 500),
  $headline-2: mat.m2-define-typography-level(54px, 54px, 500),
  $headline-3: mat.m2-define-typography-level(43px, 46px, 500),
  $headline-4: mat.m2-define-typography-level(32px, 38px, 500),
  // h1
  $headline-5: mat.m2-define-typography-level(24px, 32px, 400),
  // h2
  $headline-6: mat.m2-define-typography-level(20px, 30px, 400),
  // h3
  $subtitle-1: mat.m2-define-typography-level(16px, 26px, 500),
  // h4
  $subtitle-2: mat.m2-define-typography-level(12px, 22px, 500),
  $body-1: mat.m2-define-typography-level(14px, 22px, 400),
  $body-2: mat.m2-define-typography-level(12px, 18px, 400),
  $caption: mat.m2-define-typography-level(12px, 18px, 400),
  $button: mat.m2-define-typography-level(13px, 13px, 500)
);

// WORKAROUND, mat-typography bad area of intersection, h4 is using mat-body-1
// https://github.com/angular/components/issues/26351
h4 {
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 500 !important;
}