:root {
	--hf-color-primary: hsl(123, 43%, 34%);
	--hf-color-primary: #296391;
	--hf-color-primary-contrast: #3d9942;
	--hf-color-primary-contrast: #323232;
	--hf-color-primary-contrast: #296391;
	--hf-color-primary-text: hsl(0, 0%, 95%);

	--hf-color-alert-text: hsl(0, 0%, 20%);

	--hf-color-info: #c4dffb;
	--hf-color-info-contrast: #6990ee;

	--hf-color-error: #fce2de;
	--hf-color-error-contrast: #eb6176;

	--hf-color-success: #ccf3ca;
	--hf-color-success-contrast: #26a573;

	--hf-color-warning: #f6e5bb;
	--hf-color-warning-contrast: #e36f4f;

	/* Derived Colors: Set from other colors */
	--hf-color-well-surface: var(--hf-color-gray-1);
	--hf-color-background-surface: var(--hf-color-gray-1);
	--hf-color-elevated-surface: var(--hf-color-gray-0);

	--hf-color-surface-text: var(--hf-color-gray-9);
	--hf-color-surface-subtext: var(--hf-color-gray-7);

	--hf-color-info-text: var(--hf-color-alert-text);
	--hf-color-success-text: var(--hf-color-alert-text);
	--hf-color-error-text: var(--hf-color-alert-text);
	--hf-color-warning-text: var(--hf-color-alert-text);

	--hf-color-disabled-fg: var(--hf-color-gray-5);
	--hf-color-disabled-bg: var(--hf-color-gray-2);

	--hf-color-focus: var(--hf-color-info);
	--hf-color-border: var(--hf-color-gray-3);

	--hf-color-code-text: var(--hf-color-surface-text);

	--hf-color-tag: var(--hf-color-info);
	--hf-color-tag-text: var(--hf-color-info-text);

	/* Borders */
	--hf-border-radius-sm: var(--borderRadius0); /*2px;*/
	--hf-border-radius-md: var(--borderRadius1); /*4px;*/
	--hf-border-radius-lg: var(--borderRadius2); /*8px;*/
	--hf-border-radius-full: var(--borderRadius3); /*9999px;*/

	/* Other */
	--hf-max-content-width: 1320px;
	--hf-input-min-height: var(--space6); /* 2.125rem;*/

	/* spacing */
	--hf-space-xs: calc(0.5 * var(--space-2)); /* .375rem; */
	--hf-space-sm: var(--space-2); /* .75rem;*/
	--hf-space-default: var(--space0); /* 1rem;*/
	--hf-space-md: var(--space1); /* 1.125rem;*/
	--hf-space-lg: var(--space2); /* 1.5rem;*/
	--hf-space-xl: calc(2 * var(--space2)); /* 3rem;*/

	/* Font */
	--hf-font-size-min: var(--text-2); /* .8125rem;*/ /* WCAG recommendation */
	--hf-font-size-default: var(--text0); /* 1rem;*/
	--hf-font-size-md: var(--text1); /* 1.125rem;*/
	--hf-font-size-lg: var(--text2); /* 1.5rem;*/
	--hf-font-size-xl: calc(1.33 * var(--text2)); /* 2rem;*/

	--hf-header-height: 3em;
	--hf-header-font-size: var(--hf-font-size-md);
}