// src/styles/typography/_config.scss
@use '@angular/material' as mat;

$regular-font-family: "'Roboto', sans-serif";

$my-app-typography: mat.m2-define-typography-config(
  $font-family: $regular-font-family,
  $headline-1: mat.m2-define-typography-level($font-size: 112px,$font-weight: 800),
  $headline-2: mat.m2-define-typography-level($font-size: 56px),
  $headline-3: mat.m2-define-typography-level($font-size: 45px, $line-height: 48px),
  $headline-4: mat.m2-define-typography-level($font-size: 34px, $line-height: 40px),
  $headline-5: mat.m2-define-typography-level($font-size: 24px, $line-height: 32px),
  $headline-6: mat.m2-define-typography-level($font-size: 18px, $line-height: 16px,$font-weight: 700),
  $subtitle-1: mat.m2-define-typography-level($font-size: 18px, $line-height: 28px, $font-weight: 600),
  $subtitle-2: mat.m2-define-typography-level($font-size: 14px, $line-height: 24px, $font-weight: 400),
  $body-2: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400), 
  $body-1: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400),
  $button: mat.m2-define-typography-level($font-size: 16px,$font-weight: 600),
);

// headline-6 -> mat-card-title/header
// subtitle-2 -> mat-card-subtitle