/**
 * Study Hall Theme - the Study Hall index's own palette
 *
 * Derek, 2026-11-12: "a nod to Saved by the Bell and make some funny shapes...
 * maybe we have just like a default one, and then... different ones based on
 * different colors for what module they're connected to." This is the default:
 * the index spans every module, so it wears this; a workshop's Study Hall wears
 * its module's palette instead. The shapes are the `memphis` composition in
 * scripts/header-art.js, drawn on the focused band.
 *
 * Plain sections keep the site's default colors; only the art and the header's
 * focused band change.
 */

[data-palette='study-hall'] {
	/* Light, mid, dark, and the circle (scripts/header-art.js reads them in that order). */
	/* All bright enough to show on the indigo band. */
	--art-slab-1: var(--color-teal-300);
	--art-slab-2: var(--color-pink-400);
	--art-slab-3: var(--color-orange-400);
	--art-circle: var(--color-yellow-300);

	[data-emphasis='focused'] {
		--fill-primary: var(--color-indigo-600);
		--fill-secondary: var(--color-indigo-500);
		--ink-primary: var(--color-indigo-50);
		/* The quieter inks are the band's own ink mixed toward the band, so they read as see-through white, not gray (the onboarding palette's recipe). Said here, where the band's fill is, so the mix uses it. */
		--ink-secondary: color-mix(in oklch, var(--ink-primary) 85%, var(--fill-primary));
		--ink-auxiliary: color-mix(in oklch, var(--ink-primary) 65%, var(--fill-primary));
		--stroke-primary: var(--color-indigo-500);
		--accent: var(--color-cyan-200);

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