:root {
    --GLOBAL_FG_COLOR: black;
    --GLOBAL_FG_COLOR2: gray;
    --GLOBAL_BG_COLOR: white;
    --GLOBAL_BORDER_COLOR: black;
    --GLOBAL_BORDER_COLOR2: blue;
    --GLOBAL_HIGHLIGHT_FG_COLOR: red;
    --GLOBAL_HIGHLIGHT_BORDER_COLOR: red;
    --GLOBAL_ACTIVE_FG_COLOR: cyan;
    --GLOBAL_ACTIVE_BORDER_COLOR: cyan;
    --GLOBAL_INACTIVE_TEXT_COLOR: teal;
    --GLOBAL_INACTIVE_BORDER_COLOR: lightblue;
    --GLOBAL_ERROR_COLOR: #992211;
    --GLOBAL_WARNING_COLOR: #112299;
    --GLOBAL_ALERT_COLOR: #119922;
    --GLOBAL_SHADOW_COLOR: #606060;
    --GLOBAL_SHADOW_COLOR2: lightblue;
    --GLOBAL_HIGHLIGHT_SHADOW_COLOR: pink;
    --GLOBAL_HOVER_COLOR: #FFAACC;
    --GLOBAL_HOVER_COLOR2: #99FF99;
    
    --GLOBAL_FONT_SIZE: 15px;

    /* IDE Section */
    --IDE_BG_COLOR: var(--GLOBAL_BG_COLOR);
    --IDE_FG_COLOR: var(--GLOBAL_FG_COLOR);

    /* Code Editor Section */
    --EDITOR_MIN_HEIGHT: 200px;
    --EDITOR_FONT_SIZE: var(--GLOBAL_FONT_SIZE);
    --EDITOR_FG_COLOR: var(--GLOBAL_FG_COLOR);
    --EDITOR_SETTINGS_FG_COLOR: var(--GLOBAL_FG_COLOR2);
    --EDITOR_CURSOR_BG_COLOR: var(--GLOBAL_FG_COLOR);
    --EDITOR_CURSOR_FG_COLOR: var(--GLOBAL_BG_COLOR);
    --EDITOR_CODE_COUNTER_BORDER: var(--GLOBAL_BORDER_COLOR2);

    /* Interface Section */
    --LOGGER_ERROR_COLOR: var(--GLOBAL_ERROR_COLOR);
    --LOGGER_ALERT_COLOR: var(--GLOBAL_ALERT_COLOR);
    --LOGGER_WARNING_COLOR: var(--GLOBAL_WARNING_COLOR);
    --LOGGER_FONT_SIZE: calc(var(--GLOBAL_FONT_SIZE) - 3px);
    --MENU_BG_COLOR: var(--GLOBAL_BG_COLOR);
    --MENU_SHADOW_COLOR: var(--GLOBAL_SHADOW_COLOR);
    --MENU_BAR_HOVER_COLOR: var(--GLOBAL_HOVER_COLOR);
    --MENU_ITEM_HOVER_COLOR: var(--GLOBAL_HOVER_COLOR2);
    --MENU_KEYBIND_COLOR: var(--GLOBAL_FG_COLOR2);
    --INTERFACE_BORDER_COLOR: var(--GLOBAL_BORDER_COLOR);
    --TAB_INACTIVE_TEXT_COLOR: var(--GLOBAL_INACTIVE_TEXT_COLOR);
    --TAB_INACTIVE_BORDER_COLOR: var(--GLOBAL_INACTIVE_BORDER_COLOR);

    /* Registers Section */
    --REGISTER_REG_BORDER_COLOR: var(--GLOBAL_BORDER_COLOR);
    --REGISTER_REG_ACTIVE_COLOR: var(--GLOBAL_ACTIVE_FG_COLOR);
    --REGISTER_REG_HEAD_COLOR: var(--GLOBAL_HIGHLIGHT_FG_COLOR);
    --REGISTER_ARROW_HOVER_COLOR: var(--GLOBAL_HIGHLIGHT_FG_COLOR);
    --REGISTER_INDEX_COLOR: var(--GLOBAL_FG_COLOR2);
    
    /* Flowchart Section */
    --FLOW_BG_COLOR: var(--GLOBAL_BG_COLOR);
    --FLOW_EDGE_COLOR: var(--GLOBAL_BORDER_COLOR);
    --FLOW_EDGE_LABEL_COLOR: var(--GLOBAL_FG_COLOR);
    --FLOW_STATE_FG_COLOR: white;
    --FLOW_STATE_BG_COLOR: teal;
    --FLOW_STATE_BORDER_COLOR: teal;
    --FLOW_STATE_ACTIVE_BORDER_COLOR: orange;

    /* Demo Section */
    --DEMO_BG_COLOR: var(--GLOBAL_BG_COLOR);
    --DEMO_NOTE_BOX_COLOR: var(--GLOBAL_BORDER_COLOR2);
    --DEMO_NOTE_SHADOW_COLOR: var(--GLOBAL_SHADOW_COLOR2);
    --DEMO_HIGHLIGHT_BOX_COLOR: var(--GLOBAL_HIGHLIGHT_BORDER_COLOR);
    --DEMO_HIGHLIGHT_SHADOW_COLOR: var(--GLOBAL_HIGHLIGHT_SHADOW_COLOR);
}

@media (prefers-color-scheme: dark) {
    :root {
	--GLOBAL_FG_COLOR: orange;
	--GLOBAL_BG_COLOR: black;
	--GLOBAL_BORDER_COLOR: orange;
	--GLOBAL_ERROR_COLOR: pink;
	--GLOBAL_ALERT_COLOR: lightgreen;
	--GLOBAL_WARNING_COLOR: lightblue;
	--GLOBAL_INACTIVE_TEXT_COLOR: lightblue;
	--GLOBAL_INACTIVE_BORDER_COLOR: lightblue;
	--GLOBAL_SHADOW_COLOR: orange;
	--GLOBAL_HOVER_COLOR: #225599;
	--GLOBAL_HOVER_COLOR2: #229955;

	/* Flowchart Section */
	--FLOW_BG_COLOR: var(--GLOBAL_BG_COLOR);
	--FLOW_EDGE_COLOR: var(--GLOBAL_BORDER_COLOR);
	--FLOW_EDGE_LABEL_COLOR: var(--GLOBAL_FG_COLOR);
	--FLOW_STATE_FG_COLOR: black;
	--FLOW_STATE_BG_COLOR: salmon;
	--FLOW_STATE_BORDER_COLOR: salmon;
	--FLOW_STATE_ACTIVE_BORDER_COLOR: cyan;
    }

    ::-webkit-scrollbar {
	background-color: #101010;
    }

    ::-webkit-scrollbar-thumb {
	background: orange;
    }

    ::-webkit-scrollbar-corner {
	background: black;
    }
}

body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    color: var(--IDE_FG_COLOR);
    background: var(--IDE_BG_COLOR);
}

* {
    box-sizing: border-box;
}