:root {
	--dark-hue: 235; //300, 295
	--light-hue: 235;

	// global
	--color-black: 0, 0%, 0%;
	--color-white: 0, 0%, 100%;
	// accent theme colors
	--color-accent: 208, 100%, 57%;
	--color-accent-faint: 208, 100%, 64%;
	--color-accent-deep: 208, 100%, 47%;
	// text
	--color-ink: var(--dark-hue), 35%, 92%;
	--color-ink-dull: var(--dark-hue), 10%, 70%;
	--color-ink-faint: var(--dark-hue), 10%, 55%;
	// sidebar
	--color-sidebar: var(--dark-hue), 15%, 7%;
	--color-sidebar-box: var(--dark-hue), 15%, 16%;
	--color-sidebar-line: var(--dark-hue), 15%, 23%;
	--color-sidebar-ink: var(--dark-hue), 15%, 92%;
	--color-sidebar-ink-dull: var(--dark-hue), 10%, 70%;
	--color-sidebar-ink-faint: var(--dark-hue), 10%, 55%;
	--color-sidebar-divider: var(--dark-hue), 15%, 17%;
	--color-sidebar-button: var(--dark-hue), 15%, 18%;
	--color-sidebar-selected: var(--dark-hue), 15%, 24%;
	--color-sidebar-shade: var(--dark-hue), 15%, 23%;
	// main
	--color-app: var(--dark-hue), 15%, 13%;
	--color-app-box: var(--dark-hue), 15%, 18%;
	--color-app-dark-box: var(--dark-hue), 15%, 15%;
	--color-app-darker-box: var(--dark-hue), 16%, 11%;
	--color-app-light-box: var(--dark-hue), 15%, 34%;
	--color-app-overlay: var(--dark-hue), 15%, 17%;
	--color-app-input: var(--dark-hue), 15%, 20%;
	--color-app-focus: var(--dark-hue), 15%, 10%;
	--color-app-line: var(--dark-hue), 15%, 23%;
	--color-app-divider: var(--dark-hue), 15%, 5%;
	--color-app-button: var(--dark-hue), 15%, 23%;
	--color-app-hover: var(--dark-hue), 15%, 25%;
	--color-app-selected: var(--dark-hue), 15%, 26%;
	--color-app-selected-item: var(--dark-hue), 15%, 18%;
	--color-app-active: var(--dark-hue), 15%, 30%;
	--color-app-shade: var(--dark-hue), 15%, 0%;
	--color-app-frame: var(--dark-hue), 15%, 25%;
	--color-app-slider: var(--dark-hue), 15%, 20%;
	--color-app-explorer-scrollbar: var(--dark-hue), 20%, 25%;
	// menu
	--color-menu: var(--dark-hue), 15%, 10%;
	--color-menu-line: var(--dark-hue), 15%, 14%;
	--color-menu-ink: var(--dark-hue), 25%, 92%;
	--color-menu-faint: var(--dark-hue), 5%, 80%;
	--color-menu-hover: var(--dark-hue), 15%, 30%;
	--color-menu-selected: var(--dark-hue), 5%, 30%;
	--color-menu-shade: var(--dark-hue), 5%, 0%;
}

