@use '@angular/material' as mat;
$tbg-primary: (
	50 : #e6ecf0,
    100 : #c1d1db,
    200 : #98b2c3,
    300 : #6f93aa,
    400 : #507b98,
    500 : #316486,
    600 : #2c5c7e,
    700 : #255273,
    800 : #1f4869,
    900 : #133656,
    A100 : #90c6ff,
    A200 : #5dacff,
    A400 : #2a93ff,
    A700 : #1086ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);

$tbg-accent: (
	50 : #fff9e1,
    100 : #ffefb4,
    200 : #ffe582,
    300 : #ffdb50,
    400 : #ffd32b,
    500 : #ffcb05,
    600 : #ffc604,
    700 : #ffbe04,
    800 : #ffb803,
    900 : #ffac01,
    A100 : #ffffff,
    A200 : #fffaf2,
    A400 : #ffe8bf,
    A700 : #ffdea6,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #000000,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$tbg-warn: (
    50 : #fce1e7,
    100 : #f8b5c2,
    200 : #f4849a,
    300 : #f05371,
    400 : #ec2e52,
    500 : #e90934,
    600 : #e6082f,
    700 : #e30627,
    800 : #df0521,
    900 : #d90215,
    A100 : #ffffff,
    A200 : #ffced0,
    A400 : #ff9b9f,
    A700 : #ff8187,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

//derivated colors from theme-primary
$tbg-container: #316486;
$tbg-container-light: #d6e5ef;
$tbg-container-text: #244962;

$tbg-success: #76bb67;
$tbg-glow: #FE5D26;
$tbg-light: #cecece;
$tbg-dark: #1b374a;

// define 3 theme color
// mat-palette accepts $palette-name, main, lighter and darker variants
$tbg-theme-primary: mat.m2-define-palette($tbg-primary);
$tbg-theme-accent: mat.m2-define-palette($tbg-accent);
$tbg-theme-warn: mat.m2-define-palette($tbg-warn);