handler-playable-sdk 0.3.62 → 0.3.63

package/dist/index.css

@@ -106,17 +106,13 @@
   /* AI Prompt Colors */
   --ui-ai-magenta: #FF00FF;
 
-  /* Dark Input System (for inspector/workbench panels) */
-  --ui-input-dark-bg: #1A1D23;
-  /* Darker than panel background */
-  --ui-input-dark-text: #E8E8E8;
-  /* Light text for readability */
-  --ui-input-dark-border: #2A2E36;
-  /* Subtle border */
-  --ui-input-dark-focus: #3A3E46;
-  /* Slightly lighter on focus */
-  --ui-input-dark-placeholder: #6B7280;
-  /* Muted placeholder text */
+  /* Status Colors (for override states, validation, etc.) */
+  --ui-status-warning: #FFD36B;
+  --ui-status-warning-border: rgba(255, 211, 107, 0.4);
+  --ui-status-success: #9FE7C5;
+  --ui-status-success-border: rgba(159, 231, 197, 0.4);
+  --ui-status-info: #9FC4FF;
+  --ui-status-info-border: rgba(159, 196, 255, 0.35);
 
   /* Background Texture */
   --ui-noise-opacity: 0.05;
@@ -287,7 +283,7 @@
 
 .compare-viewport.is-active {
   border-color: var(--ui-accent);
-  box-shadow: 0 0 0 1px rgba(227, 138, 90, 0.3), var(--ui-shadow);
+  box-shadow: 0 0 0 1px var(--ui-accent-overlay-3), var(--ui-shadow);
 }
 
 .compare-header {
@@ -336,7 +332,7 @@
 
 .compare-viewport.is-active .compare-focus {
   border-color: var(--ui-accent);
-  background: rgba(227, 138, 90, 0.12);
+  background: var(--ui-accent-overlay-2);
   color: var(--ui-text);
 }
 
@@ -371,7 +367,7 @@
   justify-content: center;
   font-size: 11px;
   color: var(--ui-muted);
-  background: rgba(246, 243, 239, 0.5);
+  background: var(--ui-border-overlay-1);
   opacity: 0;
   transition: opacity var(--ui-duration-normal) var(--ui-ease);
   pointer-events: none;
@@ -385,7 +381,7 @@
   width: 100%;
   height: 100%;
   display: block;
-  background: #000;
+  background: var(--ui-black);
 }
 
 @media (max-width: 1100px) {
@@ -539,7 +535,7 @@
 }
 
 .status-icon.active {
-  background: rgba(227, 138, 90, 0.15);
+  background: var(--ui-accent-overlay-1);
   color: var(--ui-terracotta);
 }
 
@@ -662,7 +658,7 @@
 .scene-tools-body .debug-field input[type="number"]:focus {
   outline: none;
   border-color: var(--ui-terracotta);
-  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.2);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-1);
 }
 
 /* Debug nudge controls */
@@ -821,7 +817,7 @@
 .scene-panel-search input:focus {
   outline: none;
   border-color: var(--ui-accent);
-  box-shadow: 0 0 0 2px rgba(61, 214, 198, 0.2);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-1);
 }
 
 .scene-panel-filters {
@@ -849,18 +845,18 @@
 
 .scene-screen-filter:hover {
   border-color: var(--ui-terracotta);
-  background-color: rgba(227, 138, 90, 0.05);
+  background-color: var(--ui-accent-overlay-1);
 }
 
 .scene-screen-filter:focus {
   outline: none;
   border-color: var(--ui-accent);
-  box-shadow: 0 0 0 2px rgba(61, 214, 198, 0.2);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-1);
 }
 
 .filter-chip {
-  border: 1px solid rgba(111, 140, 255, 0.3);
-  background: rgba(19, 24, 34, 0.7);
+  border: 1px solid var(--ui-accent-overlay-3);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-muted);
   font-size: 11px;
   border-radius: 999px;
@@ -895,7 +891,7 @@
   margin-left: 6px;
   padding: 2px 6px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--ui-overlay-light-4);
   color: var(--ui-text);
   font-size: 10px;
 }
