/* stylelint-disable declaration-block-no-redundant-longhand-properties, selector-class-pattern */

:root {
	@design-token-utils (custom-properties);


	/* Responsive breaking points */
	@custom-media --viewport-sm (min-width: 640px);
	@custom-media --viewport-md (min-width: 768px);
	@custom-media --viewport-lg (min-width: 1024px);
	@custom-media --viewport-xl (min-width: 1280px);
	@custom-media --viewport-2xl (min-width: 1536px);

	/* Primary Blue */
	--blue-15: hsl(221 30% 15%);
	--blue-20: hsl(221 30% 20%);
	--blue-30: hsl(221 30% 30%);
	--blue-40: hsl(221 30% 40%);
	--blue-60: hsl(221 30% 60%);
	--blue-70: hsl(221 30% 70%);
	--blue-80: hsl(221 30% 80%);

	/* Secondary Purple */
	--purple-20: hsl(294 40% 20%);
	--purple-30: hsl(294 40% 30%);
	--purple-40: hsl(294 40% 40%);
	--purple-60: hsl(294 40% 60%);
	--purple-70: hsl(294 40% 70%);
	--purple-80: hsl(294 40% 80%);

	/* Neutral Grey */
	--gray-10: hsl(221 9% 10%);
	--gray-20: hsl(221 9% 20%);
	--gray-30: hsl(221 9% 30%);
	--gray-60: hsl(221 9% 60%);
	--gray-80: hsl(221 9% 80%);
	--gray-90: hsl(221 9% 90%);
	--gray-100: hsl(221 9% 100%);

	/* Version */
	--green-30: hsl(140 100% 30%);
	--green-40: hsl(140 100% 40%);
	--red-60: hsl(358 80% 60%);

	/* Light backgrounds */
	--light-blue-background: hsl(210 100% 96%);
	--light-red-background: hsl(355 73% 97%);
	--light-green: hsl(206 41% 97%);
	--pale-blue: hsl(184 55% 77%);
	--pale-green: hsl(120 93% 79%);

	/* Dark foregrounds to go with backgrounds */
	--dark-blue: hsl(220 64% 33%);
	--dark-red: hsl(0 69% 36%);
	--background-color: var(--gray-100);
	--brand-border: var(--gray-100);
	--category-card-name-color: var(--gray-30);
	--category-card-synopsis-color: var(--blue-20);
	--category-card-background-hover: var(--gray-90);
	--error-button: var(--purple-20);
	--error-code: var(--purple-20);
	--link-color: var(--blue-40);
	--link-decoration-color: var(--blue-60);
	--link-hover-color: hsl(220 13% 91%);
	--navbar-background-color: var(--purple-20);
	--navbar-border-color: var(--gray-90);
	--navbar-search-color: var(--gray-10);
	--navbar-search-background-color: var(--gray-100);
	--navbar-search-border-color: var(--gray-100);
	--package-list-item-background-hover-color: var(--gray-90);
	--package-list-item-name-color: var(--blue-20);
	--package-list-item-synopsis-color: black;
	--package-list-item-metadata-color: black;
	--package-list-item-version-color: var(--green-30);
	--package-list-item-component-color: var(--gray-80);
	--search-bar-color: hsl(221 39% 11%);
	--search-bar-background-color: var(--gray-100);
	--search-bar-background-hover-color: white;
	--search-bar-background-focus-color: white;
	--search-bar-focus-border-color: var(--purple-30);
	--readme-pre-background-color: var(--gray-90);
	--readme-code-background-color: var(--gray-90);
	--changelog-pre-background-color: var(--gray-90);
	--changelog-code-background-color: var(--gray-90);

	/* --install-string-border: hsl(215 28% 17%); */
	--compiler-badge-background: hsl(218 12% 84%);
	--text-color: var(--blue-20);
	--main-page-button-background: var(--gray-100);
	--main-page-button-focus-border-color: var(--purple-30);
	--main-page-button-divider: var(--purple-20);
	--deprecated-version: var(--red-60);
	--breadcrumb-color: var(--gray-30);
	--severity-critical: var(--red-60);
	--severity-high: orange;
	--severity-medium: gold;
	--severity-low: var(--pale-blue);
	--severity-none: hsl(156 100% 99%);
	--severity-rating-colour: black;

	/* Focus ring (aka outline) */
	--outline-offset-shadow: 0 0 #0000;
	--outline-shadow: 0 0 #0000;

	/* Shadows */
	--shadow-simple: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
	--shadow-colored: 0 1px 3px 0 var(--purple-30), 0 1px 2px -1px var(--purple-30);
	--focused-background: var(--pale-blue);
}

