From e077c36e1c96832631b1a497d5d7272dc5e8062e Mon Sep 17 00:00:00 2001
From: zack34567 <varun.ch@gmail.com>
Date: Sat, 23 May 2026 10:04:14 +0530
Subject: [PATCH] fix: improve color palette and visual consistency (closes
 #616)

---
 src/app/contact/page.tsx             | 12 ++---
 src/app/globals.css                  | 65 +++++++++++++++++++++++-----
 src/app/layout.tsx                   |  4 +-
 src/app/page.tsx                     |  2 +-
 src/components/AudioSpeedControl.tsx |  4 +-
 src/components/DownloadResult.tsx    | 14 +++---
 src/components/ExportSettings.tsx    |  4 +-
 src/components/FileUpload.tsx        | 24 +++++-----
 src/components/Footer.tsx            | 20 ++++-----
 src/components/ImageOverlay.tsx      | 42 +++++++++---------
 src/components/ScrollToTop.tsx       |  4 +-
 src/components/ThemeToggle.tsx       |  7 +--
 src/components/ThumbnailStrip.tsx    | 56 +++++++++++++-----------
 src/components/TrimControl.tsx       | 10 +++--
 src/components/VideoEditor.tsx       | 10 ++---
 src/components/VideoPreview.tsx      | 30 ++++++-------
 src/components/WaveformCanvas.tsx    |  4 +-
 src/components/components.tsx        | 48 +++++++++-----------
 tailwind.config.ts                   | 22 +++++-----
 vitest.config.ts                     |  5 +++
 vitest.setup.ts                      | 14 ++++++
 21 files changed, 234 insertions(+), 167 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 224ae2f1..13b04261 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -6,11 +6,11 @@ export const metadata: Metadata = {
 };
 export default function ContactPage() {
   return (
-    <main className="min-h-screen bg-black text-white p-8">
+    <main className="min-h-screen bg-[var(--bg)] text-[var(--text)] p-8">
       <div className="mb-8">
         <Link 
           href="/" 
-          className="inline-flex items-center text-sm opacity-70 hover:opacity-100 transition-opacity"
+          className="inline-flex items-center text-sm text-[var(--muted)] hover:text-[var(--text)] transition-colors"
         >
           &larr; Back to Reframe
         </Link>
@@ -27,11 +27,11 @@ export default function ContactPage() {
             href="https://github.com/magic-peach/reframe/issues"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-lg font-semibold underline hover:opacity-80 transition-opacity"
+            className="text-lg font-semibold text-[var(--accent)] underline hover:text-[var(--accent-hover)] transition-colors"
           >
             GitHub Issues
           </a>
-          <p className="opacity-70 mt-1">For bug reports and feature requests.</p>
+          <p className="text-[var(--muted)] mt-1">For bug reports and feature requests.</p>
         </div>
 
         <div>
@@ -39,11 +39,11 @@ export default function ContactPage() {
             href="https://github.com/magic-peach/reframe/discussions"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-lg font-semibold underline hover:opacity-80 transition-opacity"
+            className="text-lg font-semibold text-[var(--accent)] underline hover:text-[var(--accent-hover)] transition-colors"
           >
             GitHub Discussions
           </a>
-          <p className="opacity-70 mt-1">For questions, ideas, and general help.</p>
+          <p className="text-[var(--muted)] mt-1">For questions, ideas, and general help.</p>
         </div>
       </div>
     </main>
diff --git a/src/app/globals.css b/src/app/globals.css
index 0bab4371..408e2d8e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,6 +11,9 @@
   --muted: #64748b;
   --accent: #3b82f6;
   --accent-hover: #1d4ed8;
+  --accent-muted: rgba(59, 130, 246, 0.12);
+  --radius: 10px;
+  --shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
   --film-600: #e63946;
   --film-400: #ff6b6b;
   --warning: #f59e0b;
@@ -22,13 +25,16 @@
 
 /* ── Dark mode tokens ── */
 .dark {
-  --bg: #0f172a;
-  --surface: #1e293b;
-  --border: #334155;
-  --text: #f1f5f9;
-  --muted: #94a3b8;
-  --accent: #3b82f6;
-  --accent-hover: #2563eb;
+  --bg: #0f1117;
+  --surface: #1a1d27;
+  --border: #2e3147;
+  --text: #f0f0f5;
+  --muted: #8b8fa8;
+  --accent: #4f6ef7;
+  --accent-hover: #3a57d4;
+  --accent-muted: rgba(79, 110, 247, 0.12);
+  --radius: 10px;
+  --shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
   --warning: #fbbf24;
   --error: #f87171;
   --error-bg: #7f1d1d;
@@ -47,6 +53,9 @@
 
   --accent: #FFFF00;
   --accent-hover: #FFFF00;
+  --accent-muted: rgba(255, 255, 0, 0.22);
+  --radius: 10px;
+  --shadow: none;
 
   --error: #FF6666;
   --success: #66FF66;
@@ -82,9 +91,45 @@
 body {
   background-color: var(--bg);
   color: var(--text);
+  line-height: 1.6;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--text);
+  font-weight: 700;
+}
+
+p,
+li {
+  color: color-mix(in srgb, var(--text) 95%, transparent);
+}
+
+button {
+  transition: all 0.2s ease;
+}
+
+input,
+select,
+textarea {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-muted);
+  outline: none;
+}
+
 /* Smooth transitions for all themed elements */
 *,
 *::before,
@@ -95,7 +140,7 @@ body {
 }
 
 :focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 4px;
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--accent-muted);
+  border-radius: var(--radius);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 593f68c8..129528b2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -70,7 +70,7 @@ export default function RootLayout({
       <body className="min-h-screen bg-[var(--bg)] text-[var(--text)] antialiased">
         
       <a href="#main-content"
-          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-white focus:text-black"
+          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-[var(--radius)] focus:border focus:border-[var(--border)] focus:bg-[var(--surface)] focus:px-4 focus:py-2 focus:text-[var(--text)]"
         >
           Skip to main content
         </a>
@@ -78,7 +78,7 @@ export default function RootLayout({
           <ErrorBoundary>
             <header
               role="banner"
-              className="sticky top-0 z-50 flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--bg)]"
+              className="sticky top-0 z-50 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg)]/95 px-6 py-3 backdrop-blur"
             >
               <div className="flex items-center gap-2">
                 <BrandLogo size={24} />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5245ade9..381fbd80 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,7 +8,7 @@ export default function Home() {
         href="https://github.com/magic-peach/reframe"
         target="_blank"
         rel="noopener noreferrer"
-        className="hidden min-[300px]:flex fixed top-4 right-16 z-50 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:shadow-[0_0_10px_rgba(255,255,255,0.15)] hover:bg-white/10"
+        className="hidden min-[300px]:flex fixed top-4 right-16 z-50 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:shadow-[var(--shadow)]"
       >
         ⭐ Star on GitHub
       </a>
diff --git a/src/components/AudioSpeedControl.tsx b/src/components/AudioSpeedControl.tsx
index bbeb93c8..dd6c6007 100644
--- a/src/components/AudioSpeedControl.tsx
+++ b/src/components/AudioSpeedControl.tsx
@@ -146,7 +146,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
       )}
 
       {recipe.keepAudio && (recipe.trimStart !== 0 || recipe.trimEnd !== null) && (
-        <div role="note" className="mt-3 p-3 bg-amber-50 border border-amber-200 rounded text-sm text-amber-700 leading-relaxed flex items-start gap-2 animate-fade-in">
+        <div role="note" className="mt-3 p-3 bg-[var(--accent-muted)] border border-[var(--border)] rounded text-sm text-[var(--text)] leading-relaxed flex items-start gap-2 animate-fade-in">
           <AlertTriangle size={12} aria-hidden="true" className="shrink-0 mt-0.5" />
           <p>
             Note: If audio doesn&apos;t start within the selected range, the output will be silent.
@@ -155,4 +155,4 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/DownloadResult.tsx b/src/components/DownloadResult.tsx
index 1f61081c..bfc039ff 100644
--- a/src/components/DownloadResult.tsx
+++ b/src/components/DownloadResult.tsx
@@ -80,7 +80,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           <label htmlFor="filename-input" className="text-[var(--muted)] font-heading font-semibold uppercase tracking-wider">
             Filename
           </label>
-          <span className={cn("transition-colors", name.length >= 100 ? "text-red-500 font-medium" : "text-[var(--muted)]")}>
+          <span className={cn("transition-colors", name.length >= 100 ? "text-[var(--error)] font-medium" : "text-[var(--muted)]")}>
             {100 - name.length} chars remaining
           </span>
         </div>
@@ -93,7 +93,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
             maxLength={100}
             className={cn(
               "flex-1 px-3 py-2.5 bg-[var(--bg)] border rounded-lg text-sm transition-colors text-[var(--text)] placeholder:text-[var(--muted)]",
-              !isValid && name.length > 0 ? "border-red-500 focus:outline-red-500 focus:ring-1 focus:ring-red-500" : "border-[var(--border)] focus:outline-film-500"
+              !isValid && name.length > 0 ? "border-[var(--error)] focus:outline-[var(--error)] focus:ring-1 focus:ring-[var(--error)]" : "border-[var(--border)] focus:outline-[var(--accent)]"
             )}
             placeholder="Enter filename"
           />
@@ -102,7 +102,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           </span>
         </div>
         {!isValid && name.length > 0 && (
-          <p className="text-xs text-red-500 px-1 flex items-center gap-1.5 mt-1 animate-fade-in">
+          <p className="text-xs text-[var(--error)] px-1 flex items-center gap-1.5 mt-1 animate-fade-in">
             <AlertCircle size={12} />
             Filename contains invalid characters (\ / : * ? &quot; &lt; &gt; |)
           </p>
@@ -116,7 +116,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           className={cn(
             "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
             isValid 
-              ? "bg-film-600 text-white hover:bg-film-700 hover:scale-[1.01] active:scale-[0.99] cursor-pointer" 
+              ? "bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] hover:scale-[1.02] active:scale-[0.99] cursor-pointer"
               : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
           )}
           onClick={(e) => {
@@ -136,7 +136,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           target="_blank"
           rel="noopener noreferrer"
           aria-label="Preview video in new tab"
-          className="flex items-center justify-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:bg-[var(--bg)] transition-colors"
+          className="flex items-center justify-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] transition-colors"
         >
           Preview
         </a>
@@ -145,7 +145,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           title="Reset and upload a new video"
           aria-label="Upload a new video"
           onClick={handleReset}
-          className="flex items-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:bg-[var(--bg)] transition-colors"
+          className="flex items-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] transition-colors"
         >
           <RotateCcw size={14} aria-hidden="true" />
           New
@@ -155,7 +155,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           target="_blank"
           rel="noopener noreferrer"
           aria-label="Share on X (opens in a new tab)"
-          className="flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 border border-[var(--border)] text-[var(--text)] text-sm font-heading font-bold uppercase tracking-wide rounded-lg hover:bg-[var(--bg)] transition-colors"
+          className="flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 border border-[var(--border)] text-[var(--text)] text-sm font-heading font-bold uppercase tracking-wide rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-colors"
         >
           <Share2 size={15} aria-hidden="true" />
           Share on X
diff --git a/src/components/ExportSettings.tsx b/src/components/ExportSettings.tsx
index 8b7f5286..6eee9b9b 100644
--- a/src/components/ExportSettings.tsx
+++ b/src/components/ExportSettings.tsx
@@ -112,7 +112,7 @@ export default function ExportSettings({
           </p>
 
           {isGif && (
-            <p className="text-xs text-amber-600 font-medium">
+            <p className="text-xs text-[var(--warning)] font-medium">
               ⚠ GIF files can be very large. Keep clips under 10 s for best results.
             </p>
           )}
@@ -176,7 +176,7 @@ export default function ExportSettings({
             className={cn(
               "text-xs",
               recipe.stabilization
-                ? "text-red-700 font-medium"
+                ? "text-[var(--error)] font-medium"
                 : "text-[var(--muted)]"
             )}
           >
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index d76845c5..f9f2127e 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -127,7 +127,7 @@ export default function FileUpload({
 
   // ── File info (shown after upload) ───────────────────
   const FileInfo = () => (
-    <div className="px-4 py-3 bg-film-50 border border-film-200 rounded-lg">
+    <div className="px-4 py-3 bg-[var(--surface)] border border-[var(--border)] rounded-[var(--radius)] shadow-[var(--shadow)]">
       <div className="flex flex-col lg:flex-row lg:items-center gap-3">
         <div className="flex items-start gap-3 flex-1 min-w-0">
           <div className="hidden lg:flex items-center justify-center w-9 h-9 rounded-lg bg-[var(--surface)] border border-[var(--border)] shrink-0">
@@ -136,18 +136,18 @@ export default function FileUpload({
           <Film size={18} className="lg:hidden text-film-600 shrink-0 mt-0.5" />
           <div className="flex-1 min-w-0">
             <div className="flex flex-wrap items-center gap-2 mb-0.5">
-              <p className="text-sm font-semibold text-film-700 truncate max-w-[320px] xl:max-w-[420px]">
+              <p className="text-sm font-semibold text-[var(--text)] truncate max-w-[320px] xl:max-w-[420px]">
                 {currentFile?.name}
               </p>
               {currentFile && (
-                <span className="px-2 py-0.5 bg-gray-700 text-white font-bold tracking-wider rounded text-[10px] uppercase shrink-0">
+                <span className="px-2 py-0.5 bg-[var(--accent-muted)] text-[var(--text)] font-bold tracking-wider rounded text-[10px] uppercase shrink-0">
                   {currentFile.name.includes(".")
                     ? currentFile.name.split(".").pop()
                     : "VIDEO"}
                 </span>
               )}
             </div>
-            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 space-y-0.5">
+            <div className="text-xs text-[var(--muted)] mt-1 space-y-0.5">
               <p>{formatBytes(currentFile?.size ?? 0)}</p>
               <p>
                 {duration > 0
@@ -168,12 +168,12 @@ export default function FileUpload({
         </button>
       </div>
 
-      <p className="text-xs text-gray-500 mt-3 break-words">
+      <p className="text-xs text-[var(--muted)] mt-3 break-words">
         Supports: MP4, MOV, AVI, MKV, WebM, and most video formats
       </p>
 
       {fileError && (
-        <p className="text-xs text-red-500 mt-2 font-medium">{fileError}</p>
+        <p className="text-xs text-[var(--error)] mt-2 font-medium">{fileError}</p>
       )}
 
       <input
@@ -212,7 +212,7 @@ export default function FileUpload({
         "group flex flex-col items-center justify-center gap-4 py-12 px-6",
         "border-2 border-dashed rounded-xl cursor-pointer transition-all duration-300 relative overflow-hidden",
         dragging
-          ? "border-film-500 bg-film-50/50 scale-[1.02] shadow-[0_0_40px_-10px_rgba(230,57,70,0.4)] ring-4 ring-film-500/30"
+          ? "border-[var(--accent)] bg-[var(--accent-muted)] scale-[1.02] shadow-[var(--shadow)] ring-4 ring-[var(--accent-muted)]"
           : "border-[var(--border)] bg-[var(--bg)] hover:border-film-400 hover:bg-film-50/40"
       )}
     >
@@ -239,12 +239,12 @@ export default function FileUpload({
         MP4 / MOV / AVI / WebM
       </div>
 
-      <p className="text-xs text-gray-500 text-center">
+      <p className="text-xs text-[var(--muted)] text-center">
         Supports: MP4, MOV, AVI, MKV, WebM, and most video formats up to 2GB
       </p>
 
       {fileError && (
-        <p className="text-sm text-red-500 text-center">{fileError}</p>
+        <p className="text-sm text-[var(--error)] text-center">{fileError}</p>
       )}
 
       <input
@@ -296,12 +296,12 @@ export default function FileUpload({
       {/* ── Normal upload UI ── */}
       <div className="space-y-2">
         {error && (
-          <p role="alert" className="text-sm text-red-500">
+          <p role="alert" className="text-sm text-[var(--error)]">
             {error}
           </p>
         )}
         {warning && (
-          <p role="alert" className="text-sm text-yellow-500">
+          <p role="alert" className="text-sm text-[var(--warning)]">
             {warning}
           </p>
         )}
@@ -309,4 +309,4 @@ export default function FileUpload({
       </div>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d055027c..c6006f0d 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -41,7 +41,7 @@ export default function Footer() {
             ].map((tag) => (
               <span
                 key={tag.label}
-                className="flex items-center gap-1.5 px-3 py-1 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-semibold tracking-wide uppercase transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:border-[var(--accent)] hover:shadow-[0_0_10px_rgba(255,255,255,0.08)] cursor-pointer select-none"
+                className="flex items-center gap-1.5 px-3 py-1 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-semibold tracking-wide uppercase transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:shadow-[var(--shadow)] cursor-pointer select-none"
               >
                 {tag.icon} {tag.label}
               </span>
@@ -59,19 +59,19 @@ export default function Footer() {
               href="https://github.com/magic-peach/reframe"
               target="_blank"
               rel="noopener"
-              className="opacity-70 hover:opacity-100 hover:text-red-400 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
             >
               GitHub
             </a>
             <Link
               href="/contact"
-              className="opacity-70 hover:opacity-100 hover:text-red-400 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
             >
               Contact
             </Link>
             <Link
               href="/privacy"
-              className="opacity-70 hover:opacity-100 hover:text-red-400 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
             >
               Privacy Policy
             </Link>
@@ -102,7 +102,7 @@ export default function Footer() {
             ) : (
               <div
                 id="updates-signup-form"
-                className="w-full sm:w-72 px-4 flex items-center bg-[var(--surface)] border border-blue-500/50 rounded-lg transition-all duration-500 ease-in-out"
+                className="w-full sm:w-72 px-4 flex items-center bg-[var(--surface)] border border-[var(--accent)] rounded-lg transition-all duration-500 ease-in-out"
               >
                 <form
                   aria-label="Updates signup form"
@@ -122,7 +122,7 @@ export default function Footer() {
                   <button
                     aria-label="Submit email for updates"
                     type="submit"
-                    className="text-blue-500 hover:text-blue-400 p-1"
+                    className="text-[var(--accent)] hover:text-[var(--accent-hover)] p-1"
                   >
                     <ArrowRight size={16} aria-hidden="true" />
                   </button>
@@ -143,7 +143,7 @@ export default function Footer() {
                 href="https://github.com/magic-peach/reframe"
                 target="_blank"
                 rel="noopener"
-                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--border)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
+                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
                 aria-label="Open Reframe GitHub repository"
               >
                 <Github
@@ -157,7 +157,7 @@ export default function Footer() {
                 href="https://twitter.com"
                 target="_blank"
                 rel="noopener"
-                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--border)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
+                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
                 aria-label="Open Twitter"
               >
                 <TwitterIcon
@@ -171,7 +171,7 @@ export default function Footer() {
                 href="https://instagram.com"
                 target="_blank"
                 rel="noopener"
-                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--border)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
+                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
                 aria-label="Open Instagram"
               >
                 <Instagram
@@ -189,7 +189,7 @@ export default function Footer() {
       <div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-[var(--border)] flex flex-col md:flex-row justify-between items-center gap-4 text-[9px] font-bold uppercase tracking-[0.3em] opacity-40">
         <p>© {new Date().getFullYear()} Reframe · MIT License</p>
         <div className="flex items-center gap-2">
-          <span className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]" />
+          <span className="w-1.5 h-1.5 rounded-full bg-[var(--accent)] shadow-[0_0_8px_var(--accent)]" />
           Processing happens locally
         </div>
       </div>
diff --git a/src/components/ImageOverlay.tsx b/src/components/ImageOverlay.tsx
index 1f74359b..9af09391 100644
--- a/src/components/ImageOverlay.tsx
+++ b/src/components/ImageOverlay.tsx
@@ -59,7 +59,7 @@ export default function ImageOverlayPanel({
   const isSolidOpacity = overlayOpacity > 75;
 
   return (
-    <div className="w-full text-[11px] text-white space-y-3">
+    <div className="w-full text-[11px] text-[var(--text)] space-y-3">
       
       {/* Side-by-Side Area */}
       <div className="flex gap-2.5 items-center w-full">
@@ -67,8 +67,8 @@ export default function ImageOverlayPanel({
         {/* Left Side: Dynamic Upload / Preview Square */}
         <label className={`w-14 h-11 shrink-0 rounded-lg overflow-hidden flex flex-col items-center justify-center transition border ${
           overlayFile 
-            ? "border-[var(--border)] bg-black/40 pointer-events-none" 
-            : "border-dashed border-[#2d4266] hover:bg-white/5 text-[#c7d8f7] hover:text-white cursor-pointer"
+            ? "border-[var(--border)] bg-[var(--bg)] pointer-events-none"
+            : "border-dashed border-[var(--border)] hover:bg-[var(--accent-muted)] text-[var(--muted)] hover:text-[var(--text)] cursor-pointer"
         }`}>
           {thumbUrl ? (
             <Image
@@ -96,7 +96,7 @@ export default function ImageOverlayPanel({
         </label>
 
         {/* Right Side: Horizontal Details Card */}
-        <div className="flex-1 min-w-0 h-11 rounded-lg border border-[var(--border)] bg-[#121d30]/20 flex items-center justify-between px-3 gap-2.5">
+        <div className="flex-1 min-w-0 h-11 rounded-lg border border-[var(--border)] bg-[var(--bg)] flex items-center justify-between px-3 gap-2.5">
           {overlayFile ? (
             <>
               {/* File Info block */}
@@ -116,7 +116,7 @@ export default function ImageOverlayPanel({
                 type="button"
                 onClick={() => setOverlayFile(null)}
                 aria-label="Remove overlay image"
-                className="w-6 h-6 rounded flex items-center justify-center bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 transition shrink-0"
+                className="w-6 h-6 rounded flex items-center justify-center bg-[var(--error-bg)] hover:bg-[var(--error-hover)] text-[var(--error)] border border-[var(--error-border)] transition shrink-0"
               >
                 <Trash2 size={11} aria-hidden="true" />
               </button>
@@ -143,11 +143,11 @@ export default function ImageOverlayPanel({
                   onClick={() => setOverlayPosition(value)}
                   className={`rounded border py-0.5 text-center text-[10px] transition flex items-center justify-center gap-0.5 ${
                     overlayPosition === value
-                      ? "border-film-500 text-white bg-film-600/10"
-                      : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                      ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                      : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                   }`}
                 >
-                  <span className={overlayPosition === value ? "text-film-400" : "text-[var(--muted)]"}>
+                  <span className={overlayPosition === value ? "text-[var(--accent)]" : "text-[var(--muted)]"}>
                     {icon}
                   </span>
                   <span>{label}</span>
@@ -165,8 +165,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlaySize(100)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isSmallSize
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 Small
@@ -176,8 +176,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlaySize(250)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isMediumSize
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 Medium
@@ -187,8 +187,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlaySize(450)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isLargeSize
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 Large
@@ -205,8 +205,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlayOpacity(25)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isFaintOpacity
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 25%
@@ -216,8 +216,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlayOpacity(60)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isMediumOpacity
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 60%
@@ -227,8 +227,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlayOpacity(100)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isSolidOpacity
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 100%
@@ -239,4 +239,4 @@ export default function ImageOverlayPanel({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
index 57bc329c..e2706342 100644
--- a/src/components/ScrollToTop.tsx
+++ b/src/components/ScrollToTop.tsx
@@ -34,7 +34,7 @@ export default function ScrollToTop() {
       className="
         fixed bottom-5 right-5 z-50
         h-12 w-12 rounded-full
-        bg-black text-white shadow-lg
+        bg-[var(--accent)] text-white shadow-[var(--shadow)]
         flex items-center justify-center
         md:hidden
       "
@@ -42,4 +42,4 @@ export default function ScrollToTop() {
       ↑
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index b94b2b13..03e32bef 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -17,9 +17,10 @@ export function ThemeToggle() {
         bg-[var(--surface)]
         text-[var(--text)]
         border border-[var(--border)]
-        hover:opacity-90
-        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
-        transition-colors duration-200
+        hover:border-[var(--accent)] hover:bg-[var(--accent-muted)]
+        focus:outline-none focus:ring-2 focus:ring-[var(--accent)] focus:ring-offset-2
+        focus:ring-offset-[var(--bg)]
+        transition-all duration-200
       "
     >
       {isDark ? (
diff --git a/src/components/ThumbnailStrip.tsx b/src/components/ThumbnailStrip.tsx
index 22c1b5e7..f5094722 100644
--- a/src/components/ThumbnailStrip.tsx
+++ b/src/components/ThumbnailStrip.tsx
@@ -43,6 +43,10 @@ export default function ThumbnailStrip({
     objectUrlsRef.current = [];
   }, []);
 
+  const cancelThumbnailRun = useCallback(() => {
+    lastRunIdRef.current += 1;
+  }, []);
+
   const generateThumbnails = useCallback(async () => {
     if (!videoSrc || duration <= 0) return;
 
@@ -144,11 +148,10 @@ export default function ThumbnailStrip({
       generateThumbnails();
     }
     return () => {
-      // Increment ref to invalidate any pending async operations
-      lastRunIdRef.current++;
+      cancelThumbnailRun();
       revokeAllObjectUrls();
     };
-  }, [generateThumbnails, revokeAllObjectUrls, videoSrc, duration]);
+  }, [cancelThumbnailRun, generateThumbnails, revokeAllObjectUrls, videoSrc, duration]);
 
   const formatTime = (seconds: number) => {
     const m = Math.floor(seconds / 60);
@@ -239,11 +242,12 @@ export default function ThumbnailStrip({
       <style>{`
         .thumbnail-strip-wrapper {
           width: 100%;
-          background: #0d0d0f;
-          border: 1px solid #1e1e24;
-          border-radius: 10px;
+          background: var(--surface);
+          border: 1px solid var(--border);
+          border-radius: var(--radius);
           overflow: hidden;
           font-family: 'SF Mono', 'Fira Code', monospace;
+          box-shadow: var(--shadow);
         }
 
         .strip-header {
@@ -251,8 +255,8 @@ export default function ThumbnailStrip({
           align-items: center;
           gap: 12px;
           padding: 8px 14px;
-          background: #111115;
-          border-bottom: 1px solid #1e1e24;
+          background: var(--bg);
+          border-bottom: 1px solid var(--border);
         }
 
         .strip-label {
@@ -263,14 +267,14 @@ export default function ThumbnailStrip({
           font-weight: 600;
           letter-spacing: 0.08em;
           text-transform: uppercase;
-          color: #5a5a72;
+          color: var(--muted);
         }
 
         .strip-progress {
           position: relative;
           flex: 1;
           height: 3px;
-          background: #1e1e24;
+          background: var(--border);
           border-radius: 2px;
           overflow: hidden;
           display: flex;
@@ -282,7 +286,7 @@ export default function ThumbnailStrip({
           left: 0;
           top: 0;
           height: 100%;
-          background: linear-gradient(90deg, #4f6ef7, #a78bfa);
+          background: var(--accent);
           border-radius: 2px;
           transition: width 0.2s ease;
         }
@@ -291,14 +295,14 @@ export default function ThumbnailStrip({
           position: absolute;
           right: -28px;
           font-size: 9px;
-          color: #5a5a72;
+          color: var(--muted);
           white-space: nowrap;
         }
 
         .strip-meta {
           margin-left: auto;
           font-size: 10px;
-          color: #3a3a50;
+          color: var(--muted);
         }
 
         .strip-scroll-area {
@@ -306,7 +310,7 @@ export default function ThumbnailStrip({
           overflow-y: hidden;
           padding: 10px 10px 6px;
           scrollbar-width: thin;
-          scrollbar-color: #2a2a35 transparent;
+          scrollbar-color: var(--border) transparent;
         }
 
         .strip-scroll-area::-webkit-scrollbar {
@@ -318,7 +322,7 @@ export default function ThumbnailStrip({
         }
 
         .strip-scroll-area::-webkit-scrollbar-thumb {
-          background: #2a2a35;
+          background: var(--border);
           border-radius: 2px;
         }
 
@@ -331,7 +335,7 @@ export default function ThumbnailStrip({
           width: 106px;
           height: 60px;
           border-radius: 6px;
-          background: linear-gradient(90deg, #111115 25%, #1a1a22 50%, #111115 75%);
+          background: linear-gradient(90deg, var(--bg) 25%, var(--surface) 50%, var(--bg) 75%);
           background-size: 200% 100%;
           animation: shimmer 1.4s infinite;
           flex-shrink: 0;
@@ -382,14 +386,14 @@ export default function ThumbnailStrip({
         .thumb-btn:hover,
         .thumb-btn.hovered {
           transform: translateY(-3px) scale(1.04);
-          box-shadow: 0 8px 24px rgba(0,0,0,0.6);
-          outline-color: rgba(79, 110, 247, 0.5);
+          box-shadow: var(--shadow);
+          outline-color: var(--accent);
           z-index: 2;
         }
 
         .thumb-btn.active {
-          outline-color: #4f6ef7;
-          box-shadow: 0 0 0 2px #4f6ef7, 0 8px 20px rgba(79,110,247,0.3);
+          outline-color: var(--accent);
+          box-shadow: 0 0 0 2px var(--accent), var(--shadow);
           z-index: 3;
         }
 
@@ -407,9 +411,9 @@ export default function ThumbnailStrip({
           left: 0;
           right: 0;
           padding: 3px 4px 3px;
-          background: linear-gradient(transparent, rgba(0,0,0,0.85));
+          background: linear-gradient(transparent, var(--bg));
           font-size: 9px;
-          color: rgba(255,255,255,0.75);
+          color: var(--muted);
           text-align: center;
           letter-spacing: 0.04em;
           pointer-events: none;
@@ -417,7 +421,7 @@ export default function ThumbnailStrip({
         }
 
         .thumb-btn.active .thumb-time {
-          color: #a5b4fc;
+          color: var(--text);
         }
 
         .active-indicator {
@@ -427,8 +431,8 @@ export default function ThumbnailStrip({
           width: 6px;
           height: 6px;
           border-radius: 50%;
-          background: #4f6ef7;
-          box-shadow: 0 0 6px #4f6ef7;
+          background: var(--accent);
+          box-shadow: 0 0 6px var(--accent);
           animation: pulse-dot 1.5s ease-in-out infinite;
         }
 
@@ -439,4 +443,4 @@ export default function ThumbnailStrip({
       `}</style>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/TrimControl.tsx b/src/components/TrimControl.tsx
index 577dc1fa..aa064cd2 100644
--- a/src/components/TrimControl.tsx
+++ b/src/components/TrimControl.tsx
@@ -256,7 +256,9 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             aria-label="Trim start time in seconds"
             aria-invalid={invalidStart}
             aria-describedby={invalidStart ? "trim-start-error" : undefined}
-            className={`${inputClass} ${invalidStart ? "border-red-500 focus:ring-red-400" : "border-[var(--border)]"}`}
+            className={`${inputClass} ${
+              invalidStart ? "border-[var(--error)]" : "border-[var(--border)]"
+            }`}
             placeholder="0"
           />
           {invalidStart && (
@@ -290,7 +292,9 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             aria-label="Trim end time in seconds"
             aria-invalid={invalidEnd}
             aria-describedby={invalidEnd ? "trim-end-error" : undefined}
-            className={`${inputClass} ${invalidEnd ? "border-red-500 focus:ring-red-400" : "border-[var(--border)]"}`}
+            className={`${inputClass} ${
+              invalidEnd ? "border-[var(--error)]" : "border-[var(--border)]"
+            }`}
             placeholder={duration > 0 ? `${duration.toFixed(1)}` : "full length"}
           />
           {invalidEnd && (
@@ -313,7 +317,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
       )}
       {recipe.trimEnd !== null &&
         recipe.trimEnd - recipe.trimStart < MIN_CLIP_DURATION && (
-          <p className="text-[10px] text-red-500 font-heading">
+          <p className="text-[10px] text-[var(--error)] font-heading">
             Clip must be at least 0.1 seconds long.
           </p>
       )}
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 0fb4429e..d971fc7b 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -331,7 +331,7 @@ export default function VideoEditor() {
         paddingTop: 'clamp(0.5rem,2vw,0.75rem)',
       }}
     >
-      <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-green-400 inline-block animate-pulse" />
+      <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-[var(--accent)] inline-block animate-pulse" />
       No login. No ads. 100% private.
     </div>
   </div>  
@@ -339,7 +339,7 @@ export default function VideoEditor() {
     className="flex flex-wrap justify-center text-center items-center gap-2 text-sm font-heading font-semibold uppercase tracking-widest text-[var(--muted)] pb-1"
     style={{ justifyContent: 'center', textAlign: 'center', margin: '0', width: 'auto' }}
   >
-    <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-green-400 inline-block animate-pulse" />
+    <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-[var(--accent)] inline-block animate-pulse" />
     No login. No ads. 100% private - your video never leaves your device.
   </div>
     </header>
@@ -605,7 +605,7 @@ export default function VideoEditor() {
             (isProcessing || !file) && "pointer-events-none opacity-50"
           )}>
             {!file && (
-              <div className="bg-film-50 dark:bg-film-900/10 border border-film-100 dark:border-film-900/20 rounded-xl p-4 animate-fade-in">
+              <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-4 animate-fade-in">
                 <p className="text-[10px] font-heading font-bold text-film-600 uppercase tracking-widest">
                   Getting Started
                 </p>
@@ -669,7 +669,7 @@ export default function VideoEditor() {
                 "w-full flex items-center justify-center gap-3 py-5 min-h-[44px] rounded-xl",
                 "font-display text-2xl tracking-widest transition-all duration-200",
                 file && !isProcessing
-                  ? "bg-film-600 hover:bg-film-700 hover:scale-[1.01] text-white shadow-lg shadow-film-200 active:scale-[0.98] cursor-pointer"
+                  ? "bg-[var(--accent)] hover:bg-[var(--accent-hover)] hover:scale-[1.02] text-white shadow-[var(--shadow)] active:scale-[0.98] cursor-pointer"
                   : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
               )}
             >
@@ -687,4 +687,4 @@ export default function VideoEditor() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/VideoPreview.tsx b/src/components/VideoPreview.tsx
index 0f20882c..d684c1e5 100644
--- a/src/components/VideoPreview.tsx
+++ b/src/components/VideoPreview.tsx
@@ -217,14 +217,14 @@ export default function VideoPreview({
       <div
         ref={previewContainerRef}
         role="group"
-        className="relative w-full rounded-lg overflow-hidden bg-[#0a0a0a] aspect-video focus:outline-none focus-visible:ring-2 focus-visible:ring-film-500"
+        className="relative w-full rounded-lg overflow-hidden bg-[var(--bg)] aspect-video focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
         tabIndex={0}
         onKeyDown={handleKeyDown}
         aria-label="Video preview (press Space to play/pause)"
       >
         {isLoading && (
           <div
-            className="absolute inset-0 animate-pulse bg-gray-700 rounded-xl transition-opacity duration-300"
+            className="absolute inset-0 animate-pulse bg-[var(--surface)] rounded-xl transition-opacity duration-300"
             aria-label="Loading video preview"
           />
         )}
@@ -246,18 +246,18 @@ export default function VideoPreview({
             {overlay.mode === "fit" ? (
               // Letterbox: semi-transparent bars outside the content area
               <>
-                <div className="absolute left-0 right-0 top-0 bg-black/50" style={{ height: overlay.barTop }} />
-                <div className="absolute left-0 right-0 bottom-0 bg-black/50" style={{ height: overlay.barBottom }} />
-                <div className="absolute top-0 bottom-0 left-0 bg-black/50" style={{ width: overlay.barLeft }} />
-                <div className="absolute top-0 bottom-0 right-0 bg-black/50" style={{ width: overlay.barRight }} />
+                <div className="absolute left-0 right-0 top-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ height: overlay.barTop }} />
+                <div className="absolute left-0 right-0 bottom-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ height: overlay.barBottom }} />
+                <div className="absolute top-0 bottom-0 left-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ width: overlay.barLeft }} />
+                <div className="absolute top-0 bottom-0 right-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ width: overlay.barRight }} />
               </>
             ) : (
               // Fill/crop: dashed border around the surviving area, dimmed outside
               <>
-                <div className="absolute left-0 right-0 top-0 bg-red-900/50" style={{ height: overlay.barTop }} />
-                <div className="absolute left-0 right-0 bottom-0 bg-red-900/50" style={{ height: overlay.barBottom }} />
-                <div className="absolute top-0 bottom-0 left-0 bg-red-900/50" style={{ width: overlay.barLeft }} />
-                <div className="absolute top-0 bottom-0 right-0 bg-red-900/50" style={{ width: overlay.barRight }} />
+                <div className="absolute left-0 right-0 top-0 bg-[var(--error-bg)]" style={{ height: overlay.barTop }} />
+                <div className="absolute left-0 right-0 bottom-0 bg-[var(--error-bg)]" style={{ height: overlay.barBottom }} />
+                <div className="absolute top-0 bottom-0 left-0 bg-[var(--error-bg)]" style={{ width: overlay.barLeft }} />
+                <div className="absolute top-0 bottom-0 right-0 bg-[var(--error-bg)]" style={{ width: overlay.barRight }} />
                 <div
                   className="absolute border-2 border-dashed border-film-400"
                   style={{
@@ -291,8 +291,8 @@ export default function VideoPreview({
             onClick={() => setShowOverlay((v) => !v)}
             className={`absolute top-2 left-2 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto ${
               showOverlay
-                ? "bg-film-600 text-white"
-                : "bg-black/60 text-white/70 hover:bg-black/80"
+                ? "bg-[var(--accent)] text-white"
+                : "bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)]"
             }`}
             aria-pressed={showOverlay}
             aria-label={showOverlay ? "Hide framing overlay" : "Show framing overlay"}
@@ -309,8 +309,8 @@ export default function VideoPreview({
             onClick={() => setShowComparison((v) => !v)}
             className={`absolute top-2 right-32 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto ${
               showComparison
-                ? "bg-film-600 text-white"
-                : "bg-black/60 text-white/70 hover:bg-black/80"
+                ? "bg-[var(--accent)] text-white"
+                : "bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)]"
             }`}
             aria-pressed={showComparison}
             aria-label={showComparison ? "Hide comparison preview" : "Show comparison preview"}
@@ -325,7 +325,7 @@ export default function VideoPreview({
           <button
             type="button"
             onClick={handleGrabFrame}
-            className="absolute top-2 right-2 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto bg-black/60 text-white/70 hover:bg-black/80 flex items-center gap-1"
+            className="absolute top-2 right-2 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] flex items-center gap-1"
             aria-label="Grab frame as PNG"
             title="Download current frame as PNG"
           >
diff --git a/src/components/WaveformCanvas.tsx b/src/components/WaveformCanvas.tsx
index cff6a6bc..ee75055c 100644
--- a/src/components/WaveformCanvas.tsx
+++ b/src/components/WaveformCanvas.tsx
@@ -35,7 +35,7 @@ export default function WaveformCanvas({ samples, loading, hasAudio }: Props) {
     const midY = height / 2;
 
     // Read theme colour from :root — falls back to a visible purple
-    const accentColor = getCssVar("--film-500", "#8b5cf6");
+    const accentColor = getCssVar("--accent", "#4f6ef7");
 
     if (!hasAudio || samples.length === 0) {
       // Flat centre line for silent videos
@@ -92,4 +92,4 @@ export default function WaveformCanvas({ samples, loading, hasAudio }: Props) {
       className="w-full h-16 rounded-md border border-[var(--border)] bg-[var(--surface)]"
     />
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/components.tsx b/src/components/components.tsx
index b4994015..bd5241a5 100644
--- a/src/components/components.tsx
+++ b/src/components/components.tsx
@@ -14,10 +14,7 @@ export function Card({ title, description, children, className = "" }: CardProps
   return (
     <div
       className={`
-        rounded-xl border p-6
-        bg-[var(--surface)]
-        border-[var(--border)]
-        shadow-sm
+        rounded-[var(--radius)] border border-[var(--border)] bg-[var(--surface)] p-6 shadow-[var(--shadow)]
         ${className}
       `}
     >
@@ -46,21 +43,21 @@ export function Button({ variant = "primary", className = "", children, ...props
     primary: `
       bg-[var(--accent)]
       text-white
-      hover:opacity-90
-      focus:ring-blue-500
+      hover:bg-[var(--accent-hover)] hover:scale-[1.02]
+      focus:ring-[var(--accent)]
     `,
     secondary: `
-      bg-[var(--surface)]
+      bg-[var(--accent-muted)]
       text-[var(--text)]
-      border border-[var(--border)]
-      hover:opacity-90
-      focus:ring-gray-400
+      border border-[var(--accent)]
+      hover:bg-[var(--surface)] hover:scale-[1.02]
+      focus:ring-[var(--accent)]
     `,
     ghost: `
       bg-transparent
-      text-[var(--text)]
-      hover:bg-[var(--surface)]
-      focus:ring-gray-400
+      text-[var(--muted)]
+      hover:bg-[var(--accent-muted)] hover:text-[var(--text)]
+      focus:ring-[var(--accent)]
     `,
   };
 
@@ -68,9 +65,10 @@ export function Button({ variant = "primary", className = "", children, ...props
     <button
       className={`
         inline-flex items-center justify-center gap-2
-        rounded-lg px-4 py-2 text-sm font-medium
+        rounded-[var(--radius)] px-4 py-2 text-sm font-medium
         focus:outline-none focus:ring-2 focus:ring-offset-2
-        transition-colors duration-200
+        focus:ring-offset-[var(--bg)]
+        transition-all duration-200
         disabled:opacity-50 disabled:cursor-not-allowed
         ${variants[variant]}
         ${className}
@@ -89,14 +87,10 @@ export function Input({ className = "", ...props }: React.InputHTMLAttributes<HT
   return (
     <input
       className={`
-        w-full rounded-lg px-3 py-2 text-sm
-        bg-[var(--bg)]
-        text-[var(--text)]
-        border border-[var(--border)]
-        placeholder-[var(--muted)]
-        focus:outline-none focus:ring-2 focus:ring-blue-500
-        focus:border-transparent
-        transition-colors duration-200
+        w-full rounded-[var(--radius)] border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm text-[var(--text)]
+        placeholder:text-[var(--muted)]
+        focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-muted)]
+        transition-all duration-200
         ${className}
       `}
       {...props}
@@ -114,10 +108,10 @@ interface BadgeProps {
 
 export function Badge({ label, variant = "default" }: BadgeProps) {
   const variants = {
-    default:  "bg-[var(--surface)] text-[var(--text)] border border-[var(--border)]",
-    success:  "bg-[var(--surface)] text-[var(--text)] border border-[var(--border)]",
-    warning:  "bg-[var(--surface)] text-[var(--text)] border border-[var(--border)]",
-    error:    "bg-[var(--surface)] text-[var(--text)] border border-[var(--border)]",
+    default: "bg-[var(--accent-muted)] text-[var(--text)]",
+    success: "bg-[var(--accent-muted)] text-[var(--text)]",
+    warning: "bg-[var(--accent-muted)] text-[var(--text)]",
+    error: "bg-[var(--error-bg)] text-[var(--error)]",
   };
 
   return (
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ddb67756..c79da9a2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,17 +17,17 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
         film: {
-          50: "var(--film-50)",
-          100: "var(--film-100)",
-          200: "var(--film-200)",
-          300: "var(--film-300)",
-          400: "var(--film-400)",
-          500: "var(--film-500)",
-          600: "var(--film-600)",
-          700: "var(--film-700)",
-          800: "var(--film-800)",
-          900: "var(--film-900)",
-          950: "var(--film-950)",
+          50: "var(--accent-muted)",
+          100: "var(--accent-muted)",
+          200: "color-mix(in srgb, var(--accent) 30%, var(--border))",
+          300: "color-mix(in srgb, var(--accent) 55%, var(--border))",
+          400: "var(--accent)",
+          500: "var(--accent)",
+          600: "var(--accent)",
+          700: "var(--accent-hover)",
+          800: "var(--text)",
+          900: "var(--text)",
+          950: "var(--bg)",
         },
       },
       keyframes: {
diff --git a/vitest.config.ts b/vitest.config.ts
index 38167032..220799df 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,6 +1,11 @@
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
+  oxc: {
+    jsx: {
+      runtime: 'automatic',
+    },
+  },
   test: {
     environment: 'jsdom',
     globals: true,
diff --git a/vitest.setup.ts b/vitest.setup.ts
index eecd4a61..d2973f28 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,2 +1,16 @@
 // Vitest setup: polyfills and global mocks
 import '@testing-library/jest-dom/vitest'
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+})