/*
	Loads the Bootstrap-era stylesheets into a low-priority cascade layer.

	Why this file exists: a <link rel="stylesheet"> cannot be assigned a cascade
	layer, and in Tailwind v4 every utility lives inside `@layer utilities` while
	un-layered CSS beats *any* layered rule regardless of specificity. Linked
	directly, main.css's `h2, .h2 { font-size: 35px }` therefore overrode
	`text-3xl` on every component in the app. Under v3 both were un-layered and
	Tailwind won on source order; the layer restores that ordering.

	It also has to live in public/ rather than being @import-ed from src/index.css:
	Tailwind's PostCSS plugin resolves and inlines @import at build time, and these
	paths are served at runtime from public/, not resolvable on disk from src/.

	The order below reproduces what v3 actually did, where nothing was layered and
	the cascade fell out of source order plus specificity:

	  theme     Tailwind design tokens
	  base      Tailwind Preflight
	  legacy    bootstrap.min.css, main.css, responsive.css
	  app-base  our own element defaults (index.css h1-h6/button, articles.css)
	  utilities Tailwind utilities

	`legacy` sits ABOVE `base` on purpose. Below it, Preflight's
	`button { background-color: transparent }` would beat Bootstrap's
	`.btn-primary`, stripping the fill off every Bootstrap button in the app.
	It sits BELOW `utilities` so a component's `text-3xl` still beats
	main.css's `h2, .h2 { font-size: 35px }`.

	Tailwind re-declares `theme, base, components, utilities` when it loads;
	re-declaring existing layers does not reorder them, so this ordering wins.
*/
@layer theme, base, legacy, app-base, components, utilities;

@import url("/css/bootstrap.min.css") layer(legacy);
@import url("/css/main.css") layer(legacy);
@import url("/css/responsive.css") layer(legacy);