/************************************************
*   COLORS
*************************************************/

:root[data-scheme="bdo"] {
    /* Backgrounds */
    --h: 223;
    --s: 78%;
    --l: 5%;
    --new-main-bg: hsl(223, 78%, 5%);
    --new-header-bg: hsl(223, 78%, 19%);
    --new-menu-bg: hsl(223, 78%, 23%);
    --new-header-active-bg: var(--new-menu-bg);
    --new-card-bg: var(--new-main-bg);
    --new-card-header-bg: transparent /*var(--new-main-bg)*/;
    --new-card-body-bg: var(--new-main-bg);
    --new-footable-header-bg: transparent /*var(--new-main-bg)*/;

    /* Text colors */
    --new-main-text-color: hsl(223, 0%, 100%);
    --new-card-header-text-color: var(--new-main-text-color);
    --new-card-body-text-color: hsl(223, 0%, 80%);
    /* --new-header-active-text-color: hsl(223, 20%, 80%); */
    --new-header-active-text-color: var(--new-main-text-color);
    --new-card-header-btn-color: var(--new-card-body-text-color);
    --new-placeholder: hsl(223, 0%, 90%)
        --new-footable-paging-color: var(--new-placeholder);
    --new-footable-main-color: var(--new-main-text-color);

    /* Borders, outlines */
    --new-header-border: hsl(223, 78%, 28%);
    --new-card-border: var(--new-header-border);
    --new-card-header-divider: var(--new-card-border);
    --new-outline: hsl(223, 78%, 32%);
    --new-footable-btn-border: var(--new-outline);
    --new-footable-paging-border: var(--new-outline);

    /* Box shadows */
    --new-card-box-shadow-color: hsl(223, 25%, 45%);
    --new-header-button-shadow: var(--new-placeholder);
    --main-box-shadow: 3px 1px 4px var(--new-card-box-shadow-color);

    /* Inactives */
    --new-inactive: hsl(223, 0%, 80%);
    --new-inactive-btn: var(--new-inactive);
    --disabled-color: hsl(223, 15%, 55%);
    --disabled-text-color: #c0c0c0;
    --disabled-text-color: hsl(223, 20%, 75%);

    /* Main colors */
    --new-main-color: hsl(223, 65%, 37%);
    --new-error-color: hsl(8, 81%, 22%);
    --ssm-main-color: hsl(73, 87%, 39%);

    /* Inputs */
    --new-input-bg: var(--new-header-bg);
    --new-input-border: var(--new-outline);
    --new-input-focus-border: var(--new-main-btn);
    --new-input-border-radius: 5px;
    --new-input-inactive-bg: hsl(223, 0%, 80%);

    --chosen-border-radius: var(--new-input-border-radius);

    /* Buttons */
    --new-main-btn: hsl(223, 100%, 30%);
    --new-footable-btn-bg: var(--new-header-bg);
    --new-footable-active-btn-bg: var(--new-outline);

    --all-btn-border-size: 1px;
    --all-btn-border-type: solid;
    --all-btn-border-color: transparent;
    --all-btn-border-radius: 5px;

    --btn-type-main-bg: var(--new-outline);
    --btn-type-main-hover-bg: var(--new-main-btn);
    --btn-type-main-border: var(--new-outline);
    --btn-type-main-hover-border: var(--new-main-btn);
    --btn-type-main-color: var(--new-main-text-color);
    --btn-type-main-hover-color: var(--new-main-text-color);

    --btn-type1-bg: hsl(223, 43%, 72%);
    --btn-type1-hover-bg: hsl(223, 43%, 50%);
    --btn-type1-border: var(--new-main-bg);
    --btn-type1-hover-border: var(--btn-type1-border);
    --btn-type1-color: var(--new-main-bg);
    --btn-type1-hover-color: var(--new-main-bg);

    --btn-type2-bg: hsl(223, 20%, 50%);
    --btn-type2-hover-bg: hsl(223, 20%, 40%);
    --btn-type2-border: var(--new-main-bg);
    --btn-type2-hover-border: var(--btn-type2-border);
    --btn-type2-color: var(--new-main-bg);
    --btn-type2-hover-color: hsl(223, 0%, 100%);

    --btn-type3-bg: hsl(223, 44%, 54%);
    --btn-type3-hover-bg: hsl(223, 34%, 37%);
    --btn-type3-border: var(--new-main-bg);
    --btn-type3-hover-border: var(--btn-type3-border);
    --btn-type3-color: var(--new-main-bg);
    --btn-type3-hover-color: hsl(223, 0%, 100%);

    --btn-type4-bg: hsl(223, 49%, 49%);
    --btn-type4-hover-bg: hsl(223, 74%, 44%);
    --btn-type4-border: var(--new-main-bg);
    --btn-type4-hover-border: var(--btn-type4-border);
    --btn-type4-color: var(--new-main-bg);
    --btn-type4-hover-color: hsl(223, 0%, 100%);

    --btn-type5-bg: hsl(223, 50%, 50%);
    --btn-type5-hover-bg: hsl(223, 50%, 40%);
    --btn-type5-border: var(--new-main-bg);
    --btn-type5-hover-border: var(--btn-type5-border);
    --btn-type5-color: hsl(223, 0%, 100%);
    --btn-type5-hover-color: hsl(223, 0%, 100%);

    --btn-type6-bg: hsl(223, 100%, 30%);
    --btn-type6-hover-bg: hsl(223, 57%, 40%);
    --btn-type6-border: var(--new-main-bg);
    --btn-type6-hover-border: var(--btn-type6-border);
    --btn-type6-color: hsl(223, 0%, 100%);
    --btn-type6-hover-color: var(--new-main-bg);

    --btn-back-bg: hsl(223, 0%, 100%);
    --btn-back-hover-bg: hsl(223, 4%, 35%);
    --btn-back-border: var(--new-main-bg);
    --btn-back-hover-border: hsl(223, 4%, 35%);
    --btn-back-color: var(--new-main-bg);
    --btn-back-hover-color: hsl(223, 0%, 100%);

    /* ------------------------------------------ */
    /* -- 				ICON COLORS			   -- */
    /* ------------------------------------------ */
    --icon-1: var(--btn-type1-bg);
    --icon-2: var(--btn-type2-bg);
    --icon-3: var(--btn-type3-bg);
    --icon-4: var(--btn-type4-bg);
    --icon-5: var(--btn-type5-bg);
    --icon-6: var(--btn-type6-bg);

    /* ------------------------------------------ */
    /* -- 				HEIGHTS 			   -- */
    /* ------------------------------------------ */

    --header-height: 50px;
    --side-menu-width: 50px;

    --header-font-size: 22px;

    /* ------------------------------------------ */
    /* -- 				FONTAWESOME			   -- */
    /* ------------------------------------------ */

    --fa-display: flex;
}