:root {
	/* Base colors */
	--color-background: #fff8f0;
	--color-background-raised: #ffffff;
	--color-background-muted: #d9d9d9;
	--color-background-subtle: #e6e6e6;
	--color-background-pattern: #f9f0e6;
	--color-text: #0c0d27;
	--color-text-muted: #333333;
	--color-text-subtle: #595959;
	--color-primary: #d5932e;
	--color-primary-hover: var(--color-primary-schmuck);
	--color-primary-contrast: #0c0d27;
	--color-primary-hover-contrast: #0c0d27;
	--color-primary-schmuck: #dca870;
	--color-secondary: #242775;
	--color-secondary-hover: hsl(from var(--color-secondary) h s calc(l + 10));
	--color-secondary-contrast: #ffffff;
	--color-secondary-hover-contrast: #ffffff;
	--color-season: linear-gradient(to right, #C5B23E, #B7683E, #DDA340, #8BA589, #9C80D1, #D37A7F, #9C5CA1, #B55099, #B975C8);
	--color-overlay: hsla(0, 0%, 0%, 0.3);

	/* Functional colors */
	--color-link: var(--color-primary);
	--color-button-filled-background: var(--color-primary);
	--color-button-filled-text: var(--color-primary-contrast);
	--color-button-filled-background-hover: var(--color-primary-hover);
	--color-button-filled-text-hover: var(--color-primary-hover-contrast);
	--color-button-outline-background: transparent;
	--color-button-outline-text: var(--color-text);
	--color-button-outline-background-hover: var(--color-primary-hover);
	--color-button-outline-text-hover: var(--color-primary-hover-contrast);
	--color-button-ghost-background: transparent;
	--color-button-ghost-text: var(--color-text);
	--color-button-ghost-background-hover: var(--color-background-subtle);
	--color-button-ghost-text-hover: var(--color-text);

	/* Shadows */
	--shadow-filter-default: drop-shadow(hsla(30, 100%, 10%, 0.03) -15px 15px 15px) drop-shadow(hsla(30, 100%, 10%, 0.06) -4px 4px 6px);
	--shadow-filter-default-click: drop-shadow(hsla(30, 100%, 10%, 0.03) -4px 4px 4px) drop-shadow(hsla(30, 100%, 10%, 0.06) -2px 2px 3px);
	--shadow-box-default: -15px 15px 15px hsla(30, 100%, 10%, 0.03), -4px 4px 6px hsla(30, 100%, 10%, 0.06);
	--shadow-box-inner: inset -15px 15px 15px hsla(30, 100%, 10%, 0.03), inset -4px 4px 6px hsla(30, 100%, 10%, 0.06);

	/* Spacings, heights & widths */
	--spacing-1: 2px;
	--spacing-2: 4px;
	--spacing-3: 6px;
	--spacing-4: 10px;
	--spacing-5: 16px;
	--spacing-6: 26px;
	--spacing-7: 42px;
	--spacing-8: 70px;
	--spacing-9: 100px;
	--spacing-horizontal: var(--spacing-4);
	--spacing-vertical-content: var(--spacing-9);
	--max-width: 1200px;
	--max-width-with-spacing-horizontal: calc(var(--max-width) + 2 * var(--spacing-horizontal));
	--spacing-horizontal-width-reduced: var(--spacing-6);
	--max-width-reduced: 900px;
	--max-width-reduced-with-spacing-horizontal: calc(var(--max-width-reduced) + 2 * var(--spacing-horizontal-width-reduced));
	--height-header: 65px;

	/* Text Properties */
	--text-weight-regular: 400;
	--text-weight-medium: 500;
	--text-weight-semibold: 600;
	--text-weight-bold: 700;
	--text-body-size: 16px;
	--text-body-weight: var(--text-weight-medium);
	--text-body-line-height: 25px;
	--text-small-size: 14px;
	--text-small-weight: var(--text-weight-regular);
	--text-small-line-height: 20px;
	--text-h1-size: 20px;
	--text-h1-weight: var(--text-weight-medium);
	--text-h1-line-height: 30px;
	--text-h2-size: 19px;
	--text-h2-weight: var(--text-weight-regular);
	--text-h2-line-height: 28px;
	--text-h3-size: 17px;
	--text-h3-weight: var(--text-weight-regular);
	--text-h3-line-height: 25px;
	--text-sub-headline-size: 16px;
	--text-sub-headline-weight: var(--text-weight-regular);
	--text-sub-headline-line-height: 24px;

	/* z-indices */
	--z-index-header: 100;
	--z-index-overlay: 150;
}

@supports (color: oklch(0 0 0)) {
	:root {
		/* Base colors */
		--color-background: oklch(0.982 0.013 71.334);
		--color-background-raised: oklch(1 0 89.876);
		--color-background-muted: oklch(0.885 0 89.876);
		--color-background-subtle: oklch(0.925 0 89.876);
		--color-background-pattern: oklch(0.959 0.016 70.533);
		--color-text: oklch(0.176 0.052 277.906);
		--color-text-muted: oklch(0.321 0 89.876);
		--color-text-subtle: oklch(0.464 0 89.876);
		--color-primary: oklch(0.7122 0.1359 72.93);
		--color-primary-hover: var(--color-primary-schmuck);
		--color-primary-contrast: oklch(0.176 0.052 277.906);
		--color-primary-hover-contrast: oklch(0.176 0.052 277.906);
		--color-primary-schmuck: oklch(0.7675 0.095 67.69);
		--color-secondary: oklch(0.325 0.1308 274.71);
		--color-secondary-hover: oklch(from var(--color-secondary) calc(l + 0.1) c h);
		--color-secondary-contrast: oklch(1 0 89.876);
		--color-secondary-hover-contrast: oklch(1 0 89.876);
		--color-season: linear-gradient(to right in oklch, #C5B23E, #B7683E, #DDA340, #8BA589, #9C80D1, #D37A7F, #9C5CA1, #B55099, #B975C8);
	}
}

@media (width >= 768px) {
	:root {
		/* Text Properties */
		--text-h1-size: 23px;
		--text-h1-line-height: 35px;
		--text-h2-size: 21px;
		--text-h2-line-height: 30px;
		--text-h3-size: 18px;
		--text-h3-line-height: 26px;
	}
}

@font-face {
	font-family: 'Elms Sans';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(/ElmsSans.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url(/Oswald.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}