From ad9e1ef5f11375693c15518abbbc9b42331c9335 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Wed, 27 May 2026 10:44:39 -0400
Subject: [PATCH] fix(premiere-plugin): replace oklch() with hex/rgba for CEP
 Chromium compat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CEP's embedded Chromium (used by Premiere Pro panels) does not support
oklch() color syntax. All color tokens were rendering as invalid/transparent,
causing the panel to appear unstyled. Converted all oklch() values to their
precise hex/rgba equivalents via OKLab→sRGB math. No design changes.
---
 services/premiere-plugin/css/styles.css | 72 ++++++++++++-------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/services/premiere-plugin/css/styles.css b/services/premiere-plugin/css/styles.css
index d1091c3..5df5512 100644
--- a/services/premiere-plugin/css/styles.css
+++ b/services/premiere-plugin/css/styles.css
@@ -3,48 +3,48 @@
 
 :root {
   /* Background scale */
-  --bg-deep:    oklch(8% 0.011 32);
-  --bg-base:    oklch(11% 0.010 32);
-  --bg-panel:   oklch(15% 0.013 32);
-  --bg-surface: oklch(19% 0.014 32);
-  --bg-raised:  oklch(24% 0.015 32);
-  --bg-hover:   oklch(28% 0.015 32);
+  --bg-deep:    #030101;
+  --bg-base:    #070403;
+  --bg-panel:   #100908;
+  --bg-surface: #1a1210;
+  --bg-raised:  #261d1b;
+  --bg-hover:   #302624;
 
   /* Accent */
-  --accent:        oklch(62% 0.22 32);
-  --accent-hover:  oklch(68% 0.22 32);
-  --accent-bright: oklch(76% 0.20 32);
-  --accent-subtle: oklch(62% 0.22 32 / 0.12);
-  --accent-border: oklch(62% 0.22 32 / 0.36);
+  --accent:        #ed391a;
+  --accent-hover:  #ff5032;
+  --accent-bright: #ff765a;
+  --accent-subtle: rgba(237, 57, 26, 0.12);
+  --accent-border: rgba(237, 57, 26, 0.36);
 
   /* Text */
-  --text-primary:   oklch(94% 0.008 32);
-  --text-secondary: oklch(72% 0.014 32);
-  --text-tertiary:  oklch(56% 0.012 32);
-  --text-disabled:  oklch(38% 0.010 32);
+  --text-primary:   #f0e9e8;
+  --text-secondary: #ada29f;
+  --text-tertiary:  #7b7270;
+  --text-disabled:  #48413f;
 
   /* Borders */
-  --border-faint:  oklch(22% 0.013 32);
-  --border:        oklch(28% 0.015 32);
-  --border-strong: oklch(38% 0.018 32);
+  --border-faint:  #201817;
+  --border:        #302624;
+  --border-strong: #4c3f3c;
 
   /* Signals (primary) */
-  --signal-good: oklch(70% 0.18 148);
-  --signal-bad:  oklch(64% 0.22 25);
-  --signal-warn: oklch(80% 0.16 90);
-  --signal-idle: oklch(58% 0.012 32);
-  --signal-info: oklch(67% 0.16 245);
+  --signal-good: #35bb58;
+  --signal-bad:  #f53c41;
+  --signal-warn: #e6b816;
+  --signal-idle: #817876;
+  --signal-info: #1e9cf0;
 
   /* Signal backgrounds */
-  --signal-good-bg: oklch(70% 0.18 148 / 0.12);
-  --signal-bad-bg:  oklch(64% 0.22 25  / 0.12);
-  --signal-warn-bg: oklch(80% 0.16 90  / 0.12);
-  --signal-info-bg: oklch(67% 0.16 245 / 0.12);
+  --signal-good-bg: rgba(53, 187, 88, 0.12);
+  --signal-bad-bg:  rgba(245, 60, 65, 0.12);
+  --signal-warn-bg: rgba(230, 184, 22, 0.12);
+  --signal-info-bg: rgba(30, 156, 240, 0.12);
 
   /* Signal hover variants */
-  --signal-good-hover: oklch(74% 0.18 148);
-  --signal-bad-hover:  oklch(68% 0.22 25);
-  --signal-warn-hover: oklch(84% 0.16 90);
+  --signal-good-hover: #46c865;
+  --signal-bad-hover:  #ff4c4d;
+  --signal-warn-hover: #f3c530;
 
   /* Status aliases — backwards compat for main.js */
   --status-green:     var(--signal-good);
@@ -94,8 +94,8 @@
 
   /* Elevation + surface extras */
   --shadow:      0 4px 12px rgba(0, 0, 0, 0.3);
-  --thumb-black: oklch(0% 0 32);
-  --overlay:     oklch(8% 0.010 32 / 0.65);
+  --thumb-black: #000000;
+  --overlay:     rgba(3, 1, 1, 0.65);
 
   /* Z-index layers */
   --z-dropdown: 40;
@@ -264,7 +264,7 @@ html, body {
 
 .btn-primary {
   background: var(--accent);
-  color: oklch(11% 0.010 32);
+  color: #070403;
   border-color: var(--accent);
 }
 
@@ -296,7 +296,7 @@ html, body {
 
 .btn-danger {
   background: var(--signal-bad);
-  color: oklch(98% 0.005 25);
+  color: #fcf7f7;
   border-color: var(--signal-bad);
 }
 
@@ -1143,7 +1143,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 
 .error-message {
   background: var(--signal-bad-bg);
-  border: 1px solid oklch(64% 0.22 25 / 0.25);
+  border: 1px solid rgba(245, 60, 65, 0.25);
   color: var(--signal-bad);
   padding: var(--sp-2) var(--sp-3);
   border-radius: var(--r-sm);
@@ -1154,7 +1154,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
 
 .success-message {
   background: var(--signal-good-bg);
-  border: 1px solid oklch(70% 0.18 148 / 0.25);
+  border: 1px solid rgba(53, 187, 88, 0.25);
   color: var(--signal-good);
   padding: var(--sp-2) var(--sp-3);
   border-radius: var(--r-sm);