:root {
	--app-font: system-ui, "Work Sans", sans-serif;
	--app-font-color: hsl(0, 0%, 100%);
	--app-background: hsl(225, 9%, 9%);
	--app-background-line: hsl(192, 18.52%, 70%);
	--app-background-gradient: linear-gradient(0, white, black);
	--app-highlight-primary-color: hsl(0, 0%, 100%);
	--app-highlight-primary: hsl(125, 80%, 38%);
	--app-highlight-primary-dimmed: hsla(125, 77%, 32%, 0.1);
	--app-element-blur: 30px;
	--app-element-blur-background: hsla(225, 9%, 9%, 0.6);
	--ui-side-menu-overlay: hsla(0, 0%, 20%, 0.9);

	--home-no-entries-color: hsl(0, 0%, 40%);
	--home-no-entries-background: hsla(0, 0%, 10%, 0.5);
	--home-week-progress-title: hsl(0, 0%, 65%);
	--home-week-progress-check-color: hsl(0, 0%, 100%);
	--home-week-progress-check-background: rgba(255, 255, 255, 0.1);
	--home-week-progress-today-title: hsl(0, 0%, 100%);
	--home-week-progress-today-check-color: hsl(0, 0%, 100%);
	--home-week-progress-today-check-background: rgba(255, 255, 255, 0.2);

	--news-background: hsl(0, 0%, 15%, 0.5);
	--news-item-header-background: hsl(0, 0%, 20%, 0.5);
	--news-item-background: hsl(0, 0%, 30%, 0.5);

	--app-border-radius: 8pt;

	--muscle-body: hsl(0, 0%, 100%);
	--muscle-normal: hsl(0, 0%, 80%);
	--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%);

	/* WORKOUT TYPE */
	--ui-workout-color: var(--app-highlight-primary);
	--ui-workout-deleted-color: hsl(0, 0%, 100%, 0.5);
	--ui-workout-deleted-background: hsl(0, 100%, 10%);
	--ui-workout-type-personal-color: hsl(0, 0%, 100%);
	--ui-workout-type-personal-background: hsl(200, 30%, 20%);
	--ui-workout-type-personal-icon: hsl(200, 80%, 70%);
	--ui-workout-type-group-color: hsl(0, 0%, 100%);
	--ui-workout-type-group-background: hsl(135, 80%, 20%);
	--ui-workout-type-group-icon: hsl(135, 80%, 70%);
	--ui-workout-type-session-color: hsl(0, 0%, 100%);
	--ui-workout-type-session-background: hsl(290, 30%, 20%);
	--ui-workout-type-session-icon: hsl(290, 80%, 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(0, 0%, 100%);
	--nav-selected-item-background: hsla(125, 77%, 32%, 0.15);

	--ui-input-color: hsl(0, 0%, 90%);
	--ui-input-background: hsl(0, 0%, 30%);
	--ui-input-title: hsl(0, 0%, 70%);
	--ui-input-checkbox-dot: hsl(0, 0%, 90%);
	--ui-input-checkbox-background: hsl(0, 0%, 36%);
	--ui-input-checkbox-dot-on: hsl(0, 0%, 100%);
	--ui-input-checkbox-background-on: var(--app-highlight-primary);
	--ui-input-checkbox-background-remove: hsl(10, 80%, 38%);
	--ui-input-checkbox-state: hsl(0, 0%, 36%);

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

	--ui-view-textarea: hsl(0, 0%, 5%);
	--ui-modal-background: hsl(0, 0%, 10%);
	--ui-modal-background-line: hsl(0, 0%, 20%);
	--ui-modal-navigation-background: hsla(0, 0%, 10%, 0.6);
	--ui-modal-search-background: hsla(0, 0%, 10%, 0.6);
	--ui-modal-search-input: hsla(0, 0%, 20%, 0.6);

	--ui-shadow: 0 0px 0px hsla(0, 0%, 0%, 0);

	--ui-grade-color: var(--app-highlight-primary);
	--ui-grade-background: hsl(0, 0%, 40%);

	--ui-button-color: hsl(0, 0%, 0%);
	--ui-button-background: hsl(0, 0%, 85%);

	--ui-box-title: hsl(0, 0%, 50%);
	--ui-box-background: hsl(240, 6%, 14%); /* hsla(0, 0%, 20%, 0.5); */
	--ui-box-background-2: hsl(0, 0%, 10%);
	--ui-box-border: hsl(240, 5%, 19%);
	--ui-box-state-3-background: hsla(202, 80%, 40%, 0.3);
	--ui-box-state-3-border: hsla(202, 80%, 40%);
	--ui-box-state-4-background: hsla(115, 80%, 40%, 0.3);
	--ui-box-state-4-border: var(--app-highlight-primary);
	--ui-box-note-color: hsla(0, 0%, 80%);
	--ui-box-note-background: hsla(0, 0%, 5%, 0.5);

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

	--ui-group-title: hsl(0, 0%, 50%);
	--ui-group-background: hsl(0, 0%, 20%);
	--ui-group-item-border: hsl(0, 0%, 15%);
	--ui-group-multiple-item-background: hsl(0, 0%, 16%);
	--ui-group-multiple-item-border: hsl(0, 0%, 10%);

	--ui-list-item-background: hsl(0, 0%, 25%);
	--ui-list-item-border: hsla(0, 0%, 50%, 0.5);

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

	--calendar-header: hsl(0, 0%, 100%);
	--ui-calendar-seperator: hsl(0, 0%, 20%);
	--ui-calendar-week: hsl(0, 0%, 100%);
	--ui-calendar-week-today: var(--app-highlight-primary);
	--ui-calendar-day-color: hsl(0, 0%, 100%);
	--ui-calendar-day-border: hsla(0, 0%, 15%, 0.5);
	--ui-calendar-day-today-color: hsl(0, 0%, 100%);
	--ui-calendar-day-today-bg: hsla(0, 0%, 7%, 0.5);
	--ui-calendar-day-today-border: var(--app-highlight-primary);
	--ui-calendar-day-selected-border: hsl(0, 0%, 100%);
	--ui-calendar-day-selecting-border: hsl(0, 0%, 50%);
	--ui-calendar-day-info-color: hsla(0, 0%, 40%, 0.5);
}

