:root {
	/* Tier 1 variables */
	// colors
	--color-neutral-25: #fcfcfd;
	--color-neutral-50: #f9fafb;
	--color-neutral-100: #f2f4f7;
	--color-neutral-200: #e4e7ec;
	--color-neutral-300: #d0d5dd;
	--color-neutral-400: #98a2b3;
	--color-neutral-500: #667085;
	--color-neutral-600: #475467;
	--color-neutral-700: #344054;
	--color-neutral-800: #1d2939;
	--color-neutral-900: #101828;

	--color-primary-25: #fbfbff;
	--color-primary-50: #f6f6fe;
	--color-primary-100: #ececfd;
	--color-primary-200: #dedeff;
	--color-primary-300: #ccccfa;
	--color-primary-400: #b7b7ff;
	--color-primary-500: #a0a0f5;
	--color-primary-600: #8080f2;
	--color-primary-700: #6358d4;
	--color-primary-800: #4b32c3;
	--color-primary-900: #341bab;

	--color-warning-25: #fffcf5;
	--color-warning-50: #fffaeb;
	--color-warning-100: #fef0c7;
	--color-warning-200: #fedf89;
	--color-warning-300: #fec84b;
	--color-warning-400: #fdb022;
	--color-warning-500: #f79009;
	--color-warning-600: #dc6803;
	--color-warning-700: #b54708;
	--color-warning-800: #93370d;
	--color-warning-900: #7a2e0e;

	--color-success-25: #f6fef9;
	--color-success-50: #ecfdf3;
	--color-success-100: #d1fadf;
	--color-success-200: #a6f4c5;
	--color-success-300: #6ce9a6;
	--color-success-400: #32d583;
	--color-success-500: #12b76a;
	--color-success-600: #039855;
	--color-success-700: #027a48;
	--color-success-800: #05603a;
	--color-success-900: #054f31;

	--color-rose-25: #fff5f6;
	--color-rose-50: #fff1f3;
	--color-rose-100: #ffe4e8;
	--color-rose-200: #fecdd6;
	--color-rose-300: #fea3b4;
	--color-rose-400: #fd6f8e;
	--color-rose-500: #f63d68;
	--color-rose-600: #e31b54;
	--color-rose-700: #c01048;
	--color-rose-800: #a11043;
	--color-rose-900: #89123e;

	/* Tier 2 variables */
	--primary-button-background-color: var(--color-primary-800);
	--primary-button-hover-color: var(--color-primary-900);
	--primary-button-text-color: #fff;
	--secondary-button-background-color: var(--color-primary-50);
	--secondary-button-hover-color: var(--color-primary-100);
	--secondary-button-text-color: var(--color-brand);
	--ghost-button-background-color: var(--color-primary-50);
	--ghost-button-text-color: var(--color-brand);

	--color-brand: var(--color-primary-800);
	--body-background-color: #fff;
	--body-text-color: var(--color-neutral-500);
	--code-comments-color: var(--color-neutral-500);
	--headings-color: var(--color-neutral-900);

	--border-color: var(--color-neutral-300);
	--divider-color: var(--color-neutral-200);

	--icon-color: var(--color-neutral-400);
	--dark-icon-color: var(--color-neutral-500);
	--link-color: var(--color-primary-800);

	--lighter-background-color: var(--color-neutral-100);
	--lightest-background-color: var(--color-neutral-50);
	--docs-lightest-background-color: var(--color-primary-50);
	--hero-background-color: var(--color-neutral-25);
	--footer-background-color: var(--color-neutral-25);
	--outline-color: var(--color-brand);

	--editor-string-color: var(--color-warning-800);
	--editor-comment-color: var(--color-success-700);
	--editor-keyword-color: var(--color-primary-900);
	--editor-name-color: var(--color-primary-700);
	--editor-bracket-match-outline-color: var(--color-neutral-200);
	--editor-bracket-match-background-color: var(--color-neutral-100);
	--editor-bracket-match-color: none;
	--editor-bracket-no-match-outline-color: var(--color-rose-500);
	--editor-bracket-no-match-background-color: none;
	--editor-bracket-no-match-color: none;

	--logo-color: var(--color-primary-800);
	--logo-center-color: var(--color-primary-600);

	--label-text-color: var(--color-neutral-700);
	--code-text-color: var(--color-neutral-900);
}

