/*
	Define common sizes and spacings
*/
:root {
	--theme-navbar-height: 6rem;
	--theme-mobile-toc-height: 4rem;
	--theme-left-sidebar-width: 18rem;
	--theme-right-sidebar-width: 18rem;
	/*
		Minimum visual horizontal spacing from the edges of the viewport,
		and between vertically arranged elements
	*/
	--min-spacing-inline: 1rem;
	/* Vertical spacing around the article content and the right sidebar */
	--doc-padding-block: 0.5rem;
	--max-width: 100%;
	--cur-viewport-height: 100vh;
	/* Font sizes */
	--theme-text-lg: 1.25rem;
	--theme-text-base: 1rem;
	--theme-text-sm: 0.9375rem;
	--theme-text-xs: 0.875rem;
	/* Animation helpers */
	--theme-ease-bounce: cubic-bezier(0.4, 2.5, 0.6, 1);
}

@media (min-width: 50em) {
	:root {
		--min-spacing-inline: 1.5rem;
		--doc-padding-block: 1rem;
		--max-width: 46em;
		--theme-text-sm: 0.875rem;
		--theme-text-xs: 0.8125rem;
	}
}

@media (min-width: 72em) {
	:root {
		--doc-padding-block: 2rem;
	}
}

/* Use dynamic viewport height if the unit is supported by the browser */
@supports (height: 100dvh) {
	:root {
		--cur-viewport-height: 100dvh;
	}
}

/*
	Define common fonts and colors
*/
:root,
::backdrop {
	--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
		Apple Color Emoji, Segoe UI Emoji;
	--font-body: system-ui, var(--font-fallback);
	--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
		'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
		'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;

	/*
		Variables with --color-base prefix define
		the hue, and saturation values to be used for
		hsla colors.

		Example:
		--color-base-{color}: {hue}, {saturation};
	*/

	--color-base-white: 0, 0%;
	--color-base-black: 240, 100%;
	--color-base-gray: 250, 14%;
	--color-base-blue: 212, 100%;
	--color-base-blue-dark: 212, 72%;
	--color-base-teal: 180, 80%;
	--color-base-green: 158, 79%;
	--color-base-orange: 22, 100%;
	--color-base-purple: 269, 79%;
	--color-base-red: 351, 100%;
	--color-base-yellow: 41, 100%;

	/*
		Color palettes are made using --color-base 
		variables, along with a lightness value to
		define different variants.
	*/

	--color-gray-5: var(--color-base-gray), 5%;
	--color-gray-10: var(--color-base-gray), 10%;
	--color-gray-20: var(--color-base-gray), 20%;
	--color-gray-30: var(--color-base-gray), 30%;
	--color-gray-40: var(--color-base-gray), 40%;
	--color-gray-50: var(--color-base-gray), 50%;
	--color-gray-60: var(--color-base-gray), 60%;
	--color-gray-70: var(--color-base-gray), 70%;
	--color-gray-80: var(--color-base-gray), 80%;
	--color-gray-90: var(--color-base-gray), 90%;
	--color-gray-95: var(--color-base-gray), 95%;

	--color-blue: var(--color-base-blue), 61%;
	--color-blue-dark: var(--color-base-blue-dark), 39%;
	--color-green: var(--color-base-green), 42%;
	--color-orange: var(--color-base-orange), 50%;
	--color-purple: var(--color-base-purple), 54%;
	--color-red: var(--color-base-red), 54%;
	--color-yellow: var(--color-base-yellow), 59%;
}

