/**
 * HTML Theme - Blue color palette
 *
 * A first draft to look at (2026-11-07): the same recipe as php.css with the
 * blue ramp. Derek: "When they get into HTML, I kind of want that theme to be
 * generally kind of bluish." The accent is the classic early-web link blue, not
 * orange (Derek: "classic early web blues... very Wikipedia"). Try it with
 * ?palette=html on any page.
 * Plain sections stay white; the blue tint is for the emphasis bands (Derek: "Not
 * every section has to be having a blue tint").
 */

[data-palette='html'] {
	--fill-primary: white;
	--fill-secondary: var(--color-blue-50);
	--fill-auxiliary: var(--color-blue-100);
	--ink-primary: var(--color-blue-950);
	--ink-secondary: color-mix(in oklch, var(--ink-primary) 70%, var(--fill-primary));
	--ink-auxiliary: color-mix(in oklch, var(--ink-primary) 45%, var(--fill-primary));
	--stroke-primary: var(--color-blue-300);
	--stroke-secondary: var(--color-blue-200);
	--accent: var(--color-blue-700);
	--highlighter: var(--color-yellow-200);
	--highlighter-ink: var(--color-blue-950);

	/* The colors the page-end art may draw with (scripts/page-end-art.js): three slabs and a circle. */
	/* Light enough to show on the blue-700 focused band as well as on white. */
	--art-slab-1: var(--color-blue-500);
	--art-slab-2: var(--color-sky-400);
	--art-slab-3: var(--color-indigo-400);
	--art-circle: var(--color-yellow-200);

	background-color: var(--fill-primary);
	color: var(--ink-primary);

	[data-emphasis='alternate'] {
		--fill-primary: var(--color-blue-50);
		--fill-secondary: var(--color-blue-100);
		--ink-primary: var(--color-blue-950);
		--stroke-primary: var(--color-blue-300);
		/* Said again here, so a light band inside a dark one (a page header's intro) doesn't inherit the dark band's pale links. */
		--accent: var(--color-blue-700);

		background-color: var(--fill-primary);
		color: var(--ink-primary);
	}

	[data-emphasis='focused'] {
		--fill-primary: var(--color-blue-700);
		--fill-secondary: var(--color-blue-600);
		--ink-primary: var(--color-blue-50);
		--stroke-primary: var(--color-blue-500);
		--accent: var(--color-sky-200);

		background-color: var(--fill-primary);
		color: var(--ink-primary);
	}

	[data-emphasis='immersive'] {
		--fill-primary: var(--color-blue-950);
		--fill-secondary: var(--color-blue-900);
		--ink-primary: var(--color-blue-50);
		--stroke-primary: var(--color-blue-800);
		--accent: var(--color-sky-300);

		background-color: var(--fill-primary);
		color: var(--ink-primary);
	}
}