:root {
	--app-font-family: "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
	--map-background-light: #fff;
	--map-background-dark: #363636;
}

/* LIGHT MODE */
[data-theme="light"] {
	/* MAIN COLORS */
	--app-primary-color: #dd2f04;
	--app-secondary-color: #fd6232;
	--app-tertiary-color: #262626;

	/* BUTTON COLORS */
	--button-color: #dd2f04;
	--button-hover-background: white;

	/* BUTTON COLORS */
	--button-hover-color: var(--app-primary-color);
	--button-hover-border: var(--app-primary-color);

	/* FOOTER COLORS */
	--footer-primary: var(--app-primary-color);
	--footer-secondary: var(--app-secondary-color);

	/* FONT COLORS */
	--app-font-color: #212121;
	--alt-font-color: #fff;
	--hover-color: #b62500;

	/* BACKGROUND COLORS */
	--background-color: #fff;
	--background-highlight-color: #f3f3f3;
	--border-color: #e1e1e1;

	/* GRAY ACCENTS */
	--gray-primary: #666666;
	--gray-secondary: #b8b8b8;
	--gray-tertiary: #f0f0f0;

	/* Sonstiges */
	--spinner-color: var(--app-primary-color);

	/* https://codepen.io/sosuke/pen/Pjoqqp */
	--svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(159deg) brightness(104%) contrast(104%);
	--svg-filter-primary: invert(33%) sepia(70%) saturate(6726%) hue-rotate(8deg) brightness(95%) contrast(104%);
	--svg-filter-gray-primary: invert(43%) sepia(0%) saturate(13%) hue-rotate(168deg) brightness(87%) contrast(81%);
}
/* DARK MODE */

[data-theme="dark"] {
	/* MAIN COLORS */
	--app-primary-color: #dd2f04;
	--app-secondary-color: #fd6232;
	--app-tertiary-color: #fff;

	/* BUTTON COLORS */
	--button-color: var(--gray-tertiary);
	--button-hover-color: white;
	--button-hover-background: var(--background-highlight-color);
	--button-hover-border: var(--gray-tertiary);

	/* FOOTER COLORS */
	--footer-primary: var(--background-highlight-color);
	--footer-secondary: var(--gray-tertiary);

	/* FONT COLORS */
	--app-font-color: #d1d1d1;
	--alt-font-color: #fff;
	--hover-color: var(--background-color);

	/* BACKGROUND COLORS */
	--background-color: #242424;
	--background-highlight-color: #313131;
	--border-color: #535353;

	/* GRAY ACCENTS */
	--gray-primary: #bdbdbd;
	--gray-secondary: #666666;
	--gray-tertiary: #454545;

	/* Sonstiges */
	--spinner-color: var(--gray-primary);

	/* https://codepen.io/sosuke/pen/Pjoqqp*/
	--svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(159deg) brightness(104%) contrast(104%);
	--svg-filter-primary: invert(100%) sepia(100%) saturate(0%) hue-rotate(159deg) brightness(104%) contrast(104%);
	--svg-filter-gray-primary: invert(85%) sepia(0%) saturate(57%) hue-rotate(227deg) brightness(93%) contrast(82%);
	/* --svg-filter-primary: invert(33%) sepia(70%) saturate(6726%) hue-rotate(8deg) brightness(95%) contrast(104%); */
}