--t{color: hsl(108, 100%, 50%);}
--t{color: hsl(81, 100%, 56%);}
/* colors */
:root {
	--lightest: 0, 0%, 100%;
	--color-lightest: hsl(var(--lightest));

	--darkest: 120, 0%, 0%;
	--color-darkest: hsl(var(--darkest));
	
	--color-lightest: hsl(var(--lightest));
	--color-darkest: hsl(var(--darkest));


	
	/* --------- default mode (light-mode) --------- */
	--bg: var(--lightest);
	--o-bg: var(--darkest);
	
	--color-bg: hsl(var(--bg));
	--color-o-bg: hsl(var(--o-bg));
	
	--c1: 108, 100%, 50%;
	--c2:  81, 100%, 56%;
	--c3: 355, 100%, 50%;
	
	--color-c1: hsl(var(--c1));
	--color-c2: hsl(var(--c2));
	--color-c3: hsl(var(--c3));

	--o-c1: var(--darkest);
	--o-c2: var(--o-bg);
	--o-c3: var(--o-bg);

	--color-o-c1: hsl(var(--color-darkest));
	--color-o-c2: hsl(var(--color-darkest));
	--color-o-c3: hsl(var(--o-c3));

	/* --color-dark-green: hsl(from hsl(var(--c1)) h 30% 10%); */
	--color-dark-green: #00191a;
	--color-logo-blue: hsl(204, 100%, 50%);

	--color-o-logo-blue: var(--color-lightest);
	/* --color-o-prim: color-contrast(hsl(var(--prim)) vs var(--color-lightest), var(--color-darkest));
	--color-o-sec: color-contrast(hsl(var(--sec)) vs var(--color-lightest), var(--color-darkest));
	--color-o-acc: color-contrast(hsl(var(--acc)) vs var(--color-lightest), var(--color-darkest)); */
}

/* --------- modes light / dark --------- */

.--mode-dark {
  --bg: var(--darkest);
	--o-bg: var(--lightest);
}

/* --------- class helpers --------- */
.color-bg {
	color: var(--color-bg);
}

.color-o-bg {
	color: var(--color-o-bg);
}

.bc-bg {
	color: var(--color-o-bg);
	background-color: var(--color-bg);
}

.bc-o-bg {
	color: var(--color-bg);
	background-color: var(--color-o-bg);
}

.bc-darkest {
	color: var(--color-lightest);
	background-color: var(--color-darkest);
}

.bc-lightest {
	color: var(--color-darkest);
	background-color: var(--color-lightest);
}