@hyperframes/studio 0.8.104 → 0.8.105

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   HyperframesLogo
-} from "./chunk-62DDWOSH.js";
+} from "./chunk-EEXSYY5F.js";
 import {
   DOCK_PANEL_COMPONENT,
   LAYER_REVEAL_PRIOR_POSITION_ATTR,
@@ -67,7 +67,7 @@ import {
   whenPreviewBooted,
   wrapTimeline,
   writeStudioUiPreferences
-} from "./chunk-HIGHVWYD.js";
+} from "./chunk-QADHJFDF.js";
 import {
   Button,
   ContextMenu,
@@ -99,7 +99,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-6GAO75IU.js";
+} from "./chunk-NCUBAVGK.js";
 import {
   DOM_EDIT_LAYER_OBSERVER_INIT,
   buildDefaultDomEditTextField,
@@ -532,6 +532,12 @@ if (typeof window !== "undefined") {
 // src/player/components/ShortcutsPanel.tsx
 import { useState, useCallback as useCallback2, useEffect as useEffect2, useId, useRef as useRef2, memo } from "react";
 
+// src/components/timelineToolbarStyles.ts
+var flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
+var flatIdle = `${flatBtn} text-text-2 hover:bg-hover hover:text-text-0 active:bg-press active:scale-[0.98]`;
+var flatActive = `${flatBtn} bg-on text-text-0 hover:bg-on-hover active:scale-[0.98]`;
+var flatDisabled = `${flatBtn} text-text-off cursor-not-allowed`;
+
 // src/hooks/useContextMenuDismiss.ts
 import { useCallback, useEffect, useRef } from "react";
 function useContextMenuDismiss(onClose) {
@@ -709,7 +715,7 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
         ref: triggerRef,
         type: "button",
         onClick: () => setShowShortcuts((v) => !v),
-        className: `flex h-7 w-7 items-center justify-center rounded-md transition-colors ${showShortcuts ? "text-neutral-200" : "text-neutral-600 hover:text-neutral-300"}`,
+        className: showShortcuts ? flatActive : flatIdle,
         "aria-label": "Shortcuts and tools",
         "aria-expanded": showShortcuts,
         "aria-controls": shortcutsPanelId,
@@ -741,10 +747,8 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
         tabIndex: -1,
         role: "dialog",
         "aria-label": "Keyboard shortcuts and tools",
-        className: "absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto outline-hidden",
+        className: "absolute bottom-full right-0 mb-2 z-50 rounded-lg border border-border bg-raised shadow-popover min-w-[220px] overflow-y-auto outline-hidden",
         style: {
-          background: "#161618",
-          border: "1px solid rgba(255,255,255,0.08)",
           maxHeight: "min(280px, calc(100vh - 80px))"
         },
         children: [
@@ -777,20 +781,13 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
               ) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)" } }),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
           /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2.5 pb-2", children: [
             /* @__PURE__ */ jsx("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: "Work area" }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center",
-                      style: { background: "rgba(255,255,255,0.05)" },
-                      children: "I"
-                    }
-                  ),
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover", children: "I" }),
                   /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: "In-point" })
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: inPoint !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -820,14 +817,7 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center",
-                      style: { background: "rgba(255,255,255,0.05)" },
-                      children: "O"
-                    }
-                  ),
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover", children: "O" }),
                   /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: "Out-point" })
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: outPoint !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -857,18 +847,11 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)" } }),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
           /* @__PURE__ */ jsx("div", { className: "px-3 pt-2.5 pb-3 flex flex-col gap-3", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: section.title }),
             /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: section.hints.map((hint, hintIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center",
-                  style: { background: "rgba(255,255,255,0.05)" },
-                  children: hint.key
-                }
-              ),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center bg-hover", children: hint.key }),
               /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: hint.label })
             ] }, hintIndex)) })
           ] }, sectionIndex)) })
