diff --git a/src/themes/_colors.scss b/src/themes/_colors.scss
index 5a37b624..89ffb233 100644
--- a/src/themes/_colors.scss
+++ b/src/themes/_colors.scss
@@ -96,7 +96,7 @@ $wind-bg-20: #cdffed;
 
 $fire-text-00: #3f0202;
 $fire-text-10: #3e0000;
-$fire-text-20: #700101;
+$fire-text-20: #6E0000;
 $fire-text-30: #ec5c5c;
 $fire-bg-00: #e05555;
 $fire-bg-10: #fa6d6d;
@@ -112,7 +112,8 @@ $water-bg-20: #cdedff;
 
 $earth-text-00: #321602;
 $earth-text-10: #662a00;
-$earth-text-20: #913d01;
+$earth-text-15: #863504;
+$earth-text-20: #8E3C0B;
 $earth-text-30: #ec985c;
 $earth-bg-00: #df8849;
 $earth-bg-10: #fd9f5b;
@@ -120,15 +121,15 @@ $earth-bg-20: #ffe2cd;
 
 $light-text-00: #3d3700;
 $light-text-10: #4b4300;
-$light-text-20: #706500;
-$light-text-30: #c5b20c;
+$light-text-20: #715100;
+$light-text-30: #C59C0C;
 $light-bg-00: #cab91c;
 $light-bg-10: #e8d633;
 $light-bg-20: #fffacd;
 
 $dark-text-00: #23002f;
 $dark-text-10: #3e0054;
-$dark-text-20: #5b017b;
+$dark-text-20: #560075;
 $dark-text-30: #c65cec;
 $dark-bg-00: #ba63d8;
 $dark-bg-10: #de7bff;
diff --git a/src/themes/_spacing.scss b/src/themes/_spacing.scss
index 6614b1e1..8fb7540b 100644
--- a/src/themes/_spacing.scss
+++ b/src/themes/_spacing.scss
@@ -22,6 +22,7 @@ $medium-screen: 768px;
 $unit: 8px;
 
 $unit-fourth: calc($unit / 4);
+$unit-quarter: calc($unit / 4); // 2px - alias for unit-fourth
 $unit-half: calc($unit / 2);
 $unit-three-quarter: calc($unit * 0.75); // 6px - common gap/small spacing
 $unit-three-fourth: calc($unit / 4) * 3;
diff --git a/src/themes/themes.scss b/src/themes/themes.scss
index a6ae0c95..3b45bc0e 100644
--- a/src/themes/themes.scss
+++ b/src/themes/themes.scss
@@ -215,6 +215,33 @@
 	--null-shadow: #{colors.$null--shadow--light};
 	--null-shadow-hover: #{colors.$null--shadow--light--hover};
 
+	// Light - Element button colors
+	--null-button-bg: #{colors.$grey-55};
+	--wind-button-bg: #{colors.$wind-text-30};
+	--fire-button-bg: #{colors.$fire-text-30};
+	--water-button-bg: #{colors.$water-text-30};
+	--earth-button-bg: #{colors.$earth-text-20};
+	--light-button-bg: #{colors.$light-text-30};
+	--dark-button-bg: #{colors.$dark-text-30};
+
+	// Light - Element navigation selected background
+	--null-nav-selected-bg: #{colors.$grey-85};
+	--wind-nav-selected-bg: #{colors.$wind-bg-20};
+	--fire-nav-selected-bg: #{colors.$fire-bg-20};
+	--water-nav-selected-bg: #{colors.$water-bg-20};
+	--earth-nav-selected-bg: #{colors.$earth-bg-20};
+	--light-nav-selected-bg: #{colors.$light-bg-20};
+	--dark-nav-selected-bg: #{colors.$dark-bg-20};
+
+	// Light - Element navigation selected text
+	--null-nav-selected-text: #{colors.$grey-40};
+	--wind-nav-selected-text: #{colors.$wind-text-20};
+	--fire-nav-selected-text: #{colors.$fire-text-20};
+	--water-nav-selected-text: #{colors.$water-text-10};
+	--earth-nav-selected-text: #{colors.$earth-text-15};
+	--light-nav-selected-text: #{colors.$light-text-20};
+	--dark-nav-selected-text: #{colors.$dark-text-20};
+
 	--wind-bg: #{colors.$wind--bg--light};
 	--wind-bg-hover: #{colors.$wind--bg--hover--light};
 	--wind-portrait-bg: #{colors.$wind--portrait--bg--light};
@@ -466,6 +493,33 @@
 	--null-shadow: #{colors.$null--shadow--dark};
 	--null-shadow-hover: #{colors.$null--shadow--dark--hover};
 
+	// Dark - Element button colors (same as light theme)
+	--null-button-bg: #{colors.$grey-55};
+	--wind-button-bg: #{colors.$wind-text-30};
+	--fire-button-bg: #{colors.$fire-text-30};
+	--water-button-bg: #{colors.$water-text-30};
+	--earth-button-bg: #{colors.$earth-text-20};
+	--light-button-bg: #{colors.$light-text-30};
+	--dark-button-bg: #{colors.$dark-text-30};
+
+	// Dark - Element navigation selected background (same as light theme)
+	--null-nav-selected-bg: #{colors.$grey-85};
+	--wind-nav-selected-bg: #{colors.$wind-bg-20};
+	--fire-nav-selected-bg: #{colors.$fire-bg-20};
+	--water-nav-selected-bg: #{colors.$water-bg-20};
+	--earth-nav-selected-bg: #{colors.$earth-bg-20};
+	--light-nav-selected-bg: #{colors.$light-bg-20};
+	--dark-nav-selected-bg: #{colors.$dark-bg-20};
+
+	// Dark - Element navigation selected text (same as light theme)
+	--null-nav-selected-text: #{colors.$grey-40};
+	--wind-nav-selected-text: #{colors.$wind-text-20};
+	--fire-nav-selected-text: #{colors.$fire-text-20};
+	--water-nav-selected-text: #{colors.$water-text-10};
+	--earth-nav-selected-text: #{colors.$earth-text-15};
+	--light-nav-selected-text: #{colors.$light-text-20};
+	--dark-nav-selected-text: #{colors.$dark-text-20};
+
 	--wind-bg: #{colors.$wind--bg--dark};
 	--wind-bg-hover: #{colors.$wind--bg--hover--dark};
 	--wind-portrait-bg: #{colors.$wind--portrait--bg--dark};