// -----------------------------------------------------------------------------------------------------
// @ Typography
// -----------------------------------------------------------------------------------------------------

// Angular Material typography
// $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
$typography: mat-typography-config(
  $font-family:
    '나눔고딕, Malgun Gothic, 맑은고딕, Arial, Muli, Helvetica Neue, Arial, sans-serif',
  $title: mat-typography-level(20px, 32px, 600),
  $body-2: mat-typography-level(14px, 24px, 600),
  $button: mat-typography-level(14px, 14px, 600),
  $input: mat-typography-level(16px, 1.125, 400)
);

// Setup the typography
@include angular-material-typography($typography);

// -----------------------------------------------------------------------------------------------------
// @ Define theme --LG RED
// -----------------------------------------------------------------------------------------------------
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$lgRed-app-primary: mat-palette($lg-red);
$lgRed-app-accent: mat-palette($lg-red, A200, A100, A400);

// The warn palette is optional (defaults to red).
$lgRed-app-warn: mat-palette($lg-red);

// Create the theme object (a Sass map containing all of the palettes).
$lgRed-app-theme: mat-light-theme(
  $lgRed-app-primary,
  $lgRed-app-accent,
  $lgRed-app-warn
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($lgRed-app-theme);

// Apply the theme to the user components
/*
@include components-theme($lgRed-app-theme);
*/
@include ucap-material-theme($lgRed-app-theme);