@@ -937,31 +933,31 @@
   border-radius: 999px;
   text-transform: uppercase;
   letter-spacing: 0.4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--ui-overlay-light-5);
 }
 
 .scene-object-badge.ui {
-  background: rgba(227, 138, 90, 0.12);
+  background: var(--ui-accent-overlay-2);
   /* Terracotta tint */
   color: var(--ui-terracotta);
 }
 
 .scene-object-badge.scene {
-  background: rgba(201, 162, 140, 0.12);
+  background: var(--ui-accent-2-overlay-1);
   /* Dusty clay tint */
   color: var(--ui-accent-2);
 }
 
 .scene-object-item:hover {
   border-color: var(--ui-terracotta);
-  background: rgba(227, 138, 90, 0.08);
+  background: var(--ui-accent-overlay-1);
   /* Light terracotta wash */
 }
 
 .scene-object-item.selected {
   border-color: var(--ui-terracotta);
-  background: rgba(227, 138, 90, 0.15);
-  box-shadow: 0 0 0 1px rgba(227, 138, 90, 0.3);
+  background: var(--ui-accent-overlay-2);
+  box-shadow: 0 0 0 1px var(--ui-accent-overlay-3);
 }
 
 /* Debug Toggle Button in Toolbar */
@@ -970,7 +966,7 @@
 }
 
 .debug-toggle-badge {
-  background-color: #28a745;
+  background-color: var(--ui-success);
   color: var(--ui-text);
   font-size: 10px;
   padding: 2px 4px;
@@ -986,10 +982,10 @@
 /* Inspector Image Property - Premium Layout */
 .inspector-property-image {
   margin-bottom: 16px;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--ui-overlay-light-1);
   border-radius: 10px;
   padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--ui-overlay-light-3);
 }
 
 .inspector-property-image .property-header {
@@ -1008,9 +1004,9 @@
   position: relative;
   width: 100px;
   height: 80px;
-  background: #0d1117;
+  background: var(--ui-black);
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--ui-overlay-light-5);
   overflow: hidden;
   cursor: zoom-in;
   flex-shrink: 0;
@@ -1039,8 +1035,8 @@
   font-family: inherit;
   font-size: 11px !important;
   color: var(--ui-muted) !important;
-  background: rgba(0, 0, 0, 0.2) !important;
-  border-color: rgba(255, 255, 255, 0.05) !important;
+  background: var(--ui-overlay-dark-1) !important;
+  border-color: var(--ui-overlay-light-3) !important;
 }
 
 .inspector-image-actions {
@@ -1055,31 +1051,31 @@
 }
 
 .inspector-image-actions .inspector-btn.primary {
-  background: #6d5dfc;
+  background: var(--ui-terracotta);
   color: white;
   font-weight: 600;
 }
 
 .highlight-pulse {
   animation: pulse-border 1s infinite alternate;
-  border-color: #6d5dfc !important;
+  border-color: var(--ui-terracotta) !important;
   /* Removed glow effect - HANDLER forbids glows */
 }
 
 @keyframes pulse-border {
   from {
-    border-color: rgba(109, 93, 252, 0.3);
+    border-color: var(--ui-accent-overlay-3);
   }
 
   to {
-    border-color: rgba(109, 93, 252, 1);
+    border-color: var(--ui-terracotta);
   }
 }
 
 .property-badge {
   font-size: 9px;
   font-weight: 800;
-  background: rgba(61, 214, 198, 0.15);
+  background: var(--ui-accent-overlay-2);
   color: var(--ui-accent);
   padding: 2px 5px;
   border-radius: 4px;
@@ -1115,7 +1111,7 @@
 .toolbar-divider {
   width: 1px;
   height: 20px;
-  background-color: #555;
+  background-color: var(--ui-border);
   margin: 0 4px;
 }
 
@@ -1167,7 +1163,7 @@
 /* Higher z-index during drag to stay above everything */
 .scene-panel.dragging {
   z-index: 9999 !important;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--ui-shadow-strong);
   opacity: 0.95;
 }
 
@@ -1245,8 +1241,8 @@
 }
 
 .customize-icon-btn:hover {
-  border-color: rgba(227, 138, 90, 0.55);
-  background: rgba(227, 138, 90, 0.08);
+  border-color: var(--ui-accent-overlay-6);
+  background: var(--ui-accent-overlay-1);
 }
 
 .customize-icon-btn svg {
@@ -1272,8 +1268,8 @@
   gap: 6px;
   padding: 8px;
   border-radius: 8px;
-  background: rgba(20, 26, 36, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: var(--ui-ai-dark-bg);
+  border: 1px solid var(--ui-overlay-light-3);
   font-size: 11px;
   color: var(--ui-muted);
 }
@@ -1319,8 +1315,8 @@
   width: 100%;
   padding: 6px 8px;
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(10, 14, 20, 0.85);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   font-size: 12px;
 }
