:root {
	--background: hsla(30, 100%, 98%, 1);
	--color: hsl(0,0%,0%);
	--h1-color: hsla(0, 0%, 0%, 1);
	--h1-bg: hsla(30, 60%, 86%, 1);
	--h1-shadow: hsla(30, 100%, 30%, 1);
	 
	--t-color: hsla(30, 100%, 94%, 1);
	--t-bg: hsla(30, 60%, 20%, 1);
	--t-shadow: hsla(30, 100%, 30%, 1);
	--pre-bg: hsla(30, 50%, 94%, 1);
	--pre-color: hsl(0,0%,0%);
	--pre-border-left: hsl(0, 0%, 67%);
	--border-sourceCode: hsl(0,0%,0%);
	--a-color: hsl(0,0%,0%);
	--a-focus-bg: hsl(0,100%,76.7%);
	--numbering: hsl(0,0%,46.7%);
	--mob-color: hsl(0,100%,50%);
	--touch: hsl(0,100%,50%);
}
html[mode=dark]:root {
	--background: hsl(0,100%,3.3%);
	--color: hsl(0,0%,100%);
	--h1-color: hsl(0,0%,100%);
	--h1-bg: hsla(30, 100%, 15%, 1);
	--h1-shadow: hsl(0,0%,0%);
	--t-color: hsl(0,0%,100%);
	--t-bg: hsla(30, 100%, 15%, 1);
	--t-shadow: hsla(30, 1000%, 40%, 1);
	--pre-bg: hsla(30, 60%, 14%, 1);
	--pre-color: hsl(0,0%,100%);
	--pre-border-left: hsl(0, 0%, 33%);
	--border-sourceCode: hsl(0,0%,100%);
    --a-color: hsl(0, 0%, 100%);
	--a-focus-bg: hsl(180,100%,23.3%);
	--numbering: hsl(0,0%,53.3%);
	--mob-color: hsl(0,100%,50%);
	--touch: hsl(0,100%,50%);
}