:root {
	--primary-hue: 221;

	--success: #009933;
	--success-light: #00993345;

	--error: #e60000;
	--error-light: #e6000045;
	--error-xlight: #e6000021;

	--warning: #ffa64d;
	--warning-light: #ffa64d45;
	--warning-text: #eb7f00;

	--highlight: #ffff00;

	--chart-1: #16a34a;
	--chart-2: #d97706;
	--chart-3: #ea580c;
	--chart-4: #dc2626;
	--chart-5: #991b1b;

	--alert: #3cc06c;

	--info: #999999;
	--info-light: #99999945;

	--gray-medium: #cccccc;
	--gray-dark: #717171;

	--text-primary: hsl(0, 0%, 10%);
	--text-secondary: hsl(0, 0%, 31%);
	--text-color: hsl(var(--primary-hue), 45%, 41%);
	--text-color-light: hsl(var(--primary-hue), 45%, 61%);
	--text-label: hsl(var(--primary-hue), 45%, 41%);
	--text-placeholder: hsl(var(--primary-hue), 45%, 85%);

	--primary: hsl(var(--primary-hue), 45%, 40%);
	--primary-light: hsl(var(--primary-hue), 45%, 60%);
	--primary-xlight: hsl(var(--primary-hue), 45%, 70%);
	--primary-ulight: hsl(var(--primary-hue), 45%, 80%);

	--secondary: hsl(var(--primary-hue), 45%, 91%);
	--secondary-light: hsl(var(--primary-hue), 45%, 95%);

	--background: hsl(var(--primary-hue), 45%, 91%);
	--background-light: hsl(var(--primary-hue), 45%, 95%);
	--background-xlight: hsl(var(--primary-hue), 45%, 98%);

	--icon-color: hsl(var(--primary-hue), 45%, 71%);
	--border-color: hsl(var(--primary-hue), 45%, 85%);
	--focus-color: hsl(var(--primary-hue), 44%, 89%);
	--hover-color: hsl(var(--primary-hue), 45%, 99%);
	--selected-color: hsl(var(--primary-hue), 45%, 100%);
	--selected-border-color: hsl(var(--primary-hue), 45%, 85%);

	--table-header-bg: hsla(var(--primary-hue), 45%, 90%, 0.52);
	--table-row-even: hsl(var(--primary-hue), 45%, 98%);
	--table-row-odd: hsl(var(--primary-hue), 45%, 95%);
	--table-row-border: hsl(var(--primary-hue), 45%, 85%);
	--table-row-hover: hsl(var(--primary-hue), 45%, 92%);
	--table-row-selected: hsl(var(--primary-hue), 45%, 88%);
	--table-row-selected-border: hsl(var(--primary-hue), 45%, 40%);

	--menu-raised-bg: hsl(var(--primary-hue), 45%, 98%);
	--menu-raised-hover-bg: hsl(var(--primary-hue), 45%, 89%);

	--panel: hsl(var(--primary-hue), 45%, 98%);
	--sticky-toolbar: hsla(0, 0%, 100%, 0.71);

	--fields: hsl(var(--primary-hue), 45%, 100%);
	--field-border: hsl(var(--primary-hue), 45%, 71%);

	--mention-bg: rgba(0, 123, 255, 0.264);
	--review-partial-bg: rgba(255, 170, 0, 0.317);
	--review-date-bg: rgba(56, 225, 0, 0.288);
	--review-error-bg: rgba(255, 50, 50, 0.345);

	/* when in system darkmode and app light mode we can still set the top of Safari but only with dark colors. */
	--background-gradient: linear-gradient(to right bottom, var(--primary) 0%, var(--primary-light) 33.33%, var(--primary-xlight) 66.66%, var(--primary-ulight) 100%) fixed var(--primary);
}

