:root {
	--color--primary: #e30613;
	--color--secondary: #64358c;
	--color--tertiary: #b72638;

	--color-on-primary: #ffffff;
	--color-on-secondary: #e30613;
	--color-on-tertiary: #ffffff;

	--color-surface: #ffffff;
	--color-surface-variant: #e30613;
	--color-surface-dim: #faf7f0;
	--color-surface-dim-darker: #e6ebee;
	--color-surface-container-high: #e5e5e5;
	--color-inverse-surface: #312f38;

	--color-on-surface: #222222;
	--color-on-surface-darker: #525252;
	--color-on-surface-lower: #737373;
	--color-on-surface-lower-2: #a3a3a3;
	--color-on-surface-lowest: #e5e5e5;
	--color-on-surface-variant: #ffffff;
	--color-cta-black: #312f38;

	--color-read-only: #f5f5f5;
	--color-error: #d30003;
	--color-error-opacity: #d300031a;
	--color-success: #0a7046;
	--color-warning: #d37c00;

	--color-outline-variant: #e5e5e5;

	--color-primary-60: #e3061399;
	--color-on-surface-darker-10: rgba(82, 82, 82, 0.1);

	--color-outline-focus: #1a1a1a;

	/*
	* header colors
	* main-header: header containing menu voice or header in mobile
	*/
	--color-surface-header-mobile: #ffffff;
	--color-on-surface-header-mobile: #312f38;
	--color-outline-header-mobile: var(--color-outline-focus);
	--color-surface-header-modal: #ffffff;
	--color-outline-header-modal: var(--color-outline-focus);
	--color-surface-modal: #ffffff;
	--color-on-surface-modal: #262626;
	--color-on-surface-variant-modal: #1a1a1a;
	--color-outline-modal: var(--color-outline-focus);
	--color-on-surface-heading-modal: #1a1a1a;
	--color-on-surface-header-modal: #312f38;
	--color-on-surface-footer-modal: #1a1a1a;

	--color-surface-skip-to-content: #fafafa;
	--color-on-surface-skip-to-content: #312f38;

	--color-surface-top-header-desktop: #312f38;
	--color-on-surface-heading-modal-desktop: #262626;
	--color-on-surface-top-header-desktop: #ffffff;
	--color-on-surface-variant-top-header-desktop: #ffffff;
	--color-outline-top-header-desktop: #ffffff;
	--color-outline-variant-top-header-desktop: #ffffff;
	--color-surface-bottom-header-desktop: #ffffff;
	--color-on-surface-bottom-header-desktop: #312f38;
	--color-outline-bottom-header-desktop: var(--color-outline-focus);

	/* footer colors */
	--color-footer-bg: #312f38;
	--color-on-footer-link: #ffffff;

	/* container background color (grid container, list column container, tab container..) */
	--color--bg--container: #f5f5f5;

	/* cookie banner colors */
	--color-cookie-banner-primary: #b72638;
}

html {
	scroll-behavior: smooth;
}