@@ -1343,7 +1339,7 @@
 
 .batch-ai-btn {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -1352,8 +1348,8 @@
 }
 
 .batch-ai-btn.primary {
-  border-color: rgba(191, 126, 255, 0.6);
-  background: rgba(191, 126, 255, 0.2);
+  border-color: var(--ui-accent-overlay-6);
+  background: var(--ui-accent-overlay-2);
 }
 
 .batch-ai-file {
@@ -1374,8 +1370,8 @@
   margin-top: 8px;
   padding: 8px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(16, 20, 28, 0.6);
+  border: 1px solid var(--ui-overlay-light-2);
+  background: var(--ui-ai-dark-bg);
 }
 
 .batch-ai-palette {
@@ -1389,7 +1385,7 @@
   width: 22px;
   height: 22px;
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--ui-overlay-light-7);
 }
 
 .batch-ai-muted {
@@ -1406,8 +1402,8 @@
 
 .batch-ai-item {
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(12, 16, 22, 0.7);
+  border: 1px solid var(--ui-overlay-light-2);
+  background: var(--ui-ai-dark-bg);
   padding: 8px;
   display: flex;
   flex-direction: column;
@@ -1440,8 +1436,8 @@
   max-height: 140px;
   object-fit: contain;
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 10, 14, 0.6);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
 }
 
 .batch-ai-thumb.hidden {
@@ -1476,8 +1472,8 @@
   width: 100%;
   padding: 6px 8px;
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(10, 14, 20, 0.85);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   font-size: 12px;
 }
