Finished the Sveltification

src/app.css

@@ -1,99 +1,67 @@
 :root {
-	--bg: #fff;
-	--fg: #222;
-	--accent: #007acc;
+    --bg: #fff;
+    --fg: #222;
+    --accent: #007acc;
+    --lightbox-backdrop: rgb(255 255 255 / 90%);
+    --lightbox-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
+    --surface-elevated: #f3f3f3;
 }
 
 @media (prefers-color-scheme: dark) {
-	:root {
-		--bg: #111;
-		--fg: #eee;
-		--accent: #46c;
-	}
+    :root {
+        --bg: #111;
+        --fg: #eee;
+        --accent: #46c;
+        --lightbox-backdrop: rgb(0 0 0 / 90%);
+        --surface-elevated: #222;
+    }
 }
 
 /* Explicit theme toggle overrides (win over media query when set) */
-html.dark {
-	--bg: #111;
-	--fg: #eee;
-	--accent: #46c;
-}
+html {
+    &[data-theme='dark'] {
+        --bg: #111;
+        --fg: #eee;
+        --accent: #46c;
+        --lightbox-backdrop: rgb(0 0 0 / 90%);
+        --surface-elevated: #222;
+    }
 
-html.light {
-	--bg: #fff;
-	--fg: #222;
-	--accent: #007acc;
+    &[data-theme='light'] {
+        --bg: #fff;
+        --fg: #222;
+        --accent: #007acc;
+        --lightbox-backdrop: rgb(255 255 255 / 90%);
+        --lightbox-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
+        --surface-elevated: #f3f3f3;
+    }
 }
 
 body {
-	margin: 0;
-	font-family: sans-serif;
-	background-color: var(--bg);
-	color: var(--fg);
+    margin: 0;
+    font-family: sans-serif;
+    background-color: var(--bg);
+    color: var(--fg);
 }
 
 .lightbox-open {
-	overflow: hidden;
+    overflow: hidden;
 }
 
 .gallery-grid {
-	column-count: 1;
-	column-gap: 1rem;
-	padding: 1rem;
+    column-count: 1;
+    column-gap: 1rem;
+    padding: 1rem;
 }
 
 @media (width >= 768px) {
-	.gallery-grid {
-		column-count: 2;
-	}
+    .gallery-grid {
+        column-count: 2;
+    }
 }
 
 @media (width >= 1024px) {
-	.gallery-grid {
-		column-count: 3;
-	}
-}
-
-/* Lightbox: not a Svelte component, styled globally for script.js target */
-#lightbox {
-	position: fixed;
-	inset: 0;
-	background: rgb(0 0 0 / 90%);
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	visibility: hidden;
-	opacity: 0;
-	transition: opacity 0.3s;
-}
-
-#lightbox[aria-hidden='false'] {
-	visibility: visible;
-	opacity: 1;
-}
-
-#lb-content img,
-#lb-content video {
-	max-width: 90vw;
-	max-height: 80vh;
-	border-radius: 8px;
-}
-
-#lb-caption {
-	color: #fff;
-	margin-top: 0.5rem;
-	text-align: center;
-	max-width: 90vw;
-}
-
-#lb-close {
-	position: absolute;
-	top: 1rem;
-	right: 1rem;
-	background: none;
-	border: none;
-	font-size: 2rem;
-	color: #fff;
-	cursor: pointer;
+    .gallery-grid {
+        column-count: 3;
+    }
 }