/* FROM https://www.ibm.com/design/language/color/ */

:root {
	--white: #ffffff;
	--gray00: #ffffff;
	--gray01: #fefefe;
	--gray02: #fdfdfd;
	--gray03: #fcfcfc;
	--gray04: #fbfbfb;
	--gray05: #fafafa;
	--gray10: #f4f4f4;
	--gray15: #eaeaea;
	--gray20: #e0e0e0;
	--gray30: #c6c6c6;
	--gray40: #a8a8a8;
	--gray50: #8d8d8d;
	--gray60: #6f6f6f;
	--gray70: #525252;
	--gray80: #393939;
	--gray90: #262626;
	--gray100: #000000;
	--black: #000000;

	--blue10: #edf5ff;
	--blue20: #d0e2ff;
	--blue30: #a6c8ff;
	--blue40: #78a9ff;
	--blue50: #4589ff;
	--blue60: #0f62fe;
	--blue70: #0043ce;
	--blue80: #002d9c;
	--blue90: #001d6c;
	--blue100: #001141;

	--red10: #fff1f1;
	--red20: #ffd7d9;
	--red30: #ffb3b8;
	--red40: #ff8389;
	--red50: #fa4d56;
	--red60: #da1e28;
	--red70: #a2191f;
	--red80: #750e13;
	--red90: #520408;
	--red100: #2d0709;

	--green10: #f1fff1;
	--green20: #d7ffd9;
	--green30: #b3ffb8;
	--green40: #83ff89;
	--green50: #4dfa56;
	--green60: #1eda28;
	--green70: #19a21f;
	--green80: #0e7513;
	--green90: #045208;
	--green100: #072d09;

	--body-background: var(--gray10);
	--page-background: var(--white);
	--page-border: var(--gray15);
	--input-border: var(--gray20);
	--input-background: var(--gray03);
	--input-color: var(--gray80);

	--input-border-invalid: var(--red40);
	--input-background-invalid: var(--red20);
	--input-color-invalid: var(--red50);
	--button-primary-color:var(--white);
	--button-primary-color-hover:var(--white);
	--button-primary-background:var(--blue60);
	--button-primary-background-hover:var(--blue50);
	--heading-color:var(--black);
	--text-color:var(--gray80);
	--link-color:var(--blue60);
	--link-color-hover:var(--blue50);
	--grid-highlight-background:var(--blue20);

	--border-radius: var(--rhythm);
}

.light-mode-hide,
.dark-mode-show {
	display: none;
}

.light-mode-show,
.dark-mode-hide {
	display: initial;
}

@media (prefers-color-scheme: dark) {
	:root {
		--black: #ffffff;
		--gray100: #ffffff;
		--gray90: #f7f3f2;
		--gray80: #e5e0df;
		--gray70: #cac5c4;
		--gray60: #a8a8a8;
		--gray50: #8f8b8b;
		--gray40: #726e6e;
		--gray30: #565151;
		--gray20: #3c3838;
		--gray15: #312e2e;
		--gray10: #272525;
		--gray05: #1f1c1c;
		--gray04: #1e1e1b;
		--gray03: #1c1c19;
		--gray02: #1a1a17;
		--gray01: #181815;
		--gray00: #171714;
		--white: #000000;

		--body-background: var(--gray05);
		--page-background: var(--gray15);
		--input-border: var(--gray20);
		--input-background: var(--gray10);
		--input-border-invalid: var(--gray20);
		--input-background-invalid: var(--red80);
		--input-color-invalid: var(--red50);
		--text-color: var(--gray80);
		--link-color:var(--blue50);
		--link-color-hover: var(--blue40);
		--grid-highlight-background:var(--blue100);

		--button-primary-color: var(--blue20);
		--button-primary-color-hover: var(--blue10);
		--button-primary-background: var(--blue70), var(--blue80);
		--button-primary-background-hover: var(--blue50), var(--blue60);
	}

	.dark-mode-show,
	.light-mode-hide{
		display:initial;
	}

	.dark-mode-hide,
	.light-mode-show {
		display: none;
	}
}