@@ -1039,7 +1022,7 @@ var VolumeControl = memo3(function VolumeControl2({
         disabled,
         "aria-label": muteLabel,
         "aria-pressed": silent,
-        className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${silent ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"}`,
+        className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${silent ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"}`,
         children: /* @__PURE__ */ jsx3(VolumeIcon, { muted: audioMuted, volume: audioVolume })
       }
     ) })
@@ -1085,7 +1068,7 @@ var LoopButton = memo4(function LoopButton2({
         setLoopEnabled(!loopEnabled);
       },
       disabled,
-      className: `flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:opacity-30 ${loopEnabled ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"}`,
+      className: `flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:opacity-30 ${loopEnabled ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"}`,
       "aria-label": loopEnabled ? "Disable loop playback" : "Enable loop playback",
       "aria-pressed": loopEnabled,
       children: /* @__PURE__ */ jsxs4(
@@ -1123,7 +1106,7 @@ var FullscreenButton = memo4(function FullscreenButton2({
         trackStudioEvent("playback", { action: "fullscreen_toggle", active: !isFullscreen });
         onToggleFullscreen();
       },
-      className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors ${isFullscreen ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"}`,
+      className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors ${isFullscreen ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"}`,
       "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
       children: /* @__PURE__ */ jsx4(
         "svg",
@@ -1221,7 +1204,7 @@ var PlayerControls = memo4(function PlayerControls2({
                 children: [
                   /* @__PURE__ */ jsx4("span", { ref: timeDisplayRef, children: formatTime(0) }),
                   timeDisplayMode === "time" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                    /* @__PURE__ */ jsx4("span", { className: "mx-0.5 text-neutral-700", children: "/" }),
+                    /* @__PURE__ */ jsx4("span", { className: "mx-0.5 text-text-off", children: "/" }),
                     /* @__PURE__ */ jsx4("span", { className: "text-neutral-600", children: formatTime(duration) })
                   ] }) : null
                 ]
@@ -6590,7 +6573,7 @@ function MiniCurveSvg({
     {
       d,
       fill: "none",
-      stroke: active ? "#3CE6AC" : "#737373",
+      className: active ? "stroke-accent-ink" : "stroke-text-muted",
       strokeWidth: "1.5",
       strokeLinecap: "round"
     }
@@ -6630,7 +6613,7 @@ var EasePresetGrid = function EasePresetGrid2({
           /* @__PURE__ */ jsx11(
             "span",
             {
-              className: `text-center text-[8px] leading-none ${isActive ? "text-panel-accent" : "text-neutral-500"}`,
+              className: `text-center text-[8px] leading-none ${isActive ? "text-accent-ink" : "text-neutral-500"}`,
               children: preset.label
             }
           )
@@ -6647,7 +6630,7 @@ function EaseModeToggle({
   return /* @__PURE__ */ jsx11(
     "div",
     {
-      className: "mb-2 grid grid-cols-3 rounded-md bg-black/20 p-0.5",
+      className: "mb-2 grid grid-cols-3 rounded-md bg-press p-0.5",
       role: "radiogroup",
       "aria-label": "Ease editor mode",
       children: EASE_MODES.map((candidateMode) => {
@@ -6753,7 +6736,7 @@ function EaseBezierField({
             }
           },
           onBlur: (event) => commit(event.currentTarget.value),
-          className: `w-full rounded border bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden ${error ? "border-red-500/70 focus:border-red-400" : "border-white/10 focus:border-panel-accent/50"}`
+          className: `w-full rounded border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden ${error ? "border-danger-ink/70 focus:border-danger-ink" : "border-border focus:border-panel-accent/50"}`
         }
       )
     ] }),
@@ -6762,7 +6745,7 @@ function EaseBezierField({
       {
         id: errorId,
         "aria-live": "polite",
-        className: `mt-1 text-[9px] text-red-400 ${error ? "" : "sr-only"}`,
+        className: `mt-1 text-[9px] text-danger-ink ${error ? "" : "sr-only"}`,
         children: error ?? "Valid bezier values"
       }
     )
@@ -6830,7 +6813,7 @@ function SpringBounceField({
           const bounce = parseSpringBounce2(`spring(${value})`);
           if (bounce !== null) onCommit(`spring(${round2(bounce)})`);
         },
-        className: "w-16 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+        className: "w-16 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
       }
     )
   ] });
@@ -6851,7 +6834,7 @@ function WiggleField({
           min: 1,
           step: 1,
           onCommit: (value) => commitWiggle(onCommit, value, config.type, amplitude),
-          className: "w-14 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+          className: "w-14 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         }
       )
     ] }),
@@ -6867,7 +6850,7 @@ function WiggleField({
               commitWiggle(onCommit, config.wiggles, event.currentTarget.value, amplitude);
             }
           },
-          className: "rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50",
+          className: "rounded-sm border border-border bg-input px-1.5 py-1 text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50",
           children: WIGGLE_TYPES.map((type) => /* @__PURE__ */ jsx12("option", { value: type, children: type }, type))
         }
       )
@@ -6883,7 +6866,7 @@ function WiggleField({
           max: 1,
           step: 0.01,
           onCommit: (value) => commitWiggle(onCommit, config.wiggles, config.type, value),
-          className: "w-16 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+          className: "w-16 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         }
       )
     ] })
@@ -6902,7 +6885,6 @@ var VMAX = 1 + HR / S;
 var VMIN = -HR / S;
 var DRAG_VMAX = 2;
 var DRAG_VMIN = -1;
-var ACCENT = "#3CE6AC";
 function EaseTypeDropdown({
   kind,
   ease,
@@ -6971,7 +6953,7 @@ function EaseTypeDropdown({
         "aria-expanded": open,
         "aria-controls": open ? menuId : void 0,
         onClick: () => setOpen((prev) => !prev),
-        className: "flex w-full items-center gap-2 rounded-md border border-white/10 bg-black/20 px-2 py-1.5 text-left transition-colors hover:border-white/20",
+        className: "flex w-full items-center gap-2 rounded-md border border-border bg-input px-2 py-1.5 text-left transition-colors hover:border-border-strong",
         children: [
           /* @__PURE__ */ jsx13(MiniCurveSvg, { ease, active: true, size: 16 }),
           /* @__PURE__ */ jsx13("span", { className: "text-[11px] text-neutral-200", children: label }),
@@ -6997,7 +6979,7 @@ function EaseTypeDropdown({
         role: "menu",
         "aria-label": `${MODE_LABELS[kind]} ease presets`,
         onKeyDown: handleMenuKeyDown,
-        className: "absolute inset-x-0 top-full z-20 mt-1 rounded-md border border-white/10 bg-neutral-900 p-2 shadow-xl",
+        className: "absolute inset-x-0 top-full z-20 mt-1 rounded-md border border-border bg-raised p-2 shadow-xl",
         children: /* @__PURE__ */ jsx13(
           EasePresetGrid,
           {
@@ -7184,7 +7166,7 @@ function EaseCurveSection({
       /* @__PURE__ */ jsx13(
         "div",
         {
-          className: "mx-auto overflow-hidden rounded-md border border-white/5 bg-black/20",
+          className: "mx-auto overflow-hidden rounded-md border border-border bg-input",
           style: { aspectRatio: `${SVGW} / ${SVGH}`, width: "100%", maxWidth: 230 },
           children: /* @__PURE__ */ jsxs9(
             "svg",
@@ -7206,7 +7188,7 @@ function EaseCurveSection({
                     y1: top,
                     x2: xToSvg(q),
                     y2: bottom,
-                    stroke: "white",
+                    className: "stroke-text-0",
                     strokeOpacity: "0.05",
                     strokeWidth: "1"
                   },
@@ -7219,7 +7201,7 @@ function EaseCurveSection({
                     y1: yToSvg(q),
                     x2: right,
                     y2: yToSvg(q),
-                    stroke: "white",
+                    className: "stroke-text-0",
                     strokeOpacity: "0.05",
                     strokeWidth: "1"
                   },
@@ -7233,7 +7215,7 @@ function EaseCurveSection({
                     width: S,
                     height: bottom - top,
                     fill: "none",
-                    stroke: "white",
+                    className: "stroke-text-0",
                     strokeOpacity: "0.1",
                     strokeWidth: "1"
                   }
@@ -7245,7 +7227,7 @@ function EaseCurveSection({
                     y1: a0.y,
                     x2: a1.x,
                     y2: a1.y,
-                    stroke: "white",
+                    className: "stroke-text-0",
                     strokeOpacity: "0.08",
                     strokeWidth: "1",
                     strokeDasharray: "3 4"
@@ -7259,8 +7241,7 @@ function EaseCurveSection({
                       y1: a0.y,
                       x2: p1.x,
                       y2: p1.y,
-                      stroke: ACCENT,
-                      strokeOpacity: "0.5",
+                      className: "stroke-accent-ink",
                       strokeWidth: "1.5"
                     }
                   ),
@@ -7271,8 +7252,7 @@ function EaseCurveSection({
                       y1: a1.y,
                       x2: p2.x,
                       y2: p2.y,
-                      stroke: ACCENT,
-                      strokeOpacity: "0.5",
+                      className: "stroke-accent-ink",
                       strokeWidth: "1.5"
                     }
                   )
@@ -7282,13 +7262,13 @@ function EaseCurveSection({
                   {
                     d: curvePath2,
                     fill: "none",
-                    stroke: ACCENT,
+                    className: "stroke-accent-ink",
                     strokeWidth: "2.5",
                     strokeLinecap: "round"
                   }
                 ),
-                /* @__PURE__ */ jsx13("circle", { cx: a0.x, cy: a0.y, r: "3", fill: ACCENT }),
-                /* @__PURE__ */ jsx13("circle", { cx: a1.x, cy: a1.y, r: "3", fill: ACCENT }),
+                /* @__PURE__ */ jsx13("circle", { cx: a0.x, cy: a0.y, r: "3", className: "fill-accent-ink" }),
+                /* @__PURE__ */ jsx13("circle", { cx: a1.x, cy: a1.y, r: "3", className: "fill-accent-ink" }),
                 showHandles && [["p1", p1], ["p2", p2]].map(([key2, pt]) => /* @__PURE__ */ jsxs9("g", { children: [
                   /* @__PURE__ */ jsx13(
                     "circle",
@@ -7304,7 +7284,7 @@ function EaseCurveSection({
                       "aria-valuemax": 1,
                       "aria-valuenow": key2 === "p1" ? x1 : x2,
                       "aria-valuetext": `x ${key2 === "p1" ? x1 : x2}, y ${key2 === "p1" ? y1 : y2}`,
-                      className: "cursor-grab stroke-transparent outline-hidden active:cursor-grabbing focus-visible:stroke-white focus-visible:stroke-[2px]",
+                      className: "cursor-grab stroke-transparent outline-hidden active:cursor-grabbing focus-visible:stroke-text-0 focus-visible:stroke-[2px]",
                       onPointerDown: (e) => handlePointerDown(key2, e),
                       onKeyDown: (event) => handleKeyDown(key2, event),
                       onPointerEnter: () => setHover(key2),
@@ -7317,10 +7297,8 @@ function EaseCurveSection({
                       cx: pt.x,
                       cy: pt.y,
                       r: hover === key2 || draggingRef.current === key2 ? 7 : 5.5,
-                      fill: "#0a0a1a",
-                      stroke: ACCENT,
                       strokeWidth: "2.5",
-                      className: "pointer-events-none transition-[r]"
+                      className: "pointer-events-none fill-input stroke-accent-ink transition-[r]"
                     }
                   )
                 ] }, key2))
@@ -7591,8 +7569,11 @@ var KeyframeDiamond = memo6(function KeyframeDiamond2({
   isHold = false
 }) {
   const isFilled = state === "active";
-  const opacity = state === "ghost" ? 0.25 : state === "inactive" ? 0.6 : 1;
-  const color = state === "active" ? "#3CE6AC" : "#a3a3a3";
+  const color = {
+    active: "text-accent",
+    inactive: "text-text-2 hover:text-text-0",
+    ghost: "text-text-off hover:text-text-0"
+  }[state];
   return /* @__PURE__ */ jsx15(
     "button",
     {
@@ -7601,8 +7582,7 @@ var KeyframeDiamond = memo6(function KeyframeDiamond2({
         e.stopPropagation();
         onClick();
       },
-      className: "relative shrink-0 p-0.5 transition-opacity hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']",
-      style: { color, opacity },
+      className: `relative shrink-0 p-0.5 transition-colors before:absolute before:-inset-1.5 before:content-[''] ${color}`,
       title,
       "aria-label": title,
       "aria-pressed": state === "active",
@@ -7667,12 +7647,12 @@ function ArrowLeft({ disabled }) {
       height: "10",
       viewBox: "0 0 6 10",
       fill: "none",
-      style: { opacity: disabled ? 0.25 : 1 },
+      className: disabled ? "text-text-off" : "text-text-2",
       children: /* @__PURE__ */ jsx16(
         "path",
         {
           d: "M5 1L1 5L5 9",
-          stroke: "#a3a3a3",
+          stroke: "currentColor",
           strokeWidth: "1.4",
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -7689,12 +7669,12 @@ function ArrowRight({ disabled }) {
       height: "10",
       viewBox: "0 0 6 10",
       fill: "none",
-      style: { opacity: disabled ? 0.25 : 1 },
+      className: disabled ? "text-text-off" : "text-text-2",
       children: /* @__PURE__ */ jsx16(
         "path",
         {
           d: "M1 1L5 5L1 9",
-          stroke: "#a3a3a3",
+          stroke: "currentColor",
           strokeWidth: "1.4",
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -10970,7 +10950,7 @@ function ClipLintDot({ element }) {
   return /* @__PURE__ */ jsx21(
     "span",
     {
-      className: "absolute w-1.5 h-1.5 rounded-full bg-amber-400",
+      className: "absolute w-1.5 h-1.5 rounded-full bg-warning-ink",
       style: { top: 7, right: 7 },
       title: lint.messages.join("\n")
     }
@@ -11888,7 +11868,7 @@ var TIMELINE_VIEWPORT_BUDGETS = Object.freeze({
   richPreviewP95Ms: 750,
   constrainedRichPreviewP95Ms: 1200,
   supportedFixtureFallbackRatio: 0.02,
-  scrollSamplesPerRun: 21,
+  scrollSamplesPerRun: 63,
   warmupRuns: 3,
   measuredRuns: 5,
   requiredPassingRuns: 4
@@ -14184,7 +14164,7 @@ var TimelineClip = memo10(function TimelineClip2({
                   width: 2,
                   borderRadius: 1,
                   background: "var(--clip-handle)",
-                  opacity: handleOpacity * 0.6
+                  opacity: handleOpacity
                 }
               }
             )
@@ -14216,7 +14196,7 @@ var TimelineClip = memo10(function TimelineClip2({
                   width: 2,
                   borderRadius: 1,
                   background: "var(--clip-handle)",
-                  opacity: handleOpacity * 0.6
+                  opacity: handleOpacity
                 }
               }
             )
@@ -16614,7 +16594,7 @@ function TrackClipCount({ clipCount }) {
     {
       "aria-label": `${clipCount} clips`,
       title: `${clipCount} clips`,
-      className: "shrink-0 rounded-full bg-white/10 px-1 text-[9px] leading-[14px] tabular-nums text-white/55",
+      className: "shrink-0 rounded-full bg-hover px-1 text-[9px] leading-[14px] tabular-nums text-text-muted",
       children: clipCount
     }
   );
@@ -17123,7 +17103,7 @@ function TimelineFxPopover({
       ref: rootRef,
       role: "dialog",
       "aria-label": "Effects",
-      className: "z-200 flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl",
+      className: "z-200 flex flex-col overflow-hidden rounded-md border border-border bg-raised p-2 shadow-xl",
       style: clampedStyle(anchorRect),
       onKeyDown,
       onPointerDown: (event) => event.stopPropagation(),
@@ -17137,12 +17117,12 @@ function TimelineFxPopover({
             onAuditionTracked: (id) => trackPresetAuditioned(id, { trackKind })
           }
         ) }),
-        /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex shrink-0 items-center justify-between border-t border-white/10 pt-2 text-[10px] text-white/55", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex shrink-0 items-center justify-between border-t border-border pt-2 text-[10px] text-text-muted", children: [
           /* @__PURE__ */ jsx41(
             "button",
             {
               type: "button",
-              className: "hover:text-white",
+              className: "hover:text-text-0",
               onClick: () => {
                 onClose();
                 onOpenRack();
@@ -17154,7 +17134,7 @@ function TimelineFxPopover({
             "button",
             {
               type: "button",
-              className: "hover:text-white",
+              className: "hover:text-text-0",
               onClick: () => {
                 onClose();
                 onOpenRack();
@@ -17644,7 +17624,7 @@ function PropertyGroupNavigation({
   onSeek,
   children
 }) {
-  const CHEVRON_BUTTON_CLASS = "relative h-5 w-3 border-0 bg-transparent p-0 text-white/55 hover:text-white disabled:text-white/15 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
+  const CHEVRON_BUTTON_CLASS = "relative h-5 w-3 border-0 bg-transparent p-0 text-text-2 hover:text-text-0 disabled:text-text-off focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
   const seekTo = (keyframe) => {
     if (keyframe) {
       onSeek?.(expandedElement.start + keyframe.percentage / 100 * expandedElement.duration);
@@ -17711,7 +17691,7 @@ function PropertyGroupHeaderRow({
       tabIndex: rovingTargetId === timelinePropertyRowId(elementId2, lane.group) ? 0 : -1,
       "data-property-group": lane.group,
       "data-timeline-lane-top": getTimelineLaneTop(laneIndex),
-      className: "absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65",
+      className: "absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-text-2",
       style: {
         top: getTimelineLaneTop(laneIndex),
         // The header column narrows to contentOrigin whenever that is under
@@ -17726,13 +17706,13 @@ function PropertyGroupHeaderRow({
           /* @__PURE__ */ jsx44(
             "span",
             {
-              className: "absolute left-1.5 top-0 w-px bg-white/15",
+              className: "absolute left-1.5 top-0 w-px bg-text-0/15",
               style: { height: isLastLane ? "50%" : "100%" }
             }
           ),
-          /* @__PURE__ */ jsx44("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" })
+          /* @__PURE__ */ jsx44("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-text-0/15" })
         ] }),
-        /* @__PURE__ */ jsx44("span", { className: "w-[46px] shrink-0 truncate text-white", title: label, children: label }),
+        /* @__PURE__ */ jsx44("span", { className: "w-[46px] shrink-0 truncate text-text-0", title: label, children: label }),
         /* @__PURE__ */ jsx44(
           PropertyGroupNavigation,
           {
@@ -17747,7 +17727,7 @@ function PropertyGroupHeaderRow({
                 "aria-pressed": !!navigation.currentKeyframe,
                 "aria-label": `${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`,
                 title: `${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`,
-                className: "flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-[#3CE6AC] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]",
+                className: "flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-accent-ink focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring",
                 onClick: (event) => {
                   event.stopPropagation();
                   if (toggleTarget) {
@@ -17762,7 +17742,7 @@ function PropertyGroupHeaderRow({
         /* @__PURE__ */ jsx44(
           "span",
           {
-            className: "min-w-0 flex-1 truncate text-right tabular-nums text-white/45",
+            className: "min-w-0 flex-1 truncate text-right tabular-nums text-text-muted",
             title: valueReadout(lane.group, values),
             children: valueReadout(lane.group, values)
           }
@@ -17790,7 +17770,7 @@ function AutomationLaneHeaderRow({
     {
       "data-automation-lane-label": label,
       "data-timeline-lane-top": top,
-      className: "absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65",
+      className: "absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-text-2",
       style: {
         top,
         width: columnWidth,
@@ -17802,11 +17782,11 @@ function AutomationLaneHeaderRow({
           /* @__PURE__ */ jsx44(
             "span",
             {
-              className: "absolute left-1.5 top-0 w-px bg-white/15",
+              className: "absolute left-1.5 top-0 w-px bg-text-0/15",
               style: { height: isLastLane ? "50%" : "100%" }
             }
           ),
-          /* @__PURE__ */ jsx44("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" })
+          /* @__PURE__ */ jsx44("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-text-0/15" })
         ] }),
         /* @__PURE__ */ jsxs26(
           "button",
@@ -17816,19 +17796,19 @@ function AutomationLaneHeaderRow({
             "aria-label": onReveal ? `Show ${label} in the effect rack` : void 0,
             title: onReveal ? `Show ${label} in the effect rack` : label,
             disabled: !onReveal,
-            className: "flex min-w-0 flex-1 flex-col justify-center rounded-sm border-0 bg-transparent p-0 text-left leading-tight enabled:hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]",
+            className: "flex min-w-0 flex-1 flex-col justify-center rounded-sm border-0 bg-transparent p-0 text-left leading-tight enabled:hover:text-text-0 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring",
             onPointerDown: (event) => event.stopPropagation(),
             onClick: (event) => {
               event.stopPropagation();
               onReveal?.();
             },
             children: [
-              /* @__PURE__ */ jsx44("span", { "data-automation-lane-name": "", className: "truncate font-mono text-[9px] text-white/70", children: name }),
+              /* @__PURE__ */ jsx44("span", { "data-automation-lane-name": "", className: "truncate font-mono text-[9px] text-text-2", children: name }),
               param ? /* @__PURE__ */ jsx44(
                 "span",
                 {
                   "data-automation-lane-param": "",
-                  className: "truncate font-mono text-[9px] text-white/40",
+                  className: "truncate font-mono text-[9px] text-text-muted",
                   children: param
                 }
               ) : null,
@@ -17836,7 +17816,7 @@ function AutomationLaneHeaderRow({
                 "span",
                 {
                   "data-automation-lane-also": "",
-                  className: "truncate text-[9px] text-[#F5C542]/80",
+                  className: "truncate text-[9px] text-warning-ink",
                   title: `${alsoAutomatedBy} is also fading this \u2014 the two multiply.`,
                   children: [
                     alsoAutomatedBy,
@@ -17853,7 +17833,7 @@ function AutomationLaneHeaderRow({
             type: "button",
             "aria-label": `Remove ${label} automation`,
             title: `Remove ${label} automation`,
-            className: "flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-white/35 hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]",
+            className: "flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-text-muted hover:text-text-0 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring",
             onPointerDown: (event) => event.stopPropagation(),
             onClick: (event) => {
               event.stopPropagation();
@@ -21121,8 +21101,7 @@ function TimelineLanes({
                           color: ts.label,
                           fontSize: 11,
                           letterSpacing: "0.06em",
-                          textTransform: "uppercase",
-                          opacity: 0.5
+                          textTransform: "uppercase"
                         },
                         children: "New track"
                       }
@@ -21457,7 +21436,7 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
             "aria-hidden": "true",
             "data-testid": "timeline-ghost-lane",
             "data-active": ghostLaneActive || void 0,
-            className: `pointer-events-none absolute flex items-center justify-center rounded-lg border border-dashed text-[11px] transition-colors duration-150 ${ghostLaneActive ? "border-studio-accent/60 bg-studio-accent/6 text-studio-accent" : "border-neutral-700/50 text-neutral-500"}`,
+            className: `pointer-events-none absolute flex items-center justify-center rounded-lg border border-dashed text-[11px] transition-colors duration-150 ${ghostLaneActive ? "border-studio-accent/60 bg-studio-accent/6 text-accent-ink" : "border-neutral-700/50 text-neutral-500"}`,
             style: {
               top: props.rowGeometry.getRowTop(ghostLaneRow) + CLIP_Y,
               left: props.contentOrigin,
@@ -21798,7 +21777,7 @@ function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }) {
       ] })
     ] }),
     elementsInRange.length > 0 && /* @__PURE__ */ jsx56("div", { className: "px-4 py-2 border-b border-neutral-800/40 max-h-24 overflow-y-auto", children: elementsInRange.map((el) => /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between py-0.5", children: [
-      /* @__PURE__ */ jsxs36("span", { className: "text-[10px] font-mono text-studio-accent/80", children: [
+      /* @__PURE__ */ jsxs36("span", { className: "text-[10px] font-mono text-accent-ink/80", children: [
         "#",
         el.id
       ] }),
@@ -21821,14 +21800,14 @@ function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }) {
         className: "w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-hidden focus:border-studio-accent/40 transition-colors"
       }
     ) }),
-    copyError && /* @__PURE__ */ jsx56("p", { className: "px-3 pb-2 text-[10px] text-red-400", role: "alert", children: "Copy failed \u2014 check clipboard permissions and try again." }),
+    copyError && /* @__PURE__ */ jsx56("p", { className: "px-3 pb-2 text-[10px] text-danger-ink", role: "alert", children: "Copy failed \u2014 check clipboard permissions and try again." }),
     /* @__PURE__ */ jsxs36("div", { className: "grid grid-cols-2 gap-2 px-3 pb-3", children: [
       /* @__PURE__ */ jsx56(
         "button",
         {
           onClick: handleCopyPrompt,
           disabled: !buildPromptCopyText(prompt),
-          className: `py-1.5 text-[11px] font-medium rounded-lg transition-all border ${copiedPromptOnly ? "bg-green-500/20 text-green-400 border-green-500/30" : "bg-neutral-800/70 text-neutral-200 border-neutral-700/50 hover:bg-neutral-800"} disabled:opacity-50 disabled:cursor-not-allowed`,
+          className: `py-1.5 text-[11px] font-medium rounded-lg transition-all border ${copiedPromptOnly ? "bg-accent/15 text-accent-ink border-accent/30" : "bg-neutral-800/70 text-neutral-200 border-neutral-700/50 hover:bg-neutral-800"} disabled:opacity-50 disabled:cursor-not-allowed`,
           children: copiedPromptOnly ? "Prompt Copied!" : "Copy Prompt"
         }
       ),
@@ -21836,10 +21815,10 @@ function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }) {
         "button",
         {
           onClick: handleCopy2,
-          className: `py-1.5 text-[11px] font-medium rounded-lg transition-all ${copiedAgentPrompt ? "bg-green-500/20 text-green-400 border border-green-500/30" : "bg-studio-accent/15 text-studio-accent border border-studio-accent/25 hover:bg-studio-accent/25"}`,
+          className: `py-1.5 text-[11px] font-medium rounded-lg transition-all ${copiedAgentPrompt ? "bg-accent/15 text-accent-ink border border-accent/30" : "bg-studio-accent/15 text-accent-ink border border-studio-accent/25 hover:bg-studio-accent/25"}`,
           children: [
             copiedAgentPrompt ? "Copied!" : "Copy to Agent",
-            !copiedAgentPrompt && /* @__PURE__ */ jsx56("span", { className: "text-[9px] text-studio-accent/50 ml-1.5", children: "Cmd+Enter" })
+            !copiedAgentPrompt && /* @__PURE__ */ jsx56("span", { className: "text-[9px] text-text-muted ml-1.5", children: "Cmd+Enter" })
           ]
         }
       )
@@ -21893,7 +21872,7 @@ function useMenuKeyboardNav(menuRef) {
 // src/player/components/KeyframeDiamondContextMenu.tsx
 import { jsx as jsx57, jsxs as jsxs37 } from "react/jsx-runtime";
 var ITEM_CLS = "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
-var DESTRUCTIVE_ITEM_CLS = "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
+var DESTRUCTIVE_ITEM_CLS = "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
 function KeyframeDiamondContextMenu({
   state,
   onClose,
@@ -22000,7 +21979,7 @@ function KeyframeDiamondContextMenu({
             {
               type: "button",
               role: "menuitem",
-              className: "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-950/40 focus-visible:bg-red-950/40 outline-hidden cursor-pointer text-left",
+              className: "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-danger/25 focus-visible:bg-danger/25 outline-hidden cursor-pointer text-left",
               onClick: () => {
                 onDeleteAll(state.element, state.animationId);
                 onClose();
@@ -22172,7 +22151,7 @@ var ClipContextMenu = memo14(function ClipContextMenu2({
             {
               type: "button",
               role: "menuitem",
-              className: "w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left",
+              className: "w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left",
               onClick: () => {
                 onDelete(element);
                 onClose();
@@ -22537,7 +22516,7 @@ function TimelineEmptyState({
                   strokeWidth: "1.5",
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
-                  className: "text-studio-accent shrink-0",
+                  className: "text-accent-ink shrink-0",
                   children: [
                     /* @__PURE__ */ jsx62("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
                     /* @__PURE__ */ jsx62("polyline", { points: "7 10 12 15 17 10" }),
@@ -22545,7 +22524,7 @@ function TimelineEmptyState({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx62("span", { className: "text-[13px] text-studio-accent", children: "Drop media files to import" })
+              /* @__PURE__ */ jsx62("span", { className: "text-[13px] text-accent-ink", children: "Drop media files to import" })
             ] }) : /* @__PURE__ */ jsxs42(Fragment20, { children: [
               /* @__PURE__ */ jsxs42(
                 "svg",
@@ -22782,10 +22761,7 @@ var ThumbnailScheduler = class {
     this.scrolling = scrolling;
     if (!scrolling) this.pump();
   }
-  /**
-   * Hold server-rendered composition thumbnails while the preview loads a new document: both
-   * are served by the same Studio server, and the preview is what the person is waiting for.
-   */
+  /** Holds composition renders while the preview loads: same server, and the preview is what the person awaits. */
   setPreviewReloading(reloading) {
     if (this.previewReloading === reloading) return;
     this.previewReloading = reloading;
@@ -22909,7 +22885,7 @@ var ThumbnailScheduler = class {
   cacheResult(entry2) {
     const isWaveform = entry2.request.kind === "waveform";
     const byteBudget = isWaveform ? this.budgets.waveformCacheBytes : this.budgets.thumbnailCacheBytes;
-    entry2.cached = entry2.weight <= byteBudget;
+    entry2.cached = !entry2.request.discardWhenReleased && entry2.weight <= byteBudget;
     if (!entry2.cached) return;
     if (isWaveform) this.waveformCacheBytes += entry2.weight;
     else this.cacheBytes += entry2.weight;
@@ -23468,6 +23444,17 @@ function compositionPathOfPreviewUrl(previewUrl) {
   const match = /\/preview\/comp\/([^?#]+)/.exec(previewUrl);
   return match?.[1] ? decodeURIComponent(match[1]) : "index.html";
 }
+function compositionThumbnailRequest(url, projectId, { sessionEpoch = 0, priority = "visible", rich = false } = {}) {
+  return {
+    key: createThumbnailKey({ kind: "composition", url }),
+    projectId,
+    sessionEpoch,
+    kind: "composition",
+    priority,
+    rich,
+    load: (signal) => loadCompositionImage(url, signal)
+  };
+}
 async function loadCompositionImage(url, signal) {
   const response = await fetch(url, { signal });
   if (!response.ok) throw new Error(`Composition thumbnail failed (${response.status})`);
@@ -23510,15 +23497,7 @@ var CompositionThumbnail = memo18(function CompositionThumbnail2({
     contentRevision
   });
   const request = useMemo34(
-    () => ({
-      key: createThumbnailKey({ kind: "composition", url }),
-      projectId,
-      sessionEpoch,
-      kind: "composition",
-      priority,
-      rich: true,
-      load: (signal) => loadCompositionImage(url, signal)
-    }),
+    () => compositionThumbnailRequest(url, projectId, { sessionEpoch, priority, rich: true }),
     [priority, projectId, sessionEpoch, url]
   );
   const snapshot3 = useThumbnailLease(request);
@@ -23558,7 +23537,7 @@ var CompositionThumbnail = memo18(function CompositionThumbnail2({
         ))
       }
     ),
-    snapshot3.status === "loading" && /* @__PURE__ */ jsx66("div", { className: "absolute inset-0 animate-pulse bg-white/[0.035]" }),
+    snapshot3.status === "loading" && /* @__PURE__ */ jsx66("div", { className: "absolute inset-0 animate-pulse bg-text-0/[0.035]" }),
     label && /* @__PURE__ */ jsx66("div", { className: "absolute inset-y-0 left-3 z-10 flex items-center", children: /* @__PURE__ */ jsx66(
       "span",
       {
@@ -27115,7 +27094,7 @@ function PreviewZoomOverlay({
             "button",
             {
               type: "button",
-              className: "rounded px-1.5 py-0.5 font-medium text-studio-accent hover:bg-white/10 transition-colors",
+              className: "rounded px-1.5 py-0.5 font-medium text-accent-ink hover:bg-white/10 transition-colors",
               onClick: onFit,
               "aria-label": "Fit the whole frame in view",
               "data-testid": "preview-zoom-fit",
@@ -27233,8 +27212,7 @@ function usePreviewPoster(projectId, activeKey, directUrl) {
   const renderMissingPoster = useCallback46(() => {
     if (missingForRef.current !== visit || liveReadyForRef.current !== visit) return;
     missingForRef.current = null;
-    void fetch(previewPosterUrl(projectId, false)).catch(() => {
-    });
+    renderPosterForNextOpen(projectId);
   }, [visit, projectId]);
   const onLiveReadyToShowChange = useCallback46(
     (ready) => {
@@ -27259,6 +27237,27 @@ function usePreviewPoster(projectId, activeKey, directUrl) {
     }
   };
 }
+function renderPosterForNextOpen(projectId) {
+  const url = previewPosterUrl(projectId, false);
+  const request = {
+    key: createThumbnailKey({ kind: "poster-render", url }),
+    projectId,
+    sessionEpoch: 0,
+    kind: "composition",
+    priority: "overscan",
+    discardWhenReleased: true,
+    load: async (signal) => {
+      await (await fetch(url, { signal })).arrayBuffer();
+      return { value: { kind: "image", url, aspect: 16 / 9 }, weight: 0 };
+    }
+  };
+  const settled = () => ["ready", "error"].includes(thumbnailScheduler.getSnapshot(request).status);
+  let lease = null;
+  lease = thumbnailScheduler.acquire(request, () => {
+    if (settled()) lease?.release();
+  });
+  if (settled()) lease.release();
+}
 function useVisitNumber(key2) {
   const [seen, setSeen] = useState30({ key: key2, visit: 0 });
   if (seen.key === key2) return seen.visit;
@@ -28019,7 +28018,7 @@ function AssetPreviewOverlay() {
             /* @__PURE__ */ jsx73(
               "button",
               {
-                className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-neutral-800 hover:bg-neutral-700 text-neutral-300 hover:text-white flex items-center justify-center transition-colors z-10",
+                className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-raised hover:bg-press text-text-2 hover:text-text-0 flex items-center justify-center transition-colors z-10",
                 onClick: (e) => {
                   e.stopPropagation();
                   clearPreviewAsset();
@@ -28480,7 +28479,7 @@ function PreviewPane({
     "div",
     {
       ref: containerRef,
-      className: `flex-1 min-h-0 flex flex-col overflow-hidden bg-[var(--studio-preview-bg,var(--color-neutral-950))] ${isFullscreen ? "" : "m-3 rounded-md border border-neutral-800/50"}`,
+      className: `scheme-dark flex-1 min-h-0 flex flex-col overflow-hidden bg-[var(--studio-preview-bg,var(--color-neutral-950))] ${isFullscreen ? "" : "m-3 rounded-md border border-border"}`,
       "data-studio-fullscreen-target": "",
       children: [
         /* @__PURE__ */ jsxs51(
@@ -28736,7 +28735,7 @@ function useMeterLoop(strips, bars, iframeRef) {
   }, [previewIframeRef, bars]);
 }
 function Bar({ maskRef, peakRef }) {
-  return /* @__PURE__ */ jsxs52("div", { className: "relative h-full w-[18px] overflow-hidden rounded-[2px] bg-neutral-900", children: [
+  return /* @__PURE__ */ jsxs52("div", { className: "scheme-dark relative h-full w-[18px] overflow-hidden rounded-[2px] bg-neutral-900", children: [
     /* @__PURE__ */ jsx77(
       "div",
       {
@@ -28772,7 +28771,7 @@ function Bar({ maskRef, peakRef }) {
       {
         ref: peakRef,
         "data-testid": "meter-peak",
-        className: "absolute inset-x-0 bottom-0 h-px bg-white"
+        className: "absolute inset-x-0 bottom-0 h-px bg-text-0"
       }
     )
   ] });
@@ -32114,7 +32113,7 @@ function restoreOriginalTranslateProperty(element) {
   element.removeAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR);
 }
 function clearStudioPathOffset(element) {
-  if (element.hasAttribute(STUDIO_PATH_OFFSET_ATTR) || styleUsesStudioOffset(element.style.getPropertyValue("translate"))) {
+  if (element.hasAttribute(STUDIO_PATH_OFFSET_ATTR) || element.hasAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR) || styleUsesStudioOffset(element.style.getPropertyValue("translate"))) {
     restoreOriginalTranslateProperty(element);
   }
   restoreInlineDisplay(element);
@@ -32444,25 +32443,6 @@ function appendTransformDisplayOps(element, ops) {
     ops.push({ type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: null });
   }
 }
-function buildPathOffsetPatches(element) {
-  const ops = [];
-  collectInlineStyleOps(element, [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP], ops);
-  const inlineTranslate = element.style.getPropertyValue("translate");
-  const hasOffsetVars = element.style.getPropertyValue(STUDIO_OFFSET_X_PROP) || element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
-  const translateValue = inlineTranslate && inlineTranslate !== "none" ? inlineTranslate : hasOffsetVars ? `var(${STUDIO_OFFSET_X_PROP}, 0px) var(${STUDIO_OFFSET_Y_PROP}, 0px)` : null;
-  if (translateValue) {
-    ops.push({ type: "inline-style", property: "translate", value: translateValue });
-  }
-  ops.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" });
-  collectAttributeOps(
-    element,
-    [STUDIO_ORIGINAL_TRANSLATE_ATTR, STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR],
-    ops
-  );
-  collectInlineStyleOps(element, ["display"], ops);
-  collectAttributeOps(element, [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR], ops);
-  return ops;
-}
 function buildClearPathOffsetPatches(element) {
   const originalInlineTranslate = element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
   const ops = [
@@ -32931,10 +32911,32 @@ var UNREADABLE_TRANSLATE = "Studio can't read this layer's translate. Move it in
 function formatTranslatePx(p) {
   return `${roundTo3(p.x)}px ${roundTo3(p.y)}px`;
 }
-function translatePatch(p) {
-  return { type: "inline-style", property: "translate", value: formatTranslatePx(p) };
+var LEGACY_OFFSET_VARS = [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP];
+function writePlainMove(el, p) {
+  writeTranslatePx(el, p);
+  const patches = [
+    { type: "inline-style", property: "translate", value: formatTranslatePx(p) },
+    {
+      type: "attribute",
+      property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
+      value: el.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR)
+    }
+  ];
+  for (const prop of LEGACY_OFFSET_VARS.filter((v) => el.style.getPropertyValue(v))) {
+    el.style.removeProperty(prop);
+    patches.push({ type: "inline-style", property: prop, value: null });
+  }
+  if (el.hasAttribute(STUDIO_PATH_OFFSET_ATTR)) {
+    el.removeAttribute(STUDIO_PATH_OFFSET_ATTR);
+    patches.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: null });
+  }
+  return patches;
 }
 function writeTranslatePx(el, p) {
+  if (!el.hasAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR)) {
+    const own = el.style.getPropertyValue("translate");
+    el.setAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, styleUsesStudioOffset(own) ? "" : own);
+  }
   el.style.setProperty("translate", formatTranslatePx(p));
 }
 function readMoveOffset(el, plainTranslate = !gsapWritesPosition(el)) {
@@ -35371,7 +35373,7 @@ function DomEditRotateHandle({
       title: "Rotate",
       "aria-label": "Rotate selection",
       onPointerDown: onStartRotate,
-      children: /* @__PURE__ */ jsx85("span", { className: "pointer-events-none flex h-[18px] w-[18px] items-center justify-center rounded-full border border-studio-accent/70 bg-studio-surface text-studio-accent shadow-[0_0_3px_rgba(0,0,0,0.45)]", children: /* @__PURE__ */ jsxs58(
+      children: /* @__PURE__ */ jsx85("span", { className: "pointer-events-none flex h-[18px] w-[18px] items-center justify-center rounded-full border border-studio-accent/70 bg-studio-surface text-accent-ink shadow-[0_0_3px_rgba(0,0,0,0.45)]", children: /* @__PURE__ */ jsxs58(
         "svg",
         {
           width: "11",
@@ -35767,7 +35769,7 @@ var CanvasContextMenu = memo24(function CanvasContextMenu2({
             "button",
             {
               type: "button",
-              className: "w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left",
+              className: "w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 cursor-pointer text-left",
               onPointerDown: (e) => {
                 if (e.button !== 0) return;
                 e.preventDefault();
@@ -36324,7 +36326,7 @@ function InlineTextToolbar({
       "data-inline-text-toolbar": "true",
       role: "toolbar",
       "aria-label": "Text formatting",
-      className: "pointer-events-auto fixed z-200 flex items-center gap-1 rounded-lg border border-white/10 bg-[#15171c] p-1 shadow-[0_8px_24px_rgba(0,0,0,0.55)]",
+      className: "pointer-events-auto fixed z-200 flex items-center gap-1 rounded-lg border border-border bg-raised p-1 shadow-[0_8px_24px_rgba(0,0,0,0.55)]",
       style: {
         left: placement.left,
         top: placement.top,
@@ -36337,14 +36339,14 @@ function InlineTextToolbar({
         /* @__PURE__ */ jsxs61(
           "label",
           {
-            className: "group relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-white/10",
+            className: "group relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-hover",
             title: "Text colour",
             children: [
               /* @__PURE__ */ jsx88(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: "h-4 w-4 rounded-full border-2 border-white/25 transition-transform duration-150 group-hover:scale-110 group-active:scale-95",
+                  className: "h-4 w-4 rounded-full border-2 border-border-strong transition-transform duration-150 group-hover:scale-110 group-active:scale-95",
                   style: {
                     background: swatchBackground(placement.colours, styles.color),
                     backgroundOrigin: "border-box"
@@ -36426,7 +36428,7 @@ function ToolbarToggle({
       title: label,
       "aria-label": label,
       "aria-pressed": on,
-      className: `flex h-6 w-6 items-center justify-center rounded-md text-xs ${on ? "bg-studio-accent/20 text-studio-accent" : "text-white/70 hover:bg-white/10"}`,
+      className: `flex h-6 w-6 items-center justify-center rounded-md text-xs ${on ? "bg-studio-accent/20 text-accent-ink" : "text-text-2 hover:bg-hover"}`,
       style: {
         fontWeight: bold ? 700 : 400,
         fontStyle: italic ? "italic" : "normal",
@@ -41103,7 +41105,7 @@ function editableAnimationId(animations, kind, sel) {
 
 // src/components/editor/MotionPathNode.tsx
 import { jsx as jsx93, jsxs as jsxs64 } from "react/jsx-runtime";
-var ACCENT2 = "var(--hf-accent, #3CE6AC)";
+var ACCENT = "var(--hf-accent, #3CE6AC)";
 function MotionPathNode(props) {
   const { cx, cy, r, interactive, removable, grabbing, selected } = props;
   const bx = cx + r * 1.8;
@@ -41123,7 +41125,7 @@ function MotionPathNode(props) {
         stroke: "#0b0f1a",
         strokeWidth: 1.5,
         vectorEffect: "non-scaling-stroke",
-        style: { fill: ACCENT2 }
+        style: { fill: ACCENT }
       }
     ),
     interactive && /* @__PURE__ */ jsx93(
@@ -41158,7 +41160,7 @@ function MotionPathNode(props) {
               stroke: "#0b0f1a",
               strokeWidth: 1,
               vectorEffect: "non-scaling-stroke",
-              style: { fill: ACCENT2 }
+              style: { fill: ACCENT }
             }
           ),
           /* @__PURE__ */ jsx93(
@@ -41484,7 +41486,7 @@ var MotionPathOverlay = memo26(function MotionPathOverlay2({
             strokeWidth: 1.5,
             strokeDasharray: "3 3",
             vectorEffect: "non-scaling-stroke",
-            style: { stroke: ACCENT2 },
+            style: { stroke: ACCENT },
             opacity: 0.85
           }
         )
@@ -41680,7 +41682,7 @@ var MotionPathOverlay = memo26(function MotionPathOverlay2({
             {
               points,
               fill: "none",
-              style: { stroke: ACCENT2 },
+              style: { stroke: ACCENT },
               strokeWidth: 1.5,
               strokeDasharray: "5 5",
               strokeLinejoin: "round",
@@ -41703,7 +41705,7 @@ var MotionPathOverlay = memo26(function MotionPathOverlay2({
               strokeDasharray: "2 2",
               vectorEffect: "non-scaling-stroke",
               className: "pointer-events-none",
-              style: { stroke: ACCENT2 }
+              style: { stroke: ACCENT }
             }
           ),
           abs.map((p, i) => /* @__PURE__ */ jsx94(
@@ -41806,7 +41808,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
           "button",
           {
             type: "button",
-            className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${motionPathArmed ? "bg-studio-accent/20 text-studio-accent" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
+            className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${motionPathArmed ? "bg-studio-accent/20 text-accent-ink" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
             onClick: () => setMotionPathArmed(!motionPathArmed),
             title: motionPathArmed ? "Click the canvas to set the destination" : "Set motion destination",
             "aria-label": "Set motion destination",
@@ -41823,7 +41825,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
             "button",
             {
               type: "button",
-              className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${visible ? "bg-studio-accent/20 text-studio-accent" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
+              className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${visible ? "bg-studio-accent/20 text-accent-ink" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
               onClick: toggle,
               title: `${label} ${visible ? "on" : "off"}`,
               "aria-label": `Toggle ${label.toLowerCase()}`,
@@ -41837,7 +41839,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
           "button",
           {
             type: "button",
-            className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${prefs.snapEnabled ? "bg-studio-accent/20 text-studio-accent" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
+            className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${prefs.snapEnabled ? "bg-studio-accent/20 text-accent-ink" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
             onClick: toggleSnap,
             title: prefs.snapEnabled ? "Snap enabled (S)" : "Snap disabled (S)",
             "aria-label": "Toggle snap",
@@ -41850,7 +41852,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
             {
               ref: gridButtonRef,
               type: "button",
-              className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${prefs.gridVisible ? "bg-studio-accent/20 text-studio-accent" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
+              className: `rounded-md p-1.5 transition-colors active:scale-[0.95] ${prefs.gridVisible ? "bg-studio-accent/20 text-accent-ink" : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"}`,
               onClick: toggleGrid,
               onContextMenu: (e) => {
                 e.preventDefault();
@@ -41877,7 +41879,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
             "div",
             {
               ref: popoverRef,
-              className: "absolute right-0 top-full mt-1 rounded-lg bg-neutral-800 border border-neutral-700 p-3 shadow-xl min-w-[180px]",
+              className: "absolute right-0 top-full mt-1 rounded-lg bg-raised border border-border p-3 shadow-xl min-w-[180px]",
               children: [
                 /* @__PURE__ */ jsxs66("label", { className: "flex items-center justify-between text-xs text-white/80 mb-2", children: [
                   /* @__PURE__ */ jsx95("span", { children: "Grid spacing" }),
@@ -42137,7 +42139,7 @@ function PreviewOverlays({
       {
         type: "button",
         onClick: enterCaptionMode,
-        className: "pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-studio-accent focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent",
+        className: "pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-accent-ink focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent",
         children: "Edit captions"
       }
     )
@@ -43771,7 +43773,7 @@ var CaptionTimeline = memo29(function CaptionTimeline2({
                 tabIndex: 0,
                 "aria-label": `Caption word "${seg.text}"`,
                 "aria-pressed": isSelected,
-                className: `absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer focus-visible:ring-1 focus-visible:ring-white outline-hidden${isSelected ? " ring-1 ring-white/50 z-10" : ""}`,
+                className: `absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer focus-visible:ring-1 focus-visible:ring-text-0 outline-hidden${isSelected ? " ring-1 ring-text-0/50 z-10" : ""}`,
                 style: {
                   left,
                   width,
@@ -43796,7 +43798,7 @@ var CaptionTimeline = memo29(function CaptionTimeline2({
         /* @__PURE__ */ jsx98(
           "div",
           {
-            className: "absolute top-0 bottom-0 w-px bg-white/70 pointer-events-none z-20",
+            className: "absolute top-0 bottom-0 w-px bg-text-0/70 pointer-events-none z-20",
             style: { left: playheadLeft },
             "aria-hidden": "true"
           }
@@ -46035,7 +46037,7 @@ function WindowMenu() {
               onClick: () => togglePanel(id),
               className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-neutral-300 hover:bg-neutral-800",
               children: [
-                /* @__PURE__ */ jsx101("span", { className: "w-3 text-panel-accent", children: openPanels.has(id) ? "\u2713" : "" }),
+                /* @__PURE__ */ jsx101("span", { className: "w-3 text-accent-ink", children: openPanels.has(id) ? "\u2713" : "" }),
                 PANEL_DEFINITIONS[id].title
               ]
             },
@@ -47103,7 +47105,7 @@ function InspectorHeaderActions({
           track2("button", "Copy element info");
           onCopy();
         },
-        className: `flex h-6 w-6 items-center justify-center rounded transition-colors ${copied ? "text-studio-accent" : "text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"}`,
+        className: `flex h-6 w-6 items-center justify-center rounded transition-colors ${copied ? "text-accent-ink" : "text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"}`,
         title: copied ? "Copied!" : "Copy element info to clipboard",
         children: /* @__PURE__ */ jsxs75(
           "svg",
@@ -48138,7 +48140,7 @@ function SegmentedControl({
             onChange(option.value);
           },
           "aria-pressed": option.value === value,
-          className: `min-w-0 truncate rounded px-2 py-[5px] text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${option.value === value ? "bg-panel-hover text-white" : "text-panel-text-4 hover:text-panel-text-2"}`,
+          className: `min-w-0 truncate rounded px-2 py-[5px] text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${option.value === value ? "bg-panel-hover text-text-0" : "text-panel-text-4 hover:text-panel-text-2"}`,
           children: option.label
         },
         option.value
@@ -48489,7 +48491,7 @@ function MediaSection({
         /* @__PURE__ */ jsx110("div", { className: "h-1 overflow-hidden rounded-full bg-panel-border", children: /* @__PURE__ */ jsx110(
           "div",
           {
-            className: `h-full rounded-full ${removeProgress.status === "failed" ? "bg-red-400" : "bg-studio-accent"}`,
+            className: `h-full rounded-full ${removeProgress.status === "failed" ? "bg-danger-ink" : "bg-studio-accent"}`,
             style: { width: `${Math.max(0, Math.min(100, removeProgress.progress))}%` }
           }
         ) })
@@ -48791,7 +48793,7 @@ function ColorGradingSliderControl({
             event.stopPropagation();
             settings.onClick();
           },
-          className: `relative flex h-5 w-5 shrink-0 items-center justify-center rounded transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40 ${settings.active ? "text-studio-accent" : "text-panel-text-5"}`,
+          className: `relative flex h-5 w-5 shrink-0 items-center justify-center rounded transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40 ${settings.active ? "text-accent-ink" : "text-panel-text-5"}`,
           title: settings.label,
           children: [
             /* @__PURE__ */ jsx111(Settings, { size: 11 }),
@@ -49256,7 +49258,7 @@ function ColorGradingControls({
             }
           )
         ] }),
-        lutImportError && /* @__PURE__ */ jsx112("div", { className: "text-[10px] text-red-400", role: "alert", children: lutImportError }),
+        lutImportError && /* @__PURE__ */ jsx112("div", { className: "text-[10px] text-danger-ink", role: "alert", children: lutImportError }),
         grading.lut && /* @__PURE__ */ jsxs79("div", { className: "grid gap-2", children: [
           selectedProjectLut && /* @__PURE__ */ jsxs79("div", { className: "flex min-w-0 items-start gap-2 text-[10px] leading-4 text-panel-text-3", children: [
             /* @__PURE__ */ jsx112("span", { className: "mt-[5px] h-1.5 w-1.5 shrink-0 rounded-full bg-studio-accent" }),
@@ -50127,7 +50129,7 @@ function useColorGradingController({
 // src/components/editor/propertyPanelColorGradingSection.tsx
 import { jsx as jsx113, jsxs as jsxs80 } from "react/jsx-runtime";
 function StatusPill({ status }) {
-  const dotClass = status.state === "active" ? "bg-emerald-400" : status.state === "pending" ? "bg-amber-300" : status.state === "unavailable" ? "bg-red-400" : "bg-panel-text-5";
+  const dotClass = status.state === "active" ? "bg-accent" : status.state === "pending" ? "bg-warning-ink" : status.state === "unavailable" ? "bg-danger-ink" : "bg-panel-text-5";
   return /* @__PURE__ */ jsxs80(
     "div",
     {
@@ -50149,16 +50151,16 @@ function HdrMediaWarning({ metadata }) {
     metadata.color.colorPrimaries,
     metadata.color.colorTransfer
   ].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs80("div", { className: "mb-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] leading-4 text-amber-100", children: [
+  return /* @__PURE__ */ jsxs80("div", { className: "mb-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] leading-4 text-warning-ink", children: [
     /* @__PURE__ */ jsxs80("div", { className: "mb-1 flex min-w-0 items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxs80("span", { className: "font-semibold", children: [
         metadata.color.label,
         " source"
       ] }),
-      /* @__PURE__ */ jsx113("span", { className: "rounded-sm bg-amber-400/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-100", children: "SDR preview" })
+      /* @__PURE__ */ jsx113("span", { className: "rounded-sm bg-amber-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-warning-ink", children: "SDR preview" })
     ] }),
-    /* @__PURE__ */ jsx113("p", { className: "text-amber-100/80", children: "These controls use the current SDR shader preview path. Render may stay HDR-tagged, but this is not true HDR color grading yet." }),
-    details && /* @__PURE__ */ jsx113("p", { className: "mt-1 truncate text-[10px] text-amber-100/55", children: details })
+    /* @__PURE__ */ jsx113("p", { className: "text-text-2", children: "These controls use the current SDR shader preview path. Render may stay HDR-tagged, but this is not true HDR color grading yet." }),
+    details && /* @__PURE__ */ jsx113("p", { className: "mt-1 truncate text-[10px] text-text-muted", children: details })
   ] });
 }
 function HoldBeforeButton({
@@ -50215,7 +50217,7 @@ function HoldBeforeButton({
         event.preventDefault();
         onHoldChange(false);
       },
-      className: `flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${active ? "bg-studio-accent text-black" : "text-panel-text-4 hover:bg-panel-hover hover:text-panel-text-1"} disabled:cursor-not-allowed disabled:opacity-40`,
+      className: `flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${active ? "bg-studio-accent text-on-accent" : "text-panel-text-4 hover:bg-panel-hover hover:text-panel-text-1"} disabled:cursor-not-allowed disabled:opacity-40`,
       title: "Hold to show original",
       children: /* @__PURE__ */ jsx113(Compare, { size: 13 })
     }
@@ -51208,7 +51210,7 @@ function FontFamilyField({
           type: "button",
           disabled: disabled || loadingLocalFonts,
           onClick: loadBrowserLocalFonts,
-          className: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700",
+          className: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-text-off",
           children: loadingLocalFonts ? "..." : "Local"
         }
       ),
@@ -51218,7 +51220,7 @@ function FontFamilyField({
           type: "button",
           disabled: disabled || importingFonts || !onImportFonts,
           onClick: () => fontInputRef.current?.click(),
-          className: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700",
+          className: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-text-off",
           children: importingFonts ? "..." : "Import"
         }
       ),
@@ -51636,7 +51638,7 @@ function VariablesBindElement({
           className: `${VARIABLES_INPUT_CLASS} font-mono`
         }
       ),
-      existingDecl && /* @__PURE__ */ jsxs84("p", { className: "text-[9px] leading-snug text-amber-400/90", children: [
+      existingDecl && /* @__PURE__ */ jsxs84("p", { className: "text-[9px] leading-snug text-warning-ink", children: [
         '"',
         trimmedId,
         '" already exists. This element will use its current value',
@@ -51827,7 +51829,7 @@ function PromotableControl({
     bound && /* @__PURE__ */ jsxs85(
       "span",
       {
-        className: "pointer-events-none absolute -top-2 right-1.5 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded-sm bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent",
+        className: "pointer-events-none absolute -top-2 right-1.5 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded-sm bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-accent-ink",
         title: `Bound to variable "${promote.boundId}"`,
         children: [
           "\u25C6 ",
@@ -51844,7 +51846,7 @@ function PromotableControl({
           e.stopPropagation();
           promote.promote();
         },
-        className: "absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded-sm bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100",
+        className: "absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded-sm bg-raised/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-accent-ink hover:opacity-100",
         children: "\u25C7 var"
       }
     )
@@ -52304,7 +52306,7 @@ function ImageFillField({
             type: "button",
             disabled: disabled || uploading,
             onClick: () => fileInputRef.current?.click(),
-            className: `inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors ${disabled || uploading ? "cursor-not-allowed text-neutral-600" : "cursor-pointer hover:border-neutral-600 hover:text-white"}`,
+            className: `inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors ${disabled || uploading ? "cursor-not-allowed text-neutral-600" : "cursor-pointer hover:border-neutral-600 hover:text-text-0"}`,
             children: [
               /* @__PURE__ */ jsx121(Plus, { size: 12, className: "shrink-0" }),
               /* @__PURE__ */ jsx121("span", { className: "truncate", children: uploading ? "Uploading\u2026" : "Upload image" })
@@ -52327,7 +52329,7 @@ function ImageFillField({
           }
         )
       ] }),
-      uploadError && /* @__PURE__ */ jsx121("div", { className: "text-[10px] text-red-400", role: "alert", children: uploadError }),
+      uploadError && /* @__PURE__ */ jsx121("div", { className: "text-[10px] text-danger-ink", role: "alert", children: uploadError }),
       imageAssets.length > 0 ? /* @__PURE__ */ jsxs87("div", { className: "space-y-3", children: [
         selectedAsset && /* @__PURE__ */ jsx121("div", { className: "overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900/80", children: /* @__PURE__ */ jsx121(
           "img",
@@ -52491,7 +52493,7 @@ function GradientField({
                 track2("toggle", "Repeat gradient");
                 patch({ repeating: e.target.checked });
               },
-              className: "h-4 w-4 rounded-sm border-neutral-700 bg-neutral-950 text-panel-accent focus:ring-panel-accent"
+              className: "h-4 w-4 rounded-sm border-neutral-700 bg-neutral-950 text-accent-ink focus:ring-panel-accent"
             }
           ),
           "Repeat"
@@ -52511,7 +52513,7 @@ function GradientField({
                 }))
               });
             },
-            className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-600",
+            className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0 disabled:cursor-not-allowed disabled:text-neutral-600",
             children: [
               /* @__PURE__ */ jsx121(ReverseGradientIcon, { size: 16 }),
               "Reverse"
@@ -52605,7 +52607,7 @@ function GradientField({
             disabled: disabled || parsed.stops.length >= 6,
             onClick: () => addStop(),
             title: parsed.stops.length >= 6 ? "Maximum 6 stops" : "Add a gradient stop",
-            className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white active:scale-[0.98] disabled:cursor-not-allowed disabled:text-neutral-600",
+            className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0 active:scale-[0.98] disabled:cursor-not-allowed disabled:text-neutral-600",
             children: [
               /* @__PURE__ */ jsx121(Plus, { size: 12 }),
               "Add stop"
@@ -52644,7 +52646,7 @@ function GradientField({
                 type: "button",
                 disabled: disabled || parsed.stops.length <= 2,
                 onClick: () => removeStop(index),
-                className: "mt-[22px] flex h-10 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-950 text-neutral-400 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-700",
+                className: "mt-[22px] flex h-10 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-950 text-neutral-400 transition-colors hover:border-neutral-600 hover:text-text-0 disabled:cursor-not-allowed disabled:text-text-off",
                 "aria-label": `Remove stop ${index + 1}`,
                 children: /* @__PURE__ */ jsx121(X, { size: 12 })
               }
@@ -52703,6 +52705,7 @@ function BorderRadiusEditor({
     setLinked((l) => !l);
   }, [linked, uniform, tl, onCommit]);
   const path = buildRoundedRectPath(PREVIEW_W, PREVIEW_H, sTL, sTR, sBR, sBL);
+  const dotFill = linked ? "fill-[light-dark(oklch(0.5_0.2_260),#3b82f6)]" : "fill-[light-dark(oklch(0.55_0.2_294),#a78bfa)]";
   return /* @__PURE__ */ jsxs88("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs88("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsxs88(
@@ -52713,27 +52716,11 @@ function BorderRadiusEditor({
           viewBox: `0 0 ${PREVIEW_W} ${PREVIEW_H}`,
           className: "shrink-0",
           children: [
-            /* @__PURE__ */ jsx122(
-              "path",
-              {
-                d: path,
-                fill: "rgba(255,255,255,0.06)",
-                stroke: "rgba(255,255,255,0.24)",
-                strokeWidth: 1.5
-              }
-            ),
-            /* @__PURE__ */ jsx122("circle", { cx: sTL, cy: sTL, r: 3, fill: linked ? "#3b82f6" : "#a78bfa" }),
-            /* @__PURE__ */ jsx122("circle", { cx: PREVIEW_W - sTR, cy: sTR, r: 3, fill: linked ? "#3b82f6" : "#a78bfa" }),
-            /* @__PURE__ */ jsx122(
-              "circle",
-              {
-                cx: PREVIEW_W - sBR,
-                cy: PREVIEW_H - sBR,
-                r: 3,
-                fill: linked ? "#3b82f6" : "#a78bfa"
-              }
-            ),
-            /* @__PURE__ */ jsx122("circle", { cx: sBL, cy: PREVIEW_H - sBL, r: 3, fill: linked ? "#3b82f6" : "#a78bfa" })
+            /* @__PURE__ */ jsx122("path", { d: path, className: "fill-text-0/[0.06] stroke-text-0/25", strokeWidth: 1.5 }),
+            /* @__PURE__ */ jsx122("circle", { cx: sTL, cy: sTL, r: 3, className: dotFill }),
+            /* @__PURE__ */ jsx122("circle", { cx: PREVIEW_W - sTR, cy: sTR, r: 3, className: dotFill }),
+            /* @__PURE__ */ jsx122("circle", { cx: PREVIEW_W - sBR, cy: PREVIEW_H - sBR, r: 3, className: dotFill }),
+            /* @__PURE__ */ jsx122("circle", { cx: sBL, cy: PREVIEW_H - sBL, r: 3, className: dotFill })
           ]
         }
       ),
@@ -53555,7 +53542,7 @@ function TextFieldEditor({
             track2("button", "Remove text field");
             onRemoveTextField(field.key);
           },
-          className: "inline-flex h-7 shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white",
+          className: "inline-flex h-7 shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0",
           children: "Remove"
         }
       )
@@ -53694,7 +53681,7 @@ function TextSection({
                 if (nextKey) setActiveTextFieldKey(nextKey);
               });
             },
-            className: "inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white",
+            className: "inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0",
             children: [
               /* @__PURE__ */ jsx124(Plus, { size: 12, className: "shrink-0" }),
               /* @__PURE__ */ jsx124("span", { className: "truncate", children: "Add text" })
@@ -53942,7 +53929,7 @@ function ComputedTweenNotice({
       {
         type: "button",
         onClick: onUnroll,
-        className: "shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-panel-accent hover:bg-neutral-800",
+        className: "shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-accent-ink hover:bg-neutral-800",
         title: "Rewrite the helper/loop into explicit tweens so this keyframe edits directly",
         children: "Unroll to edit"
       }
@@ -54103,7 +54090,7 @@ function RemoveButton({ onClick, title }) {
     {
       type: "button",
       onClick,
-      className: "relative shrink-0 rounded-sm p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-red-400 active:scale-[0.95]",
+      className: "relative shrink-0 rounded-sm p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-danger-ink active:scale-[0.95]",
       title,
       "aria-label": title,
       children: /* @__PURE__ */ jsx128(
@@ -54390,7 +54377,7 @@ var AnimationCard = memo34(function AnimationCard2({
               /* @__PURE__ */ jsx129(
                 "span",
                 {
-                  className: "rounded-sm bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-panel-accent",
+                  className: "rounded-sm bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-accent-ink",
                   title: METHOD_TOOLTIPS[animation.method],
                   children: methodLabel
                 }
@@ -54546,7 +54533,7 @@ var AnimationCard = memo34(function AnimationCard2({
             )
           ] }) }),
           animation.method === "fromTo" && /* @__PURE__ */ jsxs95("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx129("p", { className: "text-[9px] font-semibold uppercase tracking-wider text-orange-400/70", children: "From" }),
+            /* @__PURE__ */ jsx129("p", { className: "text-[9px] font-semibold uppercase tracking-wider text-warning-ink", children: "From" }),
             /* @__PURE__ */ jsx129("div", { className: "space-y-1.5", children: Object.entries(animation.fromProperties ?? {}).map(([prop, val]) => /* @__PURE__ */ jsx129(
               PropertyRow,
               {
@@ -54568,11 +54555,11 @@ var AnimationCard = memo34(function AnimationCard2({
                 onAdd: (prop) => onAddFromProperty?.(animation.id, prop),
                 onOpen: () => setAddingFromProp(true),
                 onClose: () => setAddingFromProp(false),
-                buttonClassName: "text-[11px] font-medium text-orange-400/70 transition-colors hover:text-orange-300"
+                buttonClassName: "text-[11px] font-medium text-warning-ink transition-colors hover:text-text-0"
               }
             ) })
           ] }),
-          animation.method === "fromTo" && Object.keys(animation.properties).length > 0 && /* @__PURE__ */ jsx129("p", { className: "text-[9px] font-semibold uppercase tracking-wider text-panel-accent/70", children: "To" }),
+          animation.method === "fromTo" && Object.keys(animation.properties).length > 0 && /* @__PURE__ */ jsx129("p", { className: "text-[9px] font-semibold uppercase tracking-wider text-accent-ink", children: "To" }),
           Object.keys(animation.properties).length > 0 && /* @__PURE__ */ jsx129("div", { className: "space-y-1.5", children: Object.entries(animation.properties).map(([prop, val]) => /* @__PURE__ */ jsx129(
             PropertyRow,
             {
@@ -54626,7 +54613,7 @@ var AnimationCard = memo34(function AnimationCard2({
               {
                 type: "button",
                 onClick: () => onDeleteAnimation(animation.id),
-                className: "ml-auto text-[11px] font-medium text-red-400 transition-colors hover:text-red-300",
+                className: "ml-auto text-[11px] font-medium rounded-sm text-danger-ink transition-colors hover:bg-danger/15",
                 title: "Remove this animation",
                 children: "Remove"
               }
@@ -54642,7 +54629,7 @@ var AnimationCard = memo34(function AnimationCard2({
 import { jsx as jsx130, jsxs as jsxs96 } from "react/jsx-runtime";
 var STYLES = {
   classic: {
-    method: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white",
+    method: "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0",
     cancel: "px-1.5 text-[11px] text-neutral-500 hover:text-neutral-300",
     trigger: "text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200"
   },
@@ -54841,8 +54828,8 @@ var GsapAnimationSection = memo35(function GsapAnimationSection2({
   ...callbacks
 }) {
   return /* @__PURE__ */ jsxs98(Section, { title: "Animation", icon: /* @__PURE__ */ jsx132(Film, { size: 15 }), children: [
-    multipleTimelines && /* @__PURE__ */ jsx132("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
-    unsupportedTimelinePattern && /* @__PURE__ */ jsx132("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400", children: `This timeline uses a computed key (window.__timelines[variable]) the editor can't resolve statically. Use a string-literal key (window.__timelines["id"]) or a variable declaration (const tl = gsap.timeline()) to enable editing.` }),
+    multipleTimelines && /* @__PURE__ */ jsx132("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
+    unsupportedTimelinePattern && /* @__PURE__ */ jsx132("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: `This timeline uses a computed key (window.__timelines[variable]) the editor can't resolve statically. Use a string-literal key (window.__timelines["id"]) or a variable declaration (const tl = gsap.timeline()) to enable editing.` }),
     multipleTimelines || unsupportedTimelinePattern ? null : /* @__PURE__ */ jsx132(
       GsapAnimationList,
       {
@@ -55184,7 +55171,7 @@ function Transform3DCube({
         title: keyframed ? "3D transform is keyframed \u2014 click a field diamond to add keyframes" : "Keyframe the 3D transform (animate it over time)",
         "aria-label": "Keyframe 3D transform",
         "aria-pressed": keyframed,
-        className: `absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${keyframed ? "text-[#5ff0bf]" : "text-neutral-500 hover:text-neutral-200"}`,
+        className: `absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${keyframed ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"}`,
         children: /* @__PURE__ */ jsx133(
           "svg",
           {
@@ -55544,7 +55531,7 @@ import { Eye as Eye4, EyeSlash as EyeSlash3 } from "@phosphor-icons/react";
 import { jsx as jsx135, jsxs as jsxs101 } from "react/jsx-runtime";
 var ICON_BY_KIND = { text: Type, media: Film, other: Square };
 var ICON_COLOR_BY_KIND = {
-  text: "text-panel-accent",
+  text: "text-accent-ink",
   media: "text-panel-media",
   other: "text-panel-container"
 };
@@ -55627,7 +55614,7 @@ function PropertyPanelFlatHeader({
             track2("button", "Copy element info");
             onCopy();
           },
-          className: copied ? "text-panel-accent" : void 0,
+          className: copied ? "text-accent-ink" : void 0,
           children: /* @__PURE__ */ jsx135(ClipboardList, { size: 13 })
         }
       ),
@@ -55685,7 +55672,7 @@ function PropertyPanelFlatFooter({
                 height: "13",
                 viewBox: "0 0 16 16",
                 fill: "currentColor",
-                className: "text-panel-accent",
+                className: "text-accent-ink",
                 children: /* @__PURE__ */ jsx136("path", { d: "M8 1l1.4 4.6L14 7l-4.6 1.4L8 13l-1.4-4.6L2 7l4.6-1.4z" })
               }
             ),
@@ -55705,7 +55692,7 @@ function PropertyPanelFlatFooter({
             track2("button", "Gesture recording");
             onToggleRecording();
           },
-          className: recording ? "text-panel-danger animate-pulse" : "text-panel-danger",
+          className: recording ? "text-danger-ink animate-pulse" : "text-danger-ink",
           children: /* @__PURE__ */ jsx136("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", children: recording ? /* @__PURE__ */ jsx136("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1.5" }) : /* @__PURE__ */ jsx136("circle", { cx: "7", cy: "7", r: "6" }) })
         }
       )
@@ -55778,7 +55765,7 @@ function FlatSliderReadout({
           e.stopPropagation();
         },
         onBlur: () => commit(false),
-        className: `w-11 shrink-0 rounded-[3px] border bg-panel-surface px-1 text-right font-mono text-[10px] text-panel-text-0 outline-none ${invalid ? "border-red-400" : "border-panel-accent"}`
+        className: `w-11 shrink-0 rounded-[3px] border bg-panel-surface px-1 text-right font-mono text-[10px] text-panel-text-0 outline-none ${invalid ? "border-dashed border-danger-ink" : "border-panel-accent"}`
       }
     );
   }
@@ -55816,7 +55803,7 @@ var VALUE_TIER_LABEL_CLASS = {
 var VALUE_TIER_VALUE_CLASS = {
   default: "text-panel-text-3",
   explicitDefault: "text-panel-text-0",
-  explicitCustom: "text-panel-accent"
+  explicitCustom: "text-accent-ink"
 };
 
 // src/components/editor/propertyPanelFlatSelectRow.tsx
@@ -56243,7 +56230,7 @@ function FlatSlider({
             "div",
             {
               "data-flat-slider-knob": "true",
-              className: `absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full ${tier === "explicitCustom" ? "h-2 w-2 bg-white" : "h-[7px] w-[7px] bg-panel-text-4"}`,
+              className: `absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full ${tier === "explicitCustom" ? "h-2 w-2 bg-text-0" : "h-[7px] w-[7px] bg-panel-text-4"}`,
               style: { left: `${clampedPct}%` }
             }
           )
@@ -57645,8 +57632,8 @@ function FlatMotionSection({
       }
     ),
     showEffects && /* @__PURE__ */ jsxs110(Fragment41, { children: [
-      multipleTimelines && /* @__PURE__ */ jsx146("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
-      unsupportedTimelinePattern && /* @__PURE__ */ jsx146("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400", children: "This timeline uses a computed key the editor can't resolve statically." }),
+      multipleTimelines && /* @__PURE__ */ jsx146("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
+      unsupportedTimelinePattern && /* @__PURE__ */ jsx146("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This timeline uses a computed key the editor can't resolve statically." }),
       !multipleTimelines && !unsupportedTimelinePattern && /* @__PURE__ */ jsx146(
         GsapAnimationList,
         {
@@ -57802,7 +57789,7 @@ function AutomationToggle({
     "button",
     {
       type: "button",
-      className: `hf-fx-automate w-[16px] shrink-0 rounded-[3px] border font-mono text-[9px] leading-none ${automated ? "border-panel-accent text-panel-accent" : "border-panel-border-input text-panel-text-2 hover:text-panel-text-0"}`,
+      className: `hf-fx-automate w-[16px] shrink-0 rounded-[3px] border font-mono text-[9px] leading-none ${automated ? "border-panel-accent text-accent-ink" : "border-panel-border-input text-panel-text-2 hover:text-panel-text-0"}`,
       "aria-pressed": automated,
       "aria-label": automated ? `Remove ${label} automation` : `Automate ${label}`,
       onClick: () => automated ? onRemoveAutomation?.(paramKey) : onAutomate?.(paramKey),
@@ -57883,7 +57870,7 @@ function FxParamRow({
         /* @__PURE__ */ jsx147(
           "span",
           {
-            className: `hf-fx-label w-[86px] shrink-0 wrap-break-word text-[10px] leading-tight ${automated ? "text-panel-accent" : "text-panel-text-2"}`,
+            className: `hf-fx-label w-[86px] shrink-0 wrap-break-word text-[10px] leading-tight ${automated ? "text-accent-ink" : "text-panel-text-2"}`,
             children: param.label
           }
         ),
@@ -58243,7 +58230,7 @@ function FxCarveMember({
                 children: value
               }
             ),
-            automated ? /* @__PURE__ */ jsx148("span", { className: "text-[#3CE6AC]", children: "A" }) : null
+            automated ? /* @__PURE__ */ jsx148("span", { className: "text-accent-ink", children: "A" }) : null
           ]
         },
         param.key
@@ -58558,7 +58545,7 @@ function Fader2({
     /* @__PURE__ */ jsx149(
       "span",
       {
-        className: `hf-fx-eq-value font-mono text-[9px] tabular-nums ${moved ? "text-panel-accent" : "text-panel-text-2"}`,
+        className: `hf-fx-eq-value font-mono text-[9px] tabular-nums ${moved ? "text-accent-ink" : "text-panel-text-2"}`,
         children: moved ? shown(value) : "0"
       }
     )
@@ -58604,7 +58591,7 @@ function FxEqModule({
             "button",
             {
               type: "button",
-              className: "hf-fx-remove px-1 text-[11px] text-panel-text-2 hover:text-panel-danger",
+              className: "hf-fx-remove px-1 text-[11px] text-panel-text-2 hover:text-danger-ink",
               "aria-label": "Remove Tone",
               disabled,
               onClick: onRemove,
@@ -59039,7 +59026,7 @@ function FxNodeHeader({
       "button",
       {
         type: "button",
-        className: "hf-fx-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-red-400 disabled:opacity-40",
+        className: "hf-fx-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-danger-ink disabled:opacity-40",
         title: "Remove",
         disabled,
         onClick: onRemove,
@@ -59263,7 +59250,7 @@ function FxPresetRun({
             "button",
             {
               type: "button",
-              className: "hf-fx-preset-run-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-red-400 disabled:opacity-40",
+              className: "hf-fx-preset-run-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-danger-ink disabled:opacity-40",
               title: `Remove ${preset.label}`,
               disabled,
               onClick: onRemoveRun,
@@ -60922,7 +60909,7 @@ function FlatMediaSection({
             "data-flat-media-remove-bg": "true",
             disabled: !canRemoveBackground || removeBusy,
             onClick: () => void runBackgroundRemoval(),
-            className: "flex items-center gap-1 text-[10px] font-medium text-panel-accent disabled:cursor-not-allowed disabled:opacity-50",
+            className: "flex items-center gap-1 text-[10px] font-medium text-accent-ink disabled:cursor-not-allowed disabled:opacity-50",
             title: canRemoveBackground ? "Remove background and save a transparent asset" : "Select a project-local image or video asset",
             children: removeBusy ? "Working" : "Remove BG"
           }
@@ -60950,7 +60937,7 @@ function FlatMediaSection({
         /* @__PURE__ */ jsx160("div", { className: "h-1 overflow-hidden rounded-full bg-panel-hover", children: /* @__PURE__ */ jsx160(
           "div",
           {
-            className: `h-full rounded-full ${removeProgress.status === "failed" ? "bg-red-400" : "bg-panel-accent"}`,
+            className: `h-full rounded-full ${removeProgress.status === "failed" ? "bg-danger-ink" : "bg-panel-accent"}`,
             style: { width: `${Math.max(0, Math.min(100, removeProgress.progress))}%` }
           }
         ) })
@@ -61574,7 +61561,7 @@ function CurveGraph({
           onSettle();
         }
       },
-      className: "mx-auto aspect-square w-full max-w-[200px] touch-none rounded-sm border border-panel-border-input bg-black/20 outline-hidden focus:ring-1 focus:ring-panel-accent",
+      className: "mx-auto aspect-square w-full max-w-[200px] touch-none rounded-sm scheme-dark border border-panel-border-input bg-bg-0 outline-hidden focus:ring-1 focus:ring-inset focus:ring-panel-accent",
       children: [
         /* @__PURE__ */ jsx161("defs", { children: /* @__PURE__ */ jsxs123("linearGradient", { id: `hf-hue-axis-${tab.key}`, children: [
           /* @__PURE__ */ jsx161("stop", { offset: "0%", stopColor: "#f33" }),
@@ -61585,7 +61572,7 @@ function CurveGraph({
           /* @__PURE__ */ jsx161("stop", { offset: "83.3%", stopColor: "#f3f" }),
           /* @__PURE__ */ jsx161("stop", { offset: "100%", stopColor: "#f33" })
         ] }) }),
-        [0.25, 0.5, 0.75].map((ratio) => /* @__PURE__ */ jsxs123("g", { stroke: "rgba(255,255,255,0.08)", strokeWidth: "0.5", children: [
+        [0.25, 0.5, 0.75].map((ratio) => /* @__PURE__ */ jsxs123("g", { className: "stroke-text-0/10", strokeWidth: "0.5", children: [
           /* @__PURE__ */ jsx161(
             "line",
             {
@@ -62490,14 +62477,14 @@ function PropertyPanelColorSecondary({
               setSampling(false);
             }
           },
-          className: "flex min-h-7 items-center gap-1.5 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80 disabled:opacity-50",
+          className: "flex min-h-7 items-center gap-1.5 text-[10px] font-medium text-accent-ink hover:text-accent-ink/80 disabled:opacity-50",
           children: [
             /* @__PURE__ */ jsx165(Eyedropper, { size: 12 }),
             sampling ? "Capturing frame" : "Sample color from frame"
           ]
         }
       ),
-      captureError && /* @__PURE__ */ jsx165("p", { role: "alert", className: "text-[9px] leading-4 text-red-300", children: captureError }),
+      captureError && /* @__PURE__ */ jsx165("p", { role: "alert", className: "text-[9px] leading-4 text-danger-ink", children: captureError }),
       sampleFrame && samplePixels && /* @__PURE__ */ jsxs127("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsxs127("div", { className: "flex gap-2 text-[9px]", children: [
           /* @__PURE__ */ jsx165(
@@ -62506,7 +62493,7 @@ function PropertyPanelColorSecondary({
               type: "button",
               "aria-pressed": !showMatte,
               onClick: () => setShowMatte(false),
-              className: !showMatte ? "text-panel-accent" : "text-panel-text-4",
+              className: !showMatte ? "text-accent-ink" : "text-panel-text-4",
               children: "Source"
             }
           ),
@@ -62516,7 +62503,7 @@ function PropertyPanelColorSecondary({
               type: "button",
               "aria-pressed": showMatte,
               onClick: () => setShowMatte(true),
-              className: showMatte ? "text-panel-accent" : "text-panel-text-4",
+              className: showMatte ? "text-accent-ink" : "text-panel-text-4",
               children: "Selection matte"
             }
           )
@@ -63039,9 +63026,9 @@ import { useEffect as useEffect93, useRef as useRef109 } from "react";
 import { isHfColorGradingActive as isHfColorGradingActive3 } from "@hyperframes/core/color-grading";
 import { jsx as jsx167, jsxs as jsxs129 } from "react/jsx-runtime";
 var STATUS_DOT_CLASS = {
-  active: "bg-emerald-400",
-  pending: "bg-amber-300",
-  unavailable: "bg-red-400",
+  active: "bg-accent",
+  pending: "bg-warning-ink",
+  unavailable: "bg-danger-ink",
   missing: "bg-panel-text-5",
   inactive: "bg-panel-text-5"
 };
@@ -63174,24 +63161,17 @@ function HdrBanner({ metadata }) {
     "div",
     {
       "data-flat-grade-hdr-banner": "true",
-      className: "rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1.5 text-[10px] leading-4 text-amber-100",
+      className: "rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1.5 text-[10px] leading-4 text-warning-ink",
       children: [
         /* @__PURE__ */ jsxs130("div", { className: "mb-0.5 flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsxs130("span", { className: "font-semibold", children: [
             metadata.color.label,
             " source"
           ] }),
-          /* @__PURE__ */ jsx168("span", { className: "rounded-sm bg-amber-400/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-100", children: "SDR preview" })
+          /* @__PURE__ */ jsx168("span", { className: "rounded-sm bg-amber-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-warning-ink", children: "SDR preview" })
         ] }),
-        /* @__PURE__ */ jsx168("p", { className: "text-amber-100/80", children: "These controls use the current SDR shader preview path. Render may stay HDR-tagged, but this is not true HDR color grading yet." }),
-        details && /* @__PURE__ */ jsx168(
-          "p",
-          {
-            "data-flat-grade-hdr-detail": "true",
-            className: "mt-0.5 truncate text-[9px] text-amber-100/55",
-            children: details
-          }
-        )
+        /* @__PURE__ */ jsx168("p", { className: "text-text-2", children: "These controls use the current SDR shader preview path. Render may stay HDR-tagged, but this is not true HDR color grading yet." }),
+        details && /* @__PURE__ */ jsx168("p", { "data-flat-grade-hdr-detail": "true", className: "mt-0.5 truncate text-[9px] text-text-muted", children: details })
       ]
     }
   );
@@ -63291,7 +63271,7 @@ function FlatColorGradingSection({
         {
           type: "button",
           onClick: onRequestPresetPreviews,
-          className: "text-[10px] font-medium text-panel-accent hover:text-panel-accent/80",
+          className: "text-[10px] font-medium text-accent-ink hover:text-accent-ink/80",
           children: "Retry look previews"
         }
       ),
@@ -63592,7 +63572,7 @@ function FlatColorGradingSection({
             track2("button", "Apply grade to scope");
             onApplyToScope();
           },
-          className: "text-[11px] font-medium text-panel-accent hover:text-panel-accent/80 disabled:cursor-not-allowed disabled:opacity-50",
+          className: "text-[11px] font-medium text-accent-ink hover:text-accent-ink/80 disabled:cursor-not-allowed disabled:opacity-50",
           children: applyBusy ? "Applying" : "Apply"
         }
       )
@@ -64068,7 +64048,7 @@ function FlatEffectsSection({
             track2("button", "Customize effect palette");
             onCommitColorGrading({ ...grading, palette: fallback });
           },
-          className: "flex min-h-[28px] items-center gap-1 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80",
+          className: "flex min-h-[28px] items-center gap-1 text-[10px] font-medium text-accent-ink hover:text-accent-ink/80",
           children: [
             /* @__PURE__ */ jsx170(Plus, { size: 11 }),
             " Custom palette"
@@ -64179,7 +64159,7 @@ function FlatEffectsSection({
                   type: "button",
                   title: `Remove ${selectedEffect.label}`,
                   onClick: () => removeEffect(selectedEffect),
-                  className: "text-panel-text-4 hover:text-red-300",
+                  className: "text-panel-text-4 hover:text-danger-ink",
                   children: /* @__PURE__ */ jsx170(X, { size: 11 })
                 }
               )
@@ -64222,7 +64202,7 @@ function FlatEffectsSection({
         "data-flat-effects-add-toggle": "true",
         "aria-expanded": catalogOpen,
         onClick: () => setCatalogOpen((open) => !open),
-        className: "flex min-h-[30px] items-center gap-1 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80",
+        className: "flex min-h-[30px] items-center gap-1 text-[10px] font-medium text-accent-ink hover:text-accent-ink/80",
         children: [
           /* @__PURE__ */ jsx170(Plus, { size: 11 }),
           " Add effect"
@@ -64244,7 +64224,7 @@ function FlatEffectsSection({
               "aria-selected": catalogGroup === group.label,
               "data-flat-effect-group": group.label,
               onClick: () => setCatalogGroup(group.label),
-              className: `min-h-[25px] min-w-0 truncate bg-panel-bg px-2 text-[9px] ${catalogGroup === group.label ? "font-medium text-panel-accent" : "text-panel-text-4 hover:text-panel-text-1"}`,
+              className: `min-h-[25px] min-w-0 truncate bg-panel-bg px-2 text-[9px] ${catalogGroup === group.label ? "font-medium text-accent-ink" : "text-panel-text-4 hover:text-panel-text-1"}`,
               children: group.label
             },
             group.label
@@ -64379,15 +64359,47 @@ import {
   resolveBlockCategory
 } from "@hyperframes/core/registry";
 var COLOR_MAP = {
-  transitions: { bg: "bg-blue-500/15", text: "text-blue-400", dot: "bg-blue-400" },
-  vfx: { bg: "bg-purple-500/15", text: "text-purple-400", dot: "bg-purple-400" },
-  social: { bg: "bg-pink-500/15", text: "text-pink-400", dot: "bg-pink-400" },
-  data: { bg: "bg-green-500/15", text: "text-green-400", dot: "bg-green-400" },
-  scenes: { bg: "bg-amber-500/15", text: "text-amber-400", dot: "bg-amber-400" },
-  captions: { bg: "bg-cyan-500/15", text: "text-cyan-400", dot: "bg-cyan-400" },
-  effects: { bg: "bg-rose-500/15", text: "text-rose-400", dot: "bg-rose-400" },
-  "text-effects": { bg: "bg-violet-500/15", text: "text-violet-400", dot: "bg-violet-400" },
-  "code-animation": { bg: "bg-emerald-500/15", text: "text-emerald-400", dot: "bg-emerald-400" }
+  transitions: {
+    bg: "bg-blue-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_255),var(--color-blue-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_255),var(--color-blue-400))]"
+  },
+  vfx: {
+    bg: "bg-purple-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_305),var(--color-purple-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_305),var(--color-purple-400))]"
+  },
+  social: {
+    bg: "bg-pink-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_350),var(--color-pink-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_350),var(--color-pink-400))]"
+  },
+  data: {
+    bg: "bg-green-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_152),var(--color-green-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_152),var(--color-green-400))]"
+  },
+  scenes: { bg: "bg-amber-500/15", text: "text-warning-ink", dot: "bg-warning-ink" },
+  captions: {
+    bg: "bg-cyan-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_212),var(--color-cyan-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_212),var(--color-cyan-400))]"
+  },
+  effects: {
+    bg: "bg-rose-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_13),var(--color-rose-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_13),var(--color-rose-400))]"
+  },
+  "text-effects": {
+    bg: "bg-violet-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_294),var(--color-violet-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_294),var(--color-violet-400))]"
+  },
+  "code-animation": {
+    bg: "bg-emerald-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_163),var(--color-emerald-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_163),var(--color-emerald-400))]"
+  }
 };
 function getCategoryColors(category) {
   return COLOR_MAP[category];
@@ -64492,7 +64504,7 @@ function FlatOverlaysSection({
     return /* @__PURE__ */ jsx171("div", { className: "py-4 text-center text-[10px] text-panel-text-4", children: "Loading overlays\u2026" });
   }
   if (error) {
-    return /* @__PURE__ */ jsx171("div", { className: "py-4 text-center text-[10px] text-red-300", children: error });
+    return /* @__PURE__ */ jsx171("div", { className: "py-4 text-center text-[10px] text-danger-ink", children: error });
   }
   const busy = adding !== null;
   return /* @__PURE__ */ jsx171("div", { "data-flat-overlays": "true", className: FLAT_PREVIEW_GRID, children: overlays.map((overlay) => /* @__PURE__ */ jsxs132(
@@ -64541,7 +64553,7 @@ function FlatOverlaysSection({
             Plus,
             {
               size: 12,
-              className: "absolute right-1.5 top-1.5 text-white opacity-70 drop-shadow-sm group-hover:text-panel-accent group-hover:opacity-100"
+              className: "absolute right-1.5 top-1.5 text-white opacity-70 drop-shadow-sm group-hover:text-accent-ink group-hover:opacity-100"
             }
           )
         ] }),
@@ -65058,7 +65070,7 @@ function GestureRecordPanelButton({
         track2("button", "Gesture recording");
         onToggleRecording();
       },
-      className: `w-full flex items-center justify-center gap-2 rounded-lg py-2 text-[11px] font-medium transition-colors ${recording ? "bg-red-500/15 text-red-400 border border-red-500/30 animate-pulse" : "bg-panel-input text-panel-text-2 hover:bg-panel-hover border border-panel-border"}`,
+      className: `w-full flex items-center justify-center gap-2 rounded-lg py-2 text-[11px] font-medium transition-colors ${recording ? "bg-red-500/15 text-danger-ink border border-red-500/30 animate-pulse" : "bg-panel-input text-panel-text-2 hover:bg-panel-hover border border-panel-border"}`,
       children: [
         /* @__PURE__ */ jsx173(GestureRecordIcon, { recording }),
         recording ? `Stop recording ${(recordingDuration ?? 0).toFixed(1)}s -- press R` : "Record gesture (R) -- move pointer to capture motion"
@@ -65088,14 +65100,14 @@ function FlatEmptyState() {
     /* @__PURE__ */ jsxs135("div", { className: "mt-2 flex w-full flex-col gap-1.5", children: [
       /* @__PURE__ */ jsxs135("span", { className: "flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2", children: [
         /* @__PURE__ */ jsxs135("span", { className: "flex items-center gap-2 text-[11px] text-panel-text-2", children: [
-          /* @__PURE__ */ jsx174("span", { className: "text-panel-danger", children: "\u25CF" }),
+          /* @__PURE__ */ jsx174("span", { className: "text-danger-ink", children: "\u25CF" }),
           "Record a gesture"
         ] }),
         /* @__PURE__ */ jsx174("span", { className: "rounded-sm border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5", children: "R" })
       ] }),
       /* @__PURE__ */ jsxs135("span", { className: "flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2", children: [
         /* @__PURE__ */ jsxs135("span", { className: "flex items-center gap-2 text-[11px] text-panel-text-2", children: [
-          /* @__PURE__ */ jsx174("span", { className: "text-panel-accent", children: "\u2726" }),
+          /* @__PURE__ */ jsx174("span", { className: "text-accent-ink", children: "\u2726" }),
           "Describe a change to the agent"
         ] }),
         /* @__PURE__ */ jsx174("span", { className: "rounded-sm border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5", children: "\u2318K" })
@@ -65108,7 +65120,7 @@ function elementKindGlyph(element) {
     return { glyph: "\u25C6", className: "bg-panel-media/10 text-panel-media" };
   }
   if (element.textFields?.length > 0) {
-    return { glyph: "T", className: "bg-panel-accent/10 text-panel-accent" };
+    return { glyph: "T", className: "bg-panel-accent/10 text-accent-ink" };
   }
   return { glyph: "\u25A6", className: "bg-panel-container/10 text-panel-container" };
 }
@@ -65122,7 +65134,7 @@ function FlatMultiSelectState({
   const hasAudio = !canHideSelections(multiSelectedElements);
   return /* @__PURE__ */ jsxs135("div", { className: "flex flex-col gap-3 px-4 py-3", children: [
     /* @__PURE__ */ jsxs135("div", { className: "flex items-center gap-3 rounded-xl border border-panel-border bg-panel-surface p-3", children: [
-      /* @__PURE__ */ jsx174("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-panel-accent", children: /* @__PURE__ */ jsx174(Layers, { size: 16 }) }),
+      /* @__PURE__ */ jsx174("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-accent-ink", children: /* @__PURE__ */ jsx174(Layers, { size: 16 }) }),
       /* @__PURE__ */ jsxs135("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ jsxs135("div", { className: "text-[13px] font-semibold text-panel-text-0", children: [
           multiSelectCount,
@@ -65745,34 +65757,52 @@ import {
 import { jsx as jsx176 } from "react/jsx-runtime";
 var SZ = 14;
 var W = "duotone";
+var RED = "text-[light-dark(oklch(0.59_0.194_35),oklch(0.71_0.194_35))]";
+var BLUE = "text-[light-dark(oklch(0.56_0.14_253),oklch(0.69_0.14_253))]";
+var GREEN = "text-[light-dark(oklch(0.53_0.192_150),#22C55E)]";
+var GRAY = "text-[light-dark(oklch(0.56_0.019_261),#9CA3AF)]";
+var DIM = "text-[light-dark(oklch(0.55_0.023_264),oklch(0.69_0.023_264))]";
+var ICONS = /* @__PURE__ */ new Map([
+  ["html", [FileHtml, RED]],
+  ["css", [FileCss, "text-[light-dark(oklch(0.5_0.2_266),oklch(0.71_0.2_266))]"]],
+  ["js", [FileJs, "text-[light-dark(oklch(0.56_0.156_101),#F0DB4F)]"]],
+  ["jsx", [FileJsx, "text-[light-dark(oklch(0.55_0.117_219),#61DAFB)]"]],
+  ["ts", [FileTs, BLUE]],
+  ["tsx", [FileTsx, BLUE]],
+  ["json", [FileCode, "text-[light-dark(oklch(0.54_0.182_152),#4ADE80)]"]],
+  ["svg", [FileSvg, "text-[light-dark(oklch(0.58_0.187_48),#F97316)]"]],
+  ["md", [FileMd, GRAY]],
+  ["txt", [FileTxt, GRAY]],
+  ["png", [FilePng, GREEN]],
+  ["jpg", [FileJpg, GREEN]],
+  ["webp", [PhImage, GREEN]],
+  ["mp4", [FileVideo, "text-[light-dark(oklch(0.59_0.2_304),oklch(0.71_0.2_304))]"]],
+  ["mp3", [Waveform, "text-[light-dark(oklch(0.53_0.159_165),#3CE6AC)]"]],
+  ["woff", [TextAa, DIM]]
+]);
+var ALIAS = new Map(
+  Object.entries({
+    mjs: "js",
+    cjs: "js",
+    mts: "ts",
+    mdx: "md",
+    jpeg: "jpg",
+    gif: "webp",
+    ico: "webp",
+    webm: "mp4",
+    mov: "mp4",
+    wav: "mp3",
+    ogg: "mp3",
+    m4a: "mp3",
+    woff2: "woff",
+    ttf: "woff",
+    otf: "woff"
+  })
+);
 function FileIcon({ path }) {
   const ext2 = path.split(".").pop()?.toLowerCase() ?? "";
-  const c = "shrink-0";
-  if (ext2 === "html") return /* @__PURE__ */ jsx176(FileHtml, { size: SZ, weight: W, color: "#E44D26", className: c });
-  if (ext2 === "css") return /* @__PURE__ */ jsx176(FileCss, { size: SZ, weight: W, color: "#264DE4", className: c });
-  if (ext2 === "js" || ext2 === "mjs" || ext2 === "cjs")
-    return /* @__PURE__ */ jsx176(FileJs, { size: SZ, weight: W, color: "#F0DB4F", className: c });
-  if (ext2 === "jsx") return /* @__PURE__ */ jsx176(FileJsx, { size: SZ, weight: W, color: "#61DAFB", className: c });
-  if (ext2 === "ts" || ext2 === "mts")
-    return /* @__PURE__ */ jsx176(FileTs, { size: SZ, weight: W, color: "#3178C6", className: c });
-  if (ext2 === "tsx") return /* @__PURE__ */ jsx176(FileTsx, { size: SZ, weight: W, color: "#3178C6", className: c });
-  if (ext2 === "json") return /* @__PURE__ */ jsx176(FileCode, { size: SZ, weight: W, color: "#4ADE80", className: c });
-  if (ext2 === "svg") return /* @__PURE__ */ jsx176(FileSvg, { size: SZ, weight: W, color: "#F97316", className: c });
-  if (ext2 === "md" || ext2 === "mdx")
-    return /* @__PURE__ */ jsx176(FileMd, { size: SZ, weight: W, color: "#9CA3AF", className: c });
-  if (ext2 === "txt") return /* @__PURE__ */ jsx176(FileTxt, { size: SZ, weight: W, color: "#9CA3AF", className: c });
-  if (ext2 === "png") return /* @__PURE__ */ jsx176(FilePng, { size: SZ, weight: W, color: "#22C55E", className: c });
-  if (ext2 === "jpg" || ext2 === "jpeg")
-    return /* @__PURE__ */ jsx176(FileJpg, { size: SZ, weight: W, color: "#22C55E", className: c });
-  if (ext2 === "webp" || ext2 === "gif" || ext2 === "ico")
-    return /* @__PURE__ */ jsx176(PhImage, { size: SZ, weight: W, color: "#22C55E", className: c });
-  if (ext2 === "mp4" || ext2 === "webm" || ext2 === "mov")
-    return /* @__PURE__ */ jsx176(FileVideo, { size: SZ, weight: W, color: "#A855F7", className: c });
-  if (ext2 === "mp3" || ext2 === "wav" || ext2 === "ogg" || ext2 === "m4a")
-    return /* @__PURE__ */ jsx176(Waveform, { size: SZ, weight: W, color: "#3CE6AC", className: c });
-  if (ext2 === "woff" || ext2 === "woff2" || ext2 === "ttf" || ext2 === "otf")
-    return /* @__PURE__ */ jsx176(TextAa, { size: SZ, weight: W, color: "#6B7280", className: c });
-  return /* @__PURE__ */ jsx176(File2, { size: SZ, weight: W, color: "#6B7280", className: c });
+  const [Glyph, color] = ICONS.get(ALIAS.get(ext2) ?? ext2) ?? [File2, DIM];
+  return /* @__PURE__ */ jsx176(Glyph, { size: SZ, weight: W, className: `shrink-0 ${color}` });
 }
 function buildTree(files) {
   const root = { name: "", fullPath: "", children: /* @__PURE__ */ new Map(), isFile: false };
@@ -65964,7 +65994,7 @@ function ContextMenu2({
           "button",
           {
             role: "menuitem",
-            className: "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-900/30 focus-visible:bg-red-900/30 active:bg-red-900/50 outline-hidden cursor-pointer text-left",
+            className: "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-danger/25 focus-visible:bg-danger/25 active:bg-danger/25 outline-hidden cursor-pointer text-left",
             onClick: () => {
               onDelete(state.targetPath);
               onClose();
@@ -66041,7 +66071,7 @@ function InlineInput({
       className: "flex items-center gap-2 py-0.5 min-h-7",
       style: { paddingLeft: `${8 + depth * 12 + (isFolder ? 0 : 14)}px` },
       children: [
-        isFolder ? /* @__PURE__ */ jsx177(FolderSimple, { size: SZ_ICON, weight: "duotone", color: "#6B7280", className: "shrink-0" }) : /* @__PURE__ */ jsx177(FileIcon, { path: value }),
+        isFolder ? /* @__PURE__ */ jsx177(FolderSimple, { size: SZ_ICON, weight: "duotone", className: `shrink-0 ${DIM}` }) : /* @__PURE__ */ jsx177(FileIcon, { path: value }),
         /* @__PURE__ */ jsxs137("div", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsx177(
             "input",
@@ -66055,11 +66085,11 @@ function InlineInput({
               onKeyDown: handleKeyDown,
               onBlur: handleBlur,
               "aria-invalid": error ? true : void 0,
-              className: `w-full min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border outline-hidden ${error ? "border-red-500/70" : "border-neutral-600 focus:border-[#3CE6AC]"}`,
+              className: `w-full min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border outline-hidden ${error ? "border-danger-ink" : "border-neutral-600 focus:border-accent-ink"}`,
               spellCheck: false
             }
           ),
-          error && /* @__PURE__ */ jsx177("div", { className: "mt-0.5 text-[10px] text-red-400", role: "alert", children: error })
+          error && /* @__PURE__ */ jsx177("div", { className: "mt-0.5 text-[10px] text-danger-ink", role: "alert", children: error })
         ] })
       ]
     }
@@ -66106,7 +66136,7 @@ function DeleteConfirm({
             "button",
             {
               onClick: onCancel,
-              className: "flex-1 px-2 py-1 rounded-sm bg-neutral-700 text-neutral-300 hover:bg-neutral-600 transition-colors",
+              className: "flex-1 px-2 py-1 rounded-sm bg-hover text-neutral-300 hover:bg-press transition-colors",
               children: "Cancel"
             }
           ),
@@ -66114,7 +66144,7 @@ function DeleteConfirm({
             "button",
             {
               onClick: onConfirm,
-              className: "flex-1 px-2 py-1 rounded-sm bg-red-900/60 text-red-300 hover:bg-red-800/60 transition-colors",
+              className: "flex-1 px-2 py-1 rounded-sm bg-danger/15 text-danger-ink hover:bg-danger/25 transition-colors",
               children: "Delete"
             }
           )
@@ -66169,7 +66199,7 @@ var TreeFile = memo37(function TreeFile2({
         lintInfo && lintInfo.count > 0 && /* @__PURE__ */ jsx177(
           "span",
           {
-            className: "shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400 text-center mr-1",
+            className: "shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-warning-ink text-center mr-1",
             title: lintInfo.messages.join("\n"),
             children: lintInfo.count
           }
@@ -66237,7 +66267,7 @@ var TreeFolder = memo37(function TreeFolder2({
           onDrop(e, node.fullPath);
         },
         onDragLeave,
-        className: `w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-neutral-400 hover:bg-neutral-800/30 hover:text-neutral-300 transition-colors ${isDragOver ? "bg-[#3CE6AC]/10 outline-solid outline-1 outline-[#3CE6AC]/40" : ""}`,
+        className: `w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-neutral-400 hover:bg-neutral-800/30 hover:text-neutral-300 transition-colors ${isDragOver ? "bg-accent/10 outline-solid outline-1 outline-accent-ink -outline-offset-1" : ""}`,
         style: { paddingLeft: `${8 + depth * 12}px` },
         children: [
           /* @__PURE__ */ jsx177(Chevron, { size: 10, className: "shrink-0 text-neutral-600" }),
@@ -66493,7 +66523,7 @@ var FileTree = memo38(function FileTree2({
     /* @__PURE__ */ jsxs138(
       "div",
       {
-        className: `flex-1 overflow-y-auto py-1 transition-colors ${dragOverFolder === "" ? "bg-[#3CE6AC]/5 outline-solid outline-1 outline-[#3CE6AC]/30 -outline-offset-1" : ""}`,
+        className: `flex-1 overflow-y-auto py-1 transition-colors ${dragOverFolder === "" ? "bg-accent/5 outline-solid outline-1 outline-accent-ink -outline-offset-1" : ""}`,
         onContextMenu: handleRootContextMenu,
         onDragOver: (e) => {
           e.preventDefault();
@@ -66594,7 +66624,7 @@ var FileTree = memo38(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState149, useCallback as useCallback186, useRef as useRef181, useMemo as useMemo82, useLayoutEffect as useLayoutEffect13 } from "react";
+import { useState as useState149, useCallback as useCallback186, useRef as useRef181, useMemo as useMemo83, useLayoutEffect as useLayoutEffect14 } from "react";
 
 // src/hooks/useRightPanelIntents.ts
 import { useCallback as useCallback92, useEffect as useEffect99, useRef as useRef115 } from "react";
@@ -67328,7 +67358,7 @@ ${pathLine}${lines.join("\n\n")}`;
           children: [
             /* @__PURE__ */ jsxs139("div", { className: "flex items-center justify-between px-5 py-4 border-b border-neutral-800", children: [
               /* @__PURE__ */ jsxs139("div", { className: "flex items-center gap-3", children: [
-                hasIssues ? /* @__PURE__ */ jsx179("div", { className: "w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx179(WarningIcon, { size: 18, className: "text-red-400", weight: "fill" }) }) : /* @__PURE__ */ jsx179("div", { className: "w-8 h-8 rounded-full bg-studio-accent/10 flex items-center justify-center", children: /* @__PURE__ */ jsx179(CheckCircleIcon, { size: 18, className: "text-studio-accent", weight: "fill" }) }),
+                hasIssues ? /* @__PURE__ */ jsx179("div", { className: "w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx179(WarningIcon, { size: 18, className: "text-danger-ink", weight: "fill" }) }) : /* @__PURE__ */ jsx179("div", { className: "w-8 h-8 rounded-full bg-studio-accent/10 flex items-center justify-center", children: /* @__PURE__ */ jsx179(CheckCircleIcon, { size: 18, className: "text-accent-ink", weight: "fill" }) }),
                 /* @__PURE__ */ jsxs139("div", { children: [
                   /* @__PURE__ */ jsx179("h2", { className: "text-sm font-semibold text-neutral-200", children: hasIssues ? `${errors.length} error${errors.length !== 1 ? "s" : ""}, ${warnings.length} warning${warnings.length !== 1 ? "s" : ""}` : "All checks passed" }),
                   /* @__PURE__ */ jsx179("p", { className: "text-xs text-neutral-500", children: title })
@@ -67348,34 +67378,14 @@ ${pathLine}${lines.join("\n\n")}`;
               "button",
               {
                 onClick: handleCopyToAgent,
-                className: `px-3 py-1 text-xs font-medium rounded-lg transition-colors active:scale-[0.98] ${copied ? "bg-green-600 text-white" : copyFailed ? "bg-red-600 text-white" : "bg-studio-accent hover:bg-studio-accent/80 text-white"}`,
+                className: `px-3 py-1 text-xs font-medium rounded-lg transition-colors active:scale-[0.98] ${copied ? "bg-accent text-on-accent" : copyFailed ? "bg-danger text-on-danger" : "bg-accent hover:bg-accent-hover text-on-accent"}`,
                 children: copied ? "Copied!" : copyFailed ? "Copy failed \u2014 check permissions" : "Copy to Agent"
               }
             ) }),
             /* @__PURE__ */ jsxs139("div", { className: "flex-1 overflow-y-auto px-5 py-3", children: [
               !hasIssues && /* @__PURE__ */ jsx179("div", { className: "py-8 text-center text-neutral-500 text-sm", children: "No errors or warnings found. Your composition looks good!" }),
-              errors.map((f, i) => /* @__PURE__ */ jsx179("div", { className: "py-3 border-b border-neutral-800/50 last:border-0", children: /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsx179(WarningIcon, { size: 14, className: "text-red-400 shrink-0 mt-0.5", weight: "fill" }),
-                /* @__PURE__ */ jsxs139("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx179("p", { className: "text-sm text-neutral-200", children: f.message }),
-                  f.file && /* @__PURE__ */ jsx179("p", { className: "text-xs text-neutral-600 font-mono mt-0.5", children: f.file }),
-                  f.fixHint && /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-1 mt-1.5", children: [
-                    /* @__PURE__ */ jsx179(CaretRightIcon, { size: 10, className: "text-studio-accent shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ jsx179("p", { className: "text-xs text-studio-accent", children: f.fixHint })
-                  ] })
-                ] })
-              ] }) }, `e-${i}`)),
-              warnings.map((f, i) => /* @__PURE__ */ jsx179("div", { className: "py-3 border-b border-neutral-800/50 last:border-0", children: /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsx179(WarningIcon, { size: 14, className: "text-amber-400 shrink-0 mt-0.5" }),
-                /* @__PURE__ */ jsxs139("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx179("p", { className: "text-sm text-neutral-300", children: f.message }),
-                  f.file && /* @__PURE__ */ jsx179("p", { className: "text-xs text-neutral-600 font-mono mt-0.5", children: f.file }),
-                  f.fixHint && /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-1 mt-1.5", children: [
-                    /* @__PURE__ */ jsx179(CaretRightIcon, { size: 10, className: "text-studio-accent shrink-0 mt-0.5" }),
-                    /* @__PURE__ */ jsx179("p", { className: "text-xs text-studio-accent", children: f.fixHint })
-                  ] })
-                ] })
-              ] }) }, `w-${i}`))
+              errors.map((f, i) => /* @__PURE__ */ jsx179(LintFindingRow, { finding: f, tone: "error" }, `e-${i}`)),
+              warnings.map((f, i) => /* @__PURE__ */ jsx179(LintFindingRow, { finding: f, tone: "warning" }, `w-${i}`))
             ] })
           ]
         }
@@ -67383,6 +67393,26 @@ ${pathLine}${lines.join("\n\n")}`;
     }
   );
 }
+function LintFindingRow({ finding, tone }) {
+  return /* @__PURE__ */ jsx179("div", { className: "py-3 border-b border-border last:border-0", children: /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx179(
+      WarningIcon,
+      {
+        size: 14,
+        className: `${tone === "error" ? "text-danger-ink" : "text-warning-ink"} shrink-0 mt-0.5`,
+        weight: tone === "error" ? "fill" : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxs139("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx179("p", { className: `text-sm ${tone === "error" ? "text-text-0" : "text-text-2"}`, children: finding.message }),
+      finding.file && /* @__PURE__ */ jsx179("p", { className: "text-xs text-text-muted font-mono mt-0.5", children: finding.file }),
+      finding.fixHint && /* @__PURE__ */ jsxs139("div", { className: "flex items-start gap-1 mt-1.5", children: [
+        /* @__PURE__ */ jsx179(CaretRightIcon, { size: 10, className: "text-accent-ink shrink-0 mt-0.5" }),
+        /* @__PURE__ */ jsx179("p", { className: "text-xs text-accent-ink", children: finding.fixHint })
+      ] })
+    ] })
+  ] }) });
+}
 
 // src/components/AskAgentModal.tsx
 import { useState as useState100, useRef as useRef120 } from "react";
@@ -67502,7 +67532,7 @@ function AskAgentModal({
               /* @__PURE__ */ jsx180(
                 "button",
                 {
-                  className: "px-4 py-1.5 rounded-lg bg-studio-accent/90 text-xs font-medium text-neutral-950 hover:bg-studio-accent disabled:opacity-40 disabled:cursor-not-allowed",
+                  className: "px-4 py-1.5 rounded-lg bg-accent text-xs font-medium text-on-accent hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed",
                   disabled: !value.trim(),
                   onClick: handleSubmit,
                   children: "Copy prompt"
@@ -67528,23 +67558,12 @@ function StudioToast({ message, tone, leaving, onDismiss }) {
       children: /* @__PURE__ */ jsxs141(
         "div",
         {
-          className: "relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-2xl py-3 pl-4 pr-2 text-[12px]",
-          style: {
-            background: isError ? "linear-gradient(135deg, rgba(127,29,29,0.55), rgba(80,10,10,0.45))" : "linear-gradient(135deg, rgba(38,38,38,0.55), rgba(23,23,23,0.45))",
-            backdropFilter: "blur(16px) saturate(1.6)",
-            WebkitBackdropFilter: "blur(16px) saturate(1.6)",
-            border: `1px solid ${isError ? "rgba(239,68,68,0.18)" : "rgba(255,255,255,0.08)"}`,
-            boxShadow: [
-              "0 8px 32px rgba(0,0,0,0.35)",
-              `inset 0 1px 0 ${isError ? "rgba(239,68,68,0.12)" : "rgba(255,255,255,0.06)"}`,
-              `inset 0 -1px 0 rgba(0,0,0,0.15)`
-            ].join(", ")
-          },
+          className: `relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-2xl py-3 pl-4 pr-2 text-[12px] ${toastSurface(isError)}`,
           children: [
             /* @__PURE__ */ jsx181(
               "span",
               {
-                className: `min-w-0 wrap-break-word leading-5 ${isError ? "text-red-200" : "text-neutral-200"}`,
+                className: `min-w-0 wrap-break-word leading-5 ${isError ? "text-danger-ink" : "text-text-0"}`,
                 children: message
               }
             ),
@@ -67553,7 +67572,7 @@ function StudioToast({ message, tone, leaving, onDismiss }) {
               {
                 type: "button",
                 onClick: onDismiss,
-                className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-300",
+                className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-hover hover:text-neutral-300",
                 "aria-label": "Dismiss",
                 children: /* @__PURE__ */ jsx181(
                   "svg",
@@ -67575,6 +67594,9 @@ function StudioToast({ message, tone, leaving, onDismiss }) {
     }
   );
 }
+function toastSurface(isError) {
+  return `border shadow-popover backdrop-blur-md ${isError ? "border-danger/40 bg-raised" : "border-border bg-raised/95"}`;
+}
 
 // src/components/feedback/StudioFeedbackCard.tsx
 import { memo as memo39, useState as useState101, useCallback as useCallback96, useRef as useRef121, useEffect as useEffect103 } from "react";
@@ -67764,24 +67786,13 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
       children: /* @__PURE__ */ jsxs142(
         "div",
         {
-          className: "flex w-[min(340px,calc(100vw-48px))] flex-col gap-2.5 overflow-hidden rounded-2xl px-3.5 py-3",
-          style: {
-            background: failed2 ? "linear-gradient(135deg, rgba(127,29,29,0.55), rgba(80,10,10,0.45))" : "linear-gradient(135deg, rgba(38,38,38,0.55), rgba(23,23,23,0.45))",
-            backdropFilter: "blur(16px) saturate(1.6)",
-            WebkitBackdropFilter: "blur(16px) saturate(1.6)",
-            border: `1px solid ${failed2 ? "rgba(239,68,68,0.18)" : "rgba(255,255,255,0.08)"}`,
-            boxShadow: [
-              "0 8px 32px rgba(0,0,0,0.35)",
-              `inset 0 1px 0 ${failed2 ? "rgba(239,68,68,0.12)" : "rgba(255,255,255,0.06)"}`,
-              "inset 0 -1px 0 rgba(0,0,0,0.15)"
-            ].join(", ")
-          },
+          className: `flex w-[min(340px,calc(100vw-48px))] flex-col gap-2.5 overflow-hidden rounded-2xl px-3.5 py-3 ${toastSurface(failed2)}`,
           children: [
             /* @__PURE__ */ jsxs142("div", { className: "flex items-start gap-3", children: [
               /* @__PURE__ */ jsx182(
                 "p",
                 {
-                  className: `min-w-0 flex-1 text-[12px] leading-5 ${failed2 ? "text-red-100" : "text-neutral-100"}`,
+                  className: `min-w-0 flex-1 text-[12px] leading-5 ${failed2 ? "text-danger-ink" : "text-text-0"}`,
                   children: step === "thanks" ? "Thanks, that helps." : title
                 }
               ),
@@ -67796,7 +67807,7 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                     if (req) trackStudioFeedbackInterviewClick({ reason: req.reason });
                     close("sent");
                   },
-                  className: "h-6 shrink-0 whitespace-nowrap rounded-full border border-white/20 bg-white/8 px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-white/35 hover:bg-white/16 active:scale-[0.97] motion-reduce:transition-none",
+                  className: "h-6 shrink-0 whitespace-nowrap rounded-full border border-border-strong bg-hover px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-text-muted hover:bg-press active:scale-[0.97] motion-reduce:transition-none",
                   children: "Talk to us, 30 min"
                 }
               ),
@@ -67805,7 +67816,7 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                 {
                   type: "button",
                   onClick: () => close("close"),
-                  className: "-mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-white/10 hover:text-neutral-200",
+                  className: "-mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-press hover:text-neutral-200",
                   "aria-label": "Dismiss",
                   children: /* @__PURE__ */ jsx182(
                     "svg",
@@ -67822,14 +67833,14 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                 }
               )
             ] }),
-            failed2 && request.detail && step !== "thanks" && /* @__PURE__ */ jsx182("p", { className: "line-clamp-2 text-[11px] leading-4 text-red-200/70", children: request.detail }),
+            failed2 && request.detail && step !== "thanks" && /* @__PURE__ */ jsx182("p", { className: "line-clamp-2 text-[11px] leading-4 text-danger-ink", children: request.detail }),
             step === "rating" && /* @__PURE__ */ jsxs142(Fragment49, { children: [
               /* @__PURE__ */ jsxs142("fieldset", { className: "grid grid-cols-11 gap-[3px]", children: [
                 /* @__PURE__ */ jsx182("legend", { className: "sr-only", children: "Rate this export from 0 to 10" }),
                 RATINGS.map((n) => /* @__PURE__ */ jsxs142(
                   "label",
                   {
-                    className: "flex h-7 cursor-pointer items-center justify-center rounded-md bg-white/4 text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/[0.14] hover:text-neutral-100 active:scale-[0.97] has-checked:bg-white/90 has-checked:text-neutral-900 has-focus-visible:ring-1 has-focus-visible:ring-white/50 motion-reduce:transition-none",
+                    className: "flex h-7 cursor-pointer items-center justify-center rounded-md bg-hover text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-press hover:text-neutral-100 active:scale-[0.97] has-checked:bg-text-0 has-checked:text-bg-0 has-focus-visible:ring-1 has-focus-visible:ring-ring motion-reduce:transition-none",
                     children: [
                       /* @__PURE__ */ jsx182(
                         "input",
@@ -67864,7 +67875,7 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                   onFocus: () => setHint(preset.hint),
                   onBlur: () => setHint(null),
                   "aria-label": `${preset.label}. ${preset.hint}`,
-                  className: `h-6 rounded-full border px-2.5 text-[11px] transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none ${failed2 ? "border-red-300/20 bg-red-100/6 text-red-100/80 hover:border-red-200/70 hover:bg-red-100/25 hover:text-white" : "border-white/10 bg-white/4 text-neutral-300 hover:border-white/60 hover:bg-white/25 hover:text-white"}`,
+                  className: `h-6 rounded-full border px-2.5 text-[11px] transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none ${failed2 ? "border-danger/30 bg-danger/10 text-danger-ink hover:border-danger/60 hover:bg-danger/20" : "border-border bg-hover text-neutral-300 hover:border-text-muted hover:bg-press hover:text-text-0"}`,
                   children: preset.label
                 },
                 preset.label
@@ -67884,7 +67895,7 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                     placeholder: followUp.placeholder,
                     "aria-label": followUp.prompt,
                     maxLength: 500,
-                    className: "h-7 min-w-0 flex-1 rounded-md border border-white/10 bg-black/20 px-2 text-[11px] text-neutral-100 outline-hidden transition-colors duration-150 placeholder:text-neutral-500 focus:border-white/25"
+                    className: "h-7 min-w-0 flex-1 rounded-md border border-border bg-input px-2 text-[11px] text-neutral-100 outline-hidden transition-colors duration-150 placeholder:text-neutral-500 focus:border-ring"
                   }
                 ),
                 /* @__PURE__ */ jsx182(
@@ -67892,7 +67903,7 @@ var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
                   {
                     type: "button",
                     onClick: () => submit(),
-                    className: "h-7 shrink-0 rounded-md bg-white/10 px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-white/16 active:scale-[0.97] motion-reduce:transition-none",
+                    className: "h-7 shrink-0 rounded-md bg-press px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-on active:scale-[0.97] motion-reduce:transition-none",
                     children: "Send"
                   }
                 )
@@ -74705,16 +74716,16 @@ function refuseGsapTakeover(el, showToast) {
 }
 var plainMoveCounter = 0;
 function stagePlainTranslate(commitPositionPatchToHtml, selection, next, coalesceKey) {
-  const style = selection.element.style;
-  const before = style.getPropertyValue("translate");
-  const patch = translatePatch(next);
-  style.setProperty("translate", patch.value);
+  const el = selection.element;
+  const before = captureStudioPathOffset(el);
+  const patches = writePlainMove(el, next);
+  const written = el.style.getPropertyValue("translate");
   const rollback = () => {
-    if (style.getPropertyValue("translate") === patch.value) style.setProperty("translate", before);
+    if (el.style.getPropertyValue("translate") === written) restoreStudioPathOffset(el, before);
   };
   const key2 = coalesceKey ?? `move:${++plainMoveCounter}`;
   const options = { label: "Move layer", coalesceKey: key2, coalesceMs: Number.POSITIVE_INFINITY };
-  const save = () => commitPositionPatchToHtml(selection, [patch], options).catch((error) => {
+  const save = () => commitPositionPatchToHtml(selection, patches, options).catch((error) => {
     rollback();
     throw error;
   });
@@ -74773,64 +74784,8 @@ function savePlainRotation({ commitPositionPatchToHtml, readOnlyPreview }, selec
   });
 }
 
-// src/hooks/gsapTargetCache.ts
-var _gsapCachedTimelines;
-var _gsapTargetIds;
-var _gsapTargetNodes;
-function addTargetsFromTimeline(tl, ids, nodes) {
-  const children = tl.getChildren?.(true);
-  if (!children) return;
-  for (const child of children) {
-    const targets = child.targets?.();
-    if (!targets) continue;
-    for (const t of targets) {
-      nodes.add(t);
-      if (t.id) ids.add(t.id);
-    }
-  }
-}
-function collectGsapTargets(timelines) {
-  const ids = /* @__PURE__ */ new Set();
-  const nodes = /* @__PURE__ */ new WeakSet();
-  for (const tl of Object.values(timelines)) {
-    if (!tl) continue;
-    try {
-      addTargetsFromTimeline(tl, ids, nodes);
-    } catch {
-    }
-  }
-  return { ids, nodes };
-}
-function readTimelines(iframe) {
-  if (!iframe?.contentWindow) return void 0;
-  try {
-    return iframe.contentWindow.__timelines;
-  } catch {
-    return void 0;
-  }
-}
-function isElementGsapTargeted(iframe, element) {
-  const timelines = readTimelines(iframe);
-  if (!timelines) return false;
-  if (timelines !== _gsapCachedTimelines) {
-    const cache2 = collectGsapTargets(timelines);
-    _gsapTargetIds = cache2.ids;
-    _gsapTargetNodes = cache2.nodes;
-    _gsapCachedTimelines = timelines;
-  }
-  return _gsapTargetNodes.has(element) || !!(element.id && _gsapTargetIds.has(element.id));
-}
-
 // src/hooks/useDomGeometryCommits.ts
-var GSAP_CSS_FALLBACK_BLOCKED_MESSAGE = "This element is GSAP-animated \u2014 dragging via CSS would corrupt keyframes";
-function rejectGsapCssFallback(selection, previewIframeRef, showToast) {
-  if (!isElementGsapTargeted(previewIframeRef.current, selection.element)) return null;
-  const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
-  showToast(error.message, "error");
-  return Promise.reject(error);
-}
 function useDomGeometryCommits({
-  previewIframeRef,
   showToast,
   commitPositionPatchToHtml,
   readOnlyPreview
@@ -74845,44 +74800,24 @@ function useDomGeometryCommits({
     ),
     [commitPositionPatchToHtml, readOnlyPreview, showToast]
   );
-  const handleDomPathOffsetCommit = useCallback125(
-    (selection, next) => {
-      if (readOnlyPreview) return Promise.resolve();
-      const gsapFallback = rejectGsapCssFallback(selection, previewIframeRef, showToast);
-      if (gsapFallback) return gsapFallback;
-      const before = captureStudioPathOffset(selection.element);
-      applyStudioPathOffset(selection.element, next);
-      return commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
-        label: "Move layer",
-        coalesceKey: `path-offset:${getDomEditTargetKey(selection)}`
-      }).catch((error) => {
-        restoreStudioPathOffset(selection.element, before);
-        throw error;
-      });
-    },
-    [commitPositionPatchToHtml, previewIframeRef, showToast, readOnlyPreview]
-  );
   const handleDomBoxSizeCommit = useCallback125(
     (selection, next, offset, restore) => {
       if (readOnlyPreview) return Promise.resolve();
       const element = selection.element;
       const beforeSize = captureStudioBoxSize(element);
-      const beforeTranslate = element.style.getPropertyValue("translate");
+      const beforeOffset = captureStudioPathOffset(element);
       const stageCrop = prepareCropResize(element);
       applyStudioBoxSize(element, next);
       const crop = stageCrop();
       const patches = buildBoxSizePatches(element);
       if (crop) patches.push(crop.patch);
-      if (offset) {
-        writeTranslatePx(element, offset);
-        patches.push(translatePatch(offset));
-      }
+      if (offset) patches.push(...writePlainMove(element, offset));
       return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
         coalesceKey: `box-size:${getDomEditTargetKey(selection)}`
       }).catch((error) => {
         restoreStudioBoxSize(element, beforeSize);
-        if (offset) element.style.setProperty("translate", beforeTranslate);
+        if (offset) restoreStudioPathOffset(element, beforeOffset);
         crop?.revert();
         restore?.();
         throw error;
@@ -74923,7 +74858,6 @@ function useDomGeometryCommits({
   );
   return {
     stageElementPositionOffset,
-    handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset
@@ -75102,12 +75036,10 @@ function useDomEditCommits({
   });
   const {
     stageElementPositionOffset,
-    handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset
   } = useDomGeometryCommits({
-    previewIframeRef,
     showToast,
     commitPositionPatchToHtml,
     readOnlyPreview
@@ -75143,7 +75075,6 @@ function useDomEditCommits({
     handleDomRemoveTextField,
     stageElementPositionOffset,
     commitPositionPatchToHtml,
-    handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset,
@@ -81022,10 +80953,16 @@ function remintHfIds(html2, parser, taken) {
 }
 var HF_ID_ATTR_RE = /\bdata-hf-id\s*=\s*["']?([^"'\s>]+)/gi;
 var hfIdsInFile = (content) => new Set(Array.from(content.matchAll(HF_ID_ATTR_RE), (match) => match[1]));
-function pasteElementHtml(content, payload) {
+function pasteElementHtml(content, payload, fromThisFile = false) {
   const reminted = remintHfIds(payload.html, new DOMParser(), hfIdsInFile(content));
   const deduped = deduplicateIds(reminted, collectHtmlIds(content));
-  return insertAsSibling(content, deduped, payload.originSelector, payload.originSelectorIndex);
+  const result = insertAsSibling(
+    content,
+    deduped,
+    payload.originSelector,
+    payload.originSelectorIndex
+  );
+  return fromThisFile ? carryLook(result, renamedIds(reminted, deduped), 0) : result;
 }
 function pasteTimelineClips(content, clips, anchorTime, liveElements, fromThisFile = false) {
   const groupMinStart = Math.min(...clips.map((c) => c.start));
@@ -81154,6 +81091,7 @@ function useClipboard({
           kind: "dom-element",
           html: savedMarkupElseLive(parseSavedSource(content), live, sourceFile),
           sourceFile,
+          projectId: projectIdRef.current ?? void 0,
           originSelector: domSelection.selector,
           originSelectorIndex: domSelection.selectorIndex
         };
@@ -81195,15 +81133,17 @@ function useClipboard({
     const targetPath = activeCompPath || "index.html";
     try {
       let pastedIds = [];
+      const fromThisFile = payload.sourceFile === targetPath && payload.projectId === pid;
       const paste = (originalContent) => {
-        if (payload.kind !== "timeline-clip") return pasteElementHtml(originalContent, payload);
+        if (payload.kind !== "timeline-clip")
+          return pasteElementHtml(originalContent, payload, fromThisFile);
         const { currentTime, elements } = usePlayerStore.getState();
         const pasted = pasteTimelineClips(
           originalContent,
           payload.clips,
           currentTime,
           elements,
-          payload.sourceFile === targetPath && payload.projectId === pid
+          fromThisFile
         );
         pastedIds = pasted.ids;
         return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
@@ -82588,7 +82528,7 @@ function StudioHeader({
             "aria-pressed": inspectorButtonActive,
             className: cn(
               "h-full rounded-none",
-              inspectorButtonActive && "bg-hover text-accent enabled:hover:text-accent"
+              inspectorButtonActive && "bg-on text-accent-ink enabled:hover:bg-on-hover enabled:hover:text-accent-ink"
             ),
             icon: /* @__PURE__ */ jsx190(InspectorIcon, { size: 16 }),
             onClick: () => {
@@ -83878,7 +83818,7 @@ function ContextMenu3({
                 {
                   role: "menuitem",
                   onClick: () => setMode("confirm-delete"),
-                  className: `${itemCls} text-red-400`,
+                  className: `${itemCls} text-danger-ink`,
                   children: "Delete"
                 }
               )
@@ -83912,10 +83852,10 @@ function ContextMenu3({
                     }
                   },
                   "aria-label": `Rename ${filename(asset)}`,
-                  className: "w-full bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden"
+                  className: "w-full bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-1 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden"
                 }
               ),
-              renameError && /* @__PURE__ */ jsx194("span", { className: "text-[10px] text-red-400", children: renameError }),
+              renameError && /* @__PURE__ */ jsx194("span", { className: "text-[10px] text-danger-ink", children: renameError }),
               /* @__PURE__ */ jsxs153("div", { className: "flex items-center justify-end gap-1", children: [
                 /* @__PURE__ */ jsx194(
                   "button",
@@ -83929,7 +83869,7 @@ function ContextMenu3({
                   "button",
                   {
                     onClick: commitRename,
-                    className: "px-2 py-0.5 text-[10px] rounded-sm bg-studio-accent/80 hover:bg-studio-accent text-white transition-colors",
+                    className: "px-2 py-0.5 text-[10px] rounded-sm bg-accent hover:bg-accent-hover text-on-accent transition-colors",
                     children: "Rename"
                   }
                 )
@@ -83946,8 +83886,8 @@ function DeleteConfirm2({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ jsxs153("div", { className: "px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2", children: [
-    /* @__PURE__ */ jsxs153("span", { className: "text-[10px] text-red-400 truncate", children: [
+  return /* @__PURE__ */ jsxs153("div", { className: "px-2 py-1.5 bg-danger/15 border-l-2 border-red-500 flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs153("span", { className: "text-[10px] text-danger-ink truncate", children: [
       "Delete ",
       name,
       "?"
@@ -83957,7 +83897,7 @@ function DeleteConfirm2({
         "button",
         {
           onClick: onConfirm,
-          className: "px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors",
+          className: "px-2 py-0.5 text-[10px] rounded-sm bg-danger text-on-danger hover:brightness-95 active:brightness-90 transition-colors",
           children: "Delete"
         }
       ),
@@ -84183,7 +84123,7 @@ function AudioRow({
             {
               "aria-label": playing ? `Pause preview of ${name}` : `Play preview of ${name}`,
               "aria-pressed": playing,
-              className: `w-7 h-7 rounded-md shrink-0 flex items-center justify-center transition-colors active:scale-[0.95] ${playing ? "bg-panel-accent/15 text-panel-accent" : "text-panel-text-5 group-hover:text-panel-text-3"}`,
+              className: `w-7 h-7 rounded-md shrink-0 flex items-center justify-center transition-colors active:scale-[0.95] ${playing ? "bg-panel-accent/15 text-accent-ink" : "text-panel-text-5 group-hover:text-panel-text-3"}`,
               onClick: (e) => {
                 e.stopPropagation();
                 togglePlay();
@@ -84207,12 +84147,12 @@ function AudioRow({
                 meta?.duration ? `${meta.duration}s \xB7 ` : "",
                 subtype
               ] }),
-              used && /* @__PURE__ */ jsx195("span", { className: "text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm shrink-0", children: "in use" }),
+              used && /* @__PURE__ */ jsx195("span", { className: "text-[9px] font-medium text-accent-ink bg-panel-accent/10 px-1.5 py-px rounded-sm shrink-0", children: "in use" }),
               (isCopied || copyFailed) && /* @__PURE__ */ jsx195(
                 "span",
                 {
                   role: "status",
-                  className: `shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${copyFailed ? "text-red-400 bg-red-500/10" : "text-panel-accent bg-panel-accent/10"}`,
+                  className: `shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${copyFailed ? "text-danger-ink bg-red-500/10" : "text-accent-ink bg-panel-accent/10"}`,
                   children: copyFailed ? "Copy failed" : "Copied"
                 }
               )
@@ -84376,7 +84316,7 @@ function CopyChip({ feedback, asset }) {
     "span",
     {
       role: "status",
-      className: `shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${feedback.ok ? "text-panel-accent bg-panel-accent/10" : "text-red-400 bg-red-500/10"}`,
+      className: `shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${feedback.ok ? "text-accent-ink bg-panel-accent/10" : "text-danger-ink bg-red-500/10"}`,
       children: feedback.ok ? "Copied" : "Copy failed"
     }
   );
@@ -84605,7 +84545,7 @@ function FontRow({
         onContextMenu: (e) => openAssetContextMenu(e, setContextMenu),
         className: `px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors outline-hidden focus-visible:bg-neutral-800/60 ${isCopied ? "bg-studio-accent/10 border-l-2 border-studio-accent" : "border-l-2 border-transparent hover:bg-neutral-800/50"}`,
         children: [
-          /* @__PURE__ */ jsx198("div", { className: "w-[50px] h-[32px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsx198("span", { className: "text-[9px] font-medium text-neutral-700", children: extension }) }),
+          /* @__PURE__ */ jsx198("div", { className: "w-[50px] h-[32px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsx198("span", { className: "text-[9px] font-medium text-text-muted", children: extension }) }),
           /* @__PURE__ */ jsxs156("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsx198(
               "span",
@@ -84616,7 +84556,7 @@ function FontRow({
             ),
             /* @__PURE__ */ jsxs156("div", { className: "flex items-center gap-1.5", children: [
               /* @__PURE__ */ jsx198("span", { className: "text-[10px] text-neutral-600 truncate", children: extension }),
-              used && /* @__PURE__ */ jsx198("span", { className: "text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm", children: "in use" }),
+              used && /* @__PURE__ */ jsx198("span", { className: "text-[9px] font-medium text-accent-ink bg-panel-accent/10 px-1.5 py-px rounded-sm", children: "in use" }),
               /* @__PURE__ */ jsx198(CopyChip, { feedback: copyFeedback, asset })
             ] })
           ] })
@@ -84749,7 +84689,7 @@ function EmptyState({
         fill: "none",
         stroke: "currentColor",
         strokeWidth: "1.5",
-        className: "text-neutral-700",
+        className: "text-text-off",
         children: [
           /* @__PURE__ */ jsx199(
             "path",
@@ -84898,7 +84838,7 @@ var AssetsTab = memo41(function AssetsTab2({
             "button",
             {
               onClick: () => setViewMode(m),
-              className: `flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${viewMode === m ? "bg-panel-accent/15 text-panel-accent" : "text-panel-text-3 hover:text-panel-text-1"}`,
+              className: `flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${viewMode === m ? "bg-panel-accent/15 text-accent-ink" : "text-panel-text-3 hover:text-panel-text-1"}`,
               children: m === "local" ? "This project" : "All projects"
             },
             m
@@ -84938,7 +84878,7 @@ var AssetsTab = memo41(function AssetsTab2({
               {
                 onClick: () => setActiveFilter("all"),
                 "aria-pressed": activeFilter === "all",
-                className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${activeFilter === "all" ? "bg-panel-accent/15 text-panel-accent" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
+                className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${activeFilter === "all" ? "bg-panel-accent/15 text-accent-ink" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
                 children: [
                   "All ",
                   counts.all
@@ -84951,7 +84891,7 @@ var AssetsTab = memo41(function AssetsTab2({
                 {
                   onClick: () => setActiveFilter(activeFilter === cat ? "all" : cat),
                   "aria-pressed": activeFilter === cat,
-                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${activeFilter === cat ? "bg-panel-accent/15 text-panel-accent" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
+                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${activeFilter === cat ? "bg-panel-accent/15 text-accent-ink" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
                   children: [
                     CATEGORY_LABELS[cat],
                     " ",
@@ -84967,7 +84907,7 @@ var AssetsTab = memo41(function AssetsTab2({
                 "button",
                 {
                   onClick: () => setUsageFilter(usageFilter === "used" ? "all" : "used"),
-                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${usageFilter === "used" ? "bg-panel-accent/15 text-panel-accent" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
+                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${usageFilter === "used" ? "bg-panel-accent/15 text-accent-ink" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
                   children: [
                     "In use ",
                     usageCounts.used
@@ -84978,7 +84918,7 @@ var AssetsTab = memo41(function AssetsTab2({
                 "button",
                 {
                   onClick: () => setUsageFilter(usageFilter === "unused" ? "all" : "unused"),
-                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${usageFilter === "unused" ? "bg-panel-accent/15 text-panel-accent" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
+                  className: `px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${usageFilter === "unused" ? "bg-panel-accent/15 text-accent-ink" : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"}`,
                   children: [
                     "Unused ",
                     usageCounts.unused
@@ -85152,7 +85092,7 @@ function PromptPreviewModal({
               /* @__PURE__ */ jsx200(
                 "button",
                 {
-                  className: `px-4 py-1.5 rounded-lg text-xs font-medium transition-colors active:scale-[0.97] ${copyState === "copied" ? "bg-emerald-500 text-white" : copyState === "failed" ? "bg-red-500 text-white" : "bg-studio-accent/90 text-neutral-950 hover:bg-studio-accent"}`,
+                  className: `px-4 py-1.5 rounded-lg text-xs font-medium transition-colors active:scale-[0.97] ${copyState === "copied" ? "bg-accent text-on-accent" : copyState === "failed" ? "bg-danger text-on-danger" : "bg-accent text-on-accent hover:bg-accent-hover"}`,
                   onClick: handleCopy2,
                   children: copyState === "copied" ? "Copied!" : copyState === "failed" ? "Copy failed" : "Copy prompt"
                 }
@@ -85174,7 +85114,7 @@ var BlocksTab = memo42(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
     return /* @__PURE__ */ jsx201("div", { className: "flex flex-1 items-center justify-center text-neutral-600 text-xs", children: "Loading blocks\u2026" });
   }
   if (error) {
-    return /* @__PURE__ */ jsx201("div", { className: "flex flex-1 items-center justify-center text-red-400 text-xs px-4 text-center", children: error });
+    return /* @__PURE__ */ jsx201("div", { className: "flex flex-1 items-center justify-center text-danger-ink text-xs px-4 text-center", children: error });
   }
   return /* @__PURE__ */ jsxs159("div", { className: "flex flex-col flex-1 min-h-0", children: [
     /* @__PURE__ */ jsx201("div", { className: "px-3 pt-2 pb-1 shrink-0", children: /* @__PURE__ */ jsx201(
@@ -85200,10 +85140,10 @@ var BlocksTab = memo42(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
       ))
     ] }) }),
     /* @__PURE__ */ jsxs159("div", { className: "flex-1 overflow-y-auto min-h-0 px-2 pb-2", children: [
-      category === "vfx" && /* @__PURE__ */ jsxs159("div", { className: "mb-2 px-2 py-1.5 rounded-md bg-purple-500/10 border border-purple-500/20 text-[9px] text-purple-300 leading-relaxed", children: [
+      category === "vfx" && /* @__PURE__ */ jsxs159("div", { className: "mb-2 px-2 py-1.5 rounded-md bg-purple-500/10 border border-purple-500/20 text-[9px] text-text-2 leading-relaxed", children: [
         "VFX blocks use WebGL via HTML-in-Canvas. Enable",
         " ",
-        /* @__PURE__ */ jsx201("span", { className: "font-mono text-purple-200", children: "chrome://flags/#html-in-canvas" }),
+        /* @__PURE__ */ jsx201("span", { className: "font-mono text-text-0", children: "chrome://flags/#html-in-canvas" }),
         " for preview."
       ] }),
       filteredBlocks.length === 0 ? /* @__PURE__ */ jsx201("div", { className: "flex items-center justify-center h-32 text-neutral-600 text-xs", children: "No blocks match your search" }) : /* @__PURE__ */ jsx201(
@@ -85467,7 +85407,7 @@ function BlockCard({
                 type: "button",
                 onClick: handleAdd,
                 title: "Add to composition at current time",
-                className: `flex items-center gap-1 px-3 py-1.5 rounded-md text-[10px] font-semibold transition-colors active:scale-[0.97] ${addState === "failed" ? "bg-red-500 text-white" : "bg-white text-black hover:bg-neutral-200"}`,
+                className: `flex items-center gap-1 px-3 py-1.5 rounded-md text-[10px] font-semibold transition-colors active:scale-[0.97] ${addState === "failed" ? "bg-danger text-on-danger" : "bg-white text-black hover:bg-white/85"}`,
                 children: [
                   /* @__PURE__ */ jsx201(
                     "svg",
@@ -85491,7 +85431,7 @@ function BlockCard({
                 type: "button",
                 onClick: handleShowPrompt,
                 title: "Generate a prompt to paste into your AI agent",
-                className: `flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors active:scale-[0.97] ${onAdd ? "bg-white/15 text-white/90 hover:bg-white/25 text-[9px]" : "bg-white text-black hover:bg-neutral-200 text-[10px] font-semibold"}`,
+                className: `flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors active:scale-[0.97] ${onAdd ? "bg-white/15 text-white/90 hover:bg-white/25 text-[9px]" : "bg-text-0 text-bg-0 hover:bg-text-2 text-[10px] font-semibold"}`,
                 children: [
                   /* @__PURE__ */ jsxs159(
                     "svg",
@@ -85534,7 +85474,7 @@ function BlockCard({
 }
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo43, useCallback as useCallback163, useEffect as useEffect136, useRef as useRef169, useState as useState132 } from "react";
+import { memo as memo43, useCallback as useCallback163, useEffect as useEffect136, useLayoutEffect as useLayoutEffect12, useMemo as useMemo80, useRef as useRef169, useState as useState132 } from "react";
 import { jsx as jsx202, jsxs as jsxs160 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -85597,6 +85537,34 @@ function syncIframePlayback(iframe, shouldPlay) {
     return false;
   }
 }
+var imageUrlOf = (snapshot3) => snapshot3.status === "ready" && snapshot3.value.kind === "image" ? snapshot3.value.url : null;
+function useLastFrame(request, snapshot3) {
+  const current = imageUrlOf(snapshot3);
+  const [kept, setKept] = useState132(null);
+  if (request && current && kept?.request !== request) setKept({ request, url: current });
+  useLayoutEffect12(() => {
+    if (!kept || kept.request === request) return;
+    const lease = thumbnailScheduler.acquire(kept.request, () => {
+    });
+    return () => lease.release();
+  }, [kept, request]);
+  return current ?? kept?.url ?? null;
+}
+function useNearViewport() {
+  const [element, setElement] = useState132(null);
+  const [near2, setNear] = useState132(false);
+  useEffect136(() => {
+    if (!element || near2) return;
+    if (typeof IntersectionObserver === "undefined") return setNear(true);
+    const observer = new IntersectionObserver(
+      (entries) => entries.some((entry2) => entry2.isIntersecting) && setNear(true),
+      { root: element.closest("[data-composition-list]"), rootMargin: "200px" }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element, near2]);
+  return [setElement, near2];
+}
 function CompCard({
   projectId,
   comp,
@@ -85613,7 +85581,6 @@ function CompCard({
   const [hovered, setHovered] = useState132(false);
   const [stageSize, setStageSize] = useState132(DEFAULT_PREVIEW_STAGE);
   const [livePreviewLoaded, setLivePreviewLoaded] = useState132(false);
-  const [failedThumbnailUrl, setFailedThumbnailUrl] = useState132(null);
   const iframeRef = useRef169(null);
   const hoverTimer = useRef169(null);
   const syncTimer = useRef169(null);
@@ -85647,7 +85614,18 @@ function CompCard({
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
   const previewUrl = compositionPreviewUrl(projectId, comp);
   const thumbnailUrl2 = compositionCardThumbnailUrl(projectId, comp, contentRevision);
-  const thumbnailFailed = failedThumbnailUrl === thumbnailUrl2;
+  const [thumbnailBox, nearViewport] = useNearViewport();
+  const timelineSessionEpoch = usePlayerStore((state) => state.timelineSessionEpoch);
+  const thumbnailRequest = useMemo80(
+    () => previewBooted && nearViewport ? compositionThumbnailRequest(thumbnailUrl2, projectId, {
+      sessionEpoch: timelineSessionEpoch,
+      rich: true
+    }) : null,
+    [previewBooted, nearViewport, thumbnailUrl2, projectId, timelineSessionEpoch]
+  );
+  const thumbnail = useThumbnailLease(thumbnailRequest);
+  const frameUrl = useLastFrame(thumbnailRequest, thumbnail);
+  const thumbnailFailed = thumbnail.status === "error";
   const previewScale = resolveCompositionPreviewScale({
     cardWidth: CARD_W,
     cardHeight: CARD_H,
@@ -85697,52 +85675,57 @@ function CompCard({
       onPointerLeave: handleLeave,
       className: `group/card w-full select-none text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-grab active:cursor-grabbing outline-hidden focus-visible:bg-neutral-800/60 ${isActive ? "bg-studio-accent/10 border-l-2 border-studio-accent" : "border-l-2 border-transparent hover:bg-neutral-800/50"}`,
       children: [
-        /* @__PURE__ */ jsxs160("div", { className: "w-20 h-[45px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 relative", children: [
-          thumbnailFailed ? /* @__PURE__ */ jsx202("div", { className: "absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600", children: "Preview unavailable" }) : !previewBooted ? null : /* @__PURE__ */ jsx202(
-            "img",
-            {
-              src: thumbnailUrl2,
-              alt: "",
-              draggable: false,
-              loading: "lazy",
-              decoding: "async",
-              onError: () => setFailedThumbnailUrl(thumbnailUrl2),
-              className: `absolute inset-0 h-full w-full object-contain transition-opacity ${livePreviewLoaded ? "opacity-0" : "opacity-100"}`
-            }
-          ),
-          hovered && /* @__PURE__ */ jsx202(
-            "iframe",
-            {
-              ref: iframeRef,
-              src: previewUrl,
-              sandbox: "allow-scripts allow-same-origin",
-              className: "absolute border-none pointer-events-none",
-              style: {
-                transformOrigin: "0 0",
-                width: stageSize.width,
-                height: stageSize.height,
-                left: thumbnailOffsetX,
-                top: thumbnailOffsetY,
-                transform: `scale(${previewScale})`
-              },
-              onLoad: (e) => {
-                try {
-                  const iframe = e.currentTarget;
-                  const root = iframe.contentDocument?.querySelector("[data-composition-id]");
-                  const width = Number(root?.getAttribute("data-width")) || DEFAULT_PREVIEW_STAGE.width;
-                  const height = Number(root?.getAttribute("data-height")) || DEFAULT_PREVIEW_STAGE.height;
-                  setStageSize({ width, height });
-                  setLivePreviewLoaded(true);
-                  requestIframePlaybackSync(true);
-                } catch {
-                  setStageSize(DEFAULT_PREVIEW_STAGE);
+        /* @__PURE__ */ jsxs160(
+          "div",
+          {
+            ref: thumbnailBox,
+            className: "w-20 h-[45px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 relative",
+            children: [
+              thumbnailFailed ? /* @__PURE__ */ jsx202("div", { className: "absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600", children: "Preview unavailable" }) : !frameUrl ? null : /* @__PURE__ */ jsx202(
+                "img",
+                {
+                  src: frameUrl,
+                  alt: "",
+                  draggable: false,
+                  decoding: "async",
+                  className: `absolute inset-0 h-full w-full object-contain transition-opacity ${livePreviewLoaded ? "opacity-0" : "opacity-100"}`
                 }
-              },
-              title: `${name} preview`,
-              tabIndex: -1
-            }
-          )
-        ] }),
+              ),
+              hovered && /* @__PURE__ */ jsx202(
+                "iframe",
+                {
+                  ref: iframeRef,
+                  src: previewUrl,
+                  sandbox: "allow-scripts allow-same-origin",
+                  className: "absolute border-none pointer-events-none",
+                  style: {
+                    transformOrigin: "0 0",
+                    width: stageSize.width,
+                    height: stageSize.height,
+                    left: thumbnailOffsetX,
+                    top: thumbnailOffsetY,
+                    transform: `scale(${previewScale})`
+                  },
+                  onLoad: (e) => {
+                    try {
+                      const iframe = e.currentTarget;
+                      const root = iframe.contentDocument?.querySelector("[data-composition-id]");
+                      const width = Number(root?.getAttribute("data-width")) || DEFAULT_PREVIEW_STAGE.width;
+                      const height = Number(root?.getAttribute("data-height")) || DEFAULT_PREVIEW_STAGE.height;
+                      setStageSize({ width, height });
+                      setLivePreviewLoaded(true);
+                      requestIframePlaybackSync(true);
+                    } catch {
+                      setStageSize(DEFAULT_PREVIEW_STAGE);
+                    }
+                  },
+                  title: `${name} preview`,
+                  tabIndex: -1
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs160(
           "div",
           {
@@ -85764,7 +85747,7 @@ function CompCard({
                   "span",
                   {
                     "aria-label": `${lintInfo.count} lint finding${lintInfo.count === 1 ? "" : "s"}`,
-                    className: "shrink-0 min-w-[16px] text-center rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400",
+                    className: "shrink-0 min-w-[16px] text-center rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-warning-ink",
                     children: lintInfo.count
                   }
                 )
@@ -85783,7 +85766,7 @@ function CompCard({
               event.stopPropagation();
               onAddToTimeline();
             },
-            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-neutral-600 opacity-0 transition-[color,background-color,opacity] hover:bg-neutral-800 hover:text-studio-accent group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100",
+            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-neutral-600 opacity-0 transition-[color,background-color,opacity] hover:bg-neutral-800 hover:text-accent-ink group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100",
             children: /* @__PURE__ */ jsx202("span", { "aria-hidden": "true", children: "+" })
           }
         ),
@@ -85797,7 +85780,7 @@ function CompCard({
               e.stopPropagation();
               onRender();
             },
-            className: `flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${isRendering ? "text-neutral-600 cursor-not-allowed" : "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"}`,
+            className: `flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${isRendering ? "text-neutral-600 cursor-not-allowed" : "text-neutral-600 hover:text-accent-ink hover:bg-neutral-800"}`,
             children: /* @__PURE__ */ jsxs160(
               "svg",
               {
@@ -85839,7 +85822,7 @@ var CompositionsTab = memo43(function CompositionsTab2({
   if (compositions.length === 0) {
     return /* @__PURE__ */ jsx202("div", { className: "flex-1 flex items-center justify-center px-4", children: /* @__PURE__ */ jsx202("p", { className: "text-xs text-neutral-600 text-center", children: "No compositions found" }) });
   }
-  return /* @__PURE__ */ jsx202("div", { className: "flex-1 overflow-y-auto", children: compositions.map((comp) => /* @__PURE__ */ jsx202(
+  return /* @__PURE__ */ jsx202("div", { className: "flex-1 overflow-y-auto", "data-composition-list": true, children: compositions.map((comp) => /* @__PURE__ */ jsx202(
     CompCard,
     {
       projectId,
@@ -85885,7 +85868,7 @@ function SidebarLintButton({
       type: "button",
       onClick: onLint,
       disabled: linting,
-      className: "w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-amber-300 enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40",
+      className: "w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-warning-ink enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40",
       children: [
         /* @__PURE__ */ jsxs161(
           "svg",
@@ -85908,7 +85891,7 @@ function SidebarLintButton({
           {
             "data-lint-badge": hasError ? "error" : "warning",
             style: hasError ? { animationIterationCount: ERROR_PULSES_BEFORE_IDLE } : void 0,
-            className: hasError ? "ml-1 min-w-[16px] rounded-full bg-panel-danger/25 px-1 text-[9px] font-bold text-panel-danger animate-pulse motion-reduce:animate-none" : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400",
+            className: hasError ? "ml-1 min-w-[16px] rounded-full bg-danger px-1 text-[9px] font-bold text-on-danger animate-pulse motion-reduce:animate-none" : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-warning-ink",
             children: [
               findingCount,
               /* @__PURE__ */ jsx204("span", { className: "sr-only", children: hasError ? " lint findings, including errors" : " lint findings, warnings only" })
@@ -86646,7 +86629,7 @@ var LayersPanel = memo44(function LayersPanel2() {
                         handleSelectLayer(layer);
                       }
                     },
-                    className: `group flex w-full items-center gap-1.5 px-2 py-1 text-left transition-colors ${isDragged ? "opacity-40" : selected ? "bg-panel-accent/14 text-panel-accent" : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"} ${dragKey ? "cursor-grabbing" : "cursor-pointer"}`,
+                    className: `group flex w-full items-center gap-1.5 px-2 py-1 text-left transition-colors ${isDragged ? "opacity-40" : selected ? "bg-panel-accent/14 text-accent-ink" : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"} ${dragKey ? "cursor-grabbing" : "cursor-pointer"}`,
                     style: { paddingLeft: 8 + layer.depth * 16 },
                     title: draggable ? layer.element.hasAttribute("data-hf-group") ? "Double-click to enter group" : void 0 : "This layer can't be reordered",
                     children: [
@@ -86674,7 +86657,7 @@ var LayersPanel = memo44(function LayersPanel2() {
                       /* @__PURE__ */ jsx206(
                         "span",
                         {
-                          className: `flex h-5 w-5 shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${selected ? "bg-panel-accent/18 text-panel-accent" : isCompHost ? "bg-panel-accent/40 text-panel-accent" : "bg-panel-hover text-panel-text-4"}`,
+                          className: `flex h-5 w-5 shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${selected ? "bg-panel-accent/18 text-accent-ink" : isCompHost ? "bg-on text-accent-ink" : "bg-panel-hover text-panel-text-4"}`,
                           children: getTagBadge(layer.tagName)
                         }
                       ),
@@ -86955,7 +86938,7 @@ var CaptionAnimationPanel = memo45(function CaptionAnimationPanel2() {
   }
   const gated = !ANIMATION_PIPELINE_WIRED;
   return /* @__PURE__ */ jsxs165("div", { className: "flex flex-col h-full min-h-0", children: [
-    gated && /* @__PURE__ */ jsx208("div", { className: "shrink-0 mx-3 mt-2 px-2 py-1.5 rounded-sm border border-amber-500/30 bg-amber-500/10", children: /* @__PURE__ */ jsx208("p", { className: "text-2xs text-amber-300/90 leading-snug", children: "Animation editing isn't applied to playback or saved yet, so these controls are disabled." }) }),
+    gated && /* @__PURE__ */ jsx208("div", { className: "shrink-0 mx-3 mt-2 px-2 py-1.5 rounded-sm border border-amber-500/30 bg-amber-500/10", children: /* @__PURE__ */ jsx208("p", { className: "text-2xs text-warning-ink leading-snug", children: "Animation editing isn't applied to playback or saved yet, so these controls are disabled." }) }),
     /* @__PURE__ */ jsxs165("div", { className: "flex-1 overflow-y-auto px-3 py-2", children: [
       /* @__PURE__ */ jsx208(
         AnimationPhase,
@@ -86996,7 +86979,7 @@ var CaptionAnimationPanel = memo45(function CaptionAnimationPanel2() {
         onClick: handleApplyToAll,
         disabled: gated,
         title: gated ? "Disabled until animation editing is applied to playback" : void 0,
-        className: "w-full py-1.5 rounded-sm border border-neutral-700 text-2xs text-neutral-300 hover:border-studio-accent/50 hover:text-studio-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-700 disabled:hover:text-neutral-300",
+        className: "w-full py-1.5 rounded-sm border border-neutral-700 text-2xs text-neutral-300 hover:border-studio-accent/50 hover:text-accent-ink transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-700 disabled:hover:text-neutral-300",
         children: "Apply to all groups"
       }
     ) })
@@ -87157,7 +87140,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
             onClick: () => setActiveTab("style"),
             className: [
               "flex-1 py-0.5 rounded-sm text-2xs font-medium transition-colors",
-              activeTab === "style" ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50" : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600"
+              activeTab === "style" ? "bg-studio-accent/20 text-accent-ink border border-studio-accent/50" : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600"
             ].join(" "),
             children: "Style"
           }
@@ -87171,7 +87154,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
             onClick: () => setActiveTab("animation"),
             className: [
               "flex-1 py-0.5 rounded-sm text-2xs font-medium transition-colors",
-              activeTab === "animation" ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50" : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600"
+              activeTab === "animation" ? "bg-studio-accent/20 text-accent-ink border border-studio-accent/50" : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600"
             ].join(" "),
             children: "Animation"
           }
@@ -87362,7 +87345,7 @@ var BlockParamsPanel = memo47(function BlockParamsPanel2({
     /* @__PURE__ */ jsxs167("div", { className: "flex-1 overflow-y-auto p-3 space-y-3", children: [
       /* @__PURE__ */ jsx210("div", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider", children: "Parameters" }),
       params.length === 0 && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-neutral-500", children: "This block has no editable parameters." }),
-      !fileManager && params.length > 0 && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-amber-400/90", children: "Block params can't be edited here \u2014 no project file access." }),
+      !fileManager && params.length > 0 && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-warning-ink", children: "Block params can't be edited here \u2014 no project file access." }),
       params.map((param) => /* @__PURE__ */ jsx210(
         ParamControl,
         {
@@ -87374,11 +87357,11 @@ var BlockParamsPanel = memo47(function BlockParamsPanel2({
         param.key
       )),
       commitState.tone === "saving" && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-neutral-500", role: "status", children: "Saving\u2026" }),
-      commitState.tone === "saved" && /* @__PURE__ */ jsxs167("div", { className: "text-[10px] text-emerald-500/90", role: "status", children: [
+      commitState.tone === "saved" && /* @__PURE__ */ jsxs167("div", { className: "text-[10px] text-accent-ink", role: "status", children: [
         "Saved to ",
         compositionPath
       ] }),
-      commitState.tone === "error" && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-red-400", role: "alert", children: commitState.message })
+      commitState.tone === "error" && /* @__PURE__ */ jsx210("div", { className: "text-[10px] text-danger-ink", role: "alert", children: commitState.message })
     ] })
   ] });
 });
@@ -87460,7 +87443,7 @@ function ParamControl({
 import { memo as memo51 } from "react";
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo50, useState as useState140, useRef as useRef175, useEffect as useEffect141, useLayoutEffect as useLayoutEffect12, useId as useId5 } from "react";
+import { memo as memo50, useState as useState140, useRef as useRef175, useEffect as useEffect141, useLayoutEffect as useLayoutEffect13, useId as useId5 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
@@ -87552,7 +87535,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
                 )
               ] }),
               isRendering && /* @__PURE__ */ jsx211("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx211("div", { className: "w-2 h-2 rounded-full bg-accent animate-pulse motion-reduce:animate-none" }) }),
-              job.status === "failed" && /* @__PURE__ */ jsx211("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx211("div", { className: "w-2 h-2 rounded-full bg-danger" }) }),
+              job.status === "failed" && /* @__PURE__ */ jsx211("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx211("div", { className: "w-2 h-2 rounded-full bg-danger-ink" }) }),
               job.status === "cancelled" && /* @__PURE__ */ jsx211("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx211("div", { className: "w-2 h-2 rounded-full bg-text-5" }) })
             ]
           }
@@ -87565,7 +87548,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
           isRendering && /* @__PURE__ */ jsxs168("div", { className: "mt-1", children: [
             /* @__PURE__ */ jsxs168("div", { className: "flex items-center justify-between mb-0.5", children: [
               /* @__PURE__ */ jsx211("span", { className: "text-step-9 text-text-4", children: job.stage || "Rendering" }),
-              /* @__PURE__ */ jsxs168("span", { className: "text-step-9 font-mono text-accent", children: [
+              /* @__PURE__ */ jsxs168("span", { className: "text-step-9 font-mono text-accent-ink", children: [
                 job.progress,
                 "%"
               ] })
@@ -87589,7 +87572,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
               }
             )
           ] }),
-          job.status === "failed" && job.error && /* @__PURE__ */ jsx211("span", { className: "text-step-9 text-danger mt-0.5 block", children: job.error }),
+          job.status === "failed" && job.error && /* @__PURE__ */ jsx211("span", { className: "text-step-9 text-danger-ink mt-0.5 block", children: job.error }),
           job.status === "cancelled" && /* @__PURE__ */ jsx211("span", { className: "text-step-9 text-text-4 mt-0.5 block", children: "Cancelled" }),
           !isRendering && /* @__PURE__ */ jsx211("span", { className: "text-step-9 text-text-5", children: formatTimeAgo(job.createdAt) })
         ] }),
@@ -87728,17 +87711,17 @@ var FfmpegRequiredNotice = memo49(function FfmpegRequiredNotice2({
       className: "flex flex-col gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-2.5",
       children: [
         /* @__PURE__ */ jsxs169("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx212("span", { className: "text-[11px] font-semibold text-amber-300", children: status.title ?? "FFmpeg not found" }),
+          /* @__PURE__ */ jsx212("span", { className: "text-[11px] font-semibold text-warning-ink", children: status.title ?? "FFmpeg not found" }),
           /* @__PURE__ */ jsx212("span", { className: "text-[10px] leading-snug text-pretty text-panel-text-2", children: status.detail ?? "FFmpeg is required to encode video." })
         ] }),
         status.command ? /* @__PURE__ */ jsxs169("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx212("code", { className: "flex-1 overflow-x-auto whitespace-nowrap rounded-xs bg-black/40 px-2 py-1 text-[10px] text-panel-text-2", children: status.command }),
+          /* @__PURE__ */ jsx212("code", { className: "flex-1 overflow-x-auto whitespace-nowrap rounded-xs bg-input px-2 py-1 text-[10px] text-panel-text-2", children: status.command }),
           /* @__PURE__ */ jsx212(
             "button",
             {
               type: "button",
               onClick: () => void copy(status.command ?? ""),
-              className: `h-6 w-14 shrink-0 rounded-xs border border-amber-500/30 text-[10px] font-medium text-amber-200 transition-colors hover:bg-amber-500/20 active:scale-[0.98] ${FOCUS_RING}`,
+              className: `h-6 w-14 shrink-0 rounded-xs border border-amber-500/30 text-[10px] font-medium text-warning-ink transition-colors hover:bg-amber-500/20 active:scale-[0.98] ${FOCUS_RING}`,
               children: copied ? "Copied" : "Copy"
             }
           )
@@ -87750,7 +87733,7 @@ var FfmpegRequiredNotice = memo49(function FfmpegRequiredNotice2({
               type: "button",
               onClick: onRecheck,
               disabled: checking,
-              className: `rounded-xs py-0.5 text-[10px] font-medium text-amber-200 underline-offset-2 transition-colors hover:underline disabled:opacity-50 ${FOCUS_RING}`,
+              className: `rounded-xs py-0.5 text-[10px] font-medium text-warning-ink underline-offset-2 transition-colors hover:underline disabled:opacity-50 ${FOCUS_RING}`,
               children: checking ? "Checking\u2026" : "Recheck"
             }
           ),
@@ -87845,7 +87828,7 @@ function FormatInfoTooltip({ format }) {
     timeoutRef.current = setTimeout(() => setOpen(false), 120);
   };
   useEffect141(() => () => clearTimeout(timeoutRef.current), []);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     if (!open) return;
     const el = triggerRef.current;
     if (!el) return;
@@ -88111,7 +88094,7 @@ var RenderQueue = memo50(function RenderQueue2({
         role: "alert",
         className: "flex items-start justify-between gap-2 px-3 py-2 border-b border-border bg-danger/10",
         children: [
-          /* @__PURE__ */ jsx213("span", { className: "text-step-10 text-danger", children: actionError }),
+          /* @__PURE__ */ jsx213("span", { className: "text-step-10 text-danger-ink", children: actionError }),
           onDismissActionError && /* @__PURE__ */ jsx213(
             IconButton,
             {
@@ -88139,7 +88122,7 @@ var RenderQueue = memo50(function RenderQueue2({
       }
     ),
     /* @__PURE__ */ jsx213("div", { ref: listRef, className: "flex-1 overflow-y-auto", children: loadError && jobs.length === 0 ? /* @__PURE__ */ jsxs170("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", role: "alert", children: [
-      /* @__PURE__ */ jsx213("p", { className: "text-step-10 text-danger text-center", children: loadError }),
+      /* @__PURE__ */ jsx213("p", { className: "text-step-10 text-danger-ink text-center", children: loadError }),
       onRetryLoad && /* @__PURE__ */ jsx213(Button, { size: "sm", variant: "secondary", onClick: onRetryLoad, children: "Retry" })
     ] }) : jobs.length === 0 ? /* @__PURE__ */ jsxs170("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", children: [
       /* @__PURE__ */ jsxs170(
@@ -88288,7 +88271,7 @@ function SlideList({
           role: "button",
           tabIndex: 0,
           "aria-pressed": isSelected,
-          className: `flex items-center gap-2 px-3 py-1.5 rounded cursor-pointer text-[11px] transition-colors ${isSelected ? "bg-studio-accent/20 text-white" : "hover:bg-neutral-800/60 text-neutral-300"}`,
+          className: `flex items-center gap-2 px-3 py-1.5 rounded cursor-pointer text-[11px] transition-colors ${isSelected ? "bg-on text-text-0" : "hover:bg-neutral-800/60 text-neutral-300"}`,
           onClick: () => onSelect(scene.id),
           onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
@@ -88317,7 +88300,7 @@ function SlideList({
                   "aria-label": "Move slide up",
                   title: "Move up",
                   disabled: slideIndex <= 0,
-                  className: "px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-white enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed",
+                  className: "px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-text-0 enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed",
                   onClick: (e) => {
                     e.stopPropagation();
                     onReorder(scene.id, "up");
@@ -88332,7 +88315,7 @@ function SlideList({
                   "aria-label": "Move slide down",
                   title: "Move down",
                   disabled: slideIndex === slides.length - 1,
-                  className: "px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-white enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed",
+                  className: "px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-text-0 enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed",
                   onClick: (e) => {
                     e.stopPropagation();
                     onReorder(scene.id, "down");
@@ -88368,7 +88351,7 @@ function SlideInspector({
       /* @__PURE__ */ jsx215(
         "textarea",
         {
-          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1.5 text-[11px] text-white resize-none placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
+          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1.5 text-[11px] text-text-0 resize-none placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
           rows: 3,
           placeholder: "Speaker notes or script...",
           value: slide?.notes ?? "",
@@ -88383,7 +88366,7 @@ function SlideInspector({
           "button",
           {
             type: "button",
-            className: "text-[10px] px-2 py-0.5 rounded-sm bg-neutral-700 hover:bg-neutral-600 text-neutral-200 transition-colors",
+            className: "text-[10px] px-2 py-0.5 rounded-sm bg-hover hover:bg-press text-neutral-200 transition-colors",
             onClick: onMarkFragment,
             title: `Mark ${currentTime.toFixed(2)}s as hold-point`,
             children: [
@@ -88406,7 +88389,7 @@ function SlideInspector({
               {
                 type: "button",
                 "aria-label": `Remove fragment at ${t.toFixed(2)}s`,
-                className: "text-neutral-400 hover:text-red-400 transition-colors",
+                className: "text-neutral-400 hover:text-danger-ink transition-colors",
                 onClick: () => onRemoveFragment(t),
                 children: "\xD7"
               }
@@ -88444,7 +88427,7 @@ function BranchTree({
         {
           id: inputId,
           type: "text",
-          className: "flex-1 bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-white placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
+          className: "flex-1 bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-text-0 placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
           placeholder: "New branch name...",
           value: newLabel,
           onChange: (e) => setNewLabel(e.target.value),
@@ -88458,7 +88441,7 @@ function BranchTree({
         "button",
         {
           type: "button",
-          className: "px-2 py-1 rounded-sm bg-neutral-700 hover:bg-neutral-600 text-[11px] text-neutral-200 transition-colors shrink-0",
+          className: "px-2 py-1 rounded-sm bg-hover hover:bg-press text-[11px] text-neutral-200 transition-colors shrink-0",
           onClick: handleCreate,
           children: "Add"
         }
@@ -88503,7 +88486,7 @@ function BranchItem({
       editing ? /* @__PURE__ */ jsx215(
         "input",
         {
-          className: "flex-1 bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-0.5 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden",
+          className: "flex-1 bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-0.5 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden",
           value: draft,
           autoFocus: true,
           onChange: (e) => setDraft(e.target.value),
@@ -88519,7 +88502,7 @@ function BranchItem({
         {
           role: "button",
           tabIndex: 0,
-          className: "flex-1 text-[11px] text-white font-medium truncate cursor-pointer hover:text-neutral-300",
+          className: "flex-1 text-[11px] text-text-0 font-medium truncate cursor-pointer hover:text-neutral-300",
           title: "Click to rename",
           onClick: () => setEditing(true),
           onKeyDown: (e) => {
@@ -88536,14 +88519,14 @@ function BranchItem({
         {
           type: "button",
           "aria-label": `Delete branch ${seq.label}`,
-          className: "text-[10px] text-neutral-500 hover:text-red-400 active:scale-[0.95] transition-colors px-1",
+          className: "text-[10px] text-neutral-500 hover:text-danger-ink active:scale-[0.95] transition-colors px-1",
           onClick: () => setConfirmingDelete(true),
           children: "\u2715"
         }
       )
     ] }),
-    confirmingDelete && /* @__PURE__ */ jsxs171("div", { className: "px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex flex-col gap-1 rounded-xs", children: [
-      /* @__PURE__ */ jsxs171("span", { className: "text-[10px] text-red-400", children: [
+    confirmingDelete && /* @__PURE__ */ jsxs171("div", { className: "px-2 py-1.5 bg-danger/15 border-l-2 border-red-500 flex flex-col gap-1 rounded-xs", children: [
+      /* @__PURE__ */ jsxs171("span", { className: "text-[10px] text-danger-ink", children: [
         "Delete branch \u201C",
         seq.label,
         "\u201D",
@@ -88559,7 +88542,7 @@ function BranchItem({
               setConfirmingDelete(false);
               onDelete(seq.id);
             },
-            className: "px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors",
+            className: "px-2 py-0.5 text-[10px] rounded-sm bg-danger text-on-danger hover:brightness-95 active:brightness-90 transition-colors",
             children: "Delete"
           }
         ),
@@ -88598,7 +88581,7 @@ function BranchItem({
                 {
                   type: "button",
                   "aria-pressed": isSelected,
-                  className: `flex-1 text-left truncate transition-colors hover:text-neutral-200 ${isSelected ? "text-white" : "text-neutral-400"}`,
+                  className: `flex-1 text-left truncate transition-colors hover:text-neutral-200 ${isSelected ? "text-text-0" : "text-neutral-400"}`,
                   onClick: () => onSelectBranchSlide(seq.id, scene.id),
                   children: scene.label || scene.id
                 }
@@ -88650,7 +88633,7 @@ function HotspotTool({
         "input",
         {
           type: "text",
-          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-white placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
+          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-text-0 placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
           placeholder: "Button label...",
           value: hotspotLabel,
           onChange: (e) => setHotspotLabel(e.target.value),
@@ -88661,7 +88644,7 @@ function HotspotTool({
       /* @__PURE__ */ jsxs171(
         "select",
         {
-          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden",
+          className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden",
           value: targetSequenceId,
           onChange: (e) => setTargetSequenceId(e.target.value),
           "aria-label": "Target branch sequence",
@@ -88677,7 +88660,7 @@ function HotspotTool({
           type: "button",
           disabled: !elementKey3 || !targetSequenceId,
           title: !elementKey3 ? "Select an element on the canvas first" : !targetSequenceId ? "Choose a target branch first" : void 0,
-          className: "px-3 py-1.5 rounded-sm bg-studio-accent/80 enabled:hover:bg-studio-accent enabled:active:scale-[0.98] text-white text-[11px] font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+          className: "px-3 py-1.5 rounded-sm bg-accent enabled:hover:bg-accent-hover enabled:active:scale-[0.98] text-on-accent text-[11px] font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
           onClick: handleMakeHotspot,
           children: "Make hotspot"
         }
@@ -88702,7 +88685,7 @@ function HotspotTool({
                 {
                   type: "button",
                   "aria-label": `Remove hotspot ${h.label}`,
-                  className: "text-[10px] text-neutral-500 hover:text-red-400 transition-colors",
+                  className: "text-[10px] text-neutral-500 hover:text-danger-ink transition-colors",
                   onClick: () => onRemoveHotspot(selectedSceneId, h.id),
                   children: "\u2715"
                 }
@@ -89114,7 +89097,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   return /* @__PURE__ */ jsxs172(
     "div",
     {
-      className: "flex flex-col h-full overflow-y-auto text-white",
+      className: "flex flex-col h-full overflow-y-auto text-text-0",
       onKeyDown: (e) => {
         if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "z") {
           const target = e.target instanceof HTMLElement ? e.target.tagName : "";
@@ -89129,16 +89112,16 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
           "div",
           {
             role: "alert",
-            className: "flex items-center justify-between gap-2 px-3 py-2 bg-red-950/40 border-b border-red-500/40",
+            className: "flex items-center justify-between gap-2 px-3 py-2 bg-danger/15 border-b border-red-500/40",
             children: [
-              /* @__PURE__ */ jsx216("span", { className: "text-[11px] text-red-300", children: "Changes not saved" }),
+              /* @__PURE__ */ jsx216("span", { className: "text-[11px] text-danger-ink", children: "Changes not saved" }),
               /* @__PURE__ */ jsx216(
                 "button",
                 {
                   type: "button",
                   disabled: retrying,
                   onClick: handleRetryPersist,
-                  className: "px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white enabled:hover:bg-red-500 enabled:active:scale-[0.97] disabled:opacity-50 transition-colors",
+                  className: "px-2 py-0.5 text-[10px] rounded-sm bg-danger text-on-danger enabled:hover:brightness-95 enabled:active:scale-[0.97] disabled:opacity-50 transition-colors",
                   children: retrying ? "Retrying\u2026" : "Retry"
                 }
               )
@@ -89255,7 +89238,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo52, useCallback as useCallback176, useEffect as useEffect144, useMemo as useMemo80, useState as useState146 } from "react";
+import { memo as memo52, useCallback as useCallback176, useEffect as useEffect144, useMemo as useMemo81, useState as useState146 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback173 } from "react";
@@ -89600,7 +89583,7 @@ function DeclarationForm({
         className: VARIABLES_INPUT_CLASS
       }
     ) }),
-    error && /* @__PURE__ */ jsx217("p", { className: "text-[10px] text-red-400", children: error }),
+    error && /* @__PURE__ */ jsx217("p", { className: "text-[10px] text-danger-ink", children: error }),
     /* @__PURE__ */ jsxs173("div", { className: "flex items-center justify-end gap-2 pt-1", children: [
       /* @__PURE__ */ jsx217(
         "button",
@@ -89638,7 +89621,7 @@ function RowAction({
       type: "button",
       onClick,
       title,
-      className: `h-5 rounded px-1.5 text-[9px] text-neutral-500 hover:bg-neutral-800 ${danger ? "hover:text-red-400" : "hover:text-neutral-200"}`,
+      className: `h-5 rounded px-1.5 text-[9px] text-neutral-500 hover:bg-neutral-800 ${danger ? "hover:text-danger-ink" : "hover:text-neutral-200"}`,
       children: label
     }
   );
@@ -89782,7 +89765,7 @@ function formatIssue(issue) {
 }
 function ValidationStrip({ issues }) {
   if (issues.length === 0) return null;
-  return /* @__PURE__ */ jsx220("div", { className: "space-y-1 rounded-lg border border-red-900/60 bg-red-950/30 p-2", children: issues.map((issue) => /* @__PURE__ */ jsx220("p", { className: "text-[10px] text-red-300", children: formatIssue(issue) }, `${issue.kind}:${issue.variableId}`)) });
+  return /* @__PURE__ */ jsx220("div", { className: "space-y-1 rounded-lg border border-danger/40 bg-danger/15 p-2", children: issues.map((issue) => /* @__PURE__ */ jsx220("p", { className: "text-[10px] text-danger-ink", children: formatIssue(issue) }, `${issue.kind}:${issue.variableId}`)) });
 }
 function VariableRow({
   decl,
@@ -89803,7 +89786,7 @@ function VariableRow({
       unused && /* @__PURE__ */ jsx220(
         "span",
         {
-          className: "rounded-sm bg-amber-900/40 px-1 py-px text-[8px] text-amber-400",
+          className: "rounded-sm bg-amber-500/15 px-1 py-px text-[8px] text-warning-ink",
           title: "No script reads this variable",
           children: "unused"
         }
@@ -89865,7 +89848,7 @@ function PreviewModeHeader({
       /* @__PURE__ */ jsx220(
         "span",
         {
-          className: `rounded-full px-2 py-0.5 text-[9px] font-medium ${hasOverrides ? "bg-studio-accent/20 text-studio-accent" : "bg-neutral-800 text-neutral-500"}`,
+          className: `rounded-full px-2 py-0.5 text-[9px] font-medium ${hasOverrides ? "bg-studio-accent/20 text-accent-ink" : "bg-neutral-800 text-neutral-500"}`,
           children: hasOverrides ? `Previewing ${overrideCount} custom` : "Previewing defaults"
         }
       )
@@ -89951,22 +89934,22 @@ var VariablesPanel = memo52(function VariablesPanel2({
     reloadPreview,
     publishSdkSession
   });
-  const declarations = useMemo80(
+  const declarations = useMemo81(
     () => sdkSession?.getVariableDeclarations() ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const usage = useMemo80(
+  const usage = useMemo81(
     () => sdkSession?.getVariableUsage() ?? null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const issues = useMemo80(
+  const issues = useMemo81(
     () => previewValues && sdkSession ? sdkSession.validateVariableValues(previewValues) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const effectiveValues = useMemo80(
+  const effectiveValues = useMemo81(
     () => sdkSession?.getVariableValues(previewValues ?? void 0) ?? {},
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
@@ -90281,15 +90264,15 @@ function useSlideshowPersist({
 }
 
 // src/hooks/useSlideshowTabState.ts
-import { useMemo as useMemo81 } from "react";
+import { useMemo as useMemo82 } from "react";
 import { SLIDESHOW_ISLAND_TYPE as SLIDESHOW_ISLAND_TYPE2, slideshowIslandRegex as slideshowIslandRegex2 } from "@hyperframes/core/slideshow";
 function useSlideshowTabState(params) {
   const { editingFileContent, previewIframeRef, refreshKey, slideshowVisible } = params;
-  const isSlideshowComposition = useMemo81(() => {
+  const isSlideshowComposition = useMemo82(() => {
     if (!editingFileContent || !editingFileContent.includes(SLIDESHOW_ISLAND_TYPE2)) return false;
     return slideshowIslandRegex2("i").test(editingFileContent);
   }, [editingFileContent]);
-  const slideshowScenes = useMemo81(() => {
+  const slideshowScenes = useMemo82(() => {
     try {
       const win = previewIframeRef.current?.contentWindow;
       return (win?.__clipManifest?.scenes ?? []).map((s) => ({
@@ -91308,12 +91291,6 @@ function RippleEditIcon({ size = 16 }) {
   );
 }
 
-// src/components/timelineToolbarStyles.ts
-var flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
-var flatIdle = `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-neutral-200 active:scale-[0.98]`;
-var flatActive = `${flatBtn} bg-white/8 text-neutral-100 active:scale-[0.98]`;
-var flatDisabled = `${flatBtn} text-neutral-700 cursor-not-allowed`;
-
 // src/components/TimelineHistoryButtons.tsx
 import { Fragment as Fragment62, jsx as jsx225, jsxs as jsxs178 } from "react/jsx-runtime";
 function HistoryButton({ action, can, label, onClick }) {
@@ -91426,7 +91403,7 @@ function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
           shortcut: row.shortcut,
           onClick: row.run,
           "data-active": row.active || void 0,
-          className: row.active ? "bg-neutral-800 text-white" : void 0,
+          className: row.active ? "bg-press text-text-0" : void 0,
           children: /* @__PURE__ */ jsxs179("span", { className: "flex items-center gap-2", children: [
             row.icon,
             row.label
@@ -91613,7 +91590,7 @@ function TimelineToolbar({
                   disabled: !onToggleKeyframe,
                   onClick: onToggleKeyframe,
                   "aria-label": keyframePathEndpoint ? "Motion path endpoint" : keyframeIsMotionPath ? keyframeState === "active" ? "Remove motion path waypoint" : keyframeWillExtend ? "Extend motion path to playhead" : "Add motion path waypoint" : keyframeState === "active" ? "Remove keyframe at playhead" : "Add keyframe at playhead",
-                  className: !onToggleKeyframe ? flatDisabled : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${keyframeState === "active" ? "text-studio-accent" : keyframeState === "inactive" ? "text-neutral-400 hover:text-studio-accent" : "text-neutral-600 hover:text-neutral-400"}`,
+                  className: !onToggleKeyframe ? flatDisabled : `${flatBtn} active:scale-[0.98] hover:bg-hover ${keyframeState === "active" ? "text-accent-ink" : keyframeState === "inactive" ? "text-neutral-400 hover:text-accent-ink" : "text-neutral-600 hover:text-neutral-400"}`,
                   children: /* @__PURE__ */ jsx227("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx227("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx227(
                     "path",
                     {
@@ -91638,7 +91615,7 @@ function TimelineToolbar({
                   onClick: () => setAutoKeyframeEnabled(!autoKeyframeEnabled),
                   "aria-label": "Auto-record manual edits as keyframes",
                   "aria-pressed": autoKeyframeEnabled,
-                  className: `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${autoKeyframeEnabled ? "text-red-400 hover:text-red-300" : "text-neutral-600 hover:text-neutral-400"}`,
+                  className: `${flatBtn} active:scale-[0.98] hover:bg-hover ${autoKeyframeEnabled ? "text-danger-ink" : "text-neutral-600 hover:text-neutral-400"}`,
                   children: /* @__PURE__ */ jsxs180("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
                     /* @__PURE__ */ jsx227("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
                     /* @__PURE__ */ jsx227(
@@ -91715,7 +91692,7 @@ function TimelineToolbar({
                   onClick: () => {
                     if (canAdd) addBeatAtCompositionTime(currentTime);
                   },
-                  className: canAdd ? `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-[#22c55e] active:scale-[0.98]` : flatDisabled,
+                  className: canAdd ? `${flatBtn} text-text-2 hover:bg-hover hover:text-accent-ink active:scale-[0.98]` : flatDisabled,
                   children: /* @__PURE__ */ jsx227("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx227(
                     "path",
                     {
@@ -91744,7 +91721,7 @@ function TimelineToolbar({
                 "aria-label": thumbnailsVisible ? "Hide thumbnails \u2014 labels only" : "Show thumbnails \u2014 posters stay visible; richer previews appear on interaction",
                 "aria-pressed": thumbnailsVisible,
                 onClick: () => setThumbnailMode(thumbnailsVisible ? "hidden" : "adaptive"),
-                className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${thumbnailsVisible ? "bg-studio-accent/10 text-studio-accent" : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"}`,
+                className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${thumbnailsVisible ? "bg-studio-accent/10 text-accent-ink" : "text-neutral-400 hover:bg-hover hover:text-neutral-200"}`,
                 children: /* @__PURE__ */ jsx227(Image3, { size: 16, "aria-hidden": "true" })
               }
             )
@@ -91757,7 +91734,7 @@ function TimelineToolbar({
             onClick: () => setZoomMode("fit"),
             "aria-label": "Fit timeline to width",
             "aria-pressed": zoomMode === "fit",
-            className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${zoomMode === "fit" ? "bg-studio-accent/10 text-studio-accent" : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"}`,
+            className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${zoomMode === "fit" ? "bg-studio-accent/10 text-accent-ink" : "text-neutral-400 hover:bg-hover hover:text-neutral-200"}`,
             children: /* @__PURE__ */ jsx227(ArrowsOutLineHorizontal, { size: 16, "aria-hidden": "true" })
           }
         ) }),
@@ -91791,7 +91768,7 @@ function TimelineToolbar({
                 timelineSliderToZoomPercent(Number(e.target.value), timelineFitPps)
               );
             },
-            className: "mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
+            className: "mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-text-0 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
           }
         ),
         /* @__PURE__ */ jsx227(Tooltip, { label: "Zoom in", children: /* @__PURE__ */ jsx227(
@@ -92142,7 +92119,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     recordEdit: editHistory.recordEdit,
     setRefreshKey
   });
-  const masterCompPath = useMemo82(
+  const masterCompPath = useMemo83(
     () => resolveMasterCompositionPath(fileManager.compositions),
     [fileManager.compositions]
   );
@@ -92247,7 +92224,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   });
   const dismissBlockParams = useCallback186(() => setActiveBlockParams(null), [setActiveBlockParams]);
   const setRightPanelTab = useDismissingTabSetter(panelLayout.setRightPanelTab, dismissBlockParams);
-  const layout = useMemo82(
+  const layout = useMemo83(
     () => ({ ...panelLayout, setRightPanelTab }),
     [panelLayout, setRightPanelTab]
   );
@@ -92399,7 +92376,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   });
   handleToggleRecordingRef.current = handleToggleRecording;
   const canvasRectRef = useRef181(null);
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     if (gestureState !== "recording" || !previewIframe) {
       canvasRectRef.current = null;
       return;
@@ -92466,7 +92443,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion
   });
-  const timelineToolbar = useMemo82(
+  const timelineToolbar = useMemo83(
     () => /* @__PURE__ */ jsx229(
       TimelineToolbar,
       {
@@ -92983,7 +92960,7 @@ function findElementBlock(html2, elementId2) {
 }
 
 // src/hooks/useDomStyleCommit.ts
-import { useCallback as useCallback188, useMemo as useMemo83, useRef as useRef183, useState as useState151 } from "react";
+import { useCallback as useCallback188, useMemo as useMemo84, useRef as useRef183, useState as useState151 } from "react";
 var noop = () => {
 };
 function useDomStyleCommit({
@@ -92999,7 +92976,7 @@ function useDomStyleCommit({
   const [queue2] = useState151(createDomEditSaveQueue);
   useMountEffect(() => () => queue2.destroy());
   const versions = useRef183(/* @__PURE__ */ new Map()).current;
-  const editHistory = useMemo83(() => ({ recordEdit }), [recordEdit]);
+  const editHistory = useMemo84(() => ({ recordEdit }), [recordEdit]);
   const persistDomEditOperations = useDomEditPersist({
     activeCompPath,
     previewIframeRef: iframeRef,
@@ -93031,7 +93008,7 @@ function useDomStyleCommit({
 }
 
 // src/hooks/useDomGeometryCommit.ts
-import { useCallback as useCallback189, useMemo as useMemo84, useRef as useRef184, useState as useState152 } from "react";
+import { useCallback as useCallback189, useMemo as useMemo85, useRef as useRef184, useState as useState152 } from "react";
 var noop2 = () => {
 };
 var NO_SELECTED_ANIMATIONS = [];
@@ -93047,7 +93024,7 @@ function useDomGeometryCommit({
   const projectIdRef = useRef184(projectId);
   projectIdRef.current = projectId;
   const pending2 = useRef184(/* @__PURE__ */ new Set()).current;
-  const editHistory = useMemo84(() => ({ recordEdit }), [recordEdit]);
+  const editHistory = useMemo85(() => ({ recordEdit }), [recordEdit]);
   const reload = useCallback189(
     () => reloadPreview ? reloadPreview() : iframeRef.current?.contentWindow?.location.reload(),
     [reloadPreview, iframeRef]
@@ -93088,7 +93065,6 @@ function useDomGeometryCommit({
     [commitPositionPatchToHtml, queue2]
   );
   const { stageElementPositionOffset, handleDomBoxSizeCommit, handleDomRotationCommit } = useDomGeometryCommits({
-    previewIframeRef: iframeRef,
     showToast,
     commitPositionPatchToHtml: commitWithFreshQueue,
     readOnlyPreview: false
@@ -93138,7 +93114,7 @@ function useDomGeometryCommit({
     },
     [pending2, showToast]
   );
-  return useMemo84(
+  return useMemo85(
     () => ({
       commitPathOffset: (selection, next, modifiers) => saved2(() => handleGsapAwarePathOffsetCommit(selection, next, modifiers)),
       commitGroupPathOffset: (updates) => saved2(() => handleGsapAwareGroupPathOffsetCommit(updates)),