@media (prefers-color-scheme: dark) {
	:root {
		--body-background-color: var(--color-neutral-900);
		--body-text-color: var(--color-neutral-300);
		--code-comments-color: var(--color-neutral-400);
		--headings-color: #fff;

		--divider-color: var(--color-neutral-600);
		--border-color: var(--color-neutral-500);

		--icon-color: var(--body-text-color);
		--dark-icon-color: #fff;
		--link-color: var(--color-primary-400);

		--lighter-background-color: var(--color-neutral-800);
		--lightest-background-color: var(--color-neutral-800);
		--docs-lightest-background-color: var(--color-neutral-800);
		--hero-background-color: var(--color-neutral-800);
		--footer-background-color: var(--color-neutral-800);
		--outline-color: #fff;

		--editor-string-color: var(--color-warning-300);
		--editor-comment-color: var(--color-success-500);
		--editor-keyword-color: var(--color-primary-500);
		--editor-name-color: var(--color-primary-300);
		--editor-bracket-match-outline-color: var(--color-neutral-600);
		--editor-bracket-match-background-color: var(--color-neutral-700);
		--editor-bracket-match-color: var(--color-neutral-25);

		--logo-color: #fff;
		--logo-center-color: #fff;

		--sponsor-background-color: #fff;

		--label-text-color: var(--color-neutral-100);
		--code-text-color: var(--color-neutral-100);
	}
}

html[data-theme="light"] {
	--body-background-color: #fff;
	--body-text-color: var(--color-neutral-500);
	--code-comments-color: var(--color-neutral-500);
	--headings-color: var(--color-neutral-900);

	--border-color: var(--color-neutral-300);
	--divider-color: var(--color-neutral-200);

	--icon-color: var(--color-neutral-400);
	--dark-icon-color: var(--color-neutral-500);
	--link-color: var(--color-primary-800);

	--lighter-background-color: var(--color-neutral-100);
	--lightest-background-color: var(--color-neutral-50);
	--docs-lightest-background-color: var(--color-primary-50);
	--hero-background-color: var(--color-neutral-25);
	--footer-background-color: var(--color-neutral-25);
	--outline-color: var(--color-brand);

	--editor-string-color: var(--color-warning-800);
	--editor-comment-color: var(--color-success-700);
	--editor-keyword-color: var(--color-primary-900);
	--editor-name-color: var(--color-primary-700);
	--editor-bracket-match-outline-color: var(--color-neutral-200);
	--editor-bracket-match-background-color: var(--color-neutral-100);
	--editor-bracket-match-color: none;

	--logo-color: var(--color-primary-800);
	--logo-center-color: var(--color-primary-600);

	--label-text-color: var(--color-neutral-700);
	--code-text-color: var(--color-neutral-900);
}

html[data-theme="dark"] {
	color-scheme: dark;

	--body-background-color: var(--color-neutral-900);
	--body-text-color: var(--color-neutral-300);
	--code-comments-color: var(--color-neutral-400);
	--headings-color: #fff;

	--divider-color: var(--color-neutral-600);
	--border-color: var(--color-neutral-500);

	--icon-color: var(--body-text-color);
	--dark-icon-color: #fff;
	--link-color: var(--color-primary-400);

	--lighter-background-color: var(--color-neutral-800);
	--lightest-background-color: var(--color-neutral-800);
	--docs-lightest-background-color: var(--color-neutral-800);
	--hero-background-color: var(--color-neutral-800);
	--footer-background-color: var(--color-neutral-800);
	--outline-color: #fff;

	--editor-string-color: var(--color-warning-300);
	--editor-comment-color: var(--color-success-500);
	--editor-keyword-color: var(--color-primary-500);
	--editor-name-color: var(--color-primary-300);
	--editor-bracket-match-outline-color: var(--color-neutral-600);
	--editor-bracket-match-background-color: var(--color-neutral-700);
	--editor-bracket-match-color: var(--color-neutral-25);

	--logo-color: #fff;
	--logo-center-color: #fff;

	--sponsor-background-color: #fff;

	--label-text-color: var(--color-neutral-100);
	--code-text-color: var(--color-neutral-100);
}
