/*light skin*/
:root {
    --icon-color: #1A1C1E; /* almost black */
    --icon-highlight: #5654AC; /* medium purple */
    --icon-highlight-shadow: transparent;
    --toolbar-color: #E8E8EB; /* light grey */
    --alert-color: orangered;
    --alt-alert-color: yellow;
    --accent-color: #5654AC; /* medium purple */
    --alt-accent-color: #3E3B92; /* darker purple */
    --accent-toolbar-color: #5654AC;
    --accent-toolbar-icon-color: #FFFFFF;
    --light-accent-color: #E2DFFF;
    --hover-color: rgb(226, 223, 255, 1);
    --hover-pale-color: rgba(86, 84, 172, 0.4); /* webkit-scrollbar */
    --hover-bright-color: rgba(86, 84, 172, 0.8); /* webkit-scrollbar */
    --hover-menu-color: rgba(0, 0, 0, 0.04); /* dx */
    --hover-button-color: rgb(226, 223, 255, 1);
    --hover-tab-color: #E2DFFF;
    --text-color: #1A1C1E;
    --caption-color: #FAEDC8; /* pale yellow for viewer titles */
    --button-color: #F4F3F7; /* DX Theme Builder button color */
    --alt-button-color: #5654AC; /* accented button, e.g. Login */
    --alt-button-text-color: #FFFFFF;
    --alt-button-hover-color: #E2DFFF;
    --muted-text-color: rgba(26, 28, 30, 0.8); /* HP editor */
    --background-color: #FFFFFF; /* lighter */
    --alt-background-color: #F4F3F7; /* darker */
    --border-color: #C8C5D3;
    --gradient-color: linear-gradient(#EEEDF1, #C8C5D3);
    --alt-gradient-color: linear-gradient(rgba(86, 84, 172, 0.2), rgba(86, 84, 172, 0.7));
    --viewer-background-color: rgb(240, 240, 240);
    --viewer-border-color: #474551;
    --common-accent-color: #9185FF;
    --heatmap-color: rgb(90, 90, 90);
    --tooltip-color: #FFFFFF; /* tooltip table alternating rows */
    --alt-tooltip-color: #E8E8EB; /* tooltip table alternating rows */
    --text-editor-background: #F4F3F7; /* DX Theme Builder text editor */
    --text-editor-border: #C8C5D3; /* DX Theme Builder text editor */
}

.darkSkin {
    --icon-color: #E2E2E5;
    --icon-highlight: #9185FF;
    --icon-highlight-shadow: black;
    --toolbar-color: #292A2D;
    --alert-color: #F1CB61;
    --alt-alert-color: yellow;
    --accent-color: #9185FF; /* lighter */
    --alt-accent-color: #3E3B92; /* darker */
    --accent-toolbar-color: #3E3B92;
    --accent-toolbar-icon-color: #E2E2E5;
    --light-accent-color: #E2DFFF; /* lightest, used for text */
    --hover-color: rgba(62, 59, 146, 0.6);
    --hover-pale-color: rgba(163, 162, 255, 0.2); /* webkit-scrollbar */
    --hover-bright-color: rgba(163, 162, 255, 0.6); /* webkit-scrollbar */
    --hover-menu-color: rgba(255, 255, 255, 0.12);
    --hover-button-color: rgba(163, 162, 255, 0.4);
    --hover-tab-color: #333437;
    --text-color: #E2E2E5;
    --caption-color: #FAEDC8; /* pale yellow for viewer titles */
    --button-color: #505050; /* DX Theme Builder button color */
    --alt-button-color: #A3A2FF; /* accented button, e.g. Login */
    --alt-button-text-color: #26227B;
    --alt-button-hover-color: #3E3B92;
    --muted-text-color: rgba(222, 222, 222, 0.8); /* HP editor */
    --background-color: #292A2D; /* lighter */
    --alt-background-color: #101112; /* darker */
    --border-color: #474551;
    --gradient-color: linear-gradient(#292A2D, #101112);
    --alt-gradient-color: linear-gradient(rgba(62, 59, 146, 0.1), rgba(62, 59, 146, 0.5));
    --viewer-background-color: rgb(0, 0, 0);
    --viewer-border-color: #474551;
    --common-accent-color: #9185FF;
    --heatmap-color: rgb(160, 160, 160);
    --tooltip-color: #474551; /* tooltip table alternating rows */
    --alt-tooltip-color: #333437; /* tooltip table alternating rows */
    --text-editor-background: #505050; /* DX Theme Builder text editor */
    --text-editor-border: #474551; /* DX Theme Builder text editor */
}