:root {
	/* Base colors */
	--color-background: #f5f5f5;
	--color-background-raised: #ffffff;
	--color-background-muted: #d9d9d9;
	--color-background-subtle: #e6e6e6;
	--color-text: #111111;
	--color-text-muted: #333333;
	--color-text-subtle: #595959;
	--color-primary: #16385e;
	--color-primary-hover: hsl(from var(--color-primary) h s calc(l + 10));
	--color-primary-contrast: #ffffff;
	--color-primary-hover-contrast: #ffffff;
	--color-secondary: #90AB8B;
	--color-secondary-hover: hsl(from var(--color-secondary) h s calc(l + 10));
	--color-secondary-contrast: #000000;
	--color-secondary-hover-contrast: #000000;

	/* 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);

	/* 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);
	--max-width: 1200px;
	--max-width-with-spacing-horizontal: calc(var(--max-width) + 2 * var(--spacing-horizontal));
	--height-header: 65px;

	/* Text Properties */
	--text-weight-regular: 400;
	--text-weight-medium: 500;
	--text-weight-semibold: 600;
	--text-body-size: 16px;
	--text-body-weight: var(--text-weight-regular);
	--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-semibold);
	--text-h1-line-height: 30px;
	--text-h2-size: 19px;
	--text-h2-weight: var(--text-weight-semibold);
	--text-h2-line-height: 28px;
	--text-h3-size: 17px;
	--text-h3-weight: var(--text-weight-medium);
	--text-h3-line-height: 25px;
	--text-sub-headline-size: 16px;
	--text-sub-headline-weight: var(--text-weight-regular);
	--text-sub-headline-line-height: 24px;
}

@supports (color: oklch(0 0 0)) {
	:root {
		/* Base colors */
		--color-background: oklch(0.97 0 89.876);
		--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-text: oklch(0.178 0 89.876);
		--color-text-muted: oklch(0.321 0 89.876);
		--color-text-subtle: oklch(0.464 0 89.876);
		--color-primary: oklch(0.337 0.078 253.269);
		--color-primary-hover: oklch(from var(--color-primary) calc(l + 0.1) c h);
		--color-primary-contrast: oklch(1 0 0);
		--color-primary-hover-contrast: oklch(1 0 0);
		--color-secondary: oklch(0.712 0.055 140.72);
		--color-secondary-hover: oklch(from var(--color-secondary) calc(l + 0.1) c h);
		--color-secondary-contrast: oklch(0 0 0);
		--color-secondary-hover-contrast: oklch(0 0 0);
	}
}

@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;
	}
}