/* color-scope */
.color-scope {
	--cd-rgb: var(--n);
	--cs-rgb: var(--c1);
	--ct-rgb: var(--c2);
	--cf-rgb: var(--b);
	--co-rgb: var(--b);

	color: rgb(var(--co-rgb) / 1);
	background-color: rgb(var(--cd-rgb) / 1);
	border-color: rgb(var(--cs-rgb) / 1);
}

/* dominante */
.color-scope .color-dominant {
	color: rgb(var(--cd-rgb) / 1);
}

.color-scope .bg-dominant {
	background-color: rgb(var(--cd-rgb) / 1);
}

.color-scope .border-dominant {
	border-color: rgb(var(--cd-rgb) / 1);
}

/* secundario */
.color-scope .color-secondary {
	color: rgb(var(--cs-rgb) / 1);
}

.color-scope .bg-secondary {
	background-color: rgb(var(--cs-rgb) / 1);
}

.color-scope .border-secondary {
	border-color: rgb(var(--cs-rgb) / 1);
}

/* tercero */
.color-scope .color-third {
	color: rgb(var(--ct-rgb) / 1);
}

.color-scope .bg-third {
	background-color: rgb(var(--ct-rgb) / 1);
}

.color-scope .border-third {
	border-color: rgb(var(--ct-rgb) / 1);
}

/* cuarto */
.color-scope .color-fourth {
	color: rgb(var(--cf-rgb) / 1);
}

.color-scope .bg-fourth {
	background-color: rgb(var(--cf-rgb) / 1);
}

.color-scope .border-fourth {
	border-color: rgb(var(--cf-rgb) / 1);
}

/* opuesto */
.color-scope .color-opposite {
	color: rgb(var(--co-rgb) / 1);
}

.color-scope .bg-opposite {
	background-color: rgb(var(--co-rgb) / 1);
}

.color-scope .border-opposite {
	border-color: rgb(var(--co-rgb) / 1);
}
:root {
	--viewport-dominant: 255 255 255;
	--viewport-secondary: 0 0 0;
	--viewport-third: 120 120 120;
	--viewport-fourth: 200 200 200;
	--viewport-opposite: 0 0 0;

	--viewport-color: var(--viewport-secondary);
}

/* dominant */
.viewport-color-dominant {
	color: rgb(var(--viewport-dominant) / 1);
}

.viewport-bg-dominant {
	background-color: rgb(var(--viewport-dominant) / 1);
}

.viewport-border-dominant {
	border-color: rgb(var(--viewport-dominant) / 1);
}

/* secondary */
.viewport-color-secondary {
	color: rgb(var(--viewport-secondary) / 1);
}

.viewport-bg-secondary {
	background-color: rgb(var(--viewport-secondary) / 1);
}

.viewport-border-secondary {
	border-color: rgb(var(--viewport-secondary) / 1);
}

/* third */
.viewport-color-third {
	color: rgb(var(--viewport-third) / 1);
}

.viewport-bg-third {
	background-color: rgb(var(--viewport-third) / 1);
}

.viewport-border-third {
	border-color: rgb(var(--viewport-third) / 1);
}

/* fourth */
.viewport-color-fourth {
	color: rgb(var(--viewport-fourth) / 1);
}

.viewport-bg-fourth {
	background-color: rgb(var(--viewport-fourth) / 1);
}

.viewport-border-fourth {
	border-color: rgb(var(--viewport-fourth) / 1);
}

/* opposite */
.viewport-color-opposite {
	color: rgb(var(--viewport-opposite) / 1);
}

.viewport-bg-opposite {
	background-color: rgb(var(--viewport-opposite) / 1);
}

.viewport-border-opposite {
	border-color: rgb(var(--viewport-opposite) / 1);
}
.viewport-color-dominant,
.viewport-color-secondary,
.viewport-color-third,
.viewport-color-fourth,
.viewport-color-opposite,
.viewport-bg-dominant,
.viewport-bg-secondary,
.viewport-bg-third,
.viewport-bg-fourth,
.viewport-bg-opposite,
.viewport-border-dominant,
.viewport-border-secondary,
.viewport-border-third,
.viewport-border-fourth,
.viewport-border-opposite {
	transition:
		color .45s ease,
		background-color .45s ease,
		border-color .45s ease;
}