:root {
	/* Dark-Light Mode */
	color-scheme: light dark;

	/* Colors */

	/* Primary color (Theme color) */
	--color-primary: #d23c00;

	/* Progress-bar */
	--color-nprogress-bar: #91301d;

	--color-text: #333;
	--color-text-white: #ffffff;

	--color-bg: #ffffff;

	--color-overlay: #000000;

	--color-danger: #fee2e2;
	--color-warning: #ffedd5;
	--color-info: #e0f2fe;

	--color-danger-text: #450a0a;
	--color-warning-text: #431407;
	--color-info-text: #082f49;

	--color-danger-icon: #dc2626;
	--color-warning-icon: #ea580c;
	--color-info-icon: #0284c7;

	--color-facebook: #0062e0;
	--color-twitter: #0076ad;

	--color-grey-100: #f7f7f7;
	--color-grey-menu: #e7e8e8;
	--color-grey-200: #707070;
	--color-grey-300: #626262;
	--color-grey-400: #4c4c4c;
	--color-grey-500: #333333;
	--color-grey-600: #202020;
	--color-grey-700: #0e0e0e;

	/* Font family */
	--font-family-primary: 'Source Sans Pro', Arial, sans-serif;

	/* Font weight */
	--font-weight-normal: 400;
	--font-weight-semiBold: 600;
	--font-weight-bold: 700;

	/* Typography */
	--font-family-h1: var(--font-family-primary);
	--font-weight-h1: var(--font-weight-bold);
	--font-size-h1: 2.25rem;
	--line-height-h1: 2.5rem;
	--margin-bottom-h1: 0.5rem;

	--font-family-h2: var(--font-family-primary);
	--font-weight-h2: var(--font-weight-bold);
	--font-size-h2: 1.875rem;
	--line-height-h2: 2.25rem;
	--margin-bottom-h2: 0.5rem;

	--font-family-h3: var(--font-family-primary);
	--font-weight-h3: var(--font-weight-bold);
	--font-size-h3: 1.125rem;
	--line-height-h3: 2rem;
	--margin-bottom-h3: 0.5rem;

	--font-family-h4: var(--font-family-primary);
	--font-weight-h4: var(--font-weight-bold);
	--font-size-h4: 1rem;
	--line-height-h4: 1.75rem;
	--margin-bottom-h4: 0.5rem;

	--font-family-content: var(--font-family-primary);
	--font-weight-content: var(--font-weight-normal);
	--font-size-content: 1rem;
	--line-height-content: 1.5rem;
	--margin-bottom-content: 0.5rem;

	--font-family-content-large: var(--font-family-primary);
	--font-weight-content-large: var(--font-weight-normal);
	--font-size-content-large: 1.125rem;
	--line-height-content-large: 1.75rem;
	--margin-bottom-content-large: 0.5rem;

	--font-family-content-small: var(--font-family-primary);
	--font-weight-content-small: var(--font-weight-normal);
	--font-size-content-small: 0.5rem;
	--line-height-content-small: 1.25rem;
	--margin-bottom-content-small: 0.5rem;

	--font-family-preamble: var(--font-family-primary);
	--font-weight-preamble: var(--font-weight-normal);
	--font-size-preamble: 1.125rem;
	--line-height-preamble: 1.75rem;
	--margin-bottom-preamble: 0.5rem;

	--font-family-menu: var(--font-family-primary);
	--font-weight-menu: var(--font-weight-normal);
	--font-size-menu: 1rem;
	--line-height-menu: 1.5rem;

	--font-family-span: var(--font-family-primary);
	--font-weight-span: var(--font-weight-normal);
	--font-size-span: 1.125rem;
	--line-height-span: 1.5rem;
	--margin-bottom-span: 1.5rem;

	--font-family-logoText: var(--font-family-primary);
	--font-weight-logoText: var(--font-weight-normal);
	--font-size-logoText: 0.875rem;
	--line-height-logoText: 1.25rem;
	--margin-bottom-logoText: 1.5rem;

	/* Media queries */
	--media-mobile: 576px;
	--media-tablet: 768px;
	--media-tablet-landscape: 992px;
	--media-laptop: 1200px;
	--media-dekstop: 1400px;

	/* Max width */
	--max-width-page-content: 74.5rem;
	--max-width-page-content-narrow: 37.5rem;

	/* Padding */
	--layout-padding-x: 0 1rem;
	--layout-padding-y: 1rem 0;
	--layout-padding: 1rem;

	/* Margin */
	--layout-margin-x: 0 1rem;
	--layout-margin-y: 1rem 0;
	--layout-margin: 1rem;

	--margin-none: 0rem;
	--margin-default: 3rem;
	--margin-extra: 4rem;
	--margin-mega: 7.5rem;

	/* Small devices (landscape phones, 576px and up) */
	@media (min-width: 576px) {
	}

	/* Medium devices (tablets, 768px and up) */
	@media (min-width: 768px) {
		/* Typography */
		--font-size-h1: 3.5rem;
		--line-height-h1: 3.75rem;
		--margin-bottom-h1: 2rem;

		--font-size-h2: 2rem;
		--line-height-h2: 2.25rem;
		--margin-bottom-h2: 1rem;

		--font-size-h3: 1.125rem;
		--line-height-h3: 2rem;
		--margin-bottom-h3: 0.5rem;

		--font-size-h4: 1rem;
		--line-height-h4: 1.75rem;
		--margin-bottom-h4: 0.5rem;

		--font-size-content: 1rem;
		--line-height-content: 1.5rem;
		--margin-bottom-content: 0.5rem;

		--font-size-content-large: 1.125rem;
		--line-height-content-large: 1.75rem;
		--margin-bottom-content-large: 0.5rem;

		--font-size-content-small: 0.875rem;
		--line-height-content-small: 1.25rem;
		--margin-bottom-content-small: 0.5rem;

		--font-size-preamble: 1.125rem;
		--line-height-preamble: 1.75rem;
		--margin-bottom-preamble: 0.5rem;

		--font-size-menu: 1rem;
		--line-height-menu: 1.5rem;

		--font-size-span: 1.125rem;
		--line-height-span: 1.5rem;
		--margin-bottom-span: 1.5rem;

		/* Padding */
		--layout-padding-x: 0 2rem;
		--layout-padding-y: 2rem 0;
		--layout-padding: 2rem;

		/* Margin */
		--layout-margin-x: 0 2rem;
		--layout-margin-y: 2rem 0;
		--layout-margin: 2rem;
	}

	/* Large devices (desktops, 992px and up) */
	@media (min-width: 992px) {
	}

	/* X-Large devices (large desktops, 1200px and up) */
	@media (min-width: 1200px) {
	}

	/* XX-Large devices (larger desktops, 1400px and up) */
	@media (min-width: 1400px) {
	}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--color-text: #ffffff;
		--color-bg: #333;
	}
}