/* Globals */

:root {
	--sidebar-target-width: 240px;
	--sidebar-width: min(var(--sidebar-target-width), 80vw);
	--sidebar-resize-indicator-width: 8px;
	--sidebar-resize-indicator-space: 2px;
	--page-padding: 15px;
	--content-max-width: 750px;
	--docs-content-max-width: 860px;
	--docs-sidebar-gap: 4.8rem;
	--docs-page-toc-width: 220px;
	--docs-page-toc-gap: 4rem;
	--docs-top-offset: 2.4rem;
	--docs-shell-max-width: calc(
		var(--sidebar-width) + var(--docs-sidebar-gap) +
			var(--docs-content-max-width) + var(--docs-page-toc-gap) +
			var(--docs-page-toc-width)
	);
	--menu-bar-height: 88px;
	--site-header-max-width: 1280px;
	--site-header-bg: rgba(255, 255, 255, 0.84);
	--site-header-border: transparent;
	--site-header-brand: #1f2937;
	--site-header-link: #334155;
	--site-header-link-hover: #0f172a;
	--site-header-icon: #111827;
	--site-header-icon-hover: #020617;
	--site-header-separator: #dbe1ea;
	--text-font: "Atkinson Hyperlegible Next", sans-serif;
	--title-font: "Asap Condensed", sans-serif;
	--mono-font: "DM Mono", monospace;
	--code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
	--searchbar-margin-block-start: 5px;
	--transparent-bg: rgba(0, 0, 0, 0);
	--overlay-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	--tooltip-fg: #fff;
	--tooltip-bg: #333;
	--accent: var(--fg);
	--accent-hover: color-mix(in srgb, var(--accent) 82%, black);
	--accent-subtle: color-mix(in srgb, var(--accent) 8%, var(--bg));
	--accent-soft: color-mix(in srgb, var(--accent) 14%, var(--bg));
	--accent-strong: color-mix(in srgb, var(--accent) 65%, var(--fg));
	--accent-strong-soft: color-mix(in srgb, var(--accent) 55%, white);
	--accent-contrast-surface-start: color-mix(
		in srgb,
		var(--accent) 12%,
		#324259
	);
	--accent-contrast-action: color-mix(in srgb, var(--accent) 30%, #1c2740);
	--accent-contrast-action-hover: color-mix(
		in srgb,
		var(--accent) 42%,
		#162036
	);
	--accent-placeholder: color-mix(in srgb, var(--accent) 22%, white);
	--text-on-accent: #fff;
	--sidebar-bg: var(--bg);
	--sidebar-fg: var(--fg);
	--sidebar-non-existant: color-mix(in srgb, var(--fg) 33%, var(--bg));
	--sidebar-active: var(--accent);
	--sidebar-spacer: color-mix(in srgb, var(--fg) 8%, var(--bg));
	--scrollbar: color-mix(in srgb, var(--fg) 44%, var(--bg));
	--icons: color-mix(in srgb, var(--fg) 45%, var(--bg));
	--icons-hover: var(--fg);
	--links: color-mix(in srgb, var(--accent) 68%, black);
	--inline-code-color: color-mix(in srgb, var(--accent) 28%, black);
	--theme-popup-bg: color-mix(in srgb, var(--bg) 92%, var(--fg));
	--theme-popup-border: color-mix(in srgb, var(--fg) 24%, var(--bg));
	--theme-hover: color-mix(in srgb, var(--fg) 12%, var(--bg));
	--quote-bg: color-mix(in srgb, var(--accent) 6%, var(--bg));
	--quote-border: color-mix(in srgb, var(--accent) 12%, var(--bg));
	--warning-border: hsl(33, 100%, 50%);
	--table-border-color: color-mix(in srgb, var(--fg) 7%, var(--bg));
	--table-header-bg: color-mix(in srgb, var(--fg) 20%, var(--bg));
	--table-alternate-bg: color-mix(in srgb, var(--fg) 5%, var(--bg));
	--searchbar-border-color: color-mix(in srgb, var(--fg) 33%, var(--bg));
	--searchbar-bg: color-mix(in srgb, var(--bg) 92%, var(--fg));
	--searchbar-fg: var(--fg);
	--searchbar-shadow-color: color-mix(in srgb, var(--fg) 33%, var(--bg));
	--searchresults-header-fg: var(--fg);
	--searchresults-border-color: color-mix(in srgb, var(--fg) 28%, var(--bg));
	--searchresults-li-bg: color-mix(in srgb, var(--accent) 10%, var(--bg));
	--search-mark-bg: var(--accent-placeholder);
	--footnote-highlight: color-mix(in srgb, var(--accent) 30%, white);
	--overlay-bg: color-mix(in srgb, var(--fg) 18%, transparent);
	--site-header-bg: color-mix(in srgb, var(--bg) 88%, transparent);
	--site-header-border: transparent;
	--site-header-brand: var(--fg);
	--site-header-link: var(--fg);
	--site-header-link-hover: var(--fg);
	--site-header-icon: var(--fg);
	--site-header-icon-hover: var(--accent-hover);
	--site-header-separator: color-mix(in srgb, var(--fg) 11%, var(--bg));
	--landing-why-bg: var(--accent-subtle);
	--landing-section-accent: var(--accent-strong);
	--landing-hero-cta-bg: var(--fg);
	--landing-hero-cta-border: var(--fg);
	--landing-hero-cta-fg: var(--bg);
	--landing-hero-cta-hover-bg: var(--transparent-bg);
	--landing-hero-cta-hover-border: var(--fg);
	--landing-hero-cta-hover-fg: var(--fg);
	--landing-action-hover-bg: var(--accent-hover);
	--landing-involved-bg: var(--accent-contrast-surface-start);
	--landing-involved-link-bg: var(--accent-contrast-action);
	--landing-involved-link-hover-bg: var(--accent-contrast-action-hover);
	--sidebar-placeholder-fg: color-mix(
		in srgb,
		var(--sidebar-fg) 40%,
		var(--bg)
	);
	--sidebar-hover-rule: color-mix(in srgb, var(--accent) 55%, transparent);

	/* Dark theme variables */
	--dark-bg: hsl(223, 26%, 11%);
	--dark-fg: hsl(0, 0%, 100%);
	--dark-accent: hsl(205, 84%, 50%);
	--dark-searchbar-bg: color-mix(in srgb, var(--dark-fg) 86%, var(--dark-bg));
	--dark-searchbar-fg: var(--dark-bg);
	--dark-site-header-icon-hover: var(--dark-accent);
	--dark-site-header-bg: color-mix(in srgb, var(--dark-bg) 90%, black);
	--dark-site-header-separator: color-mix(
		in srgb,
		var(--dark-fg) 14%,
		var(--dark-bg)
	);
	--dark-landing-surface: color-mix(
		in srgb,
		var(--dark-accent) 9%,
		var(--dark-bg)
	);
	--dark-landing-section-accent: color-mix(
		in srgb,
		var(--dark-accent) 78%,
		white
	);
	--dark-landing-action-hover-bg: color-mix(
		in srgb,
		var(--dark-accent) 88%,
		white
	);
}

/* Themes */

.light,
html:not(.js) {
	--bg: hsl(0, 0%, 100%);
	--fg: hsl(0, 0%, 0%);
	--accent: hsl(217, 72%, 49%);

	/* Light theme landing palette */
	--landing-why-bg: color-mix(in srgb, var(--accent) 11%, var(--bg));
	--landing-involved-bg: var(--landing-why-bg);
	--landing-involved-link-bg: var(--sidebar-active);
	--landing-involved-link-hover-bg: var(--landing-action-hover-bg);
	--landing-section-accent: color-mix(in srgb, var(--accent) 72%, var(--fg));
	--landing-hero-cta-bg: var(--fg);
	--landing-hero-cta-border: var(--fg);
	--landing-hero-cta-fg: var(--bg);
	--landing-hero-cta-hover-bg: var(--transparent-bg);
	--landing-hero-cta-hover-border: var(--fg);
	--landing-hero-cta-hover-fg: var(--fg);
	--site-header-bg: color-mix(in srgb, var(--bg) 92%, var(--accent-subtle));
	--site-header-link: var(--fg);
	--site-header-icon: var(--fg);
	--site-header-icon-hover: var(--accent);

	--color-scheme: light;

	/* Same as `--icons` */
	--copy-button-filter: invert(45.49%);
	/* Same as `--sidebar-active` */
	--copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%)
		hue-rotate(243deg) brightness(99%) contrast(130%);
}

