diff --git a/src/lib/components/extra/GuidebookUnit.svelte b/src/lib/components/extra/GuidebookUnit.svelte
index c15f84ce..844cb7eb 100644
--- a/src/lib/components/extra/GuidebookUnit.svelte
+++ b/src/lib/components/extra/GuidebookUnit.svelte
@@ -61,7 +61,7 @@
 
   .unit { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: $unit; }
   .image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; background: var(--extra-purple-card-bg); }
-  .name { font-size: $font-small; text-align: center; color: $grey-50; }
+  .name { font-size: $font-small; text-align: center; color: var(--text-secondary); }
   .remove, .add { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.6); color: white; border: none; border-radius: 12px; width: 24px; height: 24px; line-height: 24px; cursor: pointer; }
   .add { right: 6px; }
 </style>
diff --git a/src/lib/components/ui/DetailItem.svelte b/src/lib/components/ui/DetailItem.svelte
index bbcfa73e..40e4e456 100644
--- a/src/lib/components/ui/DetailItem.svelte
+++ b/src/lib/components/ui/DetailItem.svelte
@@ -179,12 +179,12 @@
 
 		.label {
 			font-weight: typography.$medium;
-			color: colors.$grey-50;
+			color: var(--text-secondary);
 		}
 
 		.sublabel {
 			font-size: typography.$font-small;
-			color: colors.$grey-60;
+			color: var(--text-tertiary);
 			font-weight: typography.$normal;
 		}
 
@@ -223,7 +223,7 @@
 				border: none;
 				border-radius: layout.$item-corner;
 				background: transparent;
-				color: colors.$grey-50;
+				color: var(--text-secondary);
 				cursor: pointer;
 				flex-shrink: 0;
 				@include effects.smooth-transition(effects.$duration-quick, background-color, color, opacity);
diff --git a/src/lib/components/ui/DetailsHeader.svelte b/src/lib/components/ui/DetailsHeader.svelte
index 828d0d2f..13300c55 100644
--- a/src/lib/components/ui/DetailsHeader.svelte
+++ b/src/lib/components/ui/DetailsHeader.svelte
@@ -201,7 +201,7 @@
 
 			.job-tier {
 				font-size: typography.$font-small;
-				color: colors.$grey-50;
+				color: var(--text-secondary);
 			}
 		}
 	}
diff --git a/src/lib/components/ui/DisclosureRow.svelte b/src/lib/components/ui/DisclosureRow.svelte
index 4de4a092..a9acf3d0 100644
--- a/src/lib/components/ui/DisclosureRow.svelte
+++ b/src/lib/components/ui/DisclosureRow.svelte
@@ -101,7 +101,7 @@
 
 		.sublabel {
 			font-size: typography.$font-small;
-			color: colors.$grey-60;
+			color: var(--text-tertiary);
 			font-weight: typography.$normal;
 		}
 
@@ -109,13 +109,13 @@
 			display: flex;
 			align-items: center;
 			gap: spacing.$unit-half;
-			color: colors.$grey-50;
+			color: var(--text-secondary);
 			flex-shrink: 0;
 		}
 
 		.value {
 			font-size: typography.$font-regular;
-			color: colors.$grey-50;
+			color: var(--text-secondary);
 		}
 
 		// Element-colored value
diff --git a/src/lib/components/ui/SuggestionBadge.svelte b/src/lib/components/ui/SuggestionBadge.svelte
index d9fd29cf..0931c8cf 100644
--- a/src/lib/components/ui/SuggestionBadge.svelte
+++ b/src/lib/components/ui/SuggestionBadge.svelte
@@ -135,7 +135,7 @@
 
 	.suggestion-label {
 		font-size: calc($font-small * 0.9);
-		color: $grey-50;
+		color: var(--text-secondary);
 		font-weight: $normal;
 	}
 
diff --git a/src/lib/components/ui/SuggestionDetailItem.svelte b/src/lib/components/ui/SuggestionDetailItem.svelte
index 58157cd3..0b813684 100644
--- a/src/lib/components/ui/SuggestionDetailItem.svelte
+++ b/src/lib/components/ui/SuggestionDetailItem.svelte
@@ -228,12 +228,12 @@
 
 		.label {
 			font-weight: typography.$medium;
-			color: colors.$grey-50;
+			color: var(--text-secondary);
 		}
 
 		.sublabel {
 			font-size: typography.$font-small;
-			color: colors.$grey-60;
+			color: var(--text-tertiary);
 			font-weight: typography.$normal;
 		}
 
@@ -270,7 +270,7 @@
 				border: none;
 				border-radius: layout.$item-corner;
 				background: transparent;
-				color: colors.$grey-50;
+				color: var(--text-secondary);
 				cursor: pointer;
 				flex-shrink: 0;
 				@include effects.smooth-transition(effects.$duration-quick, background-color, color, opacity);
diff --git a/src/lib/components/ui/checkbox/CheckboxGroup.svelte b/src/lib/components/ui/checkbox/CheckboxGroup.svelte
index 22c7eb0f..7c02b3fb 100644
--- a/src/lib/components/ui/checkbox/CheckboxGroup.svelte
+++ b/src/lib/components/ui/checkbox/CheckboxGroup.svelte
@@ -89,7 +89,7 @@
 
 	.option-label {
 		font-size: $font-small;
-		color: $grey-50;
+		color: var(--text-secondary);
 		user-select: none;
 		transition: color 0.15s ease;
 	}