@@ -1496,7 +1492,7 @@
 
 .brand-dna-btn {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -1505,8 +1501,8 @@
 }
 
 .brand-dna-btn.primary {
-  border-color: rgba(111, 140, 255, 0.6);
-  background: rgba(111, 140, 255, 0.2);
+  border-color: var(--ui-accent-overlay-6);
+  background: var(--ui-accent-overlay-2);
 }
 
 .brand-dna-file {
@@ -1531,8 +1527,8 @@
   margin: 6px 0 0;
   padding: 8px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(12, 16, 22, 0.7);
+  border: 1px solid var(--ui-overlay-light-2);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   font-size: 11px;
   white-space: pre-wrap;
@@ -1542,8 +1538,8 @@
   margin-top: 8px;
   padding: 8px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(16, 20, 28, 0.6);
+  border: 1px solid var(--ui-overlay-light-2);
+  background: var(--ui-ai-dark-bg);
 }
 
 .brand-dna-palette {
@@ -1557,7 +1553,7 @@
   width: 22px;
   height: 22px;
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--ui-overlay-light-7);
 }
 
 .brand-dna-muted {
@@ -1574,8 +1570,8 @@
 
 .brand-dna-object {
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(12, 16, 22, 0.7);
+  border: 1px solid var(--ui-overlay-light-2);
+  background: var(--ui-ai-dark-bg);
   padding: 8px;
   display: flex;
   flex-direction: column;
@@ -1619,7 +1615,7 @@
 .ai-modal {
   position: fixed;
   inset: 0;
-  background: rgba(30, 30, 30, 0.75);
+  background: var(--ui-overlay-dark-3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1701,7 +1697,7 @@
   gap: 12px;
   padding: 12px 14px;
   border-radius: 10px;
-  background: rgba(227, 138, 90, 0.08);
+  background: var(--ui-accent-overlay-1);
   border: 1px solid var(--ui-terracotta);
 }
 
@@ -1722,7 +1718,7 @@
   flex: 1;
   height: 8px;
   border-radius: 999px;
-  background: linear-gradient(90deg, rgba(227, 138, 90, 0.3), var(--ui-terracotta), rgba(227, 138, 90, 0.3));
+  background: linear-gradient(90deg, var(--ui-accent-overlay-3), var(--ui-terracotta), var(--ui-accent-overlay-3));
   background-size: 200% 100%;
   animation: ai-bar 1.4s var(--ui-ease) infinite;
 }
@@ -1774,7 +1770,7 @@
 .ai-textarea:focus {
   outline: none;
   border-color: var(--ui-terracotta);
-  box-shadow: 0 0 0 3px rgba(227, 138, 90, 0.15);
+  box-shadow: 0 0 0 3px var(--ui-accent-overlay-2);
 }
 
 .ai-textarea {
@@ -1844,8 +1840,8 @@
 
 .ai-gallery-item.active {
   border-color: var(--ui-terracotta);
-  background: rgba(227, 138, 90, 0.1);
-  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.2);
+  background: var(--ui-accent-overlay-2);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-1);
 }
 
 .ai-gallery-thumb {
@@ -1943,7 +1939,7 @@
 .asset-editor-modal {
   position: fixed;
   inset: 0;
-  background: rgba(6, 10, 16, 0.82);
+  background: var(--ui-overlay-dark-3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1953,10 +1949,10 @@
 .asset-editor-card {
   width: min(680px, 90vw);
   max-height: 85vh;
-  background: rgba(16, 20, 28, 0.98);
+  background: var(--ui-dark-panel);
   border: 1px solid var(--ui-border);
   border-radius: 16px;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+  box-shadow: var(--ui-shadow-strong);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -1967,7 +1963,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-overlay-light-2);
 }
 
 .asset-editor-title {
@@ -1984,7 +1980,7 @@
 
 .asset-editor-close {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 6px 12px;
@@ -1994,12 +1990,12 @@
 }
 
 .asset-editor-close:hover {
-  background: rgba(25, 32, 44, 1);
+  background: var(--ui-black);
 }
 
 .asset-editor-tabs {
   display: flex;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-overlay-light-2);
 }
 
 .asset-editor-tab {
@@ -2021,7 +2017,7 @@
 
 .asset-editor-tab:hover:not(.active) {
   color: var(--ui-text);
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--ui-overlay-light-1);
 }
 
 .asset-editor-body {
@@ -2059,13 +2055,13 @@
   justify-content: flex-end;
   gap: 12px;
   padding: 16px 20px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: 1px solid var(--ui-overlay-light-2);
 }
 
 .asset-preview-modal {
   position: fixed;
   inset: 0;
-  background: rgba(8, 10, 14, 0.72);
+  background: var(--ui-overlay-dark-3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2075,7 +2071,7 @@
 .asset-preview-card {
   width: min(720px, 92vw);
   max-height: 82vh;
-  background: rgba(16, 20, 28, 0.98);
+  background: var(--ui-dark-panel);
   border: 1px solid var(--ui-border);
   border-radius: 14px;
   box-shadow: var(--ui-shadow);
@@ -2088,7 +2084,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-overlay-light-2);
   color: var(--ui-text);
 }
 
@@ -2100,7 +2096,7 @@
 
 .asset-preview-close {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -2113,7 +2109,7 @@
   color: var(--ui-muted);
   font-size: 11px;
   word-break: break-all;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-overlay-light-2);
 }
 
 .asset-preview-actions {
@@ -2124,7 +2120,7 @@
 
 .asset-preview-change {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -2134,7 +2130,7 @@
 
 .asset-preview-ai {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -2151,7 +2147,7 @@
 }
 
 .asset-preview-ai-output {
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: 1px solid var(--ui-overlay-light-2);
   padding: 10px 12px 14px;
 }
 
@@ -2170,8 +2166,8 @@
   max-height: 200px;
   object-fit: contain;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 10, 14, 0.6);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
 }
 
 .asset-preview-body img {
@@ -2195,7 +2191,7 @@
 .asset-crop-modal {
   position: fixed;
   inset: 0;
-  background: rgba(8, 10, 14, 0.78);
+  background: var(--ui-overlay-dark-3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2204,7 +2200,7 @@
 
 .asset-crop-card {
   width: min(860px, 96vw);
-  background: rgba(16, 20, 28, 0.98);
+  background: var(--ui-dark-panel);
   border: 1px solid var(--ui-border);
   border-radius: 14px;
   box-shadow: var(--ui-shadow);
@@ -2218,7 +2214,7 @@
   justify-content: space-between;
   gap: 16px;
   padding: 12px 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-overlay-light-2);
   color: var(--ui-text);
 }
 
@@ -2235,7 +2231,7 @@
 
 .asset-crop-close {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -2269,15 +2265,15 @@
 
 .asset-crop-canvas {
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 10, 14, 0.55);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
   cursor: grab;
 }
 
 .asset-crop-preview {
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 10, 14, 0.55);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
 }
 
 .asset-crop-canvas:active {
@@ -2309,7 +2305,7 @@
 
 .asset-crop-reset {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -2329,7 +2325,7 @@
   padding: 6px 14px;
   font-size: 12px;
   border: 1px solid var(--ui-border);
-  background: rgba(28, 36, 50, 0.85);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   cursor: pointer;
 }
@@ -2337,7 +2333,7 @@
 .asset-crop-apply {
   background: var(--ui-accent);
   border-color: transparent;
-  color: #10151f;
+  color: var(--ui-dark-panel);
   font-weight: 600;
 }
 
@@ -2353,12 +2349,12 @@
   justify-content: space-between;
   gap: 12px;
   padding: 10px 14px;
-  background-color: rgba(24, 28, 38, 0.95);
+  background-color: var(--ui-dark-panel);
   color: var(--ui-text);
   font-size: 12px;
   user-select: none;
   cursor: move;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid var(--ui-overlay-light-1);
 }
 
 .scene-panel-actions {
@@ -2370,7 +2366,7 @@
 .scene-panel-action {
   border: 1px solid var(--ui-border);
   border-radius: 6px;
-  background: #1f2633;
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-muted);
   font-size: 11px;
   padding: 4px 8px;
@@ -2378,7 +2374,7 @@
 }
 
 .scene-panel-action:hover {
-  border-color: rgba(255, 159, 67, 0.6);
+  border-color: var(--ui-accent-2-overlay-1);
   color: var(--ui-text);
 }
 
@@ -2395,7 +2391,7 @@
 
 /* Terracotta hover for close button */
 .scene-panel-toggle:hover {
-  background: rgba(227, 138, 90, 0.15);
+  background: var(--ui-accent-overlay-2);
   color: var(--ui-terracotta);
 }
 
@@ -2408,7 +2404,7 @@
 .panel-pill {
   padding: 2px 8px;
   border-radius: 999px;
-  background: rgba(61, 214, 198, 0.12);
+  background: var(--ui-accent-overlay-2);
   color: var(--ui-accent);
   font-size: 10px;
   text-transform: uppercase;
@@ -2416,18 +2412,18 @@
 }
 
 .panel-accent-blue .panel-pill {
-  background: rgba(111, 140, 255, 0.14);
+  background: var(--ui-accent-2-overlay-1);
   color: var(--ui-accent-3);
 }
 
 .panel-accent-amber .panel-pill {
-  background: rgba(255, 159, 67, 0.16);
+  background: var(--ui-accent-2-overlay-1);
   color: var(--ui-accent-2);
 }
 
 .panel-accent-violet .panel-pill {
-  background: rgba(191, 126, 255, 0.18);
-  color: #d6b7ff;
+  background: var(--ui-accent-2-overlay-1);
+  color: var(--ui-accent-2);
 }
 
 .panel-title-text {
@@ -2437,19 +2433,19 @@
 }
 
 .panel-accent-teal {
-  border-color: rgba(61, 214, 198, 0.35);
+  border-color: var(--ui-accent-overlay-3);
 }
 
 .panel-accent-blue {
-  border-color: rgba(111, 140, 255, 0.35);
+  border-color: var(--ui-accent-overlay-3);
 }
 
 .panel-accent-amber {
-  border-color: rgba(255, 159, 67, 0.4);
+  border-color: var(--ui-accent-overlay-4);
 }
 
 .panel-accent-violet {
-  border-color: rgba(191, 126, 255, 0.35);
+  border-color: var(--ui-accent-overlay-3);
 }
 
 .scene-panel-body {
@@ -2470,7 +2466,7 @@
 
 /* Device Frame Styling - The "Phone" Look */
 .device-frame {
-  box-shadow: 0 0 0 1px rgba(30, 30, 30, 0.08), 0 8px 20px rgba(30, 30, 30, 0.15);
+  box-shadow: 0 0 0 1px var(--ui-overlay-dark-1), 0 8px 20px var(--ui-overlay-dark-1);
   border-radius: 14px;
   background-color: var(--ui-device-frame-bg);
   transition: width var(--ui-duration-normal) var(--ui-ease), height var(--ui-duration-normal) var(--ui-ease);
@@ -2485,7 +2481,7 @@
   align-items: center;
   transform-origin: center center;
   transition: transform var(--ui-duration-normal) cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  filter: drop-shadow(0 6px 16px rgba(30, 30, 30, 0.12));
+  filter: drop-shadow(0 6px 16px var(--ui-overlay-dark-1));
 }
 
 /* ========== 05-console.css ========== */
@@ -2754,23 +2750,23 @@
   margin-bottom: 12px;
   padding: 6px 10px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
 }
 
 .override-status[data-state="diff"] {
-  color: #ffd36b;
-  border-color: rgba(255, 211, 107, 0.4);
+  color: var(--ui-status-warning);
+  border-color: var(--ui-status-warning-border);
 }
 
 .override-status[data-state="match"] {
-  color: #9fe7c5;
-  border-color: rgba(159, 231, 197, 0.4);
+  color: var(--ui-status-success);
+  border-color: var(--ui-status-success-border);
 }
 
 .override-status[data-state="saved"] {
-  color: #9fc4ff;
-  border-color: rgba(159, 196, 255, 0.35);
+  color: var(--ui-status-info);
+  border-color: var(--ui-status-info-border);
 }
 
 .debug-header {
@@ -2778,8 +2774,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid #444;
-  background-color: #252525;
+  border-bottom: 1px solid var(--ui-border);
+  background-color: var(--ui-bg-2);
   border-radius: 8px 8px 0 0;
   cursor: move;
   user-select: none;
@@ -2789,16 +2785,16 @@
   display: flex;
   gap: 6px;
   padding: 8px 12px;
-  border-bottom: 1px solid #333;
-  background-color: #1f1f1f;
+  border-bottom: 1px solid var(--ui-border);
+  background-color: var(--ui-surface-2);
 }
 
 .debug-tab {
   flex: 1;
-  border: 1px solid #444;
+  border: 1px solid var(--ui-border);
   border-radius: 6px;
-  background-color: #262626;
-  color: #bfc3c7;
+  background-color: var(--ui-surface);
+  color: var(--ui-muted);
   font-size: 12px;
   padding: 6px 10px;
   cursor: pointer;
@@ -2806,15 +2802,15 @@
 }
 
 .debug-tab.active {
-  background-color: #323232;
+  background-color: var(--ui-surface-2);
   color: var(--ui-text);
-  border-color: #ffb43b;
-  box-shadow: inset 0 0 0 1px rgba(255, 180, 59, 0.35);
+  border-color: var(--ui-accent);
+  box-shadow: inset 0 0 0 1px var(--ui-accent-overlay-3);
 }
 
 .debug-hint {
   font-size: 11px;
-  color: #9aa0a6;
+  color: var(--ui-muted);
   margin-bottom: 10px;
 }
 
@@ -2827,9 +2823,9 @@
 }
 
 .debug-collapsible {
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--ui-border);
   border-radius: 10px;
-  background-color: rgba(21, 26, 36, 0.85);
+  background-color: var(--ui-surface);
   overflow: hidden;
   margin-bottom: 12px;
 }
@@ -2841,7 +2837,7 @@
   justify-content: space-between;
   gap: 12px;
   padding: 10px 12px;
-  background-color: rgba(24, 30, 42, 0.9);
+  background-color: var(--ui-bg-2);
   border: none;
   color: var(--ui-text);
   font-size: 12px;
@@ -2878,17 +2874,17 @@
 }
 
 .debug-arrow-btn {
-  border: 1px solid #444;
+  border: 1px solid var(--ui-border);
   border-radius: 6px;
-  background-color: #2b2b2b;
-  color: #e7e7e7;
+  background-color: var(--ui-surface);
+  color: var(--ui-text);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.15s var(--ui-ease);
 }
 
 .debug-arrow-btn:hover {
-  border-color: #ffb43b;
+  border-color: var(--ui-accent);
   color: var(--ui-text);
 }
 
@@ -2918,8 +2914,8 @@
   gap: 8px;
   padding: 8px;
   border-radius: 6px;
-  background-color: rgba(25, 30, 40, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background-color: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
 }
 
 .debug-info-row {
@@ -2931,11 +2927,11 @@
 }
 
 .debug-info-label {
-  color: #9aa0a6;
+  color: var(--ui-muted);
 }
 
 .debug-info-value {
-  color: #f1f3f5;
+  color: var(--ui-text);
   font-weight: 600;
 }
 
@@ -2952,8 +2948,8 @@
 
 .debug-action-btn {
   background-color: transparent;
-  color: #ccc;
-  border: 1px solid #555;
+  color: var(--ui-muted);
+  border: 1px solid var(--ui-border);
   border-radius: 3px;
   padding: 4px 8px;
   font-size: 11px;
@@ -2971,7 +2967,7 @@
   max-width: 140px;
   max-height: 140px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--ui-border);
 }
 
 .brand-vision-panel .vision-raw-block {
@@ -3034,8 +3030,8 @@
   height: 80px;
   object-fit: cover;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-overlay-dark-1);
 }
 
 .brand-vision-panel .vision-mapping-actions {
@@ -3051,7 +3047,7 @@
 }
 
 .debug-action-btn:hover {
-  background-color: #444;
+  background-color: var(--ui-surface-2);
   color: var(--ui-text);
 }
 