:root,
::backdrop {
	color-scheme: light;
	--theme-accent: hsla(var(--color-orange), 1);
	--theme-accent-secondary: hsl(324, 75%, 38%);
	--theme-dim: hsla(var(--color-gray-70), 1);
	--theme-dim-light: hsla(var(--color-gray-80), 1);
	--theme-dim-lighter: hsla(var(--color-gray-90), 1);
	--theme-accent-opacity: 0.1;
	--theme-divider: hsla(var(--color-purple), 0.1);
	--theme-shade-subtle: hsla(var(--color-purple), 0.3);
	--theme-text: hsla(var(--color-gray-10), 1);
	--theme-text-light: hsla(var(--color-gray-30), 1);
	--theme-text-lighter: hsla(var(--color-gray-40), 1);
	--theme-bg: hsl(273, 37%, 93%);
	--theme-bg-gradient-top: var(--theme-bg);
	--theme-bg-gradient-bottom: #fdfeff;
	--theme-bg-hover: hsla(var(--color-purple), 0.075);
	--theme-bg-offset: hsla(var(--color-purple), 0.1);
	--theme-bg-accent: hsla(var(--color-purple), var(--theme-accent-opacity));
	--theme-backdrop-overlay: hsla(var(--color-gray-50), 0.8);
	--theme-code-inline-bg: hsla(var(--color-purple), 0.1);
	--theme-code-inline-text: var(--theme-text);
	--theme-code-bg: hsla(257, 31%, 22%, 1);
	--theme-code-tabs: hsla(257, 38%, 32%, 1);
	--theme-code-text: hsla(var(--color-gray-95), 1);
	--theme-navbar-bg: var(--theme-bg);
	--theme-selection-color: hsla(var(--color-purple), 1);
	--theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
	--theme-code-selection-bg: hsla(var(--color-purple), 0.4);
	--theme-code-mark-bg: hsl(226, 50%, 33%);
	--theme-code-mark-border: hsl(224, 50%, 54%);
	--theme-code-ins-bg: hsl(122, 22%, 23%);
	--theme-code-ins-border: hsl(128, 42%, 38%);
	--theme-code-ins-text: hsl(128, 31%, 65%);
	--theme-code-del-bg: hsl(338, 40%, 26%);
	--theme-code-del-border: hsl(338, 46%, 53%);
	--theme-code-del-text: hsl(338, 36%, 70%);

	--theme-bg-gradient: linear-gradient(
		180deg,
		var(--theme-bg-gradient-top),
		var(--theme-bg-gradient-top) calc(var(--theme-navbar-height) + var(--theme-mobile-toc-height)),
		var(--theme-bg-gradient-bottom)
	);

	--theme-glow-highlight: transparent;
	--theme-glow-diffuse: hsla(var(--color-base-purple), 65%, 0.5);
	--theme-glow-blur: 10px;
}

:root.theme-dark,
.theme-dark ::backdrop {
	color-scheme: dark;
	/* We lighten-up the orange in dark mode, to help with link contrast. */
	--color-orange: var(--color-base-orange), 60%;
	--theme-accent-opacity: 0.4;
	--theme-accent: hsla(var(--color-orange), 1);
	--theme-accent-secondary: hsla(var(--color-orange), 1);
	--theme-text-accent: hsla(var(--color-orange), 1);
	--theme-dim: hsla(var(--color-gray-90), 0.3);
	--theme-dim-light: hsla(var(--color-gray-90), 0.2);
	--theme-dim-lighter: hsla(var(--color-gray-90), 0.1);
	--theme-divider: hsla(var(--color-gray-95), 0.1);
	--theme-shade-subtle: hsla(var(--color-gray-95), 0.4);
	--theme-text: hsla(var(--color-gray-90), 1);
	--theme-text-light: hsla(var(--color-gray-80), 1);
	--theme-text-lighter: hsla(var(--color-gray-70), 1);
	--theme-bg: hsl(256, 27%, 19%);
	--theme-bg-gradient-top: var(--theme-bg);
	--theme-bg-gradient-bottom: hsl(251, 29%, 11%);
	--theme-bg-hover: hsla(var(--color-purple), 0.2);
	--theme-bg-offset: #0008;
	--theme-backdrop-overlay: hsla(var(--color-gray-10), 0.8);
	--theme-code-inline-bg: #ffffff16;
	--theme-code-inline-text: var(--theme-text-light);
	--theme-code-bg: hsla(257, 31%, 11%, 1);
	--theme-code-tabs: hsla(261, 40%, 21%, 1);
	--theme-code-text: hsla(var(--color-base-white), 80%, 1);
	--theme-navbar-bg: var(--theme-bg);
	--theme-selection-color: hsla(var(--color-base-white), 100%, 1);
	--theme-code-mark-bg: hsl(224, 60%, 25%);
	--theme-code-mark-border: hsl(225, 42%, 46%);
	--theme-code-ins-bg: hsl(122, 29%, 17%);
	--theme-code-ins-border: hsl(128, 41%, 32%);
	--theme-code-ins-text: hsl(128, 31%, 55%);
	--theme-code-del-bg: hsl(337, 47%, 19%);
	--theme-code-del-border: hsl(340, 34%, 43%);
	--theme-code-del-text: hsl(340, 24%, 65%);

	--theme-glow-highlight: hsla(var(--color-base-purple), 50%, 1);
	--theme-glow-diffuse: hsla(var(--color-base-purple), 35%, 0.4);
}

::selection {
	color: var(--theme-selection-color);
	background-color: var(--theme-selection-bg);
}