:root {
	--color--primary: #e30613;
	--color--secondary: #F6B2BA;
	--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: #F5F5F5;
	--color-surface-container-high: #E5E5E5;
	--color-inverse-surface: #312F38;
	
	--color-on-surface: #262626;
	--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-success: #0A7046;
	--color-warning: #D37C00;

	--color-outline-variant: #E5E5E5;


	--color-primary-60: rgba(211, 0, 3, 0.60);
	--color-on-surface-darker-10: rgba(82, 82, 82, 0.10);

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

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

}