.vanilla-theme {
	// global
	--color-black: 0, 0%, 0%;
	--color-white: 0, 0%, 100%;
	// accent theme colors
	--color-accent: 208, 100%, 57%;
	--color-accent-faint: 208, 100%, 67%;
	--color-accent-deep: 208, 100%, 47%;
	// text
	--color-ink: var(--light-hue), 5%, 25%;
	--color-ink-dull: var(--light-hue), 5%, 40%;
	--color-ink-faint: var(--light-hue), 5%, 60%;
	// sidebar
	--color-sidebar: var(--light-hue), 5%, 96%;
	--color-sidebar-box: var(--light-hue), 5%, 100%;
	--color-sidebar-line: var(--light-hue), 10%, 85%;
	--color-sidebar-ink: var(--light-hue), 5%, 25%;
	--color-sidebar-ink-dull: var(--light-hue), 5%, 35%;
	--color-sidebar-ink-faint: var(--light-hue), 5%, 45%;
	--color-sidebar-divider: var(--light-hue), 15%, 93%;
	--color-sidebar-button: var(--light-hue), 15%, 100%;
	--color-sidebar-selected: var(--light-hue), 10%, 80%;
	--color-sidebar-shade: var(--light-hue), 15%, 100%;
	// main
	--color-app: var(--light-hue), 5%, 100%;
	--color-app-box: var(--light-hue), 5%, 98%;
	--color-app-dark-box: var(--light-hue), 5%, 97%;
	--color-app-darker-box: var(--light-hue), 5%, 95%;
	--color-app-light-box: var(--light-hue), 5%, 100%;
	--color-app-overlay: var(--light-hue), 5%, 100%;
	--color-app-overlay-shade: var(--light-hue), 15%, 95%;
	--color-app-input: var(--light-hue), 5%, 100%;
	--color-app-focus: var(--light-hue), 5%, 98%;
	--color-app-line: var(--light-hue), 5%, 90%;
	--color-app-button: var(--light-hue), 5%, 100%;
	--color-app-divider: var(--light-hue), 5%, 80%;
	--color-app-selected: var(--light-hue), 5%, 93%;
	--color-app-selected-item: var(--light-hue), 5%, 96%;
	--color-app-hover: var(--light-hue), 5%, 97%;
	--color-app-active: var(--light-hue), 5%, 87%;
	--color-app-shade: var(--light-hue), 15%, 50%;
	--color-app-frame: 0, 0%, 100%;
	--color-app-slider: var(--light-hue), 5%, 95%;
	--color-app-explorer-scrollbar: var(--light-hue), 5%, 75%;
	// menu
	--color-menu: var(--light-hue), 5%, 98%;
	--color-menu-line: var(--light-hue), 5%, 95%;
	--color-menu-ink: var(--light-hue), 5%, 20%;
	--color-menu-faint: var(--light-hue), 5%, 80%;
	--color-menu-hover: var(--light-hue), 15%, 20%;
	--color-menu-selected: var(--light-hue), 5%, 30%;
	--color-menu-shade: var(--light-hue), 5%, 0%;

	// --color-menu: var(--light-hue), 16%, 99%;
	// --color-menu-line: var(--light-hue), 5%, 90%;
	// --color-menu-ink: var(--light-hue), 5%, 30%;
	// --color-menu-faint: var(--light-hue), 5%, 80%;
	// --color-menu-hover: var(--light-hue), 15%, 20%;
	// --color-menu-selected: var(--light-hue), 5%, 30%;
	// --color-menu-shade: var(--light-hue), 5%, 0%;
}

.midnight-theme {
	--dark-hue: 240;
	// global
	--color-black: 0, 0%, 0%;
	--color-white: 0, 0%, 100%;
	// accent theme colors
	--color-accent: 208, 100%, 57%;
	--color-accent-faint: 208, 100%, 64%;
	--color-accent-deep: 208, 100%, 47%;
	// text
	--color-ink: var(--dark-hue), 20%, 88%;
	--color-ink-dull: var(--dark-hue), 8%, 65%;
	--color-ink-faint: var(--dark-hue), 8%, 50%;
	// sidebar
	--color-sidebar: var(--dark-hue), 30%, 4%;
	--color-sidebar-box: var(--dark-hue), 25%, 8%;
	--color-sidebar-line: var(--dark-hue), 20%, 15%;
	--color-sidebar-ink: var(--dark-hue), 20%, 88%;
	--color-sidebar-ink-dull: var(--dark-hue), 8%, 65%;
	--color-sidebar-ink-faint: var(--dark-hue), 8%, 50%;
	--color-sidebar-divider: var(--dark-hue), 25%, 9%;
	--color-sidebar-button: var(--dark-hue), 25%, 10%;
	--color-sidebar-selected: var(--dark-hue), 25%, 16%;
	--color-sidebar-shade: var(--dark-hue), 20%, 15%;
	// main
	--color-app: var(--dark-hue), 25%, 8%;
	--color-app-box: var(--dark-hue), 20%, 12%;
	--color-app-dark-box: var(--dark-hue), 25%, 9%;
	--color-app-darker-box: var(--dark-hue), 28%, 6%;
	--color-app-light-box: var(--dark-hue), 20%, 24%;
	--color-app-overlay: var(--dark-hue), 25%, 11%;
	--color-app-input: var(--dark-hue), 20%, 14%;
	--color-app-focus: var(--dark-hue), 25%, 6%;
	--color-app-line: var(--dark-hue), 20%, 16%;
	--color-app-divider: var(--dark-hue), 25%, 3%;
	--color-app-button: var(--dark-hue), 20%, 16%;
	--color-app-hover: var(--dark-hue), 20%, 18%;
	--color-app-selected: var(--dark-hue), 20%, 20%;
	--color-app-selected-item: var(--dark-hue), 20%, 12%;
	--color-app-active: var(--dark-hue), 20%, 22%;
	--color-app-shade: var(--dark-hue), 25%, 0%;
	--color-app-frame: var(--dark-hue), 20%, 18%;
	--color-app-slider: var(--dark-hue), 20%, 14%;
	--color-app-explorer-scrollbar: var(--dark-hue), 25%, 20%;
	// menu
	--color-menu: var(--dark-hue), 25%, 6%;
	--color-menu-line: var(--dark-hue), 20%, 10%;
	--color-menu-ink: var(--dark-hue), 20%, 88%;
	--color-menu-faint: var(--dark-hue), 5%, 75%;
	--color-menu-hover: var(--dark-hue), 20%, 22%;
	--color-menu-selected: var(--dark-hue), 10%, 22%;
	--color-menu-shade: var(--dark-hue), 10%, 0%;
}

