/*copy the line below to index.html in your app:
    <link href="_content/ComponentLibrary/css/colors.css" rel="stylesheet" />
*/

:root {
    --whitecolor: #ffffff;
    --whitesmokecolor: #f1f1f1;
    --whitefogcolor: #e1e1e1;
    --redcolor: #f44336;
    --lightredcolor: #FFC0CB;
    --bluecolor: #2196F3;
    --lightbluecolor: #BBDEFB;
    --greencolor: #04AA6D;
    --lightgreencolor: #C8E6C9;
    --orangecolor: #ff8c00;
    --lightorangecolor: #FFE0B2;
    --mediumgraycolor: #a0a0a0;
    --lightgraycolor: #cccccc;
    --graycolor: #808080;
    --darkgraycolor: #606060;
    --lightcolor: #e0e0e0;
    --darkcolor: #3c3c3c;
    --blackcolor: #232323;
    --purplecolor: #9C27B0;
    --browncolor: #795548;
    --yellowcolor: #FFEB3B;
    --lightyellowcolor: #FFF7B2;
}

:root {
    --success-color: var(--greencolor);
    --warning-color: var(--orangecolor);
    --failure-color: var(--redcolor);
    --info-color: var(--bluecolor);
    --neutral-color: var(--graycolor);
}

/*button colors*/
:root {
    --button-color-primary1: var(--bluecolor);
    --button-color-primary2: var(--whitesmokecolor);
    --button-color-theme1: var(--orangecolor);
    --button-color-theme2: var(--darkcolor);
    --button-color-neutral1: var(--blackcolor);
    --button-color-neutral2: var(--whitesmokecolor);
    --button-color-danger1: var(--redcolor);
    --button-color-danger2: var(--whitesmokecolor);
    --button-color-warning1: var(--orangecolor);
    --button-color-warning2: var(--lightgraycolor);
    --button-color-success1: var(--greencolor);
    --button-color-success2: var(--whitesmokecolor);
}


/*toggle switch colors*/
:root {
    --toggle-switch-color-on: var(--whitesmokecolor);
    --toggle-switch-color-off: var(--darkgraycolor);
    --toggle-switch-bubble-color-on: var(--bluecolor);
    --toggle-switch-bubble-color-off: var(--bluecolor);
    --toggle-switch-tunnle-color-on: var(--lightbluecolor);
    --toggle-switch-tunnle-color-off: var(--graycolor);
    --toggle-switch-border-color: var(--darkgraycolor);
}