merge: --cc-* CSS variable system + design tokens (P1b)

src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx

@@ -72,7 +72,7 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
             zIndex: 1,
           }}
         >
-          <span style={{ color: 'white', fontWeight: 'bold' }}>{shape.props.title}</span>
+          <span style={{ color: 'var(--cc-text-inverse)', fontWeight: 'bold' }}>{shape.props.title}</span>
           <div style={{ display: 'flex', gap: '4px', alignItems: 'center', pointerEvents: 'all' }}>
             {toolbarItems.map((item) => (
               <button
@@ -94,7 +94,7 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
                   border: 'none',
                   padding: '4px',
                   cursor: 'pointer',
-                  color: 'white',
+                  color: 'var(--cc-text-inverse)',
                   opacity: item.isActive ? 1 : 0.7,
                   display: 'flex',
                   alignItems: 'center',
@@ -114,7 +114,7 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
                 </div>
               </button>
             ))}
-            {isLocked && <span style={{ color: 'white' }}>🔒</span>}
+            {isLocked && <span style={{ color: 'var(--cc-text-inverse)' }}>🔒</span>}
           </div>
         </div>
         {/* Content */}

src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx

@@ -83,7 +83,7 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
               height: '48px',
               borderRadius: '50%',
               border: 'none',
-              backgroundColor: isRecording ? '#f44336' : '#4CAF50',
+              backgroundColor: isRecording ? 'var(--cc-recording-active)' : 'var(--cc-recording-idle)',
               color: 'white',
               fontSize: '24px',
               cursor: 'pointer',
@@ -105,7 +105,7 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
             <div style={{ 
               fontSize: '16px', 
               fontWeight: 'bold',
-              color: isRecording ? '#f44336' : '#4CAF50'
+              color: isRecording ? 'var(--cc-recording-active)' : 'var(--cc-recording-idle)'
             }}>
               {isRecording ? 'Recording...' : 'Ready'}
             </div>