.noir-theme {
	--dark-hue: 0;
	// global
	--color-black: 0, 0%, 0%;
	--color-white: 0, 0%, 100%;
	// accent theme colors
	--color-accent: 208, 100%, 57%;
	--color-accent-faint: 208, 100%, 64%;
	--color-accent-deep: 208, 100%, 47%;
	// text
	--color-ink: 0, 0%, 90%;
	--color-ink-dull: 0, 0%, 70%;
	--color-ink-faint: 0, 0%, 50%;
	// sidebar
	--color-sidebar: 0, 0%, 0%;
	--color-sidebar-box: 0, 0%, 4%;
	--color-sidebar-line: 0, 0%, 12%;
	--color-sidebar-ink: 0, 0%, 90%;
	--color-sidebar-ink-dull: 0, 0%, 70%;
	--color-sidebar-ink-faint: 0, 0%, 50%;
	--color-sidebar-divider: 0, 0%, 5%;
	--color-sidebar-button: 0, 0%, 6%;
	--color-sidebar-selected: 0, 0%, 12%;
	--color-sidebar-shade: 0, 0%, 0%;
	// main
	--color-app: 0, 0%, 3%;
	--color-app-box: 0, 0%, 8%;
	--color-app-dark-box: 0, 0%, 5%;
	--color-app-darker-box: 0, 0%, 2%;
	--color-app-light-box: 0, 0%, 18%;
	--color-app-overlay: 0, 0%, 7%;
	--color-app-input: 0, 0%, 10%;
	--color-app-focus: 0, 0%, 2%;
	--color-app-line: 0, 0%, 14%;
	--color-app-divider: 0, 0%, 0%;
	--color-app-button: 0, 0%, 12%;
	--color-app-hover: 0, 0%, 14%;
	--color-app-selected: 0, 0%, 16%;
	--color-app-selected-item: 0, 0%, 8%;
	--color-app-active: 0, 0%, 18%;
	--color-app-shade: 0, 0%, 0%;
	--color-app-frame: 0, 0%, 14%;
	--color-app-slider: 0, 0%, 10%;
	--color-app-explorer-scrollbar: 0, 0%, 18%;
	// menu
	--color-menu: 0, 0%, 2%;
	--color-menu-line: 0, 0%, 8%;
	--color-menu-ink: 0, 0%, 90%;
	--color-menu-faint: 0, 0%, 70%;
	--color-menu-hover: 0, 0%, 16%;
	--color-menu-selected: 0, 0%, 18%;
	--color-menu-shade: 0, 0%, 0%;
}

