:root:not([data-theme]),
[data-theme=light],
[data-theme=dark] [data-theme=inverted],
html:not(data-theme) [data-theme=inverted] [data-theme=inverted],
[data-theme=light] [data-theme=inverted] [data-theme=inverted] {

	--color-backdrop: var(--color-lvl-1);
	--color-foreground: var(--color-lvl-2);
	--color-foreground-stripe: var(--color-lvl-5);
	
	--text-color: var(--color-lvl-99);
	
	--border-color: var(--color-lvl-30);
	--corner-radius: 0px;
	
	--link-color: #005ea2;
	/* --link-color-visited: #54278f; */
	--link-color-visited: var(--link-color);
	--link-color-hover: #1a4480;
	--link-color-active: #162e51;
	--focus-color: #177de8;
	
	--color-lvl-100: black;
	--color-lvl-99: hsl(180, 20%, 1%);
	--color-lvl-98: hsl(220, 12%, 5%);
	--color-lvl-97: hsl(210, 20%, 6%);
	--color-lvl-96: hsl(219, 30%, 8%);
	--color-lvl-95: hsl(224, 37%, 10%);
	--color-lvl-90: hsl(224, 30%, 15%);
	--color-lvl-80: hsl(217, 20%, 21%);
	--color-lvl-70: hsl(218, 15%, 29%);
	--color-lvl-60: hsl(217, 15%, 38%);
	--color-lvl-50: hsl(218, 14%, 48%);
	--color-lvl-40: hsl(217, 15%, 59%);
	--color-lvl-30: hsl(214, 15%, 70%);
	--color-lvl-20: hsl(219, 20%, 83%);
	--color-lvl-10: hsl(210, 18%, 91%);
	--color-lvl-5:  hsl(200,  9%, 94%);
	--color-lvl-4:  hsl(216, 22%, 95%);
	--color-lvl-3:  hsl(210, 11%, 96%);
	--color-lvl-2:  hsl(200, 20%, 97%);
	--color-lvl-1:  hsl(210, 33%, 99%);
	--color-lvl-0:  white;
}

[data-theme=dark],
html:not(data-theme) [data-theme=inverted],
[data-theme=light] [data-theme=inverted],
[data-theme=dark] [data-theme=inverted] [data-theme=inverted] {
	
	--color-backdrop: var(--color-lvl-1);
	--color-foreground: var(--color-lvl-3);
	--color-foreground-stripe: var(--color-lvl-5);
	
	--text-color: var(--color-lvl-90);
	
	--border-color: var(--color-lvl-30);
	--corner-radius: 5px;

	--link-color: var(--color-lvl-100);
	--link-color-visited: var(--color-lvl-98);
	--link-color-hover: var(--color-lvl-70);
	--link-color-active: var(--color-lvl-60);
	--focus-color: #398ee7;
	
	--color-lvl-0:  black;
	--color-lvl-1:  hsl(180, 20%,  1%);
	--color-lvl-2:  hsl(220, 12%,  5%);
	--color-lvl-3:  hsl(210, 20%,  6%);
	--color-lvl-4:  hsl(219, 30%,  8%);
	--color-lvl-5:  hsl(224, 37%, 10%);
	--color-lvl-10: hsl(224, 30%, 15%);
	--color-lvl-20: hsl(217, 20%, 21%);
	--color-lvl-30: hsl(218, 15%, 29%);
	--color-lvl-40: hsl(217, 15%, 38%);
	--color-lvl-50: hsl(218, 14%, 48%);
	--color-lvl-60: hsl(217, 15%, 59%);
	--color-lvl-70: hsl(214, 15%, 70%);
	--color-lvl-80: hsl(219, 20%, 83%);
	--color-lvl-90: hsl(210, 18%, 91%);
	--color-lvl-95: hsl(200,  9%, 94%);
	--color-lvl-96: hsl(216, 22%, 95%);
	--color-lvl-97: hsl(210, 11%, 96%);
	--color-lvl-98: hsl(200, 20%, 97%);
	--color-lvl-99: hsl(210, 33%, 99%);
	--color-lvl-100: white;
}

[data-theme=dark] [data-theme=light],
[data-theme=inverted] {
	/* Styles applied whenever we're within both themes */
	--corner-radius: 5px;
}


body {
	color: var(--text-color);
	background-color: var(--color-backdrop);
}

* {
	outline-color: var(--focus-color);
}

a[href] {
	color: var(--link-color);
}

a[href]:visited {
	color: var(--link-color-visited);
}

a[href]:hover {
	color: var(--link-color-hover);
}

a[href]:active {
	color: var(--link-color-active);
}