@import '~@angular/material/theming';
@import url('//fonts.googleapis.com/icon?family=Material+Icons');
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Value Capture Colors
$md-vc-solid-blue: (
        50 : #E2E9ED,
        100 : #B6C8D1,
        200 : #86A4B3,
        300 : #558094,
        400 : #30647D,
        500 : #0C4966,
        600 : #0A425E,
        700 : #083953,
        800 : #063149,
        900 : #032138,
        A100 : #6EB7FF,
        A200 : #3B9DFF,
        A400 : #0884FF,
        A700 : #0077EE,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #ffffff,
                300 : #ffffff,
                400 : #ffffff,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #ffffff,
                A400 : #ffffff,
                A700 : #ffffff,
        )
);

$md-vc-leaf-green: (
        50 : #E5F0E9,
        100 : #BEDAC8,
        200 : #93C2A3,
        300 : #68A97E,
        400 : #479662,
        500 : #278446,
        600 : #237C3F,
        700 : #1D7137,
        800 : #17672F,
        900 : #0E5420,
        A100 : #8BFFA4,
        A200 : #58FF7D,
        A400 : #25FF55,
        A700 : #0BFF41,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #ffffff,
                400 : #ffffff,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #ffffff,
                A700 : #ffffff,
        )
);

$md-vc-light-blue: (
        50 : #E9F0F3,
        100 : #C9D9E2,
        200 : #A5C0CF,
        300 : #81A6BB,
        400 : #6693AD,
        500 : #4B809E,
        600 : #447896,
        700 : #3B6D8C,
        800 : #336382,
        900 : #235070,
        A100 : #B2DDFF,
        A200 : #7FC7FF,
        A400 : #4CB0FF,
        A700 : #32A5FF,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #ffffff,
                400 : #ffffff,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #ffffff,
                A700 : #ffffff,
        )
);

$md-vc-ever-green: (
        50 : #E3EdE7,
        100 : #BBD2C2,
        200 : #89B49A,
        300 : #599572,
        400 : #367F53,
        500 : #126835,
        600 : #106030,
        700 : #0D5528,
        800 : #0A4B22,
        900 : #053A16,
        A100 : #71FF93,
        A200 : #3EFF6D,
        A400 : #0BFF46,
        A700 : #00F13A,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #ffffff,
                400 : #ffffff,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #ffffff,
                A700 : #ffffff,
        )
);

$md-vc-soy: (
        50 : #F6F6E9,
        100 : #E8E8C7,
        200 : #D9D9A2,
        300 : #CACA7D,
        400 : #BEBE61,
        500 : #B3B345,
        600 : #ACAC3E,
        700 : #A3A336,
        800 : #9A9A2E,
        900 : #8B8B1F,
        A100 : #FFFFC6,
        A200 : #FFFF93,
        A400 : #FFFF60,
        A700 : #FFFF47,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #ffffff,
                400 : #ffffff,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #ffffff,
                A700 : #ffffff,
        )
);

$md-vc-sand: (
        50 : #FAFAF3,
        100 : #F4F2E1,
        200 : #ECEACE,
        300 : #E4E2B4,
        400 : #DFDBAB,
        500 : #D9D59C,
        600 : #D5D094,
        700 : #CFCA8A,
        800 : #CAC480,
        900 : #C0BA6E,
        A100 : #FFFFFF,
        A200 : #FFFFFF,
        A400 : #FFFCD4,
        A700 : #FFFABA,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #ffffff,
                400 : #ffffff,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #ffffff,
                A700 : #ffffff,
        )
);

// customize typography for VCT
$custom-typography: mat-typography-config(
        $font-family: 'Roboto, monospace',
        $headline: mat-typography-level(20px, 32px, 400)
);

@include mat-card-typography($custom-typography);

//customize Colours for VCT
$primary: mat-palette($md-vc-solid-blue, 500);
$accent: mat-palette($md-vc-leaf-green, 500, A200, A400);
$warn: mat-palette($mat-red, 500);

$vc-theme: mat-light-theme($primary, $accent, $warn);
$vc-alt: mat-light-theme($accent, $primary, $warn);

@include angular-material-theme($vc-theme);
@include mat-checkbox-theme($vc-theme);
@include mat-select-theme($vc-alt);

body {
  font-weight: normal;
}

h1, h2, h3, h4 {
  font-weight: normal;
}

.mat-toolbar, .mat-toolbar h1, .mat-toolbar h2, .mat-toolbar h3, .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6 {
  font-weight: 400 !important;
  font-size: 24px !important;
  background-color: #FFF;
}