@@ -3068,7 +3064,7 @@
 .panel-section {
   margin-bottom: 16px;
   padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-border);
 }
 
 .panel-section:last-child {
@@ -3105,7 +3101,7 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 8px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid var(--ui-border);
   padding-bottom: 4px;
 }
 
@@ -3116,7 +3112,7 @@
 .debug-field label {
   display: block;
   font-size: 11px;
-  color: #aaa;
+  color: var(--ui-muted);
   margin-bottom: 4px;
   font-weight: 500;
 }
@@ -3124,9 +3120,9 @@
 .debug-field input,
 .debug-field select {
   width: 100%;
-  background-color: var(--ui-input-dark-bg);
-  color: var(--ui-input-dark-text);
-  border: 1px solid var(--ui-input-dark-border);
+  background-color: var(--ui-surface-2);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
   border-radius: 4px;
   padding: 6px 8px;
   font-size: 12px;
@@ -3137,16 +3133,16 @@
 .debug-field input:focus,
 .debug-field select:focus {
   outline: none;
-  background: var(--ui-input-dark-focus);
-  border-color: var(--ui-accent-3);
-  box-shadow: 0 0 0 2px rgba(111, 140, 255, 0.2);
+  background: var(--ui-surface);
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.15);
 }
 
 .debug-field input[type="range"] {
   -webkit-appearance: none;
   appearance: none;
   height: 6px;
-  background: #555;
+  background: var(--ui-border);
   border-radius: 3px;
   outline: none;
 }
