:root {
    --primary-color: #4da3d4;
    --primary-color-a80: rgba(77, 163, 212, 0.75);
    --scale-down: scale(.997);
    --invalid-color: red;

    --font-color-button-danger: #dc2c2c;
    --border-color-button-danger: #dc2c2c;

    --success-color: #4dd47e;
    --failure-color: #dc2c2c;
}

:root[data-theme="light"] {
    --bg-main-color: #f2f3f7;
    --font-color: #1f2224;

    --box-shadow-flat: 6px 6px 16px 0px #dde4ef, -6px -6px 16px 0px #fff, inset 0px 0px 0px 0px #dde4ef, inset 0px 0px 0px 0px #fff;
    --box-shadow-pressed: 0px 0px 0px 0px #dde4ef, 0px 0px 0px 0px #fff, inset 6px 6px 16px 0px #dde4ef, inset -6px -6px 16px 0px #fff;
    --box-shadow-aside: inset -5px -5px 10px #cecfd2, inset 5px 5px 10px #ffffff;
}

:root[data-theme="dark"] {
    --bg-main-color: #1f2224;
    --font-color: #e0e0e0;

    --box-shadow-flat: 6px 6px 16px 0px rgba(15, 15, 16, .842), -6px -6px 16px 0px rgba(40, 40, 40, .801), inset 0px 0px 10px -4px rgba(15, 15, 16, .842), inset 0px 0px 5px -5px rgba(40, 40, 40, .801);
    --box-shadow-pressed: 0px 0px 0px 0px rgba(15, 15, 16, .842), 0px 0px 0px 0px rgba(40, 40, 40, .801), inset 6px 6px 16px 0px rgba(15, 15, 16, .842), inset -6px -6px 16px 0px rgba(40, 40, 40, .801);
    --box-shadow-aside: inset -5px -5px 10px #1a1d1f, inset 5px 5px 10px #242729;
    --box-shadow-menu: -3px 4px 7px -3px rgba(15, 15, 16, .842);

    --border-color: #343a3e;
    --border-color-hover: #515a60;

    --bg-list-item-color: #262a2d;

    --input-disabled-bg-color: #292b2c;
    --input-disabled-text-color: #7e7e7e;

    --bg-button-default-hover: #2d3033;
    --bg-button-active: #1c1e20;

    --bg-button-danger-hover: #2d3033;
    --bg-button-danger-active: #2d3033;

    --bg-button-text-active: #3d4349;

    --bg-button-darken-hover: #1a1c1e;
}