diff --git a/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-styles.ts b/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-styles.ts
index e9d27ae..091ad9b 100644
--- a/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-styles.ts
+++ b/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-styles.ts
@@ -18,40 +18,40 @@ export const CC_YOUTUBE_EMBED_STYLE_CONSTANTS = {
       overflowY: 'auto',
       maxHeight: '100%',
       minWidth: '200px',
-      backgroundColor: '#f5f5f5',
-      borderLeft: '1px solid #ddd',
+      backgroundColor: 'var(--cc-navy-50)',
+      borderLeft: '1px solid var(--cc-border)',
     },
     title: {
       margin: '0 0 10px 0',
       fontSize: '16px',
       fontWeight: 'bold',
-      color: '#333',
+      color: 'var(--cc-text-primary)',
     },
     line: {
       padding: '5px',
       marginBottom: '5px',
       borderRadius: '4px',
       fontSize: '14px',
-      color: '#333',
-      backgroundColor: '#fff',
-      border: '1px solid #eee',
+      color: 'var(--cc-text-primary)',
+      backgroundColor: 'var(--cc-bg-canvas)',
+      border: '1px solid var(--cc-border-strong)',
     },
     activeLine: {
-      backgroundColor: '#e3f2fd',
-      border: '1px solid #2196f3',
-      color: '#1565c0',
+      backgroundColor: 'var(--cc-navy-50)',
+      border: '1px solid var(--cc-action-primary)',
+      color: 'var(--cc-action-primary)',
       fontWeight: 'bold',
       boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
       transform: 'scale(1.02)',
       transition: 'all 0.2s ease-in-out',
     },
     timestamp: {
-      color: '#666',
+      color: 'var(--cc-text-tertiary)',
       marginRight: '8px',
       fontWeight: 'bold',
     },
     loading: {
-      color: '#666',
+      color: 'var(--cc-text-muted)',
       fontStyle: 'italic',
     },
   },
@@ -64,14 +64,14 @@ export const CC_YOUTUBE_EMBED_STYLE_CONSTANTS = {
     },
     button: {
       padding: '8px 12px',
-      backgroundColor: '#f0f0f0',
-      border: '1px solid #ddd',
+      backgroundColor: 'var(--cc-navy-50)',
+      border: '1px solid var(--cc-border)',
       borderRadius: '4px',
       cursor: 'pointer',
-      color: '#333',
+      color: 'var(--cc-text-primary)',
       fontSize: '14px',
       '&:hover': {
-        backgroundColor: '#e0e0e0',
+        backgroundColor: 'var(--cc-border-strong)',
       },
     },
   },