.navy {
	--bg: var(--dark-bg);
	--fg: var(--dark-fg);
	--accent: var(--dark-accent);

	--color-scheme: dark;

	/* Same as `--icons` */
	--copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg)
		brightness(86%) contrast(87%);
	/* Same as `--sidebar-active` */
	--copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%)
		hue-rotate(156deg) brightness(85%) contrast(90%);

	--sidebar-fg: var(--dark-fg);
	--inline-code-color: var(--dark-fg);
	--searchbar-bg: var(--dark-searchbar-bg);
	--searchbar-fg: var(--dark-searchbar-fg);
	--site-header-bg: var(--dark-site-header-bg);
	--site-header-brand: var(--dark-fg);
	--site-header-link: var(--dark-fg);
	--site-header-link-hover: var(--dark-fg);
	--site-header-icon: var(--dark-fg);
	--site-header-icon-hover: var(--dark-site-header-icon-hover);
	--site-header-separator: var(--dark-site-header-separator);
	--landing-why-bg: var(--dark-landing-surface);
	--landing-involved-bg: var(--dark-landing-surface);
	--landing-section-accent: var(--dark-landing-section-accent);
	--landing-hero-cta-bg: var(--accent);
	--landing-hero-cta-border: var(--accent);
	--landing-hero-cta-fg: var(--text-on-accent);
	--landing-hero-cta-hover-bg: color-mix(
		in srgb,
		var(--accent) 14%,
		transparent
	);
	--landing-hero-cta-hover-border: var(--accent);
	--landing-hero-cta-hover-fg: var(--accent);
	--landing-action-hover-bg: var(--dark-landing-action-hover-bg);
	--landing-involved-link-bg: var(--accent);
	--landing-involved-link-hover-bg: var(--landing-action-hover-bg);
}