@media(prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--background-color: var(--blue-20);
		--brand-border: var(--purple-30);
		--category-card-name-color: var(--purple-60);
		--category-card-synopsis-color: var(--gray-90);
		--category-card-background-hover: var(--blue-15);
		--error-button: var(--purple-30);
		--error-code: var(--gray-90);
		--link-color: var(--purple-60);
		--link-decoration-color: var(--purple-70);
		--link-hover-color: var(--blue-15);
		--navbar-background-color: var(--blue-15);
		--navbar-border-color: var(--blue-30);
		--navbar-search-color: var(--gray-90);
		--navbar-search-background-color: var(--blue-20);
		--navbar-search-border-color: var(--blue-20);
		--package-list-item-background-hover-color: var(--blue-15);
		--package-list-item-name-color: var(--purple-60);
		--package-list-item-metadata-color: var(--gray-90);
		--package-list-item-synopsis-color: var(--gray-90);
		--package-list-item-version-color: var(--green-40);
		--search-bar-color: var(--gray-90);
		--search-bar-background-color: var(--blue-20);
		--search-bar-background-hover-color: var(--blue-20);
		--search-bar-background-focus-color: var(--blue-20);
		--search-bar-focus-border-color: var(--purple-30);
		--readme-pre-background-color: var(--blue-30);
		--readme-code-background-color: var(--blue-30);
		--changelog-pre-background-color: var(--blue-30);
		--changelog-code-background-color: var(--blue-30);

		/* --install-string-border: hsl(215 28% 17%); */
		--compiler-badge-background: var(--blue-30);
		--text-color: var(--gray-80);
		--main-page-button-background: var(--blue-20);
		--main-page-button-focus-border-color: var(--purple-30);
		--main-page-button-divider: var(--blue-15);
		--deprecated-version: var(--red-60);
		--breadcrumb-color: hsl(221 9% 60%);
		--severity-critical: var(--red-60);
		--severity-high: orange;
		--severity-medium: gold;
		--severity-low: var(--pale-blue);
		--severity-none: hsl(156 100% 99%);
		--severity-rating-colour: black;
		--focused-background: var(--blue-80);
	}
}

html[data-theme="dark"] {
	--background-color: var(--blue-20);
	--brand-border: var(--purple-30);
	--category-card-name-color: var(--purple-60);
	--category-card-synopsis-color: var(--gray-90);
	--category-card-background-hover: var(--blue-15);
	--error-button: var(--purple-30);
	--error-code: var(--gray-90);
	--link-color: var(--purple-60);
	--link-decoration-color: var(--purple-70);
	--link-hover-color: var(--blue-15);
	--navbar-background-color: var(--blue-15);
	--navbar-border-color: var(--blue-30);
	--navbar-search-color: var(--gray-90);
	--navbar-search-background-color: var(--blue-20);
	--navbar-search-border-color: var(--blue-20);
	--package-list-item-background-hover-color: var(--blue-15);
	--package-list-item-name-color: var(--purple-60);
	--package-list-item-metadata-color: var(--gray-90);
	--package-list-item-synopsis-color: var(--gray-90);
	--package-list-item-version-color: var(--green-40);
	--search-bar-color: var(--gray-90);
	--search-bar-background-color: var(--blue-20);
	--search-bar-background-hover-color: var(--blue-20);
	--search-bar-background-focus-color: var(--blue-20);
	--search-bar-focus-border-color: var(--purple-30);
	--readme-pre-background-color: var(--blue-30);
	--readme-code-background-color: var(--blue-30);
	--changelog-pre-background-color: var(--blue-30);
	--changelog-code-background-color: var(--blue-30);

	/* --install-string-border: hsl(215 28% 17%); */
	--compiler-badge-background: var(--blue-30);
	--text-color: var(--gray-80);
	--main-page-button-background: var(--blue-20);
	--main-page-button-focus-border-color: var(--purple-30);
	--main-page-button-divider: var(--blue-15);
	--deprecated-version: var(--red-60);
	--breadcrumb-color: hsl(221 9% 60%);
	--severity-critical: var(--red-60);
	--severity-high: orange;
	--severity-medium: gold;
	--severity-low: var(--pale-blue);
	--severity-none: hsl(156 100% 99%);
	--severity-rating-colour: black;
	--focused-background: var(--blue-80);
}