@@ -3202,9 +3198,9 @@
 
 .debug-btn {
   flex: 1;
-  background-color: #444;
+  background-color: var(--ui-surface-2);
   color: var(--ui-text);
-  border: 1px solid #666;
+  border: 1px solid var(--ui-border);
   border-radius: 4px;
   padding: 6px 8px;
   font-size: 11px;
@@ -3213,39 +3209,40 @@
 }
 
 .debug-btn:hover {
-  background-color: #555;
+  background-color: var(--ui-surface);
   border-color: var(--ui-muted);
 }
 
 .debug-btn.primary {
-  background-color: #2a5bd7;
-  border-color: #2a5bd7;
+  background-color: var(--ui-accent);
+  border-color: var(--ui-accent);
 }
 
 .debug-btn.primary:hover {
-  background-color: #2147a7;
-  border-color: #2147a7;
+  background-color: var(--ui-terracotta-hover);
+  border-color: var(--ui-terracotta-hover);
 }
 
 .debug-btn.danger {
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: var(--ui-danger);
+  border-color: var(--ui-danger);
 }
 
 .debug-btn.danger:hover {
-  background-color: #c82333;
-  border-color: #c82333;
+  background-color: var(--ui-danger);
+  border-color: var(--ui-danger);
+  opacity: 0.9;
 }
 
 .debug-btn.secondary {
-  background-color: rgba(61, 214, 198, 0.1);
-  border-color: rgba(61, 214, 198, 0.3);
+  background-color: var(--ui-accent-overlay-1);
+  border-color: var(--ui-accent-overlay-3);
   color: var(--ui-accent);
 }
 
 .debug-btn.secondary:hover {
-  background-color: rgba(61, 214, 198, 0.2);
-  border-color: rgba(61, 214, 198, 0.4);
+  background-color: var(--ui-accent-overlay-2);
+  border-color: var(--ui-accent-overlay-4);
 }
 
 /* -------------------------------------------------------------------------- */
