From 930627c71c12daa6d8875f8fa0ef4d3a61815eb5 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 14 Dec 2025 01:31:36 -0800
Subject: [PATCH] use lighter bg and darker text for settings tabs

---
 src/lib/components/ui/SettingsNav.svelte | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/ui/SettingsNav.svelte b/src/lib/components/ui/SettingsNav.svelte
index 03b5d906..08a084a5 100644
--- a/src/lib/components/ui/SettingsNav.svelte
+++ b/src/lib/components/ui/SettingsNav.svelte
@@ -90,43 +90,43 @@
 	// Element-specific styles for checked state
 	.element-wind {
 		:global(.nav-item[data-state='checked']) {
-			background: colors.$wind-bg-10;
-			color: white;
+			background: colors.$wind-bg-20;
+			color: colors.$wind-text-10;
 		}
 	}
 
 	.element-fire {
 		:global(.nav-item[data-state='checked']) {
-			background: colors.$fire-bg-10;
-			color: white;
+			background: colors.$fire-bg-20;
+			color: colors.$fire-text-10;
 		}
 	}
 
 	.element-water {
 		:global(.nav-item[data-state='checked']) {
-			background: colors.$water-bg-10;
-			color: white;
+			background: colors.$water-bg-20;
+			color: colors.$water-text-10;
 		}
 	}
 
 	.element-earth {
 		:global(.nav-item[data-state='checked']) {
-			background: colors.$earth-bg-10;
-			color: white;
+			background: colors.$earth-bg-20;
+			color: colors.$earth-text-10;
 		}
 	}
 
 	.element-dark {
 		:global(.nav-item[data-state='checked']) {
-			background: colors.$dark-bg-10;
-			color: white;
+			background: colors.$dark-bg-20;
+			color: colors.$dark-text-10;
 		}
 	}
 
 	.element-light {
 		:global(.nav-item[data-state='checked']) {
-			background: colors.$light-bg-10;
-			color: white;
+			background: colors.$light-bg-20;
+			color: colors.$light-text-10;
 		}
 	}
 </style>