diff --git a/packages/shared-auth-ui/src/components/AuditLog.svelte b/packages/shared-auth-ui/src/components/AuditLog.svelte
index 34c267e7e..4a92b98a2 100644
--- a/packages/shared-auth-ui/src/components/AuditLog.svelte
+++ b/packages/shared-auth-ui/src/components/AuditLog.svelte
@@ -287,7 +287,7 @@
 
 	.audit-subtitle {
 		font-size: 0.875rem;
-		color: var(--text-muted, #9ca3af);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		margin: 0;
 	}
 
@@ -298,16 +298,16 @@
 		width: 2.25rem;
 		height: 2.25rem;
 		border-radius: 0.5rem;
-		border: 1px solid var(--border-color, #e5e7eb);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		background: transparent;
-		color: var(--text-muted, #9ca3af);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		cursor: pointer;
 		transition: all 0.2s;
 	}
 
 	.refresh-button:hover:not(:disabled) {
-		background: var(--hover-bg, #f3f4f6);
-		color: var(--text-primary, #111827);
+		background: hsl(var(--theme-muted, 220 14% 96%));
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.refresh-button:disabled {
@@ -315,15 +315,6 @@
 		cursor: not-allowed;
 	}
 
-	:global(.dark) .refresh-button {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
-	:global(.dark) .refresh-button:hover:not(:disabled) {
-		background: rgba(255, 255, 255, 0.05);
-		color: #fff;
-	}
-
 	.refresh-icon {
 		width: 1.125rem;
 		height: 1.125rem;
@@ -348,7 +339,7 @@
 	.loading-spinner {
 		width: 2rem;
 		height: 2rem;
-		border: 3px solid var(--border-color, #e5e7eb);
+		border: 3px solid hsl(var(--theme-border, 220 13% 91%));
 		border-top-color: var(--primary-color);
 		border-radius: 50%;
 		animation: spin 0.8s linear infinite;
@@ -357,7 +348,7 @@
 	.empty-state {
 		text-align: center;
 		padding: 2rem;
-		color: var(--text-muted, #9ca3af);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		font-size: 0.875rem;
 	}
 
@@ -366,30 +357,23 @@
 		flex-direction: column;
 		max-height: 28rem;
 		overflow-y: auto;
-		border: 1px solid var(--border-color, #e5e7eb);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		border-radius: 0.75rem;
 	}
 
-	:global(.dark) .event-list {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
 	.event-item {
 		display: flex;
 		align-items: flex-start;
 		gap: 0.75rem;
 		padding: 0.875rem 1rem;
-		border-bottom: 1px solid var(--border-color, #e5e7eb);
-	}
-
-	:global(.dark) .event-item {
-		border-bottom-color: rgba(255, 255, 255, 0.06);
+		border-bottom: 1px solid hsl(var(--theme-border, 220 13% 91%));
 	}
 
 	.event-item:last-child {
 		border-bottom: none;
 	}
 
+	/* Semantic status colors kept */
 	.event-badge {
 		flex-shrink: 0;
 		width: 0.625rem;
@@ -444,7 +428,7 @@
 
 	.event-meta {
 		font-size: 0.75rem;
-		color: var(--text-muted, #9ca3af);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		margin-top: 0.125rem;
 	}
 
@@ -454,7 +438,7 @@
 
 	.event-device {
 		font-size: 0.75rem;
-		color: var(--text-muted, #9ca3af);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		opacity: 0.8;
 	}
 
diff --git a/packages/shared-auth-ui/src/components/ChangePassword.svelte b/packages/shared-auth-ui/src/components/ChangePassword.svelte
index 517e02ef7..470d8556c 100644
--- a/packages/shared-auth-ui/src/components/ChangePassword.svelte
+++ b/packages/shared-auth-ui/src/components/ChangePassword.svelte
@@ -221,26 +221,18 @@
 	.change-password {
 		padding: 1rem;
 		border-radius: 0.75rem;
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: rgba(255, 255, 255, 0.05);
-	}
-
-	:global(.light) .change-password {
-		border-color: rgba(0, 0, 0, 0.1);
-		background: rgba(0, 0, 0, 0.02);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		background: hsl(var(--theme-surface, 0 0% 100%) / 0.5);
 	}
 
 	.section-title {
 		font-size: 1rem;
 		font-weight: 600;
 		margin: 0 0 1rem;
-		color: rgba(255, 255, 255, 0.9);
-	}
-
-	:global(.light) .section-title {
-		color: rgba(0, 0, 0, 0.9);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
+	/* Semantic green kept */
 	.success-message {
 		padding: 0.625rem 0.75rem;
 		margin-bottom: 0.75rem;
@@ -255,6 +247,7 @@
 		margin: 0;
 	}
 
+	/* Semantic red kept */
 	.error-message {
 		padding: 0.625rem 0.75rem;
 		margin-bottom: 0.75rem;
@@ -278,11 +271,7 @@
 		font-size: 0.8125rem;
 		font-weight: 500;
 		margin-bottom: 0.375rem;
-		color: rgba(255, 255, 255, 0.7);
-	}
-
-	:global(.light) .input-label {
-		color: rgba(0, 0, 0, 0.7);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 	}
 
 	.input-wrapper {
@@ -293,22 +282,16 @@
 		width: 100%;
 		height: 2.75rem;
 		padding: 0 0.75rem;
-		border: 1px solid rgba(255, 255, 255, 0.2);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		border-radius: 0.5rem;
 		font-size: 0.9375rem;
-		background: rgba(0, 0, 0, 0.2);
-		color: #fff;
+		background: hsl(var(--theme-background, 0 0% 100%));
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 		transition:
 			border-color 0.2s,
 			box-shadow 0.2s;
 	}
 
-	:global(.light) .input-field {
-		background: rgba(255, 255, 255, 0.8);
-		border-color: rgba(0, 0, 0, 0.1);
-		color: #000;
-	}
-
 	.input-field.has-icon {
 		padding-right: 2.75rem;
 	}
@@ -318,6 +301,7 @@
 		box-shadow: 0 0 0 2px var(--ring-color, currentColor);
 	}
 
+	/* Semantic red kept */
 	.input-field.input-error {
 		border-color: #ef4444;
 	}
@@ -329,7 +313,7 @@
 		transform: translateY(-50%);
 		background: none;
 		border: none;
-		color: rgba(255, 255, 255, 0.5);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		cursor: pointer;
 		padding: 0.25rem;
 		display: flex;
@@ -337,28 +321,17 @@
 		justify-content: center;
 	}
 
-	:global(.light) .password-toggle {
-		color: rgba(0, 0, 0, 0.5);
-	}
-
 	.password-toggle:hover {
-		color: rgba(255, 255, 255, 0.8);
-	}
-
-	:global(.light) .password-toggle:hover {
-		color: rgba(0, 0, 0, 0.8);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.field-hint {
 		font-size: 0.75rem;
 		margin: 0.25rem 0 0;
-		color: rgba(255, 255, 255, 0.4);
-	}
-
-	:global(.light) .field-hint {
-		color: rgba(0, 0, 0, 0.4);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%) / 0.7);
 	}
 
+	/* Semantic red kept */
 	.field-hint.error {
 		color: #ef4444;
 	}
@@ -372,14 +345,10 @@
 		font-size: 0.875rem;
 		cursor: pointer;
 		transition: opacity 0.2s;
-		color: rgba(255, 255, 255, 0.9);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 		margin-top: 0.5rem;
 	}
 
-	:global(.light) .submit-button {
-		color: rgba(0, 0, 0, 0.9);
-	}
-
 	.submit-button:hover:not(:disabled) {
 		opacity: 0.8;
 	}
diff --git a/packages/shared-auth-ui/src/components/GuestWelcomeModal.svelte b/packages/shared-auth-ui/src/components/GuestWelcomeModal.svelte
index a6273405f..8953210d5 100644
--- a/packages/shared-auth-ui/src/components/GuestWelcomeModal.svelte
+++ b/packages/shared-auth-ui/src/components/GuestWelcomeModal.svelte
@@ -286,32 +286,29 @@
 		overflow-y: auto;
 		background: linear-gradient(
 			145deg,
-			rgba(255, 255, 255, 0.08) 0%,
-			rgba(255, 255, 255, 0.04) 100%
+			rgba(255, 255, 255, 0.95) 0%,
+			rgba(255, 255, 255, 0.9) 100%
 		);
-		border: 1px solid rgba(255, 255, 255, 0.12);
+		border: 1px solid rgba(0, 0, 0, 0.1);
 		border-radius: 1.5rem;
 		padding: 2rem 1.5rem;
 		backdrop-filter: blur(20px);
 		box-shadow:
-			0 25px 50px -12px rgba(0, 0, 0, 0.4),
-			0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+			0 25px 50px -12px rgba(0, 0, 0, 0.15),
+			0 0 0 1px rgba(0, 0, 0, 0.05) inset;
 		animation: slideUp 0.3s ease-out;
 	}
 
-	/* Light mode support */
-	@media (prefers-color-scheme: light) {
-		.modal-content {
-			background: linear-gradient(
-				145deg,
-				rgba(255, 255, 255, 0.95) 0%,
-				rgba(255, 255, 255, 0.9) 100%
-			);
-			border-color: rgba(0, 0, 0, 0.1);
-			box-shadow:
-				0 25px 50px -12px rgba(0, 0, 0, 0.15),
-				0 0 0 1px rgba(0, 0, 0, 0.05) inset;
-		}
+	:global(.dark) .modal-content {
+		background: linear-gradient(
+			145deg,
+			rgba(255, 255, 255, 0.08) 0%,
+			rgba(255, 255, 255, 0.04) 100%
+		);
+		border-color: rgba(255, 255, 255, 0.12);
+		box-shadow:
+			0 25px 50px -12px rgba(0, 0, 0, 0.4),
+			0 0 0 1px rgba(255, 255, 255, 0.05) inset;
 	}
 
 	.close-button {
@@ -325,28 +322,26 @@
 		justify-content: center;
 		border: none;
 		border-radius: 0.75rem;
-		background: rgba(255, 255, 255, 0.1);
-		color: rgba(255, 255, 255, 0.6);
+		background: rgba(0, 0, 0, 0.05);
+		color: rgba(0, 0, 0, 0.5);
 		cursor: pointer;
 		transition: all 0.2s ease;
 	}
 
 	.close-button:hover {
-		background: rgba(255, 255, 255, 0.15);
-		color: rgba(255, 255, 255, 0.9);
+		background: rgba(0, 0, 0, 0.1);
+		color: rgba(0, 0, 0, 0.8);
 		transform: scale(1.05);
 	}
 
-	@media (prefers-color-scheme: light) {
-		.close-button {
-			background: rgba(0, 0, 0, 0.05);
-			color: rgba(0, 0, 0, 0.5);
-		}
+	:global(.dark) .close-button {
+		background: rgba(255, 255, 255, 0.1);
+		color: rgba(255, 255, 255, 0.6);
+	}
 
-		.close-button:hover {
-			background: rgba(0, 0, 0, 0.1);
-			color: rgba(0, 0, 0, 0.8);
-		}
+	:global(.dark) .close-button:hover {
+		background: rgba(255, 255, 255, 0.15);
+		color: rgba(255, 255, 255, 0.9);
 	}
 
 	.icon-container {
@@ -379,13 +374,11 @@
 		font-size: 1.5rem;
 		font-weight: 700;
 		text-align: center;
-		color: rgba(255, 255, 255, 0.95);
+		color: rgba(0, 0, 0, 0.9);
 	}
 
-	@media (prefers-color-scheme: light) {
-		.app-name {
-			color: rgba(0, 0, 0, 0.9);
-		}
+	:global(.dark) .app-name {
+		color: rgba(255, 255, 255, 0.95);
 	}
 
 	.app-description {
@@ -393,25 +386,21 @@
 		font-size: 0.9rem;
 		line-height: 1.5;
 		text-align: center;
-		color: rgba(255, 255, 255, 0.6);
+		color: rgba(0, 0, 0, 0.6);
 	}
 
-	@media (prefers-color-scheme: light) {
-		.app-description {
-			color: rgba(0, 0, 0, 0.6);
-		}
+	:global(.dark) .app-description {
+		color: rgba(255, 255, 255, 0.6);
 	}
 
 	.divider {
 		height: 1px;
 		margin: 1rem 0;
-		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+		background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
 	}
 
-	@media (prefers-color-scheme: light) {
-		.divider {
-			background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
-		}
+	:global(.dark) .divider {
+		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
 	}
 
 	.features-section {
@@ -428,13 +417,11 @@
 	.section-title {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: rgba(255, 255, 255, 0.8);
+		color: rgba(0, 0, 0, 0.8);
 	}
 
-	@media (prefers-color-scheme: light) {
-		.section-title {
-			color: rgba(0, 0, 0, 0.8);
-		}
+	:global(.dark) .section-title {
+		color: rgba(255, 255, 255, 0.8);
 	}
 
 	.section-icon {
@@ -461,23 +448,19 @@
 		gap: 0.5rem;
 		padding: 0.35rem 0;
 		font-size: 0.875rem;
+		color: rgba(0, 0, 0, 0.7);
+	}
+
+	:global(.dark) .feature-item {
 		color: rgba(255, 255, 255, 0.7);
 	}
 
-	@media (prefers-color-scheme: light) {
-		.feature-item {
-			color: rgba(0, 0, 0, 0.7);
-		}
-	}
-
 	.feature-bullet {
-		color: rgba(255, 255, 255, 0.4);
+		color: rgba(0, 0, 0, 0.3);
 	}
 
-	@media (prefers-color-scheme: light) {
-		.feature-bullet {
-			color: rgba(0, 0, 0, 0.3);
-		}
+	:global(.dark) .feature-bullet {
+		color: rgba(255, 255, 255, 0.4);
 	}
 
 	.warning-section {
@@ -495,13 +478,11 @@
 		margin: 0;
 		font-size: 0.8rem;
 		line-height: 1.5;
-		color: rgba(255, 255, 255, 0.75);
+		color: rgba(0, 0, 0, 0.75);
 	}
 
-	@media (prefers-color-scheme: light) {
-		.warning-text {
-			color: rgba(0, 0, 0, 0.75);
-		}
+	:global(.dark) .warning-text {
+		color: rgba(255, 255, 255, 0.75);
 	}
 
 	.buttons-section {
@@ -551,47 +532,43 @@
 	}
 
 	.btn-tertiary {
-		background: rgba(255, 255, 255, 0.08);
-		color: rgba(255, 255, 255, 0.8);
-		border: 1px solid rgba(255, 255, 255, 0.12);
+		background: rgba(0, 0, 0, 0.05);
+		color: rgba(0, 0, 0, 0.7);
+		border: 1px solid rgba(0, 0, 0, 0.1);
 	}
 
 	.btn-tertiary:hover {
+		background: rgba(0, 0, 0, 0.08);
+		color: rgba(0, 0, 0, 0.9);
+	}
+
+	:global(.dark) .btn-tertiary {
+		background: rgba(255, 255, 255, 0.08);
+		color: rgba(255, 255, 255, 0.8);
+		border-color: rgba(255, 255, 255, 0.12);
+	}
+
+	:global(.dark) .btn-tertiary:hover {
 		background: rgba(255, 255, 255, 0.12);
 		color: rgba(255, 255, 255, 0.95);
 	}
 
-	@media (prefers-color-scheme: light) {
-		.btn-tertiary {
-			background: rgba(0, 0, 0, 0.05);
-			color: rgba(0, 0, 0, 0.7);
-			border-color: rgba(0, 0, 0, 0.1);
-		}
-
-		.btn-tertiary:hover {
-			background: rgba(0, 0, 0, 0.08);
-			color: rgba(0, 0, 0, 0.9);
-		}
-	}
-
 	.btn-ghost {
 		background: transparent;
-		color: rgba(255, 255, 255, 0.5);
+		color: rgba(0, 0, 0, 0.5);
 		padding: 0.625rem 1rem;
 	}
 
 	.btn-ghost:hover {
-		color: rgba(255, 255, 255, 0.8);
+		color: rgba(0, 0, 0, 0.8);
 	}
 
-	@media (prefers-color-scheme: light) {
-		.btn-ghost {
-			color: rgba(0, 0, 0, 0.5);
-		}
+	:global(.dark) .btn-ghost {
+		color: rgba(255, 255, 255, 0.5);
+	}
 
-		.btn-ghost:hover {
-			color: rgba(0, 0, 0, 0.8);
-		}
+	:global(.dark) .btn-ghost:hover {
+		color: rgba(255, 255, 255, 0.8);
 	}
 
 	/* Animations */
diff --git a/packages/shared-auth-ui/src/components/PasskeyManager.svelte b/packages/shared-auth-ui/src/components/PasskeyManager.svelte
index 8ce567246..410c6c6c1 100644
--- a/packages/shared-auth-ui/src/components/PasskeyManager.svelte
+++ b/packages/shared-auth-ui/src/components/PasskeyManager.svelte
@@ -424,14 +424,10 @@
 		font-size: 1.125rem;
 		font-weight: 600;
 		margin: 0 0 1rem;
-		color: #1f2937;
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
-	:global(.dark) .pm-title {
-		color: #f3f4f6;
-	}
-
-	/* Warning */
+	/* Warning — semantic amber colors kept */
 	.pm-warning {
 		display: flex;
 		align-items: flex-start;
@@ -465,7 +461,7 @@
 		color: #fef3c7;
 	}
 
-	/* Error */
+	/* Error — semantic red colors kept */
 	.pm-error {
 		padding: 0.625rem 0.875rem;
 		background: #fef2f2;
@@ -492,14 +488,10 @@
 	/* Empty state */
 	.pm-empty {
 		font-size: 0.875rem;
-		color: #6b7280;
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		margin: 0 0 1rem;
 	}
 
-	:global(.dark) .pm-empty {
-		color: #9ca3af;
-	}
-
 	/* Passkey list */
 	.pm-list {
 		list-style: none;
@@ -512,23 +504,14 @@
 
 	.pm-item {
 		padding: 0.875rem 1rem;
-		background: #f9fafb;
-		border: 1px solid #e5e7eb;
+		background: hsl(var(--theme-muted, 220 14% 96%));
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		border-radius: 0.625rem;
 		transition: border-color 150ms ease;
 	}
 
 	.pm-item:hover {
-		border-color: #d1d5db;
-	}
-
-	:global(.dark) .pm-item {
-		background: #1f2937;
-		border-color: #374151;
-	}
-
-	:global(.dark) .pm-item:hover {
-		border-color: #4b5563;
+		border-color: hsl(var(--theme-foreground, 220 9% 10%) / 0.2);
 	}
 
 	/* Item header */
@@ -556,26 +539,18 @@
 	.pm-item-name {
 		font-size: 0.9375rem;
 		font-weight: 500;
-		color: #111827;
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
-	:global(.dark) .pm-item-name {
-		color: #f9fafb;
-	}
-
 	.pm-item-meta {
 		font-size: 0.75rem;
-		color: #6b7280;
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 	}
 
-	:global(.dark) .pm-item-meta {
-		color: #9ca3af;
-	}
-
-	/* Badges */
+	/* Badges — semantic green/amber colors kept */
 	.pm-item-badge {
 		display: inline-block;
 		font-size: 0.6875rem;
@@ -611,11 +586,7 @@
 		gap: 0.375rem;
 		margin-top: 0.625rem;
 		padding-top: 0.625rem;
-		border-top: 1px solid #e5e7eb;
-	}
-
-	:global(.dark) .pm-item-actions {
-		border-top-color: #374151;
+		border-top: 1px solid hsl(var(--theme-border, 220 13% 91%));
 	}
 
 	/* Buttons */
@@ -651,23 +622,15 @@
 
 	.pm-btn-cancel {
 		background: transparent;
-		color: #6b7280;
-		border-color: #d1d5db;
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		border-color: hsl(var(--theme-border, 220 13% 91%));
 	}
 
 	.pm-btn-cancel:hover:not(:disabled) {
-		background: #f3f4f6;
-	}
-
-	:global(.dark) .pm-btn-cancel {
-		color: #9ca3af;
-		border-color: #4b5563;
-	}
-
-	:global(.dark) .pm-btn-cancel:hover:not(:disabled) {
-		background: #374151;
+		background: hsl(var(--theme-muted, 220 14% 96%));
 	}
 
+	/* Danger button — semantic red kept */
 	.pm-btn-danger {
 		background: #dc2626;
 		color: white;
@@ -680,25 +643,17 @@
 
 	.pm-btn-ghost {
 		background: transparent;
-		color: #6b7280;
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		padding: 0.3125rem 0.625rem;
 		font-size: 0.75rem;
 	}
 
 	.pm-btn-ghost:hover:not(:disabled) {
-		background: #f3f4f6;
-		color: #374151;
-	}
-
-	:global(.dark) .pm-btn-ghost {
-		color: #9ca3af;
-	}
-
-	:global(.dark) .pm-btn-ghost:hover:not(:disabled) {
-		background: #374151;
-		color: #d1d5db;
+		background: hsl(var(--theme-muted, 220 14% 96%));
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
+	/* Danger ghost — semantic red kept */
 	.pm-btn-ghost-danger:hover:not(:disabled) {
 		background: #fef2f2;
 		color: #dc2626;
@@ -729,10 +684,10 @@
 		width: 100%;
 		padding: 0.5rem 0.75rem;
 		font-size: 0.875rem;
-		border: 1px solid #d1d5db;
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		border-radius: 0.5rem;
-		background: white;
-		color: #111827;
+		background: hsl(var(--theme-background, 0 0% 100%));
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 		outline: none;
 		transition: border-color 150ms ease;
 		box-sizing: border-box;
@@ -743,16 +698,6 @@
 		box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 20%, transparent);
 	}
 
-	:global(.dark) .pm-input {
-		background: #111827;
-		border-color: #4b5563;
-		color: #f3f4f6;
-	}
-
-	:global(.dark) .pm-input:focus {
-		border-color: var(--primary-color);
-	}
-
 	/* Rename form */
 	.pm-rename-form {
 		display: flex;
@@ -785,15 +730,11 @@
 
 	.pm-confirm-message {
 		font-size: 0.8125rem;
-		color: #6b7280;
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		margin: 0 0 0.75rem;
 		line-height: 1.4;
 	}
 
-	:global(.dark) .pm-confirm-message {
-		color: #9ca3af;
-	}
-
 	.pm-confirm-actions {
 		display: flex;
 		gap: 0.5rem;
@@ -803,37 +744,24 @@
 	/* Register form */
 	.pm-register-form {
 		padding: 1rem;
-		background: #f9fafb;
-		border: 1px solid #e5e7eb;
+		background: hsl(var(--theme-muted, 220 14% 96%));
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		border-radius: 0.625rem;
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
 	}
 
-	:global(.dark) .pm-register-form {
-		background: #1f2937;
-		border-color: #374151;
-	}
-
 	.pm-register-title {
 		font-size: 0.9375rem;
 		font-weight: 600;
-		color: #111827;
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 		margin: 0;
 	}
 
-	:global(.dark) .pm-register-title {
-		color: #f3f4f6;
-	}
-
 	.pm-register-label {
 		font-size: 0.8125rem;
-		color: #6b7280;
-	}
-
-	:global(.dark) .pm-register-label {
-		color: #9ca3af;
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 	}
 
 	.pm-register-actions {
diff --git a/packages/shared-auth-ui/src/components/SecurityOnboarding.svelte b/packages/shared-auth-ui/src/components/SecurityOnboarding.svelte
index 731df2b20..92622975d 100644
--- a/packages/shared-auth-ui/src/components/SecurityOnboarding.svelte
+++ b/packages/shared-auth-ui/src/components/SecurityOnboarding.svelte
@@ -184,32 +184,23 @@
 		text-align: center;
 		padding: 2rem;
 		border-radius: 1rem;
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: rgba(255, 255, 255, 0.05);
-	}
-
-	:global(.light) .onboarding-card {
-		border-color: rgba(0, 0, 0, 0.1);
-		background: rgba(0, 0, 0, 0.02);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		background: hsl(var(--theme-surface, 0 0% 100%) / 0.5);
 	}
 
 	.icon-circle {
 		width: 4rem;
 		height: 4rem;
 		border-radius: 50%;
-		border: 2px solid rgba(255, 255, 255, 0.2);
+		border: 2px solid hsl(var(--theme-border, 220 13% 91%));
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		margin-bottom: 1.25rem;
-		color: rgba(255, 255, 255, 0.8);
-	}
-
-	:global(.light) .icon-circle {
-		border-color: rgba(0, 0, 0, 0.15);
-		color: rgba(0, 0, 0, 0.7);
+		color: hsl(var(--theme-foreground, 220 9% 10%) / 0.7);
 	}
 
+	/* Semantic green kept */
 	.success-icon {
 		border-color: #22c55e;
 		color: #22c55e;
@@ -219,24 +210,17 @@
 		font-size: 1.25rem;
 		font-weight: 600;
 		margin: 0 0 0.5rem;
-		color: rgba(255, 255, 255, 0.9);
-	}
-
-	:global(.light) .onboarding-title {
-		color: rgba(0, 0, 0, 0.9);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.onboarding-description {
 		font-size: 0.875rem;
-		color: rgba(255, 255, 255, 0.6);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		margin: 0 0 1.5rem;
 		line-height: 1.5;
 	}
 
-	:global(.light) .onboarding-description {
-		color: rgba(0, 0, 0, 0.6);
-	}
-
+	/* Semantic red kept */
 	.error-message {
 		width: 100%;
 		padding: 0.625rem 0.75rem;
@@ -261,22 +245,13 @@
 		gap: 0.75rem;
 		padding: 1.25rem;
 		border-radius: 0.75rem;
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: rgba(255, 255, 255, 0.05);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		background: hsl(var(--theme-surface, 0 0% 100%) / 0.5);
 		margin-bottom: 1rem;
 	}
 
-	:global(.light) .option-card {
-		border-color: rgba(0, 0, 0, 0.1);
-		background: rgba(0, 0, 0, 0.02);
-	}
-
 	.option-icon {
-		color: rgba(255, 255, 255, 0.7);
-	}
-
-	:global(.light) .option-icon {
-		color: rgba(0, 0, 0, 0.6);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 	}
 
 	.option-content {
@@ -287,24 +262,16 @@
 		font-size: 0.9375rem;
 		font-weight: 600;
 		margin: 0 0 0.25rem;
-		color: rgba(255, 255, 255, 0.9);
-	}
-
-	:global(.light) .option-title {
-		color: rgba(0, 0, 0, 0.9);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.option-description {
 		font-size: 0.8125rem;
-		color: rgba(255, 255, 255, 0.5);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		margin: 0;
 		line-height: 1.4;
 	}
 
-	:global(.light) .option-description {
-		color: rgba(0, 0, 0, 0.5);
-	}
-
 	.setup-button {
 		width: 100%;
 		height: 2.5rem;
@@ -314,14 +281,10 @@
 		font-size: 0.875rem;
 		cursor: pointer;
 		transition: opacity 0.2s;
-		color: rgba(255, 255, 255, 0.9);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 		background: transparent;
 	}
 
-	:global(.light) .setup-button {
-		color: rgba(0, 0, 0, 0.9);
-	}
-
 	.setup-button:hover:not(:disabled) {
 		opacity: 0.8;
 	}
@@ -333,35 +296,23 @@
 
 	.hint-text {
 		font-size: 0.8125rem;
-		color: rgba(255, 255, 255, 0.4);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%) / 0.7);
 		margin: 0 0 1.25rem;
 	}
 
-	:global(.light) .hint-text {
-		color: rgba(0, 0, 0, 0.4);
-	}
-
 	.skip-button {
 		background: none;
 		border: none;
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: rgba(255, 255, 255, 0.5);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		cursor: pointer;
 		padding: 0.5rem 1rem;
 		transition: color 0.2s;
 	}
 
-	:global(.light) .skip-button {
-		color: rgba(0, 0, 0, 0.5);
-	}
-
 	.skip-button:hover {
-		color: rgba(255, 255, 255, 0.8);
-	}
-
-	:global(.light) .skip-button:hover {
-		color: rgba(0, 0, 0, 0.8);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.primary-button {
@@ -373,11 +324,7 @@
 		font-size: 0.875rem;
 		cursor: pointer;
 		transition: opacity 0.2s;
-		color: rgba(255, 255, 255, 0.9);
-	}
-
-	:global(.light) .primary-button {
-		color: rgba(0, 0, 0, 0.9);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.primary-button:hover {
diff --git a/packages/shared-auth-ui/src/components/SessionManager.svelte b/packages/shared-auth-ui/src/components/SessionManager.svelte
index 25bd38c48..33714eb8f 100644
--- a/packages/shared-auth-ui/src/components/SessionManager.svelte
+++ b/packages/shared-auth-ui/src/components/SessionManager.svelte
@@ -346,7 +346,7 @@
 
 	.session-subtitle {
 		font-size: 0.875rem;
-		color: var(--text-muted, #9ca3af);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		margin: 0;
 	}
 
@@ -357,16 +357,16 @@
 		width: 2.25rem;
 		height: 2.25rem;
 		border-radius: 0.5rem;
-		border: 1px solid var(--border-color, #e5e7eb);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		background: transparent;
-		color: var(--text-muted, #9ca3af);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		cursor: pointer;
 		transition: all 0.2s;
 	}
 
 	.refresh-button:hover:not(:disabled) {
-		background: var(--hover-bg, #f3f4f6);
-		color: var(--text-primary, #111827);
+		background: hsl(var(--theme-muted, 220 14% 96%));
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.refresh-button:disabled {
@@ -374,15 +374,6 @@
 		cursor: not-allowed;
 	}
 
-	:global(.dark) .refresh-button {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
-	:global(.dark) .refresh-button:hover:not(:disabled) {
-		background: rgba(255, 255, 255, 0.05);
-		color: #fff;
-	}
-
 	.refresh-icon {
 		width: 1.125rem;
 		height: 1.125rem;
@@ -398,6 +389,7 @@
 		}
 	}
 
+	/* Semantic red kept for error */
 	.error-message {
 		padding: 0.75rem 1rem;
 		margin-bottom: 1rem;
@@ -423,7 +415,7 @@
 	.loading-spinner {
 		width: 2rem;
 		height: 2rem;
-		border: 3px solid var(--border-color, #e5e7eb);
+		border: 3px solid hsl(var(--theme-border, 220 13% 91%));
 		border-top-color: var(--primary-color);
 		border-radius: 50%;
 		animation: spin 0.8s linear infinite;
@@ -432,32 +424,24 @@
 	.empty-state {
 		text-align: center;
 		padding: 2rem;
-		color: var(--text-muted, #9ca3af);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		font-size: 0.875rem;
 	}
 
 	.session-list {
 		display: flex;
 		flex-direction: column;
-		border: 1px solid var(--border-color, #e5e7eb);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		border-radius: 0.75rem;
 		overflow: hidden;
 	}
 
-	:global(.dark) .session-list {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
 	.session-item {
 		display: flex;
 		align-items: flex-start;
 		gap: 0.75rem;
 		padding: 1rem;
-		border-bottom: 1px solid var(--border-color, #e5e7eb);
-	}
-
-	:global(.dark) .session-item {
-		border-bottom-color: rgba(255, 255, 255, 0.06);
+		border-bottom: 1px solid hsl(var(--theme-border, 220 13% 91%));
 	}
 
 	.session-item:last-child {
@@ -476,13 +460,8 @@
 		width: 2.25rem;
 		height: 2.25rem;
 		border-radius: 0.5rem;
-		background-color: var(--hover-bg, #f3f4f6);
-		color: var(--text-muted, #6b7280);
-	}
-
-	:global(.dark) .session-device-icon {
-		background-color: rgba(255, 255, 255, 0.06);
-		color: #9ca3af;
+		background-color: hsl(var(--theme-muted, 220 14% 96%));
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 	}
 
 	.device-icon {
@@ -522,16 +501,17 @@
 
 	.session-ip {
 		font-size: 0.75rem;
-		color: var(--text-muted, #9ca3af);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		margin-top: 0.125rem;
 	}
 
 	.session-activity {
 		font-size: 0.75rem;
-		color: var(--text-muted, #9ca3af);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		opacity: 0.8;
 	}
 
+	/* Semantic red kept for revoke actions */
 	.revoke-button {
 		flex-shrink: 0;
 		align-self: center;
@@ -539,7 +519,7 @@
 		font-size: 0.8125rem;
 		font-weight: 500;
 		border-radius: 0.375rem;
-		border: 1px solid var(--border-color, #e5e7eb);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		background: transparent;
 		color: #dc2626;
 		cursor: pointer;
@@ -556,7 +536,6 @@
 	}
 
 	:global(.dark) .revoke-button {
-		border-color: rgba(255, 255, 255, 0.1);
 		color: #fca5a5;
 	}
 
diff --git a/packages/shared-auth-ui/src/components/TwoFactorSetup.svelte b/packages/shared-auth-ui/src/components/TwoFactorSetup.svelte
index 516a66237..d6afa2324 100644
--- a/packages/shared-auth-ui/src/components/TwoFactorSetup.svelte
+++ b/packages/shared-auth-ui/src/components/TwoFactorSetup.svelte
@@ -414,13 +414,8 @@
 	.two-factor-setup {
 		padding: 1rem;
 		border-radius: 0.75rem;
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: rgba(255, 255, 255, 0.05);
-	}
-
-	:global(.light) .two-factor-setup {
-		border-color: rgba(0, 0, 0, 0.1);
-		background: rgba(0, 0, 0, 0.02);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		background: hsl(var(--theme-surface, 0 0% 100%) / 0.5);
 	}
 
 	.section-header {
@@ -436,11 +431,7 @@
 		font-size: 1rem;
 		font-weight: 600;
 		margin: 0;
-		color: rgba(255, 255, 255, 0.9);
-	}
-
-	:global(.light) .section-title {
-		color: rgba(0, 0, 0, 0.9);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.status-badge {
@@ -453,19 +444,15 @@
 		border-radius: 9999px;
 	}
 
+	/* Semantic green kept */
 	.status-enabled {
 		color: #22c55e;
 		background: rgba(34, 197, 94, 0.15);
 	}
 
 	.status-disabled {
-		color: rgba(255, 255, 255, 0.5);
-		background: rgba(255, 255, 255, 0.08);
-	}
-
-	:global(.light) .status-disabled {
-		color: rgba(0, 0, 0, 0.5);
-		background: rgba(0, 0, 0, 0.05);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		background: hsl(var(--theme-muted, 220 14% 96%));
 	}
 
 	.status-dot {
@@ -490,11 +477,7 @@
 		font-size: 0.875rem;
 		cursor: pointer;
 		transition: opacity 0.2s;
-		color: rgba(255, 255, 255, 0.9);
-	}
-
-	:global(.light) .action-button {
-		color: rgba(0, 0, 0, 0.9);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.action-button.primary {
@@ -503,13 +486,10 @@
 
 	.action-button.secondary {
 		background: transparent;
-		border-color: rgba(255, 255, 255, 0.2);
-	}
-
-	:global(.light) .action-button.secondary {
-		border-color: rgba(0, 0, 0, 0.15);
+		border-color: hsl(var(--theme-border, 220 13% 91%));
 	}
 
+	/* Semantic red kept */
 	.action-button.danger {
 		background: rgba(239, 68, 68, 0.15);
 		border-color: #ef4444;
@@ -527,14 +507,10 @@
 
 	.confirm-text {
 		font-size: 0.875rem;
-		color: rgba(255, 255, 255, 0.6);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		margin-bottom: 1rem;
 	}
 
-	:global(.light) .confirm-text {
-		color: rgba(0, 0, 0, 0.6);
-	}
-
 	.input-group {
 		margin-bottom: 0.75rem;
 	}
@@ -544,38 +520,29 @@
 		font-size: 0.8125rem;
 		font-weight: 500;
 		margin-bottom: 0.375rem;
-		color: rgba(255, 255, 255, 0.7);
-	}
-
-	:global(.light) .input-label {
-		color: rgba(0, 0, 0, 0.7);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 	}
 
 	.input-field {
 		width: 100%;
 		height: 2.75rem;
 		padding: 0 0.75rem;
-		border: 1px solid rgba(255, 255, 255, 0.2);
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		border-radius: 0.5rem;
 		font-size: 0.9375rem;
-		background: rgba(0, 0, 0, 0.2);
-		color: #fff;
+		background: hsl(var(--theme-background, 0 0% 100%));
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 		transition:
 			border-color 0.2s,
 			box-shadow 0.2s;
 	}
 
-	:global(.light) .input-field {
-		background: rgba(255, 255, 255, 0.8);
-		border-color: rgba(0, 0, 0, 0.1);
-		color: #000;
-	}
-
 	.input-field:focus {
 		outline: none;
 		box-shadow: 0 0 0 2px var(--ring-color, currentColor);
 	}
 
+	/* Semantic red kept */
 	.error-message {
 		padding: 0.625rem 0.75rem;
 		margin-bottom: 0.75rem;
@@ -598,11 +565,7 @@
 		font-size: 0.875rem;
 		font-weight: 500;
 		margin-bottom: 0.75rem;
-		color: rgba(255, 255, 255, 0.8);
-	}
-
-	:global(.light) .step-label {
-		color: rgba(0, 0, 0, 0.8);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.qr-section {
@@ -619,7 +582,7 @@
 
 	.qr-placeholder {
 		border-radius: 0.5rem;
-		background: rgba(255, 255, 255, 0.1);
+		background: hsl(var(--theme-muted, 220 14% 96%));
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -631,27 +594,18 @@
 
 	.manual-label {
 		font-size: 0.8125rem;
-		color: rgba(255, 255, 255, 0.6);
+		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
 		margin-bottom: 0.375rem;
 	}
 
-	:global(.light) .manual-label {
-		color: rgba(0, 0, 0, 0.6);
-	}
-
 	.secret-display {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.5rem 0.75rem;
 		border-radius: 0.5rem;
-		background: rgba(0, 0, 0, 0.3);
-		border: 1px solid rgba(255, 255, 255, 0.1);
-	}
-
-	:global(.light) .secret-display {
-		background: rgba(0, 0, 0, 0.05);
-		border-color: rgba(0, 0, 0, 0.1);
+		background: hsl(var(--theme-muted, 220 14% 96%));
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 	}
 
 	.secret-code {
@@ -659,11 +613,7 @@
 		font-size: 0.8125rem;
 		font-family: monospace;
 		word-break: break-all;
-		color: rgba(255, 255, 255, 0.9);
-	}
-
-	:global(.light) .secret-code {
-		color: rgba(0, 0, 0, 0.9);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 
 	.copy-button {
@@ -680,6 +630,7 @@
 		opacity: 0.7;
 	}
 
+	/* Semantic amber kept */
 	.backup-warning {
 		font-size: 0.8125rem;
 		color: #f59e0b;
@@ -695,17 +646,11 @@
 	.backup-code {
 		padding: 0.375rem 0.5rem;
 		border-radius: 0.375rem;
-		background: rgba(0, 0, 0, 0.3);
-		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: hsl(var(--theme-muted, 220 14% 96%));
+		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
 		font-size: 0.8125rem;
 		font-family: monospace;
 		text-align: center;
-		color: rgba(255, 255, 255, 0.9);
-	}
-
-	:global(.light) .backup-code {
-		background: rgba(0, 0, 0, 0.05);
-		border-color: rgba(0, 0, 0, 0.1);
-		color: rgba(0, 0, 0, 0.9);
+		color: hsl(var(--theme-foreground, 220 9% 10%));
 	}
 </style>