@@ -3309,18 +3306,18 @@
   border-radius: 8px;
   cursor: pointer;
   transition: all var(--ui-duration-fast) var(--ui-ease);
-  background: rgba(25, 30, 40, 0.8);
+  background: var(--ui-surface-2);
 }
 
 .library-item:hover {
-  border-color: rgba(61, 214, 198, 0.5);
-  background: rgba(61, 214, 198, 0.1);
+  border-color: var(--ui-accent-overlay-5);
+  background: var(--ui-accent-overlay-1);
 }
 
 .library-item.selected {
-  border-color: rgba(61, 214, 198, 0.8);
-  background: rgba(61, 214, 198, 0.15);
-  box-shadow: 0 0 0 1px rgba(61, 214, 198, 0.4);
+  border-color: var(--ui-accent);
+  background: var(--ui-accent-overlay-2);
+  box-shadow: 0 0 0 1px var(--ui-accent-overlay-4);
 }
 
 .library-thumbnail {
@@ -3328,7 +3325,7 @@
   height: 40px;
   object-fit: cover;
   border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--ui-border);
 }
 
 .library-label {
@@ -3343,9 +3340,9 @@
   color: var(--ui-text);
   margin: 12px 0;
   padding: 8px;
-  background: rgba(25, 30, 40, 0.8);
+  background: var(--ui-surface-2);
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--ui-border);
 }
 
 .library-empty {
@@ -3388,7 +3385,7 @@
   letter-spacing: 0.8px;
   color: var(--ui-accent);
   padding: 6px 8px;
-  background: rgba(61, 214, 198, 0.08);
+  background: var(--ui-accent-overlay-1);
   border-radius: 6px;
   margin-bottom: 8px;
 }
