:root[data-theme="light"] {
	--media-xsmall: 0px;
	--media-small: 600px;
	--media-medium: 900px;
	--media-large: 1200px;
	--media-xlarge: 1536px;

	--hover-color: rgba(0, 0, 0, 0.2);

	--paper-background: rgb(255 255 255 / 80%);

	--icon-filter: none; /* variable nicho para cambiar de color un icono que no puedo tocar de material UI.*/

	--table-background: rgba(0, 0, 0, 0.05);

	--text-primary: rgba(0, 0, 0, 0.87);
	--text-secondary: rgba(0, 0, 0, 0.6);
	--text-disabled: rgba(0, 0, 0, 0.38);
	--text-contrast: #fff;

	--crmpam-color-primary: #22004c;
	--crmpam-color-primary-light: rgb(78, 51, 111);
	--crmpam-color-primary-dark: rgb(23, 0, 53);
	--crmpam-color-primary-contrast-text: #fff;

	--crmpam-color-secondary: #fff159;
	--crmpam-color-secondary-light: rgb(255, 243, 122);
	--crmpam-color-secondary-dark: rgb(178, 168, 62);
	--crmpam-color-secondary-contrast-text: #rgba(0, 0, 0, 0.87);

	--crmpam-color-tertiary: #55ffaa;
	--crmpam-color-quinary: #d8d8d8;
	--crmpam-color-senary: #22004c;
	--crmpam-color-septenary: rgba(236, 34, 173, 1);

	--crmpam-background-primary: #edebf3;

	--crmpam-bg-color-info: #0288d1;
	--crmpam-bg-color-success: #2e7d32;
	--crmpam-bg-color-error: #d32f2f;
	--crmpam-bg-color-warning: #ed6c02;

	--crmpam-text-xsmall: 12px;
	--crmpam-text-small: 12px;
	--crmpam-text-medium: 14px;
	--crmpam-text-xmedium: 18px;
	--crmpam-text-large: 24px;
	--crmpam-text-xlarge: 32px;

	--crmpam-xsmall: 4px;
	--crmpam-small: 8px;
	--crmpam-medium: 16px;
	--crmpam-large: 32px;
	--crmpam-xlarge: 64px;

	--crmpam-font: 'Poppins', sans-serif;

	/* -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; */
	--crmpam-border-radius-small: 14px;
	--crmpam-border-radius-large: 24px;

	--crmpam-page-width: 1600px;
	--crmpam-header-height: 72px;

	--crmpam-btn-color-primary: #8011ff;
	--crmpam-btn-color-primary-hover: #740fe7;
	--crmpam-btn-color-secondary: #323232;
	--crmpam-btn-color-secondary-hover: #383838;
	--crmpam-btn-color-tertiary: #dad9d9;
	--crmpam-btn-color-tertiary-hover: #dad9d9;

	--header-background: linear-gradient(220deg,
			rgba(196, 218, 162, 1) 0%,
			rgba(218, 255, 237, 1) 10%,
			rgba(255, 255, 255, 1) 25%,
			rgba(255, 255, 255, 1) 50%,
			rgba(255, 255, 255, 1) 75%,
			rgba(213, 209, 227, 1) 90%,
			rgba(200, 150, 186, 1) 100%);
	--mobile-drawer-background: none;
}

:root[data-theme="dark"] {

	--text-primary: #fff;
	--text-secondary: rgba(255, 255, 255, 0.7);
	--text-disabled: rgba(255, 255, 255, 0.5);
	--text-icon: rgba(255, 255, 255, 0.5);
	--text-contrast: #000;

	--hover-color: rgba(255, 255, 255, 0.2);

	--paper-background: rgba(0, 0, 0, 0.8);
	
	--icon-filter: invert(1); /* variable nicho para cambiar de color un icono que no puedo tocar de material UI.*/

	--table-background: rgba(255, 255, 255, 0.05);
	/* this background is just a lighter variation */


	--crmpam-color-primary: #8211fe;
	--crmpam-color-primary-light: #a164e4;
	--crmpam-color-primary-dark: #430585;
	--crmpam-color-primary-contrast-text: #fff;

	--crmpam-color-secondary: #ec22ad;
	--crmpam-color-secondary-light: #cd47b1;
	--crmpam-color-secondary-dark: #87126e;
	--crmpam-color-secondary-contrast-text: #fff;

	--crmpam-color-tertiary: #eac435;
	--crmpam-color-quinary: #d8d8d8;
	--crmpam-color-senary: #ffffff;
	--crmpam-color-septenary: rgba(236, 34, 173, 1);

	--crmpam-background-primary: #09042e;

	--crmpam-bg-color-info: #29b6f6;
	--crmpam-bg-color-success: #66bb6a;
	--crmpam-bg-color-error: #f44336;
	--crmpam-bg-color-warning: #ffa726;

	--crmpam-text-color: #e0e0e0;
	--crmpam-text-color-contrast: #141128;

	--crmpam-text-xsmall: 12px;
	--crmpam-text-small: 12px;
	--crmpam-text-medium: 14px;
	--crmpam-text-xmedium: 18px;
	--crmpam-text-large: 24px;
	--crmpam-text-xlarge: 32px;

	--crmpam-xsmall: 4px;
	--crmpam-small: 8px;
	--crmpam-medium: 16px;
	--crmpam-large: 32px;
	--crmpam-xlarge: 64px;

	--crmpam-font: 'Poppins', sans-serif;

	/* -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; */
	--crmpam-border-radius-small: 12px;
	--crmpam-border-radius-large: 24px;

	--crmpam-page-width: 1600px;
	--crmpam-header-height: 72px;

	--crmpam-btn-color-primary: #8011ff;
	--crmpam-btn-color-primary-hover: #740fe7;
	--crmpam-btn-color-secondary: #323232;
	--crmpam-btn-color-secondary-hover: #383838;
	--crmpam-btn-color-tertiary: #dad9d9;
	--crmpam-btn-color-tertiary-hover: #dad9d9;

	--header-background: linear-gradient(to right bottom,
			#471178,
			#471178,
			#471178,
			#471178,
			#471178,
			#421273,
			#3e126d,
			#391268,
			#2f125c,
			#261151,
			#1e0f45,
			#170d39);
	--mobile-drawer-background: linear-gradient(to right bottom,
			#471178,
			#471178,
			#471178,
			#471178,
			#471178,
			#421273,
			#3e126d,
			#391268,
			#2f125c,
			#261151,
			#1e0f45,
			#170d39);
}