Replace hardcoded slate-* classes with theme-aware sb-* utilities

WaveformViewer, SchematicViewer, and SimulationLog now use CSS
variable-backed utility classes (bg-sb-surface, text-sb-muted,
border-sb-border, etc.) instead of hardcoded Tailwind slate colors.
Light mode embed theme now works through the variable system rather
than brute-force class overrides in embed-theme.css.

frontend/src/components/notebook/output/SchematicViewer.tsx

@@ -192,20 +192,20 @@ export function SchematicViewer({ svg, componentMap, onValueChange }: SchematicV
   );
 
   return (
-    <div className={cn('relative', isFullscreen && 'fixed inset-0 z-50 bg-slate-950 flex flex-col')}>
+    <div className={cn('relative', isFullscreen && 'fixed inset-0 z-50 bg-sb-bg flex flex-col')}>
       {/* Toolbar */}
-      <div className="flex items-center gap-1 px-3 py-1.5 border-b border-slate-700/50 bg-slate-800/50">
+      <div className="flex items-center gap-1 px-3 py-1.5 border-b border-sb-border/50 bg-sb-cell/50">
         <button
           onClick={zoomOut}
           disabled={zoomIndex === 0}
-          className="p-1 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          className="p-1 rounded text-sb-muted hover:text-sb-text hover:bg-sb-border/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           title="Zoom out"
         >
           <ZoomOut className="w-3.5 h-3.5" />
         </button>
         <button
           onClick={fitToWidth}
-          className="text-xs text-slate-500 hover:text-slate-300 tabular-nums w-10 text-center transition-colors"
+          className="text-xs text-sb-muted hover:text-sb-text tabular-nums w-10 text-center transition-colors"
           title="Reset to 100%"
         >
           {Math.round(zoom * 100)}%
@@ -213,14 +213,14 @@ export function SchematicViewer({ svg, componentMap, onValueChange }: SchematicV
         <button
           onClick={zoomIn}
           disabled={zoomIndex === ZOOM_STEPS.length - 1}
-          className="p-1 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          className="p-1 rounded text-sb-muted hover:text-sb-text hover:bg-sb-border/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           title="Zoom in"
         >
           <ZoomIn className="w-3.5 h-3.5" />
         </button>
         <button
           onClick={toggleFullscreen}
-          className="p-1 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-colors"
+          className="p-1 rounded text-sb-muted hover:text-sb-text hover:bg-sb-border/50 transition-colors"
           title={isFullscreen ? 'Exit fullscreen (Esc)' : 'Fullscreen'}
         >
           {isFullscreen ? (
@@ -231,13 +231,13 @@ export function SchematicViewer({ svg, componentMap, onValueChange }: SchematicV
         </button>
         <div className="flex-1" />
         {componentMap && Object.keys(componentMap).length > 0 && (
-          <span className="text-[10px] text-slate-600 mr-2">
+          <span className="text-[10px] text-sb-muted mr-2">
             click values to edit
           </span>
         )}
         <button
           onClick={downloadSvg}
-          className="flex items-center gap-1 px-2 py-1 rounded text-xs text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-colors"
+          className="flex items-center gap-1 px-2 py-1 rounded text-xs text-sb-muted hover:text-sb-text hover:bg-sb-border/50 transition-colors"
           title="Download SVG"
         >
           <Download className="w-3.5 h-3.5" />

frontend/src/components/notebook/output/SimulationLog.tsx

@@ -16,7 +16,7 @@ function highlightLine(line: string): { text: string; className: string } {
   if (lower.includes('warning') || lower.includes('warn')) {
     return { text: line, className: 'text-amber-400' };
   }
-  return { text: line, className: 'text-slate-400' };
+  return { text: line, className: 'text-sb-muted' };
 }
 
 export function SimulationLog({
@@ -33,9 +33,9 @@ export function SimulationLog({
   const lines = log.split('\n').filter((l) => l.trim().length > 0);
 
   return (
-    <div className="border-t border-slate-700/50">
+    <div className="border-t border-sb-border/50">
       <button
-        className="flex items-center gap-2 w-full px-3 py-2 text-xs text-slate-500 hover:text-slate-400 transition-colors"
+        className="flex items-center gap-2 w-full px-3 py-2 text-xs text-sb-muted hover:text-sb-text transition-colors"
         onClick={() => setOpen(!open)}
       >
         {open ? (

frontend/src/components/notebook/output/WaveformViewer.tsx

@@ -290,7 +290,7 @@ export function WaveformViewer({ waveform, className }: WaveformViewerProps) {
       className={cn(
         'relative',
         className,
-        isFullscreen && 'fixed inset-0 z-50 bg-slate-900 flex flex-col',
+        isFullscreen && 'fixed inset-0 z-50 bg-sb-surface flex flex-col',
       )}
     >
       {/* Control buttons */}
@@ -299,14 +299,14 @@ export function WaveformViewer({ waveform, className }: WaveformViewerProps) {
           className={cn(
             'flex items-center gap-1 z-10',
             isFullscreen
-              ? 'px-4 py-2 justify-end border-b border-slate-700/50'
+              ? 'px-4 py-2 justify-end border-b border-sb-border/50'
               : 'absolute top-1 right-1',
           )}
         >
           <button
             type="button"
             onClick={toggleFullscreen}
-            className="p-1 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-colors"
+            className="p-1 rounded text-sb-muted hover:text-sb-text hover:bg-sb-border/50 transition-colors"
             title={isFullscreen ? 'Exit fullscreen (Esc)' : 'Fullscreen'}
           >
             {isFullscreen ? (
@@ -318,7 +318,7 @@ export function WaveformViewer({ waveform, className }: WaveformViewerProps) {
           <button
             type="button"
             onClick={toggleScope}
-            className="p-1 rounded hover:bg-slate-700/50 transition-colors"
+            className="p-1 rounded hover:bg-sb-border/50 transition-colors"
             aria-label={scopeMode ? 'Exit oscilloscope view' : 'Switch to oscilloscope view'}
             title={scopeMode ? 'Standard view' : 'Oscilloscope view'}
           >
@@ -330,7 +330,7 @@ export function WaveformViewer({ waveform, className }: WaveformViewerProps) {
       {/* Plot area */}
       <div className={cn(isFullscreen && 'flex-1 min-h-0 px-4 pb-4')}>
         {isEmpty ? (
-          <div className="text-slate-500 text-sm py-4 text-center">
+          <div className="text-sb-muted text-sm py-4 text-center">
             No waveform data to display.
           </div>
         ) : scopeMode ? (

frontend/src/styles/embed-theme.css

@@ -116,34 +116,6 @@ html.light ::-webkit-scrollbar-thumb:hover {
   background: #94a3b8;
 }
 
-/* Shared component overrides for light embed mode.
-   Targets hardcoded Tailwind slate utilities in SchematicViewer
-   and SimulationLog without modifying the shared components. */
-
-html.light .border-slate-700\/50 {
-  border-color: #e2e8f0;
-}
-
-html.light .bg-slate-800\/50 {
-  background-color: rgba(241, 245, 249, 0.8);
-}
-
-html.light .text-slate-400 {
-  color: #64748b;
-}
-
-html.light .text-slate-500 {
-  color: #64748b;
-}
-
-html.light .text-slate-600 {
-  color: #475569;
-}
-
-html.light .hover\:text-slate-200:hover {
-  color: #1e293b;
-}
-
-html.light .hover\:bg-slate-700\/50:hover {
-  background-color: rgba(226, 232, 240, 0.5);
-}
+/* Previous workaround overrides for hardcoded slate utilities removed —
+   WaveformViewer, SchematicViewer, and SimulationLog now use
+   theme-aware sb-* utility classes directly. */