@media (prefers-color-scheme: dark) {
	:root {
		/*
			--[element]-[prominance]-[part](-[role])(-[state])
			Semantic: On [element] with [prominance] level for [part] (having [role]) (during [state]).

			[element] is the type of element this color applies for.
			Such as: body, button, card

			[prominance] (optional) represents the level of attention to give the element part with the color.
			Such as: [p]rimary, [s]econdary, [t]ertiary
								or
			Such as: [i]nformation, [s]uccess, [w]arning

			[part] is the target in which to apply the color.
			Such as: background, text, border, outline

			[state] (optional) represents the state that the color represents.
			Such as: [f]ocused, [s]elected, [h]overed, [d]isabled
		*/

		/* Body */
		--body-background-from:						  0,   0%,   8%, 1.000;
		--body-background-to:						  0,   0%,   2%, 1.000;

		--body-scrollbar-track:						  0,   0%,   6%, 1.000;
		--body-scrollbar-thumb:						  0,   0%,  16%, 1.000;

		/* Header */
		--header-background:						  0,   0%,   0%, 1.000;
		--header-border:							  0,   0%,   0%, 0.000;

		/* Logotype Product */
		--logotype-product-text:					  0,   0%, 100%, 1.000;
		--logotype-product-shadow:					  0,   0%,   0%, 0.250;
		
		/* Article */
		--article-background:						  0,   0%,   8%, 1.000;
		--article-foreground:						  0,   0%,  50%, 1.000;
		--article-border-top:						  0,   0%, 100%, 0.150;
		--article-border-right:						  0,   0%, 100%, 0.040;
		--article-border-left:						  0,   0%, 100%, 0.040;
		--article-border-bottom:					  0,   0%, 100%, 0.030;
		--article-shadow:							  0,   0%,   0%, 0.250;

		/* Grid */
		--column-background-elevated:				  0,   0%,  10%, 1.000;
		--row-background-elevated:					  0,   0%,  10%, 1.000;
		--block-background-elevated:				  0,   0%,  10%, 1.000;

		/* Notification */
		--notification-background:					  0,   0%,  10%, 1.000;
		--notification-text:						  0,   0%, 100%, 1.000;
		--notification-shadow:						  0,   0%,   0%, 0.300;

		/* Tabs */
		--tabs-label-narrow-background:				  0,   0%,   8%, 1.000;
		--tabs-label-wide-background:				  0,   0%,   8%, 0.000;
		--tabs-label-border:						  0,   0%,  12%, 1.000;

		--tabs-label-narrow-background-s:			  0,   0%,  10%, 1.000;
		--tabs-label-wide-background-s:				  0,   0%,  10%, 0.000;
		--tabs-label-border-s:						  0,   0%,  14%, 1.000;

		--tabs-label-narrow-background-h:			  0,   0%,  12%, 1.000;
		--tabs-label-wide-background-h:				  0,   0%,  10%, 1.000;
		--tabs-label-border-h:						  0,   0%,  16%, 1.000;

		/* Header 1-4 + Footer 1 */
		--h1-p-text:								  0,   0%, 100%, 1.000;
		--h2-p-text:								  0,   0%,  95%, 1.000;
		--h3-p-text:								  0,   0%,  90%, 1.000;
		--h4-p-text:								  0,   0%,  85%, 1.000;
		--f4-p-text:								  0,   0%,  60%, 1.000;

		/* Link (a) */
		--a-text:									 25,  35%,  35%, 1.000;
		--a-text-h:									 25,  35%,  32%, 1.000;
		--a-text-a:									 25,  35%,  29%, 1.000;

		/* Label */
		--label-style-h:							  0,   0%, 100%, 1.000;
		--label-style-p:							  0,  50%,  70%, 1.000;
		--label-style-n:							240,  50%,  70%, 1.000;
		--label-style-f:							  0,   0%,  50%, 1.000;

		--label-style-t-n:							  0,   0%,  20%, 1.000;

		/* Version */
		--version-p-text:							  0,   0%,  50%, 1.000;

		/* Cards */
		--cards-item-p-background:					 25,  35%,  26%, 1.000;
		--cards-item-p-background-h:				 25,  35%,  28%, 1.000;
		--cards-item-p-background-a:				 25,  35%,  24%, 1.000;
		--cards-item-p-text:						  0,   0%, 100%, 1.000;

		--cards-item-s-background:					 25,   0%,   8%, 1.000;
		--cards-item-s-background-h:				 25,   0%,  10%, 1.000;
		--cards-item-s-background-a:				 25,   0%,  12%, 1.000;
		--cards-item-s-border:						 25,   0%,  12%, 1.000;
		--cards-item-s-border-h:					 25,   0%,  14%, 1.000;
		--cards-item-s-border-a:					 25,   0%,  16%, 1.000;
		--cards-item-s-text:						  0,   0%, 100%, 1.000;

		--cards-item-t-background:					  0,   0%, 100%, 0.000;
		--cards-item-t-background-h:				  0,   0%, 100%, 0.040;
		--cards-item-t-background-a:				  0,   0%, 100%, 0.020;
		--cards-item-t-text:						  0,   0%, 100%, 1.000;

		/* Button */
		--button-p-background:						 25,  35%,  28%, 1.000;
		--button-p-background-h:					 25,  35%,  30%, 1.000;
		--button-p-background-a:					 25,  35%,  26%, 1.000;
		--button-p-text:							  0,   0%, 100%, 1.000;

		--button-s-background:						 25,   0%,  28%, 1.000;
		--button-s-background-h:					 25,   0%,  30%, 1.000;
		--button-s-background-a:					 25,   0%,  26%, 1.000;
		--button-s-text:							  0,   0%, 100%, 1.000;

		--button-t-background:						  0,   0%, 100%, 0.000;
		--button-t-background-h:					  0,   0%, 100%, 0.040;
		--button-t-background-a:					  0,   0%, 100%, 0.060;
		--button-t-text:							  0,   0%, 100%, 1.000;

		--button-w-background:						  0,  65%,  28%, 1.000;
		--button-w-background-h:					  0,  65%,  30%, 1.000;
		--button-w-background-a:					  0,  65%,  26%, 1.000;
		--button-w-text:							  0,   0%, 100%, 1.000;

		/* Image */
		--image-icon:				 				  0,   0%, 100%, 1.000;
		--image-placeholder-background:				  0,   0%,  20%, 1.000;
		--image-placeholder-text:					  0,   0%, 100%, 1.000;
		--image-shading-background:					  0,   0%,   0%, 0.150;

		/* In Code */
		--in-code-background:						  0,   0%,  12%, 1.000;
		--in-code-background-f:						  0,   0%,  14%, 1.000;
		--in-code-border:							  0,   0%,  16%, 1.000;
		--in-code-border-f:							  0,   0%,  18%, 1.000;
		--in-code-background-line:					  0,   0%,  18%, 1.000;
		--in-code-background-gutter-line:			  0,   0%,  18%, 1.000;
		--in-code-background-gutter:				  0,   0%,  14%, 1.000;
		--in-code-background-gutter-f:				  0,   0%,  16%, 1.000;
		--in-code-background-selection:				  0,   0%,  23%, 1.000;
		--in-code-background-selection-f:			  0,   0%,  26%, 1.000;
		--in-code-foreground:						  0,   0%, 100%, 1.000;
		--in-code-foreground-line-number:			  0,   0%,  42%, 1.000;

		/* In Text Line */
		--in-text-line-p-background:				  0,   0%,  12%, 1.000;
		--in-text-line-p-background-f:				  0,   0%,  14%, 1.000;
		--in-text-line-p-border:					  0,   0%,  16%, 1.000;
		--in-text-line-p-border-f:					  0,   0%,  18%, 1.000;
		--in-text-line-p-text:						  0,   0%,  60%, 1.000;
		--in-text-line-p-text-f:					  0,   0%, 100%, 1.000;

		/* In Rich Text */
		--in-rich-text-p-background:				  0,   0%,  10%, 1.000;
		--in-rich-text-p-background-f:				  0,   0%,  12%, 1.000;
		--in-rich-text-p-border:					  0,   0%,  12%, 1.000;
		--in-rich-text-p-border-f:					  0,   0%,  14%, 1.000;
		--in-rich-text-p-text:						  0,   0%,  60%, 1.000;
		--in-rich-text-p-text-f:					  0,   0%, 100%, 1.000;

		/* In Options */
		--in-option-text:							  0,   0%,  60%, 1.000;
		--in-option-text-f:							  0,   0%, 100%, 1.000;

		/* In Tags */
		--in-tags-background:						  0,   0%,  12%, 1.000;
		--in-tags-background-f:						  0,   0%,  14%, 1.000;
		--in-tags-border:							  0,   0%,  16%, 1.000;
		--in-tags-border-f:							  0,   0%,  18%, 1.000;
		--in-tags-text:								  0,   0%,  60%, 1.000;
		--in-tags-text-f:							  0,   0%, 100%, 1.000;
		--in-tags-tag-background:					  0,   0%,  10%, 1.000;
		--in-tags-tag-background-f:					  0,   0%,  12%, 1.000;
		--in-tags-tag-text:							  0,   0%,  60%, 1.000;
		--in-tags-tag-text-f:						  0,   0%, 100%, 1.000;

		/* Block Editor */
		--block-editor-device-background:			  0,   0%,  12%, 1.000;
		--block-editor-device-construction:			 60,  40%,  28%, 1.000;
		--block-editor-labeled-background:			  0,   0%,  12%, 1.000;
		--block-editor-pghost-background:			 60,  40%,  28%, 1.000;
		--block-editor-cghost-border:				 60,  40%,  28%, 1.000;
		--block-editor-part-background:				  0,   0%, 100%, 0.000;
		--block-editor-part-background-h:			  0,   0%, 100%, 0.040;
		--block-editor-part-background-a:			  0,   0%, 100%, 0.060;
		--block-editor-part-background-text:		  0,   0%, 100%, 1.000;

		/* Progress */
		--progress-background:						  0,   0%,  10%, 1.000;
		--progress-foreground:						  0,   0%, 100%, 1.000;

		/* Upload */
		--upload-border:							 25,   0%,  14%, 1.000;
		--upload-border-h:							 25,   0%,  16%, 1.000;
		--upload-border-a:							 25,   0%,  12%, 1.000;

		/* Table */
		--table-background:							  0,   0%,  12%, 1.000;
		--table-border:								  0,   0%,  14%, 1.000;
		--table-head-background:					  0,   0%,  10%, 1.000;
		--table-head-border-bottom:					  0,   0%,  14%, 1.000;
		--table-head-foreground:					  0,   0%, 100%, 1.000;
		--table-body-row-background-even:			  0,   0%,  10%, 1.000;
		--table-body-row-cell-background-h:			  0,   0%,  14%, 1.000;
		--table-body-row-background-h:				  0,   0%,  14%, 1.000;
		--table-body-row-foreground:				  0,   0%, 100%, 1.000;
		--table-body-row-empty-foreground:			  0,   0%,  50%, 1.000;
		--table-progress-background:				  0,   0%,   0%, 0.350;
		--table-foot-background:					  0,   0%,  10%, 1.000;
		--table-foot-border-top:					  0,   0%,  14%, 1.000;
		--table-foot-foreground:					  0,   0%,  50%, 1.000;
		--table-pager-background:					  0,   0%,   0%, 0.000;

		/* Chart */
		--chart-a-background:						 24,  18%,  60%, 1.000;
		--chart-b-background:						 38,  28%,  56%, 1.000;
		--chart-c-background:						 24,  26%,  80%, 1.000;
		--chart-d-background:						 25,  25%,  68%, 1.000;
		--chart-e-background:						 31,  42%,  57%, 1.000;
		--chart-f-background:						 30,  41%,  64%, 1.000;
		--chart-g-background:						 31,  42%,  72%, 1.000;
		--chart-h-background:						 33,  41%,  79%, 1.000;
		--chart-i-background:						 28,  38%,  68%, 1.000;
		--chart-j-background:						 29,  39%,  73%, 1.000;
		--chart-k-background:						 28,  39%,  79%, 1.000;
		--chart-l-background:						 27,  33%,  83%, 1.000;
		--chart-m-background:						 41,  21%,  80%, 1.000;
		--chart-n-background:						 43,  22%,  82%, 1.000;
		--chart-o-background:						 36,  22%,  86%, 1.000;
		--chart-p-background:						 37,  17%,  86%, 1.000;

		--chart-a-border:							 24,  18%,  50%, 1.000;
		--chart-b-border:							 38,  28%,  46%, 1.000;
		--chart-c-border:							 24,  26%,  70%, 1.000;
		--chart-d-border:							 25,  25%,  58%, 1.000;
		--chart-e-border:							 31,  42%,  47%, 1.000;
		--chart-f-border:							 30,  41%,  54%, 1.000;
		--chart-g-border:							 31,  42%,  62%, 1.000;
		--chart-h-border:							 33,  41%,  69%, 1.000;
		--chart-i-border:							 28,  38%,  58%, 1.000;
		--chart-j-border:							 29,  39%,  63%, 1.000;
		--chart-k-border:							 28,  39%,  69%, 1.000;
		--chart-l-border:							 27,  33%,  73%, 1.000;
		--chart-m-border:							 41,  21%,  70%, 1.000;
		--chart-n-border:							 43,  22%,  72%, 1.000;
		--chart-o-border:							 36,  22%,  76%, 1.000;
		--chart-p-border:							 37,  17%,  76%, 1.000;

		--chart-background:							  0,   0%,  12%, 1.000;
		--chart-border:								  0,   0%,  14%, 1.000;

		/* Metric */
		--metric-background:						  0,   0%,  10%, 1.000;
		--metric-border:							  0,   0%,  14%, 1.000;
		--metric-label-text:						  0,   0%,  50%, 1.000;
		--metric-value-text:						  0,   0%, 100%, 1.000;
		--metric-subvalue-text:						  0,   0%,  70%, 1.000;

		--metric-i-border-left:						120,  35%,  28%, 1.000;
		--metric-s-border-left:						240,  35%,  28%, 1.000;
		--metric-w-border-left:						 20,  35%,  28%, 1.000;

		/* Detail */
		--detail-label-text:						  0,   0%,  50%, 1.000;
		--detail-value-text:						  0,   0%, 100%, 1.000;

		/* Details */
		--details-background:						  0,   0%,   0%, 0.000;
		--details-border:							  0,   0%,  14%, 1.000;

		/* Guide */
		--guide-background:							  0,   0%,  10%, 1.000;
		--guide-border:								  0,   0%,  14%, 1.000;

		/* Event */
		--event-container-background:				  0,   0%,   8%, 1.000;
		--event-container-meta:						  0,   0%,  35%, 1.000;
		--event-container-border:					  0,   0%,  14%, 1.000;
		--event-icon-background:					  0,   0%,  10%, 1.000;
		--event-icon-border:						  0,   0%,  14%, 1.000;
		--event-timeline-border:					  0,   0%,  14%, 1.000;

		/* Message */
		--message-background:						  0,   0%,  10%, 1.000;
		--message-text:								  0,   0%, 100%, 1.000;

		--message-i-border:							120,  55%,  38%, 1.000;
		--message-s-border:							240,  55%,  38%, 1.000;
		--message-w-border:							 20,  55%,  38%, 1.000;
	}
}