:root {
	/*colors/Main/Text*/
	--white: #FFFFFF;
	--primary: #111827;
	--secondary: #6B7280;
	--link: #2B5BE8;
	--accessText: #10B981;
	--processText: #2B5BE8;
	--warningText: #F59E0B;
	--errorText: #EF4444;
	--noteColor: #D9DEE5;
	--placeholder: #9CA3AF;
	--hover: #234fd3;
	--labelText: #7c7c7c;
	/*colors/Main/Background*/
	--primaryButtonColor: #2535B2;
	--secondaryButtonColor: #E5E7EB;
	--fieldBg: #F9FAFB;
	--accessBg: #10b77f21;
	--processBg: #2B5BE821;
	--warningBg: #F59E0B21;
	--errorBg: #FEF2F2;
	/*colors/Main/Border*/
	--primaryBorder: #E5E7EB;
	--secondaryBorder: #F3F4F6;
	/*font*/
	--geistregular: 'Geist';
}
[data-theme="green"] {
	--primaryButtonColor: var(--color-green-700);
	--primaryBorder: var(--color-green-100);
	--hover: var(--color-green-500);
	--firstGradient: var(--color-green-100);
	--secondGradient: var(--color-amber-100);
	--link: var(--color-green-600);
	--bannerGradient1: var(--color-green-600);
	--bannerGradient2: var(--color-green-400);
}
[data-theme="cyan"] {
	--primaryButtonColor: var(--color-cyan-700);
	--primaryBorder: var(--color-cyan-100);
	--hover: var(--color-cyan-500);
	--firstGradient: var(--color-cyan-100);
	--secondGradient: var(--color-lime-100);
	--link: var(--color-cyan-600);
	--bannerGradient1: var(--color-cyan-600);
	--bannerGradient2: var(--color-cyan-400);
}
[data-theme="blue"] {
	--primaryButtonColor: var(--color-blue-700);
	--primaryBorder: var(--color-blue-100);
	--hover: var(--color-blue-500);
	--firstGradient: var(--color-blue-100);
	--secondGradient: var(--color-teal-100);
	--link: var(--color-blue-600);
	--bannerGradient1: var(--color-blue-600);
	--bannerGradient2: var(--color-blue-400);
}
[data-theme="violet"] {
	--primaryButtonColor: var(--color-violet-700);
	--primaryBorder: var(--color-violet-100);
	--hover: var(--color-violet-500);
	--firstGradient: var(--color-violet-100);
	--secondGradient: var(--color-sky-100);
	--link: var(--color-violet-600);
	--bannerGradient1: var(--color-violet-600);
	--bannerGradient2: var(--color-violet-400);
}
[data-theme="red"] {
	--primaryButtonColor: var(--color-red-700);
	--primaryBorder: var(--color-red-100);
	--hover: var(--color-red-500);
	--firstGradient: var(--color-red-100);
	--secondGradient: var(--color-purple-100);
	--link: var(--color-red-600);
	--bannerGradient1: var(--color-red-600);
	--bannerGradient2: var(--color-red-400);
}
[data-theme="orange"] {
	--primaryButtonColor: var(--color-orange-700);
	--primaryBorder: var(--color-orange-100);
	--hover: var(--color-orange-500);
	--firstGradient: var(--color-orange-100);
	--secondGradient: var(--color-pink-100);
	--link: var(--color-orange-600);
	--bannerGradient1: var(--color-orange-600);
	--bannerGradient2: var(--color-orange-400);
}
[data-theme="amber"] {
	--primaryButtonColor: var(--color-amber-700);
	--primaryBorder: var(--color-amber-100);
	--hover: var(--color-amber-500);
	--firstGradient: var(--color-amber-100);
	--secondGradient: var(--color-rose-100);
	--link: var(--color-amber-600);
	--bannerGradient1: var(--color-amber-600);
	--bannerGradient2: var(--color-amber-400);
}
[data-theme="fuchsia"] {
	--primaryButtonColor: var(--color-fuchsia-700);
	--primaryBorder: var(--color-fuchsia-100);
	--hover: var(--color-fuchsia-500);
	--firstGradient: var(--color-fuchsia-100);
	--secondGradient: var(--color-indigo-100);
	--link: var(--color-fuchsia-600);
	--bannerGradient1: var(--color-fuchsia-600);
	--bannerGradient2: var(--color-fuchsia-400);
}