diff --git a/src/app/features/call/CallControls.tsx b/src/app/features/call/CallControls.tsx
index d8f4970e4..10286ed13 100644
--- a/src/app/features/call/CallControls.tsx
+++ b/src/app/features/call/CallControls.tsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   Chip,
+  color,
   config,
   Icon,
   IconButton,
@@ -276,8 +277,8 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               bottom: '110%',
               left: '50%',
               transform: 'translateX(-50%)',
-              background: 'var(--bg-surface)',
-              border: '1px solid var(--bg-surface-border)',
+              background: color.Surface.Container,
+              border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
               borderRadius: '0.75rem',
               padding: '1rem 1.25rem',
               zIndex: 100,
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index 0a0a9babe..96b8c5321 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -1372,8 +1372,8 @@ function Calls() {
             style={{
               padding: '16px',
               marginTop: '8px',
-              borderTop: '1px solid var(--border-color)',
-              background: 'var(--bg-card)',
+              borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+              background: color.Surface.Container,
             }}
           >
             {/* ── Model selection ───────────────────────────────────────── */}
@@ -1397,8 +1397,8 @@ function Calls() {
                   style={{
                     padding: '12px',
                     borderRadius: '8px',
-                    border: '1px solid var(--border-color)',
-                    background: 'var(--bg-input)',
+                    border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                    background: color.SurfaceVariant.Container,
                   }}
                 >
                   <Text size="T300">{selectedDenoiseModel.name}</Text>
@@ -1436,7 +1436,7 @@ function Calls() {
                     direction="Row"
                     gap="100"
                     style={{
-                      borderBottom: '1px solid var(--border-color)',
+                      borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
                       paddingBottom: '4px',
                     }}
                   >
@@ -1489,7 +1489,10 @@ function Calls() {
             <Box
               direction="Column"
               gap="300"
-              style={{ paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}
+              style={{
+                paddingTop: '12px',
+                borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+              }}
             >
               <Text size="L400">Enhancements</Text>
               <SettingTile
@@ -1525,7 +1528,7 @@ function Calls() {
                     step="1"
                     value={callDenoiseGateThreshold}
                     onChange={(e) => setCallDenoiseGateThreshold(parseInt(e.target.value, 10))}
-                    style={{ width: '100%', accentColor: 'var(--accent-orange)' }}
+                    style={{ width: '100%', accentColor: color.Primary.Main }}
                   />
                 </Box>
               )}
@@ -1535,7 +1538,10 @@ function Calls() {
             <Box
               direction="Column"
               gap="200"
-              style={{ paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}
+              style={{
+                paddingTop: '12px',
+                borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+              }}
             >
               <Text size="L400">Test &amp; calibrate</Text>
               <Text size="T200" priority="300">
@@ -1658,7 +1664,7 @@ function Calls() {
                 value={ringtoneVolume}
                 onChange={(e) => setRingtoneVolume(parseInt(e.target.value, 10))}
                 aria-label="Ringtone volume"
-                style={{ flex: 1, accentColor: 'var(--accent-orange)' }}
+                style={{ flex: 1, accentColor: color.Primary.Main }}
               />
               <Text size="T200" style={{ minWidth: '32px', textAlign: 'right' }}>
                 {ringtoneVolume}%