refactor(ui): deprecated accent.amber->main 91건 + 매직 리터럴 토큰화 (WS3)

- accent.amber/amberDim/amberGlow -> accent.main/dim/glow 91건 (34파일).
  theme.ts의 @deprecated 별칭 참조 제거 (본체 main 사용).
- inline fontSize/fontWeight -> d3roTypo, borderRadius -> d3roRadius 토큰 37건.
- P4: 화면 고유 수치(스탯 fontSize, 레이아웃 width)는 토큰화 제외.
정책: docs/REFACTOR_POLICY.md DP1, 이식 인사이트 P4

apps/desktop/src/renderer/components/SettingsModal.tsx

@@ -77,11 +77,11 @@ function HotkeyDisplay({
               size="small"
               sx={{
                 fontWeight: 700,
-                fontSize: '11px',
+                fontSize: d3roTypo.label.size,
                 bgcolor: d3roPalette.bg.elevated,
                 color: d3roPalette.text.primary,
                 border: `1px solid ${d3roPalette.border.default}`,
-                borderRadius: '6px',
+                borderRadius: d3roRadius.xs,
                 height: 28,
               }}
             />
@@ -135,7 +135,7 @@ function VoiceModeCard({
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
             <Typography
               variant="subtitle2"
-              sx={{ fontWeight: 700, fontFamily: d3roFontMono, fontSize: '12px', letterSpacing: '0.5px' }}
+              sx={{ fontWeight: 700, fontFamily: d3roFontMono, fontSize: d3roTypo.small.size, letterSpacing: '0.5px' }}
             >
               {title}
             </Typography>
@@ -159,7 +159,7 @@ function VoiceModeCard({
                   label={enabled ? enabledLabel : disabledLabel}
                   size="small"
                   sx={{
-                    fontSize: '10px',
+                    fontSize: '10px', // P4: 토큰에 없는 10px 보존
                     fontWeight: 700,
                     height: 20,
                     bgcolor: enabled ? d3roPalette.tag.greenBg : 'transparent',
@@ -171,7 +171,7 @@ function VoiceModeCard({
               sx={{ ml: 0, mr: 0 }}
             />
           </Box>
-          <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
+          <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
             {description}
           </Typography>
         </Box>
@@ -326,10 +326,10 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
             alignItems: 'center',
             fontFamily: d3roFontMono,
             fontWeight: 700,
-            fontSize: '14px',
-            letterSpacing: '1px',
+            fontSize: d3roTypo.body.size,
+            letterSpacing: d3roTypo.engrave.spacing,
             textTransform: 'uppercase',
-            color: d3roPalette.accent.amber,
+            color: d3roPalette.accent.main,
             py: 1.5,
           }}
         >
@@ -351,16 +351,16 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
               minHeight: 40,
               '& .MuiTab-root': {
                 fontFamily: d3roFontMono,
-                fontSize: '11px',
+                fontSize: d3roTypo.label.size,
                 fontWeight: 700,
                 letterSpacing: '0.5px',
                 textTransform: 'uppercase',
                 color: d3roPalette.text.inactive,
                 minHeight: 40,
                 py: 1,
-                '&.Mui-selected': { color: d3roPalette.accent.amber },
+                '&.Mui-selected': { color: d3roPalette.accent.main },
               },
-              '& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.amber, height: 2 },
+              '& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.main, height: 2 },
             }}
           >
             <Tab label={t('settings.tabs.general')} icon={<Keyboard size={14} />} iconPosition="start" />
@@ -564,12 +564,12 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                       }
                     }
                   }}
-                  sx={{ fontFamily: d3roFontMono, fontSize: '11px', minWidth: 80 }}
+                  sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, minWidth: 80 }}
                 >
                   {micTesting ? t('common.stop').toUpperCase() : t('common.test').toUpperCase()}
                 </Button>
                 <Box sx={{ flex: 1, height: 8, bgcolor: d3roPalette.bg.inset, borderRadius: '4px', overflow: 'hidden', boxShadow: d3roShadow.inset }}>
-                  <Box sx={{ width: `${Math.min(100, micLevel * 100)}%`, height: '100%', bgcolor: micLevel > 0.7 ? d3roPalette.tag.red : d3roPalette.accent.amber, borderRadius: '4px', transition: 'width 100ms ease-out' }} />
+                  <Box sx={{ width: `${Math.min(100, micLevel * 100)}%`, height: '100%', bgcolor: micLevel > 0.7 ? d3roPalette.tag.red : d3roPalette.accent.main, borderRadius: '4px', transition: 'width 100ms ease-out' }} />
                 </Box>
               </Box>
 
@@ -682,7 +682,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                 }
                 label={
                   <Box>
-                    <Typography variant="body2" sx={{ fontSize: '12px' }}>{t('settings.diarization')}</Typography>
+                    <Typography variant="body2" sx={{ fontSize: d3roTypo.small.size }}>{t('settings.diarization')}</Typography>
                     <Typography variant="caption" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
                       {t('settings.diarizationHint')}
                     </Typography>
@@ -718,7 +718,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                 </Select>
               </FormControl>
 
-              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
+              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
                 {config.llmBackend === 'premium'
                   ? t('settings.backend.premiumHint')
                   : t('settings.backend.localHint')}
@@ -749,7 +749,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                 </Select>
               </FormControl>
 
-              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
+              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
                 {config.conversationBackend === 'realtime'
                   ? t('settings.convBackend.realtimeHint')
                   : t('settings.convBackend.localHint')}
@@ -770,7 +770,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                     fullWidth
                   />
 
-                  <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
+                  <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
                     {t('settings.ollamaHint')}
                   </Typography>
 
@@ -821,7 +821,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                 </Select>
               </FormControl>
 
-              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
+              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
                 {t('settings.actionHint')}
               </Typography>
 
@@ -924,7 +924,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                   onClose()
                   setTimeout(() => window.location.reload(), 300)
                 }}
-                sx={{ fontFamily: d3roFontMono, fontSize: '11px' }}
+                sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size }}
               >
                 {t('settings.about.restartOnboarding')}
               </Button>