.root {
	--example-background: var(--color-background);

	/* Spacing */
	--grid-base: 8px;
	--spacing-regular: var(--grid-base);
	--spacing-large: calc(var(--grid-base) * 2);
	--touch-target-min: 48px;

	/* Fonts */
	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
		sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	--font-size-base: 16px;
	--font-weight-light: 300;
	--font-weight-normal: normal;
	--font-weight-heavy: 700;
	--font-size-xs: 12px;
	--font-size-small: 14px;
	--font-size-medium: 16px;
	--font-size-large: 22px;
	--font-size-xl: 24px;
	--font-size-xxl: 26px;
	--font-size-title: 20px;
	--font-size-icon: 24px;
	--line-height-base: 24px;

	--normal-font-weight: 400;
	--bold-font-weight: 600;
	--bolder-font-weight: 600;

	/* Color hex values */
	--color-dark: #333;
	--color-text-primary: #000000;
	--color-text-secondary: #000000;
	--color-text-faded: #5c6c7c;
	--color-text-inverted: #ffffff;
	--color-highlight: #006be6;
	--color-highlight-border: hsl(212.08695652173913, 100%, 58.0980392157%);
	--color-success: #188701;
	--color-error: #eb1313;
	--color-alert: #ffa500;
	--color-info: #006be6;
	--color-background: #ffffff;
	--color-background-inverted: #5c6c7c;
	--color-background-faded: #f4f6f7;
	--color-border: #d6dde2;
	--color-border-strong: #5c6c7c;
	--color-border-invalid: hsl(0, 76.0393700787%, 86.8039215686%);
	--color-border-valid: hsl(109.70149253731344, 66.5294117647%, 81.6666666667%);
	--color-box-shadow: rgba(0, 0, 0, 0.2);
	--color-box-shadow-highlight: rgba(0, 107, 230, 0.2);
	--color-box-shadow-strong: rgba(0, 0, 0, 0.5);
	--color-box-shadow-focus: rgba(0, 107, 230, 0.2);
	--color-box-shadow-invalid: rgba(235, 19, 19, 0.2);
	--color-box-shadow-valid: rgba(24, 135, 1, 0.2);

	/* Border and shadow */
	--box-shadow-voffset-large: 9px;
	--box-shadow-blur-large: 16px;
	--box-shadow-dimensions-small: 0 2px 2px 0;
	--box-shadow-dimensions-large: 0 var(--box-shadow-voffset-large) var(--box-shadow-blur-large) 0;
	--border-width: 1px;
	--border-width-emphasized: 2px;
	--border-radius: 4px;

	/* transitions */
	--transition-duration: 0.25s;
	--transition-easing: ease;
	--medium-transition-duration: 0.5s;

	/* Avatar */
	--avatar-size-small: 24px;
	--avatar-size-medium: 40px;
	--avatar-size-large: 56px;

	/* Two column layout */
	--divider-width: 9px;

	--tab-width: calc(var(--grid-base) * 16);
	--tab-background: var(--color-background);
	--tab-content-background: var(--tab-background);
	--tab-button-background: var(--tab-background);
	--tab-button-color: var(--color-text-faded);
	--tab-button-active-color: var(--color-highlight);
	--tab-button-disabled-color: var(--color-border);

	--list-item-selected-background: var(--color-background-faded);
	--list-item-selected-color: var(--color-text-primary);
	--list-item-disabled-background: inherit;
	--list-item-disabled-color: var(--color-text-faded);
	--list-item-active-background: inherit;
	--list-item-active-color: var(--color-text-primary);

	--fab-background: var(--color-background);
	--fab-color: inherit;

	--color-primary: #ffffff;
	--color-secondary: rgb(199, 222, 209);

	--loader-size-small: 24px;
	--loader-size-medium: 36px;
	--loader-size-large: 48px;

	--vstack-padding-small: var(--grid-base);
	--vstack-padding-medium: calc(var(--grid-base) * 1.5);
	--vstack-padding-large: calc(var(--grid-base) * 2);
	--vstack-spacing-small: var(--grid-base);
	--vstack-spacing-medium: calc(var(--grid-base) * 1.5);
	--vstack-spacing-large: calc(var(--grid-base) * 2);

	--hstack-padding-small: var(--grid-base);
	--hstack-padding-medium: calc(var(--grid-base) * 1.5);
	--hstack-padding-large: calc(var(--grid-base) * 2);
	--hstack-spacing-small: var(--grid-base);
	--hstack-spacing-medium: calc(var(--grid-base) * 1.5);
	--hstack-spacing-large: calc(var(--grid-base) * 2);

	--button-background: var(--color-background);
	--button-background-faded: var(--color-background-faded);
	--button-text: var(--color-highlight);
	--button-text-faded: var(--color-text-faded);
	--button-text-inverted: var(--color-text-inverted);
	--button-border: var(--color-highlight);
}
