:root {
	--color-text: #11181C;
	--color-text-secondary: #60676C;
	--color-text-muted: #939A9F;
	--color-text-bright: #fff;

	--color-page: #F4F4F5;

	--color-inset: #F1F3F5;
	--color-inset-hover: #ECEEF0;
	--color-inset-disabled: #ECEEF0;
	--color-inset-danger: #FFE9EA;
	--color-inset-danger-hover: #FFDFE0;

	--color-surface: #fff;
	--color-surface-hover: #F8F9FA;
	--color-surface-active: #F1F3F5;
	--color-surface-disabled: #ECEEF0;

	--color-border: #D7DBDF;
	--color-border-focus: #60676C;
	--color-border-active: #939A9F;
	--color-border-danger: #FF0015;
	--color-border-danger-focus: #FF0015;

	--color-accent: #0468FF;
	--color-accent-hover: #175DD3;
	--color-accent-active: #1D51A9;

	--color-link: #0468FF;
	--color-link-active: #1D51A9;
	--color-danger: #FF0015;

	--color-danger-action: #EE001C;
	--color-danger-action-hover: #E21120;
	--color-danger-action-active: #D31623;

	--color-header-icon-bg: #FF0015;

	--color-logo-brand: #FF0015;
	--color-logo-name: #195078;
	--color-logo-bg: #11181C;

	--color-tooltip: #195078;

	--color-progress-track: #E6E8EB;
	--color-progress-danger: #FF524E;
	--color-progress-warning: #FFDD2D;
	--color-progress-safe: #AED57F;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-text: #EBEBEB;
		--color-text-secondary: #ebebeb99;
		--color-text-muted: #ebebeb66;
		--color-text-bright: #EBEBEB;

		--color-page: #101214;

		--color-inset: #23262E;
		--color-inset-hover: #2A2D37;
		--color-inset-disabled: #303540;
		--color-inset-danger: #341D23;
		--color-inset-danger-hover: #3E232A;

		--color-surface: #191B21;
		--color-surface-hover: #1F2129;
		--color-surface-active: #14151A;
		--color-surface-disabled: #23262E;

		--color-border: #525252;
		--color-border-focus: #7F8992;
		--color-border-active: #454545;
		--color-border-danger: #FF6A76;
		--color-border-danger-focus: #FF5C69;

		--color-accent: #094196;
		--color-accent-hover: #0A4BAD;
		--color-accent-active: #08367D;

		--color-link: #5B9CFF;
		--color-link-active: #8FBBFF;
		--color-danger: #FF6A76;

		--color-danger-action: #AD071B;
		--color-danger-action-hover: #C4081E;
		--color-danger-action-active: #930617;

		--color-header-icon-bg: #AD071B;

		--color-logo-brand: #EBEBEB;
		--color-logo-name: #EBEBEB;
		--color-logo-bg: #23262E;

		--color-tooltip: #123854;

		--color-progress-track: #E6E8EB;
		--color-progress-danger: #FF524E;
		--color-progress-warning: #FFDD2D;
		--color-progress-safe: #AED57F;
	}
}