.slate-theme {
	--dark-hue: 220;
	// global
	--color-black: 0, 0%, 0%;
	--color-white: 0, 0%, 100%;
	// accent theme colors
	--color-accent: 208, 100%, 57%;
	--color-accent-faint: 208, 100%, 64%;
	--color-accent-deep: 208, 100%, 47%;
	// text
	--color-ink: var(--dark-hue), 10%, 88%;
	--color-ink-dull: var(--dark-hue), 5%, 65%;
	--color-ink-faint: var(--dark-hue), 5%, 50%;
	// sidebar
	--color-sidebar: var(--dark-hue), 10%, 6%;
	--color-sidebar-box: var(--dark-hue), 8%, 10%;
	--color-sidebar-line: var(--dark-hue), 8%, 16%;
	--color-sidebar-ink: var(--dark-hue), 10%, 88%;
	--color-sidebar-ink-dull: var(--dark-hue), 5%, 65%;
	--color-sidebar-ink-faint: var(--dark-hue), 5%, 50%;
	--color-sidebar-divider: var(--dark-hue), 10%, 8%;
	--color-sidebar-button: var(--dark-hue), 8%, 11%;
	--color-sidebar-selected: var(--dark-hue), 10%, 18%;
	--color-sidebar-shade: var(--dark-hue), 10%, 0%;
	// main
	--color-app: var(--dark-hue), 8%, 9%;
	--color-app-box: var(--dark-hue), 8%, 13%;
	--color-app-dark-box: var(--dark-hue), 10%, 10%;
	--color-app-darker-box: var(--dark-hue), 10%, 7%;
	--color-app-light-box: var(--dark-hue), 8%, 22%;
	--color-app-overlay: var(--dark-hue), 8%, 12%;
	--color-app-input: var(--dark-hue), 8%, 15%;
	--color-app-focus: var(--dark-hue), 10%, 7%;
	--color-app-line: var(--dark-hue), 8%, 18%;
	--color-app-divider: var(--dark-hue), 10%, 4%;
	--color-app-button: var(--dark-hue), 8%, 17%;
	--color-app-hover: var(--dark-hue), 8%, 19%;
	--color-app-selected: var(--dark-hue), 8%, 21%;
	--color-app-selected-item: var(--dark-hue), 8%, 13%;
	--color-app-active: var(--dark-hue), 8%, 23%;
	--color-app-shade: var(--dark-hue), 10%, 0%;
	--color-app-frame: var(--dark-hue), 8%, 19%;
	--color-app-slider: var(--dark-hue), 8%, 15%;
	--color-app-explorer-scrollbar: var(--dark-hue), 8%, 22%;
	// menu
	--color-menu: var(--dark-hue), 10%, 7%;
	--color-menu-line: var(--dark-hue), 8%, 12%;
	--color-menu-ink: var(--dark-hue), 10%, 88%;
	--color-menu-faint: var(--dark-hue), 5%, 70%;
	--color-menu-hover: var(--dark-hue), 8%, 20%;
	--color-menu-selected: var(--dark-hue), 8%, 22%;
	--color-menu-shade: var(--dark-hue), 10%, 0%;
}

.nord-theme {
	--dark-hue: 220;
	// global
	--color-black: 0, 0%, 0%;
	--color-white: 0, 0%, 100%;
	// accent theme colors
	--color-accent: 208, 100%, 57%;
	--color-accent-faint: 208, 100%, 64%;
	--color-accent-deep: 208, 100%, 47%;
	// text
	--color-ink: var(--dark-hue), 15%, 90%;
	--color-ink-dull: var(--dark-hue), 12%, 70%;
	--color-ink-faint: var(--dark-hue), 10%, 55%;
	// sidebar
	--color-sidebar: var(--dark-hue), 20%, 9%;
	--color-sidebar-box: var(--dark-hue), 18%, 13%;
	--color-sidebar-line: var(--dark-hue), 15%, 20%;
	--color-sidebar-ink: var(--dark-hue), 15%, 90%;
	--color-sidebar-ink-dull: var(--dark-hue), 12%, 70%;
	--color-sidebar-ink-faint: var(--dark-hue), 10%, 55%;
	--color-sidebar-divider: var(--dark-hue), 20%, 11%;
	--color-sidebar-button: var(--dark-hue), 18%, 14%;
	--color-sidebar-selected: var(--dark-hue), 18%, 22%;
	--color-sidebar-shade: var(--dark-hue), 20%, 5%;
	// main
	--color-app: var(--dark-hue), 18%, 12%;
	--color-app-box: var(--dark-hue), 16%, 16%;
	--color-app-dark-box: var(--dark-hue), 18%, 13%;
	--color-app-darker-box: var(--dark-hue), 20%, 10%;
	--color-app-light-box: var(--dark-hue), 15%, 26%;
	--color-app-overlay: var(--dark-hue), 16%, 15%;
	--color-app-input: var(--dark-hue), 16%, 18%;
	--color-app-focus: var(--dark-hue), 20%, 10%;
	--color-app-line: var(--dark-hue), 15%, 22%;
	--color-app-divider: var(--dark-hue), 20%, 8%;
	--color-app-button: var(--dark-hue), 15%, 21%;
	--color-app-hover: var(--dark-hue), 15%, 23%;
	--color-app-selected: var(--dark-hue), 15%, 25%;
	--color-app-selected-item: var(--dark-hue), 16%, 16%;
	--color-app-active: var(--dark-hue), 15%, 27%;
	--color-app-shade: var(--dark-hue), 20%, 5%;
	--color-app-frame: var(--dark-hue), 15%, 23%;
	--color-app-slider: var(--dark-hue), 16%, 18%;
	--color-app-explorer-scrollbar: var(--dark-hue), 15%, 26%;
	// menu
	--color-menu: var(--dark-hue), 20%, 10%;
	--color-menu-line: var(--dark-hue), 16%, 15%;
	--color-menu-ink: var(--dark-hue), 15%, 90%;
	--color-menu-faint: var(--dark-hue), 10%, 70%;
	--color-menu-hover: var(--dark-hue), 15%, 24%;
	--color-menu-selected: var(--dark-hue), 15%, 26%;
	--color-menu-shade: var(--dark-hue), 20%, 5%;
}

