@use '@angular/material' as mat;
@include mat.core();

$my-primary: mat.define-palette(mat.$teal-palette, 300);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$deep-orange-palette);

$my-typography: mat.define-typography-config(
  $font-family: 'Farhang'
);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
   warn: $my-warn,
 ),
 typography: $my-typography
));
@include mat.all-component-themes($my-theme);
@include mat.typography-hierarchy($my-typography);


/* ------- HACK ------- */

body {
  --mdc-filled-button-label-text-tracking: 0;
}

.mat-toolbar.mat-primary {
  color: white;
}

span[color="primary"] {
  color: mat.get-color-from-palette($my-primary, 300);
  
  &.logo-type {
    font-weight: 900;
  }
}

.mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-label-text-color: white;
}