:root.dark {
	--success: #1eb34f;
	--success-light: #1eb34f45;

	--error: #ff4d4d;
	--error-light: #ff4d4d45;
	--error-xlight: #ff4d4d21;

	--warning: #ffb870;
	--warning-light: #ffb87045;
	--warning-text: #ffca99;

	--highlight: hsla(60, 100%, 50%, 0.31);

	--chart-1: #4ade80;
	--chart-2: #facc15;
	--chart-3: #fb923c;
	--chart-4: #f87171;
	--chart-5: #e11d48;

	--alert: #4ade80;

	--info: #a6a6a6;
	--info-light: #a6a6a645;

	--gray-medium: #cccccc;
	--gray-dark: #717171;

	--text-primary: hsl(0, 0%, 98%);
	--text-secondary: hsl(0, 0%, 64%);
	--text-color: hsl(0, 0%, 98%);
	--text-color-light: hsl(0, 0%, 68%);
	--text-label: hsl(0, 0%, 71%);
	--text-placeholder: hsl(0, 0%, 45%);

	--p-l-dark: var(--primary-l-dark, 51%);
	--primary: hsl(var(--primary-hue), 100%, var(--p-l-dark));
	--primary-light: hsl(var(--primary-hue), 100%, calc(var(--p-l-dark) + 10%));
	--primary-xlight: hsl(var(--primary-hue), 100%, calc(var(--p-l-dark) + 20%));
	--primary-ulight: hsl(var(--primary-hue), 100%, calc(var(--p-l-dark) + 40%));

	--secondary: hsl(240, 1%, 21%);
	--secondary-light: hsl(0, 0%, 45%);

	--background: hsl(0, 0%, 7%);
	--background-light: hsl(0, 0%, 13%);
	--background-xlight: hsl(0, 0%, 16%);

	--icon-color: hsl(0, 0%, 71%);
	--border-color: hsl(0, 0%, 30%);
	--focus-color: hsl(0, 0%, 21%);
	--hover-color: hsl(0, 0%, 16%);
	--selected-color: hsl(0, 0%, 21%);
	--selected-border-color: hsl(0, 0%, 27%);

	--table-header-bg: hsla(0, 0%, 9%, 0.52);
	--table-row-even: hsl(0, 0%, 12%);
	--table-row-odd: hsl(0, 0%, 9%);
	--table-row-border: hsl(0, 0%, 30%);
	--table-row-hover: hsl(0, 0%, 16%);
	--table-row-selected: hsl(0, 0%, 22%);
	--table-row-selected-border: hsl(0, 0%, 93%);

	--menu-raised-bg: hsl(0, 0%, 16%);
	--menu-raised-hover-bg: hsl(0, 0%, 22%);

	--panel: #1e1e1e;
	--sticky-toolbar: hsla(0, 0%, 14%, 0.71);

	--fields: hsl(0, 0%, 7%);
	--field-border: #333333;

	--mention-bg: rgba(0, 123, 255, 0.738);
	--review-partial-bg: rgba(255, 170, 0, 0.607);
	--review-date-bg: rgba(26, 255, 0, 0.398);
	--review-error-bg: rgba(255, 50, 50, 0.45);

	--background-gradient: linear-gradient(to right bottom, var(--background) 0%, var(--background-light) 33.33%, var(--background-xlight) 66.66%, var(--background-xlight) 100%) fixed var(--background);
}

/*

    FONT COLOR

    */

.fc-text {
	color: var(--text-primary);
}
.fc-text-light {
	color: var(--text-secondary);
}
.fc-color {
	color: var(--text-color);
}
.fc-color-light {
	color: var(--text-color-light);
}
.fc-label {
	color: var(--text-label);
}
.fc-gray {
	color: var(--gray-dark);
}
.fc-gray-medium {
	color: var(--gray-medium);
}
.fc-white {
	color: white;
}
.fc-primary {
	color: var(--primary);
}
.fc-success {
	color: var(--success);
}
.fc-error {
	color: var(--error);
}