:root {
	--gray-base: #202430;
	--gray-shade-60: #13161D;
	--gray-tint-30: #63666E;
	--gray-tint-50: #909298;
	--gray-tint-80: #D2D3D6;
	--gray-alpha-80: rgb(32 36 48 / .8);
	--gray-tint-90: #E9E9EA;

	--white-base: #fff;
	--primary-base: #358FE6;

	--extras-sun: #FFD371;
	--extras-moon: #7190FF;
	--extras-black-alpha-64: rgb(0 0 0 / .64);
	--extras-white-alpha-64: rgb(255 255 255 / .64);

	--clr-site-base:hsl(300, 100%, 45%);
	--clr-site-base-dark:hsl(300, 100%, 35%);
	--clr-site-base-light:hsl(300, 100%, 65%);
	--clr-site-base-logo:hsl(300, 100%, 45%);

	--clr-wrapper-shadow:hsl(0, 0%, 20%);

	--clr-base-shadow:hsl(300, 33%, 54%);
}

:root[data-theme="dark"] {
	--main-header-bg: var(--gray-shade-60);
	--top-bar-icon-fill: var(--gray-tint-80);
	--sidebar-bg: var(--gray-base);
	--sidebar-icon-fill: var(--gray-tint-50);
	--sidebar-icon-active-fill: var(--white-base);
	--sidebar-link-color: var(--gray-tint-50);
	--sidebar-link-active-color: var(--white-base);
	--sidebar-menu-heading-color: var(--gray-tint-30);
	--theme-switcher-bg: var(--gray-shade-60);
	--theme-switcher-indicator: var(--clr-site-base);
	--theme-switcher-indicator-pos: 3.25rem;
	--sun-icon-fill: var(--gray-tint-30);
	--moon-icon-fill: var(--extras-white-alpha-64);
	--main-header-link-color: var(--gray-tint-80);

  --body-bg:var(--gray-base);
  --body-clr:white;

	--clr-site-base:hsl(300, 100%, 35%);
	--clr-dark-light:white;
	--clr-wrapper-shadow:white;
}

:root[data-theme="light"] {
	--main-header-bg: var(--gray-tint-80);
	--top-bar-icon-fill: var(--gray-base);
	--sidebar-bg: var(--gray-tint-90);
	--sidebar-icon-fill: var(--gray-tint-50);
	--sidebar-icon-active-fill: var(--gray-base);
	--sidebar-link-color: var(--gray-tint-50);
	--sidebar-link-active-color: var(--gray-base);
	--sidebar-menu-heading-color: var(--gray-tint-50);
	--theme-switcher-bg: var(--gray-tint-80);
	--theme-switcher-indicator: var(--clr-site-base-light);
	--theme-switcher-indicator-pos: .25rem;
	--sun-icon-fill: var(--extras-black-alpha-64);
	--moon-icon-fill: var(--gray-tint-50);
	--main-header-link-color: var(--gray-base);

  --body-bg:var(--gray-tint-90);
  --body-clr:black;

	--clr-site-base:hsl(300, 100%, 45%);
	--clr-dark-light:black;
	--clr-wrapper-shadow:hsl(0, 0%, 20%);

}