@@ -3443,9 +3440,9 @@
 
 .inspector-header {
   padding: 12px;
-  background: rgba(24, 30, 42, 0.95);
+  background: var(--ui-surface-2);
   border-radius: 8px;
-  border: 1px solid rgba(191, 126, 255, 0.25);
+  border: 1px solid var(--ui-border);
 }
 
 .inspector-object-name {
@@ -3463,8 +3460,8 @@
 }
 
 .inspector-section {
-  background: rgba(21, 26, 36, 0.85);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
   border-radius: 8px;
   overflow: hidden;
 }
@@ -3474,8 +3471,8 @@
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
-  background: rgba(24, 30, 42, 0.9);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--ui-bg-2);
+  border-bottom: 1px solid var(--ui-border);
   cursor: pointer;
   user-select: none;
 }
@@ -3507,7 +3504,7 @@
 
 .ai-tabs {
   display: flex;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--ui-overlay-dark-1);
   border-radius: 8px;
   padding: 4px;
   margin-bottom: 16px;
@@ -3531,7 +3528,7 @@
 }
 
 .ai-tab-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--ui-overlay-light-3);
 }
 
 .ai-tab-btn.active {
@@ -4012,9 +4009,9 @@
 
 .debug-select {
   width: 100%;
-  background-color: var(--ui-input-dark-bg);
-  color: var(--ui-input-dark-text);
-  border: 1px solid var(--ui-input-dark-border);
+  background-color: var(--ui-surface-2);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
   border-radius: 4px;
   padding: 6px 8px;
   font-size: 11px;
@@ -4091,9 +4088,7 @@
 .inspector-property-label {
   font-size: 10px;
   font-weight: 600;
-  color: var(--ui-dark-text);
-  /* Use lighter text for dark backgrounds */
-  opacity: 0.7;
+  color: var(--ui-muted);
   text-transform: capitalize;
   width: 80px;
   flex-shrink: 0;
@@ -4102,9 +4097,9 @@
 .inspector-input {
   flex: 1;
   min-width: 80px;
-  background: var(--ui-input-dark-bg);
-  color: var(--ui-input-dark-text);
-  border: 1px solid var(--ui-input-dark-border);
+  background: var(--ui-surface-2);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
   border-radius: 4px;
   padding: 4px 6px;
   font-size: 11px;
@@ -4114,9 +4109,9 @@
 
 .inspector-input:focus {
   outline: none;
-  background: var(--ui-input-dark-focus);
-  border-color: rgba(227, 138, 90, 0.7);
-  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.18);
+  background: var(--ui-surface);
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.15);
 }
 
 .inspector-checkbox {
@@ -4128,8 +4123,7 @@
   align-items: center;
   cursor: pointer;
   font-size: 12px;
-  color: var(--ui-dark-text);
-  /* Use lighter text for dark backgrounds */
+  color: var(--ui-text);
 }
 
 .inspector-image-preview {
@@ -4216,13 +4210,12 @@
 .inspector-object-header {
   font-size: 11px;
   font-weight: 700;
-  color: var(--ui-dark-text);
-  /* Use lighter text for dark backgrounds */
+  color: var(--ui-text);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 8px;
   padding-bottom: 6px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid var(--ui-border);
 }
 
 .inspector-object-body {
@@ -4244,8 +4237,7 @@
   margin-right: 6px;
   transition: transform var(--ui-duration-fast) var(--ui-ease);
   font-size: 10px;
-  color: var(--ui-dark-text);
-  opacity: 0.5;
+  color: var(--ui-muted);
 }
 
 .inspector-section.collapsed .inspector-section-arrow {
@@ -4257,8 +4249,7 @@
 }
 
 .inspector-section-title {
-  color: var(--ui-dark-text) !important;
-  /* Force light text on dark background */
+  color: var(--ui-text);
   font-weight: 700;
 }