Fix unused CSS selector warnings

src/app.css

@@ -0,0 +1,3 @@
+/* Global styles for the entire application */
+@import './assets/styles/reset.css';
+@import './assets/styles/globals.scss';

src/assets/styles/imports.scss

@@ -0,0 +1,6 @@
+// This file contains only imports that should be available in every component
+// It should NOT contain any actual CSS rules to avoid duplication
+
+@import './variables.scss';
+@import './fonts.scss';
+@import './themes.scss';

src/routes/+layout.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+	import '../app.css'
 	import { page } from '$app/stores'
 	import Header from '$components/Header.svelte'
 	import Footer from '$components/Footer.svelte'
 	import { generatePersonJsonLd } from '$lib/utils/metadata'
 
+	let { children } = $props()
+
 	const isAdminRoute = $derived($page.url.pathname.startsWith('/admin'))
 
 	// Generate person structured data for the site
@@ -33,7 +36,7 @@
 	{/if}
 
 	<main class:admin-route={isAdminRoute}>
-		<slot />
+		{@render children()}
 	</main>
 
 	{#if !isAdminRoute}
@@ -42,9 +45,6 @@
 </div>
 
 <style lang="scss">
-	@import '../assets/styles/reset.css';
-	@import '../assets/styles/globals.scss';
-
 	:global(html) {
 		background: var(--bg-color);
 		color: var(--text-color);

src/routes/admin/media/upload/+page.svelte

@@ -481,13 +481,6 @@
 			font-size: 0.875rem;
 			color: $grey-50;
 		}
-
-		.file-count {
-			strong {
-				color: $grey-20;
-				font-size: 1.1rem;
-			}
-		}
 	}
 
 	.hidden-input {

vite.config.ts

@@ -60,10 +60,7 @@ export default defineConfig({
 		preprocessorOptions: {
 			scss: {
 				additionalData: `
-          @import './src/assets/styles/variables.scss';
+          @import './src/assets/styles/imports.scss';
-          @import './src/assets/styles/fonts.scss';
-          @import './src/assets/styles/themes.scss';
-          @import './src/assets/styles/globals.scss';
         `,
 				api: 'modern-compiler'
 			}