$fontColorMajor: var(--fontColorMajor);
$fontColorMinor: var(--fontColorMinor);
$fontColorSmall: var(--fontColorSmall);

$fontSizeH1: 20px;
$fontSizeH2: 20px;
$fontSizeH3: 18px;
$fontSizeH4: 16px;
$fontSizePr: 14px;
$fontSizeSm: 12px;

$foreground: var(--foreground);
$mideground: var(--mideground);
$background: var(--background);
$highlight: var(--shade2);

:root {
	--foreground: var(--shade4);
	--mideground: var(--shade6);
	--background: var(--shade8);
	--fontColorMajor: var(--shade0);
	--fontColorMinor: var(--shade2);
	--fontColorSmall: var(--shade3);

	--borderLight: solid 2px var(--shade3);
	--borderHeavy: solid 3px var(--shade5);

	--colorMajor: var(--blue);
	--colorMinor: var(--indigo);
	--colorSmall: var(--navy);
}

$borderLight: var(--borderLight);
$borderHeavy: var(--borderHeavy);

$colorMajor: var(--colorMajor);
$colorMinor: var(--colorMinor);
$colorSmall: var(--colorSmall);


$hoverMajor: $blue;
$hoverMinor: $highlight;
$hoverPercent: 30%;

$animationDuration: 0.2s;
$transitionDuration: 0.2s;

$scrollbarWidth: 10px;

$topBarHeight: 33px;
$bottomBarHeight: 23px;
$sidebarHandleWidth: 15px;
$fileManagerHeight: 280px;

$inputBackground: $shade7;
$inputForeground: $shade4;

$tabListBackground: var(--blue);