.mocha-theme {
	--dark-hue: 25;
	// global
	--color-black: 0, 0%, 0%;
	--color-white: 0, 0%, 100%;
	// accent theme colors
	--color-accent: 208, 100%, 57%;
	--color-accent-faint: 208, 100%, 64%;
	--color-accent-deep: 208, 100%, 47%;
	// text
	--color-ink: var(--dark-hue), 15%, 88%;
	--color-ink-dull: var(--dark-hue), 10%, 65%;
	--color-ink-faint: var(--dark-hue), 8%, 50%;
	// sidebar
	--color-sidebar: var(--dark-hue), 20%, 7%;
	--color-sidebar-box: var(--dark-hue), 18%, 11%;
	--color-sidebar-line: var(--dark-hue), 15%, 18%;
	--color-sidebar-ink: var(--dark-hue), 15%, 88%;
	--color-sidebar-ink-dull: var(--dark-hue), 10%, 65%;
	--color-sidebar-ink-faint: var(--dark-hue), 8%, 50%;
	--color-sidebar-divider: var(--dark-hue), 20%, 9%;
	--color-sidebar-button: var(--dark-hue), 18%, 12%;
	--color-sidebar-selected: var(--dark-hue), 18%, 20%;
	--color-sidebar-shade: var(--dark-hue), 20%, 3%;
	// main
	--color-app: var(--dark-hue), 18%, 10%;
	--color-app-box: var(--dark-hue), 16%, 14%;
	--color-app-dark-box: var(--dark-hue), 18%, 11%;
	--color-app-darker-box: var(--dark-hue), 20%, 8%;
	--color-app-light-box: var(--dark-hue), 15%, 24%;
	--color-app-overlay: var(--dark-hue), 16%, 13%;
	--color-app-input: var(--dark-hue), 16%, 16%;
	--color-app-focus: var(--dark-hue), 20%, 8%;
	--color-app-line: var(--dark-hue), 15%, 20%;
	--color-app-divider: var(--dark-hue), 20%, 6%;
	--color-app-button: var(--dark-hue), 15%, 19%;
	--color-app-hover: var(--dark-hue), 15%, 21%;
	--color-app-selected: var(--dark-hue), 15%, 23%;
	--color-app-selected-item: var(--dark-hue), 16%, 14%;
	--color-app-active: var(--dark-hue), 15%, 25%;
	--color-app-shade: var(--dark-hue), 20%, 3%;
	--color-app-frame: var(--dark-hue), 15%, 21%;
	--color-app-slider: var(--dark-hue), 16%, 16%;
	--color-app-explorer-scrollbar: var(--dark-hue), 15%, 24%;
	// menu
	--color-menu: var(--dark-hue), 20%, 8%;
	--color-menu-line: var(--dark-hue), 16%, 13%;
	--color-menu-ink: var(--dark-hue), 15%, 88%;
	--color-menu-faint: var(--dark-hue), 10%, 70%;
	--color-menu-hover: var(--dark-hue), 15%, 22%;
	--color-menu-selected: var(--dark-hue), 15%, 24%;
	--color-menu-shade: var(--dark-hue), 20%, 3%;
}
