Website: Logo colors

src/lib/components/atoms/Logo.svelte

@@ -92,7 +92,7 @@
 		}
 	}
 	.logo path {
-		fill: #303e35;
+		fill: var(--color--logo-fill);
 		stroke-width: 7px;
 		stroke: var(--color--text);
 	}

src/lib/scss/_themes.scss

@@ -25,6 +25,9 @@
 	@include define-color('post-page-background', #F3FBFC);  // Slightly darker for content
 	@include define-color('card-background', #FFFFFF);  // Card background
 
+	// Logo
+	@include define-color('logo-fill', #1C1E26);  // Slightly darker for content
+
 	// Callout component
 	@include define-color('callout-background', #F4F8FB);  // Neutral light background
 	@include define-color('callout-background--info', #D8EFFF);  // Info callout background
@@ -75,6 +78,9 @@
 	@include define-color('post-page-background', #181A1B);  // Darker for content areas
 	@include define-color('card-background', #24282A);  // Cards background
 
+	// Logo
+	@include define-color('logo-fill', #00000000);  // Darker for content areas
+
 	// Callout Backgrounds & Accents
 	@include define-color('callout-background', #181A1B);  // Neutral dark background
 	@include define-color('callout-background--info', #125A75);  // Info callout (cool blue)

src/routes/(blog-article)/+layout.svelte

@@ -78,7 +78,7 @@
 			</div>
 		</article>
 		<div id="branding">
-			<div class="circle-container">
+			<div>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="logo"
@@ -210,16 +210,6 @@
 		align-items: center;
 		position: relative;
 
-		// .circle-container {
-		// 	position: relative;
-		// 	width: 120px;
-		// 	height: 120px;
-		// 	background-color: #f0f0f0;
-		// 	border-radius: 50%;
-		// 	display: flex;
-		// 	justify-content: center;
-		// 	align-items: center;
-		// }
 		.logo {
 			display: flex;
 			align-items: center;
@@ -228,9 +218,9 @@
 			height: 250px;
 		}
 		.logo path {
-			stroke: white;
+			stroke: var(--color--text);
 			stroke-width: 4px;
-			fill: black;
+			fill: var(--color--logo-fill);
 		}
 	}
 </style>