diff --git a/packages/shared-auth-ui/src/components/AuditLog.svelte b/packages/shared-auth-ui/src/components/AuditLog.svelte
index 78efa08b1..d51d723e0 100644
--- a/packages/shared-auth-ui/src/components/AuditLog.svelte
+++ b/packages/shared-auth-ui/src/components/AuditLog.svelte
@@ -265,7 +265,7 @@
 
 	.audit-subtitle {
 		font-size: 0.875rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		margin: 0;
 	}
 
@@ -276,16 +276,16 @@
 		width: 2.25rem;
 		height: 2.25rem;
 		border-radius: 0.5rem;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		background: transparent;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		cursor: pointer;
 		transition: all 0.2s;
 	}
 
 	.refresh-button:hover:not(:disabled) {
-		background: hsl(var(--theme-muted, 220 14% 96%));
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		background: hsl(var(--color-muted, 220 14% 96%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	.refresh-button:disabled {
@@ -317,7 +317,7 @@
 	.loading-spinner {
 		width: 2rem;
 		height: 2rem;
-		border: 3px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 3px solid hsl(var(--color-border, 220 13% 91%));
 		border-top-color: var(--primary-color);
 		border-radius: 50%;
 		animation: spin 0.8s linear infinite;
@@ -326,7 +326,7 @@
 	.empty-state {
 		text-align: center;
 		padding: 2rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		font-size: 0.875rem;
 	}
 
@@ -335,7 +335,7 @@
 		flex-direction: column;
 		max-height: 28rem;
 		overflow-y: auto;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		border-radius: 0.75rem;
 	}
 
@@ -344,7 +344,7 @@
 		align-items: flex-start;
 		gap: 0.75rem;
 		padding: 0.875rem 1rem;
-		border-bottom: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border-bottom: 1px solid hsl(var(--color-border, 220 13% 91%));
 	}
 
 	.event-item:last-child {
@@ -406,7 +406,7 @@
 
 	.event-meta {
 		font-size: 0.75rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		margin-top: 0.125rem;
 	}
 
@@ -416,7 +416,7 @@
 
 	.event-device {
 		font-size: 0.75rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-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 dbcf3ce9b..d03ef6176 100644
--- a/packages/shared-auth-ui/src/components/ChangePassword.svelte
+++ b/packages/shared-auth-ui/src/components/ChangePassword.svelte
@@ -222,15 +222,15 @@
 	.change-password {
 		padding: 1rem;
 		border-radius: 0.75rem;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
-		background: hsl(var(--theme-surface, 0 0% 100%) / 0.5);
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
+		background: hsl(var(--color-surface, 0 0% 100%) / 0.5);
 	}
 
 	.section-title {
 		font-size: 1rem;
 		font-weight: 600;
 		margin: 0 0 1rem;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	/* Semantic green kept */
@@ -272,7 +272,7 @@
 		font-size: 0.8125rem;
 		font-weight: 500;
 		margin-bottom: 0.375rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 	}
 
 	.input-wrapper {
@@ -283,11 +283,11 @@
 		width: 100%;
 		height: 2.75rem;
 		padding: 0 0.75rem;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		border-radius: 0.5rem;
 		font-size: 0.9375rem;
-		background: hsl(var(--theme-background, 0 0% 100%));
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		background: hsl(var(--color-background, 0 0% 100%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 		transition:
 			border-color 0.2s,
 			box-shadow 0.2s;
@@ -314,7 +314,7 @@
 		transform: translateY(-50%);
 		background: none;
 		border: none;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		cursor: pointer;
 		padding: 0.25rem;
 		display: flex;
@@ -323,13 +323,13 @@
 	}
 
 	.password-toggle:hover {
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	.field-hint {
 		font-size: 0.75rem;
 		margin: 0.25rem 0 0;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%) / 0.7);
+		color: hsl(var(--color-muted-foreground, 220 9% 46%) / 0.7);
 	}
 
 	/* Semantic red kept */
@@ -346,7 +346,7 @@
 		font-size: 0.875rem;
 		cursor: pointer;
 		transition: opacity 0.2s;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 		margin-top: 0.5rem;
 	}
 
diff --git a/packages/shared-auth-ui/src/components/PasskeyManager.svelte b/packages/shared-auth-ui/src/components/PasskeyManager.svelte
index c67bf7999..491c78544 100644
--- a/packages/shared-auth-ui/src/components/PasskeyManager.svelte
+++ b/packages/shared-auth-ui/src/components/PasskeyManager.svelte
@@ -405,7 +405,7 @@
 		font-size: 1.125rem;
 		font-weight: 600;
 		margin: 0 0 1rem;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	/* Warning — semantic amber colors kept */
@@ -469,7 +469,7 @@
 	/* Empty state */
 	.pm-empty {
 		font-size: 0.875rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		margin: 0 0 1rem;
 	}
 
@@ -485,14 +485,14 @@
 
 	.pm-item {
 		padding: 0.875rem 1rem;
-		background: hsl(var(--theme-muted, 220 14% 96%));
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		background: hsl(var(--color-muted, 220 14% 96%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		border-radius: 0.625rem;
 		transition: border-color 150ms ease;
 	}
 
 	.pm-item:hover {
-		border-color: hsl(var(--theme-foreground, 220 9% 10%) / 0.2);
+		border-color: hsl(var(--color-foreground, 220 9% 10%) / 0.2);
 	}
 
 	/* Item header */
@@ -520,7 +520,7 @@
 	.pm-item-name {
 		font-size: 0.9375rem;
 		font-weight: 500;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -528,7 +528,7 @@
 
 	.pm-item-meta {
 		font-size: 0.75rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 	}
 
 	/* Badges — semantic green/amber colors kept */
@@ -567,7 +567,7 @@
 		gap: 0.375rem;
 		margin-top: 0.625rem;
 		padding-top: 0.625rem;
-		border-top: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border-top: 1px solid hsl(var(--color-border, 220 13% 91%));
 	}
 
 	/* Buttons */
@@ -603,12 +603,12 @@
 
 	.pm-btn-cancel {
 		background: transparent;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
-		border-color: hsl(var(--theme-border, 220 13% 91%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
+		border-color: hsl(var(--color-border, 220 13% 91%));
 	}
 
 	.pm-btn-cancel:hover:not(:disabled) {
-		background: hsl(var(--theme-muted, 220 14% 96%));
+		background: hsl(var(--color-muted, 220 14% 96%));
 	}
 
 	/* Danger button — semantic red kept */
@@ -624,14 +624,14 @@
 
 	.pm-btn-ghost {
 		background: transparent;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		padding: 0.3125rem 0.625rem;
 		font-size: 0.75rem;
 	}
 
 	.pm-btn-ghost:hover:not(:disabled) {
-		background: hsl(var(--theme-muted, 220 14% 96%));
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		background: hsl(var(--color-muted, 220 14% 96%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	/* Danger ghost — semantic red kept */
@@ -665,10 +665,10 @@
 		width: 100%;
 		padding: 0.5rem 0.75rem;
 		font-size: 0.875rem;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		border-radius: 0.5rem;
-		background: hsl(var(--theme-background, 0 0% 100%));
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		background: hsl(var(--color-background, 0 0% 100%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 		outline: none;
 		transition: border-color 150ms ease;
 		box-sizing: border-box;
@@ -711,7 +711,7 @@
 
 	.pm-confirm-message {
 		font-size: 0.8125rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		margin: 0 0 0.75rem;
 		line-height: 1.4;
 	}
@@ -725,8 +725,8 @@
 	/* Register form */
 	.pm-register-form {
 		padding: 1rem;
-		background: hsl(var(--theme-muted, 220 14% 96%));
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		background: hsl(var(--color-muted, 220 14% 96%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		border-radius: 0.625rem;
 		display: flex;
 		flex-direction: column;
@@ -736,13 +736,13 @@
 	.pm-register-title {
 		font-size: 0.9375rem;
 		font-weight: 600;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 		margin: 0;
 	}
 
 	.pm-register-label {
 		font-size: 0.8125rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-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 92622975d..0e910af52 100644
--- a/packages/shared-auth-ui/src/components/SecurityOnboarding.svelte
+++ b/packages/shared-auth-ui/src/components/SecurityOnboarding.svelte
@@ -184,20 +184,20 @@
 		text-align: center;
 		padding: 2rem;
 		border-radius: 1rem;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
-		background: hsl(var(--theme-surface, 0 0% 100%) / 0.5);
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
+		background: hsl(var(--color-surface, 0 0% 100%) / 0.5);
 	}
 
 	.icon-circle {
 		width: 4rem;
 		height: 4rem;
 		border-radius: 50%;
-		border: 2px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 2px solid hsl(var(--color-border, 220 13% 91%));
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		margin-bottom: 1.25rem;
-		color: hsl(var(--theme-foreground, 220 9% 10%) / 0.7);
+		color: hsl(var(--color-foreground, 220 9% 10%) / 0.7);
 	}
 
 	/* Semantic green kept */
@@ -210,12 +210,12 @@
 		font-size: 1.25rem;
 		font-weight: 600;
 		margin: 0 0 0.5rem;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	.onboarding-description {
 		font-size: 0.875rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		margin: 0 0 1.5rem;
 		line-height: 1.5;
 	}
@@ -245,13 +245,13 @@
 		gap: 0.75rem;
 		padding: 1.25rem;
 		border-radius: 0.75rem;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
-		background: hsl(var(--theme-surface, 0 0% 100%) / 0.5);
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
+		background: hsl(var(--color-surface, 0 0% 100%) / 0.5);
 		margin-bottom: 1rem;
 	}
 
 	.option-icon {
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 	}
 
 	.option-content {
@@ -262,12 +262,12 @@
 		font-size: 0.9375rem;
 		font-weight: 600;
 		margin: 0 0 0.25rem;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	.option-description {
 		font-size: 0.8125rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		margin: 0;
 		line-height: 1.4;
 	}
@@ -281,7 +281,7 @@
 		font-size: 0.875rem;
 		cursor: pointer;
 		transition: opacity 0.2s;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 		background: transparent;
 	}
 
@@ -296,7 +296,7 @@
 
 	.hint-text {
 		font-size: 0.8125rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%) / 0.7);
+		color: hsl(var(--color-muted-foreground, 220 9% 46%) / 0.7);
 		margin: 0 0 1.25rem;
 	}
 
@@ -305,14 +305,14 @@
 		border: none;
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		cursor: pointer;
 		padding: 0.5rem 1rem;
 		transition: color 0.2s;
 	}
 
 	.skip-button:hover {
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	.primary-button {
@@ -324,7 +324,7 @@
 		font-size: 0.875rem;
 		cursor: pointer;
 		transition: opacity 0.2s;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-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 d13ff4b35..eeb2cf664 100644
--- a/packages/shared-auth-ui/src/components/SessionManager.svelte
+++ b/packages/shared-auth-ui/src/components/SessionManager.svelte
@@ -343,7 +343,7 @@
 
 	.session-subtitle {
 		font-size: 0.875rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		margin: 0;
 	}
 
@@ -354,16 +354,16 @@
 		width: 2.25rem;
 		height: 2.25rem;
 		border-radius: 0.5rem;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		background: transparent;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		cursor: pointer;
 		transition: all 0.2s;
 	}
 
 	.refresh-button:hover:not(:disabled) {
-		background: hsl(var(--theme-muted, 220 14% 96%));
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		background: hsl(var(--color-muted, 220 14% 96%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	.refresh-button:disabled {
@@ -412,7 +412,7 @@
 	.loading-spinner {
 		width: 2rem;
 		height: 2rem;
-		border: 3px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 3px solid hsl(var(--color-border, 220 13% 91%));
 		border-top-color: var(--primary-color);
 		border-radius: 50%;
 		animation: spin 0.8s linear infinite;
@@ -421,14 +421,14 @@
 	.empty-state {
 		text-align: center;
 		padding: 2rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		font-size: 0.875rem;
 	}
 
 	.session-list {
 		display: flex;
 		flex-direction: column;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		border-radius: 0.75rem;
 		overflow: hidden;
 	}
@@ -438,7 +438,7 @@
 		align-items: flex-start;
 		gap: 0.75rem;
 		padding: 1rem;
-		border-bottom: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border-bottom: 1px solid hsl(var(--color-border, 220 13% 91%));
 	}
 
 	.session-item:last-child {
@@ -457,8 +457,8 @@
 		width: 2.25rem;
 		height: 2.25rem;
 		border-radius: 0.5rem;
-		background-color: hsl(var(--theme-muted, 220 14% 96%));
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		background-color: hsl(var(--color-muted, 220 14% 96%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 	}
 
 	.device-icon {
@@ -498,13 +498,13 @@
 
 	.session-ip {
 		font-size: 0.75rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		margin-top: 0.125rem;
 	}
 
 	.session-activity {
 		font-size: 0.75rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		opacity: 0.8;
 	}
 
@@ -516,7 +516,7 @@
 		font-size: 0.8125rem;
 		font-weight: 500;
 		border-radius: 0.375rem;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		background: transparent;
 		color: #dc2626;
 		cursor: pointer;
diff --git a/packages/shared-auth-ui/src/components/TwoFactorSetup.svelte b/packages/shared-auth-ui/src/components/TwoFactorSetup.svelte
index 47b5f19c9..1548676ba 100644
--- a/packages/shared-auth-ui/src/components/TwoFactorSetup.svelte
+++ b/packages/shared-auth-ui/src/components/TwoFactorSetup.svelte
@@ -388,8 +388,8 @@
 	.two-factor-setup {
 		padding: 1rem;
 		border-radius: 0.75rem;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
-		background: hsl(var(--theme-surface, 0 0% 100%) / 0.5);
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
+		background: hsl(var(--color-surface, 0 0% 100%) / 0.5);
 	}
 
 	.section-header {
@@ -405,7 +405,7 @@
 		font-size: 1rem;
 		font-weight: 600;
 		margin: 0;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	.status-badge {
@@ -425,8 +425,8 @@
 	}
 
 	.status-disabled {
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
-		background: hsl(var(--theme-muted, 220 14% 96%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
+		background: hsl(var(--color-muted, 220 14% 96%));
 	}
 
 	.status-dot {
@@ -451,7 +451,7 @@
 		font-size: 0.875rem;
 		cursor: pointer;
 		transition: opacity 0.2s;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	.action-button.primary {
@@ -460,7 +460,7 @@
 
 	.action-button.secondary {
 		background: transparent;
-		border-color: hsl(var(--theme-border, 220 13% 91%));
+		border-color: hsl(var(--color-border, 220 13% 91%));
 	}
 
 	/* Semantic red kept */
@@ -481,7 +481,7 @@
 
 	.confirm-text {
 		font-size: 0.875rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		margin-bottom: 1rem;
 	}
 
@@ -494,18 +494,18 @@
 		font-size: 0.8125rem;
 		font-weight: 500;
 		margin-bottom: 0.375rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 	}
 
 	.input-field {
 		width: 100%;
 		height: 2.75rem;
 		padding: 0 0.75rem;
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		border-radius: 0.5rem;
 		font-size: 0.9375rem;
-		background: hsl(var(--theme-background, 0 0% 100%));
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		background: hsl(var(--color-background, 0 0% 100%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 		transition:
 			border-color 0.2s,
 			box-shadow 0.2s;
@@ -539,7 +539,7 @@
 		font-size: 0.875rem;
 		font-weight: 500;
 		margin-bottom: 0.75rem;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	.qr-section {
@@ -556,7 +556,7 @@
 
 	.qr-placeholder {
 		border-radius: 0.5rem;
-		background: hsl(var(--theme-muted, 220 14% 96%));
+		background: hsl(var(--color-muted, 220 14% 96%));
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -568,7 +568,7 @@
 
 	.manual-label {
 		font-size: 0.8125rem;
-		color: hsl(var(--theme-muted-foreground, 220 9% 46%));
+		color: hsl(var(--color-muted-foreground, 220 9% 46%));
 		margin-bottom: 0.375rem;
 	}
 
@@ -578,8 +578,8 @@
 		gap: 0.5rem;
 		padding: 0.5rem 0.75rem;
 		border-radius: 0.5rem;
-		background: hsl(var(--theme-muted, 220 14% 96%));
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		background: hsl(var(--color-muted, 220 14% 96%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 	}
 
 	.secret-code {
@@ -587,7 +587,7 @@
 		font-size: 0.8125rem;
 		font-family: monospace;
 		word-break: break-all;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	.copy-button {
@@ -620,12 +620,12 @@
 	.backup-code {
 		padding: 0.375rem 0.5rem;
 		border-radius: 0.375rem;
-		background: hsl(var(--theme-muted, 220 14% 96%));
-		border: 1px solid hsl(var(--theme-border, 220 13% 91%));
+		background: hsl(var(--color-muted, 220 14% 96%));
+		border: 1px solid hsl(var(--color-border, 220 13% 91%));
 		font-size: 0.8125rem;
 		font-family: monospace;
 		text-align: center;
-		color: hsl(var(--theme-foreground, 220 9% 10%));
+		color: hsl(var(--color-foreground, 220 9% 10%));
 	}
 
 	@media (prefers-reduced-motion: reduce) {