/* IMPORTANT!!! IMPORT ONLY ONCE IN `styles.scss`, no more */

:root {
    /*--s-dark-blue: #004e70;*/
    --s-dark-blue: #4970C8;

    --s-blue: #3a87ad;
    /*--s-light-blue: #d9edf7;*/
    --s-light-blue: #dfe9ff;
    /*--s-hover-blue: #e5edf1;*/

    --s-orange: #f5a623;
    --s-dark-yellow: #c09853;
    --s-yellow: #ffd800;
    --s-light-yellow: #fcf8e3;

    --s-green: #61c771;
    --s-light-green: #dff0d8;

    --s-dark-red: #d0021b;
    --s-red: #d0021b;
    --s-light-red: #ed3e53;
    --s-red-bg: #f2dede;

    --s-black: #333333;
    --s-dark-grey: #999999;
    --s-material-grey: #9b9b9b; /* same color as default material angular text. */
    --s-grey: #cacaca;
    --s-box-shadow: #dadada;
    --s-back-grey: #f0f0f0;
    --s-light-grey: #fafafa;
    --s-white: #ffffff;


    /* APPLY COLORS TO ITEMS - NO DEFINITIONS AFTER THIS POINT */
    --s-primary-color: var(--s-dark-blue);
    --s-secondary-color: var(--s-blue);
    --s-primary-color-text: var(--s-white); /* for $primary-color backgrounds,   this is the main text color */
    --s-secondary-color-text: var(--s-white); /* for $secondary-color backgrounds, this is the main text color */


    --s-text-primary-color: var(--s-black);
    --s-text-secondary-color: var(--s-dark-grey);

    --s-secondary-button-color: var(--s-secondary-color);

    --s-link-color: var(--s-primary-color);
    --s-primary-button-color: var(--s-primary-color);
    --s-scayla-header-background-color: var(--s-primary-color);
    --s-scayla-header-text-color: var(--s-primary-color-text);

    --s-app-background-color: var(--s-back-grey); /* the background color for anything that is NOT content (i.e. body) */
    --s-content-background-color: var(--s-white); /* the background color for the content of the bars */
    --s-subtle-border-color: var(--s-back-grey);

    --s-error-color: var(--s-light-red);
    --s-warning-color: var(--s-yellow);
    --s-success-color: var(--s-green);

    --s-error-color-text: var(--s-white);
    --s-warning-color-text: var(--s-black);
    --s-success-color-text: var(--s-white);

    --s-button-active: var(--s-black);
    --s-button-inactive: var(--s-dark-grey);

    --s-button-border-color: var(--s-grey);
    --s-button-border-radius: 4px;

    /*  Theme variables  */
    --theme-background-primary-color: #000;
    --theme-background-secondary-color: #DEDEDE;
    --theme-background-primary-color: #fff;
    --theme-light-hover-color: #F0F0F0;


  /*  Fonts color */
    --theme-text-primary-color: #000;
    --theme-text-secondary-color: #A9A8A9;
    --text-light-white-color: #fff;
    /*  separator  */
    --separator-light-lighter: #DEDEDE;
    --separator-light-darker: #A9A8A9;
    --theme-accent-color: #000;
}