:root {
	--color--primary: #64358c;
	--color--secondary: #2D0A4A;
	--color--tertiary: #170923;

	--color-on-primary: #FFFFFF;
	--color-on-secondary: #FFFFFF;
	--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-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;

	/* footer colors */
	--color-footer-bg: #F70000;
	--color-on-footer-link: #FFFFFF;

	/*
	* TO DO : CHANGE header colors 
	main-header: header containing menu voice or header in mobile
	*/
	--color-surface-header-mobile: #FFFFFF;
	--color-on-surface-header-mobile: #E30613;
	--color-outline-header-mobile: var(--color-outline-focus);
	--color-surface-header-modal: #FFFFFF;
	--color-outline-header-modal: var(--color-outline-focus);
	--color-surface-modal: #E30613;
	--color-on-surface-modal: #FFFFFF;
	--color-on-surface-variant-modal: #262626;
	--color-outline-modal: #FFFFFF;
	--color-on-surface-heading-modal: #FFFFFF;
	--color-on-surface-header-modal: #E30613;
	--color-on-surface-footer-modal: #FFFFFF;

	--color-surface-skip-to-content: #FAFAFA;
	--color-on-surface-skip-to-content: #312F38;

	--color-surface-top-header-desktop: #E30613;
	--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: #262626;
	--color-outline-bottom-header-desktop: var(--color-outline-focus);
	;
	/**
	* end header colors
	*/

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