clean up consumer styling

Consumer now only imports the styles endpoint from their main CSS file.
Dark mode is currently permanently disabled, I need to add a JS helper
that when used automatically adds the correct class if there is a
preferred color scheme.

Also gets rid of the whole weird thing where the consumer had to have
a SPECIFIC `theme.css` file.

package.json

@@ -26,7 +26,8 @@
 		".": {
 			"types": "./src/lib/index.ts",
 			"svelte": "./src/lib/index.ts"
-		}
+		},
+		"./styles": "./src/lib/styles/base.css"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.2",

src/lib/Combobox.svelte

@@ -462,7 +462,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "$lib/styles/tailwind.css";
+	@reference "./styles/reference.css";
 
 	.picker {
 		--outer-gap: 0.5rem;

src/lib/DateInput.svelte

@@ -311,7 +311,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "$lib/styles/tailwind.css";
+	@reference "./styles/reference.css";
 
 	.date-input {
 		@apply ring-sui-accent dark:ring-sui-accent/50 h-6 min-w-[1ch] outline-0 transition-all focus:ring-2;

src/lib/StateMachine.svelte

@@ -435,7 +435,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "$lib/styles/tailwind.css";
+	@reference "./styles/reference.css";
 
 	:global(.circle-initial) {
 		transition: opacity 1s;

src/lib/TimeInput.svelte

@@ -363,7 +363,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "$lib/styles/tailwind.css";
+	@reference "./styles/reference.css";
 
 	:global(.time-input) {
 		@apply h-16 w-24 text-center text-xl;

src/lib/styles/base.css

@@ -1,3 +1,5 @@
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
 	/* Fonts - easily overrideable */
 	--font-*: initial;

src/lib/styles/reference.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import './base.css';

src/lib/styles/tailwind.css

@@ -1,12 +1,9 @@
-/* packages/ui/src/styles/tailwind.css */
 @import 'tailwindcss';
 @import '$lib/styles/base.css';
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/container-queries';
 @plugin 'tailwindcss-animate';
 
-@custom-variant dark (&:where(.dark, .dark *));
-
 @layer base {
 	*,
 	::after,