@media (prefers-color-scheme: lightM) {
	:root {
		--app-font-color: hsl(0, 0%, 10%);
		--app-background: hsl(225, 9%, 98%);
		--app-background-line: hsl(192, 18.52%, 90%);
		--app-background-gradient: linear-gradient(0, #eee, white);
		--app-highlight-primary-color: hsl(0, 0%, 10%);
		--app-highlight-primary: hsl(125, 60%, 45%);
		--app-highlight-primary-dimmed: hsla(125, 77%, 32%, 0.05);
		--app-element-blur-background: hsla(225, 9%, 98%, 0.6);
		--ui-side-menu-overlay: hsla(0, 0%, 80%, 0.7);

		--home-no-entries-color: hsl(0, 0%, 60%);
		--home-no-entries-background: hsla(0, 0%, 90%, 0.5);
		--home-week-progress-title: hsl(0, 0%, 85%);
		--home-week-progress-check-color: hsl(0, 0%, 10%);
		--home-week-progress-check-background: rgba(0, 0, 0, 0.05);
		--home-week-progress-today-title: hsl(0, 0%, 10%);
		--home-week-progress-today-check-color: hsl(0, 0%, 10%);
		--home-week-progress-today-check-background: rgba(0, 0, 0, 0.08);

		--news-background: hsl(0, 0%, 95%, 0.5);
		--news-item-header-background: hsl(0, 0%, 90%, 0.5);
		--news-item-background: hsl(0, 0%, 98%, 0.5);

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

		--ui-workout-color: var(--app-highlight-primary);
		--ui-workout-deleted-color: hsl(0, 0%, 80%, 0.5);
		--ui-workout-deleted-background: hsl(0, 100%, 95%);
		--ui-workout-type-personal-color: hsl(0, 0%, 20%);
		--ui-workout-type-personal-background: hsl(200, 30%, 90%);
		--ui-workout-type-personal-icon: hsl(200, 80%, 90%);
		--ui-workout-type-group-color: hsl(0, 0%, 20%);
		--ui-workout-type-group-background: hsl(135, 80%, 90%);
		--ui-workout-type-group-icon: hsl(135, 80%, 90%);
		--ui-workout-type-session-color: hsl(0, 0%, 20%);
		--ui-workout-type-session-background: hsl(290, 30%, 90%);
		--ui-workout-type-session-icon: hsl(290, 80%, 90%);

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

		--nav-item-color: hsl(0, 0%, 60%);
		--nav-selected-item-color: hsl(0, 0%, 10%);
		--nav-selected-item-background: hsla(125, 77%, 32%, 0.07);

		--ui-input-color: hsl(0, 0%, 30%);
		--ui-input-background: hsl(0, 0%, 95%);
		--ui-input-title: hsl(0, 0%, 50%);
		--ui-input-checkbox-dot: hsl(0, 0%, 30%);
		--ui-input-checkbox-background: hsl(0, 0%, 90%);
		--ui-input-checkbox-dot-on: hsl(0, 0%, 80%);
		--ui-input-checkbox-background-on: hsl(125, 80%, 60%);
		--ui-input-checkbox-background-remove: hsl(10, 80%, 80%);
		--ui-input-checkbox-state: hsl(0, 0%, 90%);

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

		--ui-view-textarea: hsl(0, 0%, 98%);
		--ui-modal-background: hsl(0, 0%, 98%);
		--ui-modal-background-line: hsl(0, 0%, 80%);
		--ui-modal-navigation-background: hsla(0, 0%, 90%, 0.6);
		--ui-modal-search-background: hsla(0, 0%, 90%, 0.6);
		--ui-modal-search-input: hsla(0, 0%, 80%, 0.6);

		--ui-grade-background: hsl(0, 0%, 90%);

		--ui-button-color: hsl(0, 0%, 100%);
		--ui-button-background: hsl(0, 0%, 98%);

		--ui-box-title: hsl(0, 0%, 70%);
		--ui-box-background: hsl(240, 6%, 98%);
		--ui-box-background-2: hsl(0, 0%, 98%);
		--ui-box-border: hsl(240, 5%, 80%);
		--ui-box-state-3-background: hsla(202, 80%, 80%, 0.15);
		--ui-box-state-3-border: hsla(202, 80%, 80%);
		--ui-box-state-4-background: hsla(115, 80%, 80%, 0.15);
		--ui-box-state-4-border: hsl(115, 80%, 80%);
		--ui-box-note-color: hsla(0, 0%, 40%);
		--ui-box-note-background: hsla(0, 0%, 95%, 0.5);

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

		--ui-group-title: hsl(0, 0%, 70%);
		--ui-group-background: hsl(0, 0%, 90%);
		--ui-group-item-border: hsl(0, 0%, 80%);
		--ui-group-multiple-item-background: hsl(0, 0%, 96%);
		--ui-group-multiple-item-border: hsl(0, 0%, 90%);

		--ui-list-item-background: hsl(0, 0%, 98%);
		--ui-list-item-border: hsla(0, 0%, 80%, 0.5);

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

		--calendar-header: hsl(0, 0%, 30%);
		--ui-calendar-seperator: hsl(0, 0%, 80%);
		--ui-calendar-week: hsl(0, 0%, 30%);
		--ui-calendar-week-today: var(--app-highlight-primary);
		--ui-calendar-day-color: hsl(0, 0%, 30%);
		--ui-calendar-day-border: hsla(0, 0%, 80%, 0.5);
		--ui-calendar-day-today-color: hsl(0, 0%, 30%);
		--ui-calendar-day-today-bg: hsla(0, 0%, 93%, 0.5);
		--ui-calendar-day-today-border: var(--app-highlight-primary);
		--ui-calendar-day-selected-border: hsl(0, 0%, 30%);
		--ui-calendar-day-selecting-border: hsl(0, 0%, 70%);
		--ui-calendar-day-info-color: hsla(0, 0%, 60%, 0.5);
	}
}