:root {
	--main-scroll: theme('colors.grayscale.300');
	--panels-scroll: hsl(180, 2%, 17%);
	--tag-background: hsl(210, 100%, 38%);
	--tag-text: theme('colors.white');
	--toast-background: hsla(0, 0%, 0%, 0.85);
	--toast-secondary: hsla(0, 0%, 100%, 0.15);
	--toast-text: hsla(0, 0%, 100%, 0.85);

	--primary-color: hsl(210, 100%, 52%); // will remove variable
	--primary-text: theme('colors.grayscale.870'); // will remove variable
	--secondary-color: hsl(46, 100%, 57%); // will remove variable
}

:root[data-theme='light'] {
	--main-background: theme('colors.white');
	--secondary-background: theme('colors.grayscale.930');
	--foreground: theme('colors.grayscale.200');
	--foreground-inverted: theme('colors.grayscale.930');
	--panels-background: hsl(210, 3%, 14%);
	--panels-text: theme('colors.white');

	--sidebar-link-bg: theme('colors.grayscale.240');
	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);

	--icon-hover: var(--primary-color);

	--table-bg: theme('colors.white');
	--table-zebra: theme('colors.grayscale.900');
	--table-highlight: theme('colors.grayscale.840');
}

:root[data-theme='dark'] {
	--main-background: theme('colors.grayscale.80');
	--secondary-background: theme('colors.grayscale.140');
	--foreground: theme('colors.grayscale.930');
	--foreground-inverted: theme('colors.grayscale.200');
	--panels-background: theme('colors.grayscale.100');
	--panels-text: theme('colors.white');

	--sidebar-link-bg: theme('colors.grayscale.240');
	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);

	--icon-hover: var(--primary-color);

	--table-bg: theme('colors.grayscale.80');
	--table-zebra: theme('colors.grayscale.140');
	--table-highlight: theme('colors.grayscale.200');
}

:root[data-theme='purple'] {
	--main-background: hsl(261, 74%, 6%);
	--secondary-background: hsl(257, 61%, 10%);
	--foreground: theme('colors.grayscale.930');
	--foreground-inverted: hsl(258, 62%, 8%);
	--panels-background: hsl(257, 70%, 9%);
	--panels-text: theme('colors.white');

	--sidebar-link-bg: hsl(257, 70%, 17%);
	--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);

	--icon-hover: hsl(186, 44%, 54%);

	--table-bg: hsl(261, 74%, 6%);
	--table-zebra: hsl(257, 61%, 10%);
	--table-highlight: hsl(257, 66%, 27%);
}