:root {
	--primary-clr: hsl(125, 80%, 38%);
	--critical-clr: hsl(0, 80%, 38%);

	--app-font-color: hsl(0, 0%, 10%);
	--app-background: hsl(0, 0%, 10%);
	--app-background-line: hsl(192, 18.52%, 70%);
	--app-highlight-primary-color: hsl(0, 0%, 100%);
	--app-highlight-primary: hsl(192, 63%, 42%);
	--app-highlight-primary-dimmed: hsla(125, 77%, 32%, 0.1);
	--app-element-blur: 200px;

	--muscle-body: hsl(0, 0%, 0%);
	--muscle-normal: hsl(0, 0%, 70%);
	--muscle-primary: hsl(0, 75%, 50%);
	--muscle-secondary: hsl(0, 75%, 80%);
	--muscle-recovery-primary: hsl(202, 75%, 50%);
	--muscle-recovery-secondary: hsl(202, 75%, 70%);

	--page-nav-item-color: hsl(0, 0%, 0%);
	--page-nav-item-background: hsl(192, 18.52%, 80%);

	--nav-item-color: hsl(0, 0%, 40%);
	--nav-selected-item-color: hsl(125, 77%, 32%);
	--nav-selected-item-background: hsla(125, 77%, 32%, 0.15);

	--ui-sidebar-color: hsl(0, 0%, 10%);
	--ui-sidebar-background: hsl(0deg 0% 91%);
	--ui-sidebar-border: hsl(0, 0%, 80%);

	--ui-input-color: hsl(0, 0%, 90%);
	--ui-input-background: hsl(0, 0%, 30%);
	--ui-input-checkbox-dot: hsl(0, 0%, 100%);
	--ui-input-checkbox-background: hsl(0, 0%, 80%);
	--ui-input-checkbox-dot-on: hsl(0, 0%, 100%);
	--ui-input-checkbox-background-on: var(--app-highlight-primary);
	--ui-input-checkbox-state: hsl(0, 0%, 90%);
	--ui-input-disabled-background: hsl(0, 0%, 90%);

	--ui-side-menu-overlay: hsla(0, 0%, 20%, 0.9);

	--messages-unread-color: hsl(200, 100%, 50%);

	--ui-modal-background: hsl(0, 0%, 85%);
	--ui-modal-background-line: hsl(0, 0%, 20%);
	--ui-modal-search-background: var(--ui-modal-background);
	--ui-modal-search-input: hsl(0, 0%, 100%);

	--ui-shadow: 0 1pt 5pt -3pt hsla(0, 0%, 0%, 0.5);

	--ui-grade-color: hsl(7, 100%, 58%);
	--ui-grade-background: hsl(0, 0%, 40%);

	--ui-box-title: hsl(0, 0%, 50%);
	--ui-box-background: hsl(0, 0%, 90%);
	--ui-box-state-3-background: hsla(202, 80%, 40%, 0.1);
	--ui-box-state-3-border: hsla(202, 80%, 40%);
	--ui-box-state-4-background: hsla(115, 80%, 40%, 0.1);
	--ui-box-state-4-border: hsl(115, 80%, 40%);

	--ui-disclosure-indicator: hsl(0, 0%, 70%);
	--ui-disclosure-indicator-action: hsl(0, 0%, 40%);

	--ui-group-title: hsl(0, 0%, 50%);
	--ui-group-background: hsl(0, 0%, 100%);
	--ui-group-item-border: hsl(0, 0%, 91%);
	--ui-group-item-selected-color: hsl(210deg 67% 95%);
	--ui-group-item-selected-background: hsl(210deg 67% 40%);
	--ui-group-item-selected-border: hsl(210deg 67% 40%);

	--ui-list-item-background: hsl(0, 0%, 25%);
	--ui-list-item-border: hsla(0, 0%, 0%, 0.15);
	--ui-list-item-selected-color: var(--ui-group-item-selected-color);
	--ui-list-item-selected-background: var(--ui-group-item-selected-background);

	--ui-tab-view-background: hsla(0, 0%, 100%, 0.6);
	--ui-tab-view-item-selected-color: hsl(0, 0%, 100%);
	--ui-tab-view-item-selected-background: hsl(0, 0%, 30%);
	--ui-tab-view-item-seperator: hsl(0, 0%, 80%);
	--ui-tab-add-color: hsla(0, 0%, 0%);

	--ui-calendar-border: hsla(0, 0%, 0%, 0.1);
	--ui-calendar-items-more-color: hsl(0, 0%, 30%);
	--ui-calendar-item-default-color: hsl(0, 0%, 30%);
	--ui-calendar-item-default-border: hsl(0, 0%, 30%);
	--ui-calendar-item-default-background: hsl(0 0% 90%);
	--ui-calendar-item-client-color: hsl(183deg 100% 20%);
	--ui-calendar-item-client-border: hsl(183deg 100% 30%);
	--ui-calendar-item-client-background: hsl(183deg 100% 81%);
	--ui-calendar-item-private-color: hsl(49 95% 20%);
	--ui-calendar-item-private-border: hsl(49, 95%, 39%);
	--ui-calendar-item-private-background: hsl(49 95% 81%);
	--ui-calendar-item-group-color: hsl(100, 94%, 20%);
	--ui-calendar-item-group-border: hsl(100, 95%, 39%);
	--ui-calendar-item-group-background: hsl(100 95% 81%);
	--ui-calendar-item-session-color: hsl(290, 94%, 20%);
	--ui-calendar-item-session-border: hsl(290, 95%, 39%);
	--ui-calendar-item-session-background: hsl(290 100% 90%);

	--ui-calendar-week-day-height: 30px;
	--ui-calendar-week-hour-width: 50px;
	--ui-calendar-week-hour-color: hsl(0, 0%, 60%);
	--ui-calendar-week-head-color: hsl(0, 0%, 98%);
}