fix(ui): folds tokens for settings/profile/glass invented vars (native-cinny audit 2/N)

- DenoiseTester: --bg-card/--border-color/--accent-green/--accent-orange -> color.Surface.*/Success/Primary
- ProfileDecoration: --accent-cyan/--bg-surface-variant -> color.Primary.Main/SurfaceVariant.Container
- Profile: --tc-critical/warning-normal -> color.Critical/Warning.Main
- UserRoomProfile: --tc-positive/warning-normal/--tc-surface-low-contrast/--bg-surface-variant -> color tokens
- Sidebar glass: hardcoded rgba bg/border -> color-mix on color.Surface.Container + SurfaceVariant.ContainerLine
  (also fixes the glass looking wrong on light themes — was always near-black)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/components/sidebar/Sidebar.css.ts

@@ -17,10 +17,10 @@ export const Sidebar = style([
 ]);
 
 export const SidebarGlass = style({
-  backgroundColor: 'rgba(3, 5, 8, 0.55)',
+  backgroundColor: `color-mix(in srgb, ${color.Surface.Container} 55%, transparent)`,
   backdropFilter: 'blur(12px)',
   WebkitBackdropFilter: 'blur(12px)',
-  borderRight: '1px solid rgba(255,255,255,0.06)',
+  borderRight: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
 });
 
 export const SidebarStack = style([

src/app/components/user-profile/UserRoomProfile.tsx

@@ -91,10 +91,10 @@ function UserDeviceRow({ userId, device }: UserDeviceRowProps) {
       {(status) => {
         const deviceColor =
           status === VerificationStatus.Verified
-            ? 'var(--tc-positive-normal, #5effc4)'
+            ? color.Success.Main
             : status === VerificationStatus.Unverified
-              ? 'var(--tc-warning-normal, #ffcc55)'
+              ? color.Warning.Main
-              : 'var(--tc-surface-low-contrast)';
+              : color.SurfaceVariant.OnContainer;
         return (
           <Box alignItems="Center" gap="200">
             <Icon size="100" src={Icons.ShieldUser} style={{ color: deviceColor, flexShrink: 0 }} />
@@ -106,7 +106,7 @@ function UserDeviceRow({ userId, device }: UserDeviceRowProps) {
                 <Text
                   size="T200"
                   truncate
-                  style={{ color: 'var(--tc-surface-low-contrast)', fontFamily: 'monospace' }}
+                  style={{ color: color.SurfaceVariant.OnContainer, fontFamily: 'monospace' }}
                 >
                   {device.deviceId}
                 </Text>
@@ -160,7 +160,7 @@ function UserDeviceSessions({ userId }: UserDeviceSessionsProps) {
       direction="Column"
       gap="100"
       style={{
-        background: 'var(--bg-surface-variant)',
+        background: color.SurfaceVariant.Container,
         borderRadius: config.radii.R300,
         padding: config.space.S300,
       }}
@@ -171,7 +171,7 @@ function UserDeviceSessions({ userId }: UserDeviceSessionsProps) {
           <Text size="T300">
             <b>Sessions</b>
           </Text>
-          <Text size="T200" style={{ color: 'var(--tc-surface-low-contrast)' }}>
+          <Text size="T200" style={{ color: color.SurfaceVariant.OnContainer }}>
             {devices.length}
           </Text>
         </Box>

src/app/features/settings/account/Profile.tsx

@@ -482,9 +482,9 @@ function ProfileStatus() {
                 opacity: statusMsg.length >= 56 ? 1 : 0.45,
                 color:
                   statusMsg.length >= 64
-                    ? 'var(--tc-critical-normal)'
+                    ? color.Critical.Main
                     : statusMsg.length >= 56
-                      ? 'var(--tc-warning-normal)'
+                      ? color.Warning.Main
                       : undefined,
               }}
             >
@@ -536,7 +536,7 @@ function ProfileStatus() {
           </Button>
         </Box>
         {saveState.status === AsyncStatus.Error && (
-          <Text size="T200" style={{ color: 'var(--tc-critical-normal)' }}>
+          <Text size="T200" style={{ color: color.Critical.Main }}>
             Failed to save status — server may be rate limiting. Try again.
           </Text>
         )}
@@ -730,7 +730,7 @@ function ProfilePronouns() {
           </Button>
         </Box>
         {saveState.status === AsyncStatus.Error && (
-          <Text size="T200" style={{ color: 'var(--tc-critical-normal)' }}>
+          <Text size="T200" style={{ color: color.Critical.Main }}>
             Failed to save pronouns. Try again.
           </Text>
         )}
@@ -873,7 +873,7 @@ function ProfileTimezone() {
           </Button>
         </Box>
         {saveState.status === AsyncStatus.Error && (
-          <Text size="T200" style={{ color: 'var(--tc-critical-normal)' }}>
+          <Text size="T200" style={{ color: color.Critical.Main }}>
             Failed to save timezone. Try again.
           </Text>
         )}

src/app/features/settings/account/ProfileDecoration.tsx

@@ -37,12 +37,12 @@ function DecorationPreviewCell({
         width: CELL_SIZE,
         height: CELL_SIZE,
         flexShrink: 0,
-        border: `2px solid ${selected ? 'var(--accent-cyan)' : 'transparent'}`,
+        border: `2px solid ${selected ? color.Primary.Main : 'transparent'}`,
         borderRadius: '50%',
-        background: 'var(--bg-surface-variant)',
+        background: color.SurfaceVariant.Container,
         cursor: 'pointer',
         padding: 0,
-        boxShadow: selected ? '0 0 0 1px var(--accent-cyan)' : 'none',
+        boxShadow: selected ? `0 0 0 1px ${color.Primary.Main}` : 'none',
         overflow: 'hidden',
         outline: 'none',
       }}
@@ -142,7 +142,7 @@ export function ProfileDecoration() {
               height: CELL_SIZE,
               flexShrink: 0,
               borderRadius: '50%',
-              background: 'var(--bg-surface-variant)',
+              background: color.SurfaceVariant.Container,
               overflow: 'hidden',
             }}
           >

src/app/features/settings/general/DenoiseTester.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, Button, Text } from 'folds';
+import { Box, Button, color, config, Text } from 'folds';
 import { DenoiseModelId } from '../../../state/settings';
 import { DENOISE_MODELS } from '../../../utils/lotusDenoiseUtils';
 import {
@@ -49,8 +49,8 @@ function DbMeter({ label, db, threshold }: { label: string; db: number; threshol
         style={{
           position: 'relative',
           height: '12px',
-          background: 'var(--bg-card)',
+          background: color.Surface.Container,
-          border: '1px solid var(--border-color)',
+          border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
           borderRadius: '6px',
           overflow: 'hidden',
         }}
@@ -62,7 +62,7 @@ function DbMeter({ label, db, threshold }: { label: string; db: number; threshol
             left: 0,
             bottom: 0,
             width: `${pct}%`,
-            background: 'var(--accent-green)',
+            background: color.Success.Main,
             transition: 'width 0.05s linear',
           }}
         />
@@ -74,7 +74,7 @@ function DbMeter({ label, db, threshold }: { label: string; db: number; threshol
               bottom: 0,
               left: `${markerPct}%`,
               width: '2px',
-              background: 'var(--accent-orange)',
+              background: color.Primary.Main,
             }}
           />
         )}