@media (prefers-color-scheme: dark) {
	html:not(.js) {
		--bg: var(--dark-bg);
		--fg: var(--dark-fg);
		--accent: var(--dark-accent);

		--color-scheme: dark;

		/* Same as `--icons` */
		--copy-button-filter: invert(51%) sepia(10%) saturate(393%)
			hue-rotate(198deg) brightness(86%) contrast(87%);
		/* Same as `--sidebar-active` */
		--copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%)
			hue-rotate(156deg) brightness(85%) contrast(90%);

		--sidebar-fg: var(--dark-fg);
		--inline-code-color: var(--dark-fg);
		--searchbar-bg: var(--dark-searchbar-bg);
		--searchbar-fg: var(--dark-searchbar-fg);
		--site-header-bg: var(--dark-site-header-bg);
		--site-header-brand: var(--dark-fg);
		--site-header-link: var(--dark-fg);
		--site-header-link-hover: var(--dark-fg);
		--site-header-icon: var(--dark-fg);
		--site-header-icon-hover: var(--dark-site-header-icon-hover);
		--site-header-separator: var(--dark-site-header-separator);
		--landing-why-bg: var(--dark-landing-surface);
		--landing-involved-bg: var(--dark-landing-surface);
		--landing-section-accent: var(--dark-landing-section-accent);
		--landing-hero-cta-bg: var(--accent);
		--landing-hero-cta-border: var(--accent);
		--landing-hero-cta-fg: var(--text-on-accent);
		--landing-hero-cta-hover-bg: color-mix(
			in srgb,
			var(--accent) 14%,
			transparent
		);
		--landing-hero-cta-hover-border: var(--accent);
		--landing-hero-cta-hover-fg: var(--accent);
		--landing-action-hover-bg: var(--dark-landing-action-hover-bg);
		--landing-involved-link-bg: var(--accent);
		--landing-involved-link-hover-bg: var(--landing-action-hover-bg);
	}
}