anentrypoint-design 0.0.478 → 0.0.481

package/src/kits/os/theme.css

@@ -37,9 +37,58 @@
     --os-bar-h-mobile: 52px;
     --os-rail-w: 64px;
     --os-tap: 44px;
+    /* Unified menubar control height: every clickable control in the top bar
+       (home/apps buttons, workspace tabs, tray icon buttons) sits on this one
+       height so the bar reads as a single control language instead of a mix
+       of pill buttons, chips, and icon buttons each sized on their own. */
+    --os-control-h: 28px;
     --os-font: var(--ff-ui);
     --os-display: var(--ff-display);
     --os-mono: var(--ff-mono);
+
+    /* ---- Unified spacing scale (--space-1..6) ----
+       colors_and_type.css already defines --space-1 (4px) through --space-6
+       (48px), plus finer hair/half/fractional rungs (--space-hair/half/0/1-5/
+       1-75/2-5/2-75/3-5), all loaded before this sheet for every .ds-247420
+       consumer. That IS the unified spacing scale this contract asks for — no
+       redeclaration here (a self-referencing `--space-1: var(--space-1)` would
+       be circular and resolve to invalid at computed-value time). New call
+       sites and the migrations below consolidate onto --space-1..6 directly. */
+
+    /* ---- Unified type scale (title / body / meta) ----
+       Maps onto the canonical --fs-* rail (colors_and_type.css) rather than
+       inventing new pixel values: title = display-weight heading size already
+       used by .os-drawer-title/.chat-empty-title (--fs-xl); body = the base
+       readable size already used by .chat-bubble/.app-pane (--fs-xs); meta =
+       the small secondary/timestamp size already used by .chat-meta/.os-clock
+       (--fs-nano). */
+    --font-size-title: var(--fs-xl);
+    --font-size-body: var(--fs-xs);
+    --font-size-meta: var(--fs-nano);
+
+    /* ---- Unified corner-radius scale (sm / md / lg / pill) ----
+       Aliases of the canonical --r-* rail (colors_and_type.css: --r-0 4px,
+       --r-1 8px, --r-2 10px, --r-3 14px, --r-pill 999px) under the names this
+       token contract specifies, so windows/buttons/badges can standardize on
+       one vocabulary instead of picking --r-0 vs --r-1 vs --r-2 ad hoc. */
+    --radius-sm: var(--r-1);
+    --radius-md: var(--r-2);
+    --radius-lg: var(--r-3);
+    --radius-pill: var(--r-pill, 999px);
+
+    /* ---- Unified color / accent system ----
+       --accent-primary is the brand lead (#247420 in the thebird preset via
+       --os-accent, which already resolves through --accent-ink); kept as its
+       own token (rather than a bare alias) so non-.ds-247420 consumers of this
+       kit get the literal brand green called for by this contract even before
+       any brand-scoped override applies. --color-success/warning/danger alias
+       the existing canonical severity primitives (--green-2/--sun/--warn) so
+       severity language is consistent with what --success/--warn already mean
+       everywhere else in colors_and_type.css — not a second competing set. */
+    --accent-primary: #247420;
+    --color-success: var(--success, var(--green-2, #3A9A34));
+    --color-warning: var(--sun, #F5C344);
+    --color-danger: var(--warn, #C41C0C);
 }
 
 html, body {
@@ -50,6 +99,20 @@ html, body {
     text-rendering: optimizeLegibility;
 }
 
+/* ---- Global focus-visible ring ----
+   Baseline accent-colored outline for every keyboard-focusable element
+   (inputs/textareas/buttons/links/contenteditable, including the terminal's
+   and chat composer's text entry) so focus is never invisible. Component-
+   level :focus-visible rules elsewhere in this sheet (chat composer textarea,
+   composer-btn, chat-empty-suggestion, fsb-row, ...) already set a matching
+   var(--os-accent) ring with layout-specific offset/inset and win by source
+   order + specificity; this is the catch-all every other focusable surface
+   falls back to. */
+.ds-247420 :focus-visible {
+    outline: 2px solid var(--os-accent);
+    outline-offset: 2px;
+}
+
 .os-menubar, .os-taskbar {
     background: color-mix(in oklab, var(--os-bg-2) 88%, transparent);
     backdrop-filter: blur(10px);
@@ -89,25 +152,35 @@ html, body {
     gap: var(--space-2);
     text-transform: lowercase;
 }
+/* Wordmark lockup: the mark echoes favicon.svg (rounded-square tile, accent
+   fill, monogram) instead of a bare accent dot, so the brand reads as an
+   actual logo mark next to the "thebird" text rather than plain type with a
+   decorative dot. Inlined as a data-URI (same technique renderFaviconTags
+   already uses for the <link rel="icon"> glyph case) since theme.css ships
+   standalone via unpkg with no guaranteed relative path to favicon.svg. */
 .os-brand::before {
     content: '';
     display: inline-block;
-    width: 8px; height: 8px;
-    border-radius: 50%;
-    background: var(--os-accent);
+    width: 16px; height: 16px;
+    border-radius: var(--r-1, 4px);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%23247420'/%3E%3Ctext x='16' y='22' font-family='ui-monospace,monospace' font-size='14' font-weight='700' fill='%23EFE9DD' text-anchor='middle'%3E24%3C/text%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+    flex: 0 0 auto;
 }
 
 .os-btn {
     background: transparent;
     color: var(--os-fg-2);
-    border: none;
-    padding: 7px 14px;
+    border: 1px solid transparent;
+    height: var(--os-control-h);
+    padding: 0 14px;
     cursor: pointer;
     font: inherit;
     font-family: var(--os-font);
     font-size: var(--fs-tiny);
-    border-radius: var(--r-pill, 999px);
-    transition: background 80ms ease, color 80ms ease;
+    border-radius: var(--radius-pill, var(--r-pill, 999px));
+    transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
     display: inline-flex;
     align-items: center;
     gap: var(--space-1-75);
@@ -124,9 +197,16 @@ html, body {
     position: absolute;
     background: var(--os-bg-1);
     border: none;
-    border-radius: var(--r-3, 18px);
+    border-radius: var(--radius-lg, var(--r-3, 18px));
     padding: var(--space-2, 8px);
     min-width: 220px;
+    /* Uncapped, the menu grows to its widest label and — at the common
+     * tablet-range window widths (~810-1150px) where content columns are
+     * already narrow — reads as covering most of the open content instead
+     * of a dropdown. Cap to a comfortable reading width but never past
+     * the viewport (same "must not extend past the viewport" contract the
+     * height clamp below already applies). */
+    max-width: min(320px, calc(100vw - var(--space-4, 16px)));
     top: calc(var(--os-bar-h) + var(--space-1, 4px));
     left: var(--space-2, 8px);
     z-index: var(--z-dropdown);
@@ -139,12 +219,40 @@ html, body {
     max-height: calc(100dvh - var(--os-bar-h) - env(safe-area-inset-top, 0px) - 16px);
     overflow-y: auto;
     overscroll-behavior: contain;
+    /* Scroll-shadow affordance: dual-background trick -- the fade gradients
+     * are pinned to the scrollport (background-attachment: local) so they
+     * only appear once there is actually more content to reveal in that
+     * direction, cueing that the menu is scrollable rather than just
+     * clipped at the viewport edge. */
+    background-image:
+        linear-gradient(var(--os-bg-1), var(--os-bg-1)),
+        linear-gradient(var(--os-bg-1), var(--os-bg-1)),
+        linear-gradient(to bottom, color-mix(in oklab, var(--os-bg-1) 100%, transparent), transparent),
+        linear-gradient(to top, color-mix(in oklab, var(--os-bg-1) 100%, transparent), transparent);
+    background-position: top, bottom, top, bottom;
+    background-repeat: no-repeat;
+    background-size: 100% var(--space-2, 8px), 100% var(--space-2, 8px), 100% var(--space-4, 16px), 100% var(--space-4, 16px);
+    background-attachment: local, local, scroll, scroll;
 }
 .os-menu.open { display: flex; }
+/* Dimming scrim behind the open apps menu — same var(--scrim) fixed-inset
+ * pattern as .tb-sess-overlay, but as a pseudo-element (not a sibling DOM
+ * node) since buildAppsMenu() in shell-chrome.js emits only the menu itself.
+ * pointer-events:none so existing click-outside-to-close handling (thebird
+ * JS) keeps working unmodified; the scrim sits one layer below the menu's
+ * own z-index but still above .wm-root's windows. */
+.os-menu.open::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-below);
+    background: var(--scrim);
+    pointer-events: none;
+}
 .os-menu .os-btn {
     width: 100%;
     text-align: left;
-    border-radius: var(--os-radius-sm);
+    border-radius: var(--radius-sm, var(--os-radius-sm));
     padding: var(--space-2) var(--space-2-5);
     color: var(--os-fg);
     justify-content: flex-start;
@@ -166,16 +274,19 @@ html, body {
 .os-clock {
     color: var(--os-fg-2);
     font-variant-numeric: tabular-nums;
-    font-family: var(--os-mono);
+    font-family: var(--os-font);
     padding: 0 var(--space-2-5);
     font-size: var(--fs-micro);
 }
 
 .os-task {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1-5, 6px);
     border: none;
     background: var(--os-bg-1);
     color: var(--os-fg-2);
-    border-radius: var(--r-pill, 999px);
+    border-radius: var(--radius-pill, var(--r-pill, 999px));
     padding: var(--space-1-75) 14px;
     font-size: var(--fs-micro);
     font-family: var(--os-font);
@@ -186,20 +297,23 @@ html, body {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    /* No text-transform here: .os-task carries the app/window's own dynamic
-     * title (shell.js refreshTaskbar -> t.textContent = w.title), and a
-     * user- or app-supplied string (filename, acronym, URL) must render
-     * as-authored rather than get silently lowercased by brand-voice CSS. */
+    /* No text-transform here: .os-task-label carries the app/window's own
+     * dynamic title (shell.js refreshTaskbar), and a user- or app-supplied
+     * string (filename, acronym, URL) must render as-authored rather than
+     * get silently lowercased by brand-voice CSS. */
 }
 .os-task { min-height: 28px; }
 .os-task:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
+.os-task .ic { flex: none; display: inline-flex; width: 14px; height: 14px; }
+.os-task .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
+.os-task-label { overflow: hidden; text-overflow: ellipsis; }
 /* Empty taskbar reads as an intentional strip, not a stray blurred bar. */
 .os-task-empty { font-size: var(--fs-nano); color: var(--os-fg-3); padding: 0 var(--space-2-5); font-family: var(--os-font); }
 .os-task.focused {
-    background: var(--panel-select, var(--os-accent-soft));
+    background: var(--panel-select, color-mix(in oklab, var(--os-accent) 30%, var(--os-bg-1)));
     color: var(--os-fg);
-    font-weight: 600;
-    box-shadow: inset 4px 0 0 var(--os-accent);
+    font-weight: 700;
+    box-shadow: inset 4px 0 0 var(--os-accent), inset 0 0 0 1px color-mix(in oklab, var(--os-accent) 40%, transparent);
 }
 
 /* Window-chrome overrides of wm.css.
@@ -212,14 +326,14 @@ html, body {
  * job by force. Do not un-scope these; the scope IS the override mechanism. */
 .ds-247420 .wm-win {
     background: var(--os-bg-1);
-    border: none;
-    border-radius: var(--r-3);
-    box-shadow: none;
+    border: 1px solid color-mix(in oklab, var(--os-fg) 14%, transparent);
+    border-radius: var(--radius-lg, var(--r-3));
+    box-shadow: var(--shadow-2);
     overflow: hidden;
 }
 .ds-247420 .wm-win.wm-focused {
-    border: none;
-    box-shadow: inset var(--space-1) 0 0 var(--os-accent);
+    border-color: color-mix(in oklab, var(--os-fg) 28%, transparent);
+    box-shadow: inset var(--space-1) 0 0 var(--os-accent), var(--shadow-3);
 }
 
 .ds-247420 .wm-bar {
@@ -227,6 +341,14 @@ html, body {
     border: none;
     padding: var(--space-2) var(--space-2-75);
     gap: var(--space-2-5);
+    transition: background 120ms ease;
+}
+/* Focused vs. unfocused titlebar differentiation: stacked windows otherwise
+ * share one flat gray bar and blur together. The focused window's bar picks
+ * up the accent-tinted panel shade and full-strength title text; unfocused
+ * bars stay on the plain background with dimmed title opacity. */
+.ds-247420 .wm-win.wm-focused .wm-bar {
+    background: color-mix(in oklab, var(--os-accent) 10%, var(--os-bg-2));
 }
 .ds-247420 .wm-title {
     font: var(--fs-tiny) var(--os-font);
@@ -234,15 +356,21 @@ html, body {
     letter-spacing: 0.005em;
     text-align: center;
     font-weight: 600;
+    opacity: 0.65;
+    transition: opacity 120ms ease;
     /* No text-transform here: the titlebar renders the window's own dynamic
      * title (renderWindow({title}) / setTitle(t) in wm.js) — a user- or
      * app-supplied filename/acronym/URL must not be silently lowercased. */
 }
-.ds-247420 .wm-btns { gap: var(--space-1-75); order: -1; }
+.ds-247420 .wm-win.wm-focused .wm-title {
+    color: var(--os-fg);
+    opacity: 1;
+}
+.ds-247420 .wm-btns { display: flex; align-items: center; gap: var(--space-1-75); order: -1; }
 .ds-247420 .wm-btn {
-    width: 22px;
-    height: 22px;
-    border-radius: var(--r-1);
+    width: 26px;
+    height: 26px;
+    border-radius: var(--radius-sm, var(--r-1));
     border: none;
     background: var(--os-bg-3);
     color: var(--os-fg-2);
@@ -256,11 +384,20 @@ html, body {
     transition: background 100ms ease, color 100ms ease;
 }
 .ds-247420 .wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
-.ds-247420 .wm-btn svg { width: 12px; height: 12px; display: block; fill: none; stroke: currentColor; }
+.ds-247420 .wm-btn svg { width: 13px; height: 13px; display: block; fill: none; stroke: currentColor; }
+/* Hover-only color differentiation on the close button (independent of the
+ * armed/confirm state below) so it reads as the destructive action at a
+ * glance, matching the base wm.css rule. */
+.ds-247420 .wm-btn[title='close']:hover,
+.ds-247420 .wm-btn[aria-label='close']:hover {
+    background: var(--color-danger);
+    color: var(--paper);
+}
 /* Armed (first-click) confirm state for the window close button's
  * second-click-to-confirm idiom — an unrecoverable close gets a visible cue
  * before it commits, matching the launcher dock's instance-close treatment. */
-.ds-247420 .wm-btn.confirm { background: var(--os-red); color: var(--paper); }
+.ds-247420 .wm-btn.confirm { background: var(--color-danger); color: var(--paper); }
+.ds-247420 .wm-btn.confirm:hover { background: color-mix(in oklab, var(--color-danger) 85%, black); }
 
 .ds-247420 .wm-resize {
     background: transparent;
@@ -338,7 +475,7 @@ html, body {
     box-sizing: border-box;
     background: var(--os-bg-2);
 }
-.os-drawer-title { color: var(--os-fg); font-family: var(--os-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; }
+.os-drawer-title { color: var(--os-fg); font-family: var(--os-display); font-size: var(--font-size-title, var(--fs-xl)); font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; }
 .os-drawer-close {
     width: 44px; height: 44px;
     border: none; background: transparent;
@@ -374,7 +511,7 @@ html, body {
     cursor: pointer;
     transition: background 80ms ease;
     outline: none;
-    border-radius: var(--r-3, 18px);
+    border-radius: var(--radius-lg, var(--r-3, 18px));
     text-transform: lowercase;
 }
 .os-drawer-tile:hover { background: var(--panel-hover, var(--os-bg-2)); }
@@ -387,7 +524,7 @@ html, body {
 .os-tray { display: flex; align-items: center; gap: var(--space-1-75); }
 .os-instances { display: flex; gap: var(--space-1); margin-left: var(--space-2); flex: 0 1 40vw; max-width: 40vw; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 var(--space-1); -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); }
 .os-instances::-webkit-scrollbar { height: 4px; }
-.os-instances .os-btn { flex: 0 0 auto; min-width: 36px; padding: var(--space-hair) var(--space-2); font-family: var(--os-mono); font-size: var(--fs-nano); }
+.os-instances .os-btn { flex: 0 0 auto; min-width: 36px; height: var(--os-control-h); padding: 0 var(--space-2); font-family: var(--os-mono); font-size: var(--fs-nano); }
 .os-instances .os-btn.active { background: var(--panel-select, var(--os-accent-soft)); color: var(--os-fg); border-color: var(--panel-accent, var(--os-accent)); box-shadow: inset 0 0 0 1px var(--panel-accent, var(--os-accent)); }
 .os-menubar [data-role="home"] { display: none; }
 .os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: calc(var(--z-dock) + 2); }
@@ -416,12 +553,13 @@ html, body {
 .app-pane.mono .head { color: var(--os-accent); margin-bottom: var(--space-2); padding-bottom: var(--space-2); font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid var(--os-bg-3); }
 /* Visible fetch-error surface for polling app panes (files/monitor): a swallowed
  * rejection must not leave the pane silently frozen with no user-facing signal. */
-.app-pane.mono .row-error { color: var(--danger, #c0392b); padding: var(--space-2); }
-.app-pane.mono[data-component="monitor-app"].is-error { color: var(--danger, #c0392b); }
+.app-pane.mono .row-error { color: var(--color-danger); padding: var(--space-2); }
+.app-pane.mono[data-component="monitor-app"].is-error { color: var(--color-danger); }
 /* Placeholder body shown immediately for a window spawned by an async app
  * factory, swapped for the real content on resolve — see openApp() in
  * shell.js. Prevents a slow factory from reading as a dead click. */
-.os-app-loading { display: flex; align-items: center; justify-content: center; color: var(--os-fg-3); font-style: italic; }
+.os-app-loading { display: flex; align-items: center; justify-content: center; gap: var(--space-2, 8px); color: var(--os-fg-3); }
+.os-app-loading-label { font-style: italic; }
 .app-pane.mono pre { background: var(--os-bg-2); padding: var(--space-2-5) var(--space-2-75); margin: var(--space-2) 0 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: var(--fs-nano) var(--os-mono); border-radius: var(--r-1, 6px); color: var(--os-fg); border: none; }
 .app-shell-pane { margin: 0; padding: var(--space-2); font: var(--fs-micro) var(--os-mono); color: var(--os-fg); background: var(--os-bg-0); height: 100%; overflow: auto; white-space: pre-wrap; box-sizing: border-box; }
 .app-canvas { width: 100%; height: 100%; background: var(--os-bg-0); display: block; cursor: default; }
@@ -446,7 +584,13 @@ html, body {
     .os-menubar { padding-left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
     .os-taskbar { padding-left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
     .os-menubar .os-instances { display: flex; }
-    .os-menu { left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
+    .os-menu {
+        left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px));
+        /* The base rule's max-width doesn't know about the rail's left offset;
+         * re-derive it here so the menu still can't overflow the viewport's
+         * right edge on tablet-band windows (~810-1150px is the tightest). */
+        max-width: min(320px, calc(100vw - var(--os-rail-w) - env(safe-area-inset-left, 0px) - var(--space-4, 16px)));
+    }
 }
 
 @media (max-width: 767px) {
@@ -480,7 +624,7 @@ html, body {
         scroll-snap-align: start;
         font-size: var(--fs-tiny);
     }
-    .os-task.focused { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset var(--space-1) 0 0 var(--os-accent); }
+    .os-task.focused { background: var(--panel-select, color-mix(in oklab, var(--os-accent) 30%, var(--os-bg-1))); font-weight: 700; box-shadow: inset var(--space-1) 0 0 var(--os-accent), inset 0 0 0 1px color-mix(in oklab, var(--os-accent) 40%, transparent); }
     .os-side-rail { display: none; }
     .os-menu { left: var(--space-2); right: var(--space-2); min-width: 0; top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0) + var(--space-1)); }
     .ds-247420 .wm-root {
@@ -722,8 +866,8 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 
 .ds-247420 .tb-sess-chip {
   display: inline-flex; align-items: center; gap: var(--space-1-75);
-  height: 22px; padding: 0 var(--space-1-75) 0 var(--space-2);
-  border-radius: var(--r-pill, 999px);
+  height: var(--os-control-h); padding: 0 var(--space-1-75) 0 var(--space-2);
+  border-radius: var(--radius-pill, var(--r-pill, 999px));
   background: color-mix(in oklab, var(--fg) 6%, transparent);
   color: var(--fg);
   font-family: var(--ff-ui); font-size: var(--fs-nano); font-weight: 500;
@@ -744,7 +888,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .tb-sess-badge {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 16px; height: 14px; padding: 0 var(--space-1);
-  border-radius: var(--r-0);
+  border-radius: var(--radius-sm, var(--r-0));
   background: color-mix(in oklab, var(--fg) 14%, transparent);
   font-size: var(--fs-pico); font-weight: 600; line-height: 1;
 }
@@ -757,14 +901,14 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   opacity: 0.55; transition: opacity 120ms ease, background 120ms ease;
 }
 .ds-247420 .tb-sess-chip:hover .tb-sess-x { opacity: 1; }
-.ds-247420 .tb-sess-x:hover { background: color-mix(in oklab, var(--danger) 30%, transparent); color: var(--on-color); }
+.ds-247420 .tb-sess-x:hover { background: color-mix(in oklab, var(--color-danger) 30%, transparent); color: var(--on-color); }
 
 .ds-247420 .tb-sess-add {
   display: inline-flex; align-items: center; gap: var(--space-1);
-  height: 22px; padding: 0 var(--space-2-5);
+  height: var(--os-control-h); padding: 0 var(--space-2-5);
   border: 1px dashed color-mix(in oklab, var(--fg) 30%, transparent);
   background: transparent;
-  border-radius: var(--r-pill, 999px);
+  border-radius: var(--radius-pill, var(--r-pill, 999px));
   font-family: var(--ff-ui); font-size: var(--fs-nano); font-weight: 500;
   color: var(--fg);
   cursor: pointer;
@@ -788,7 +932,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .tb-sess-modal {
   background: var(--bg);
   color: var(--fg);
-  border-radius: var(--r-1);
+  border-radius: var(--radius-sm, var(--r-1));
   box-shadow: var(--shadow-overlay);
   min-width: 320px; max-width: 480px;
   border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
@@ -804,7 +948,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   width: 100%; box-sizing: border-box;
   height: 32px; padding: 0 var(--space-2-5);
   border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
-  border-radius: var(--r-0);
+  border-radius: var(--radius-sm, var(--r-0));
   background: color-mix(in oklab, var(--fg) 6%, var(--bg));
   color: inherit;
   font-family: inherit; font-size: var(--fs-tiny);
@@ -815,16 +959,16 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .tb-sess-modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2-75) var(--space-3); border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
 .tb-sess-modal-btn {
   height: 28px; padding: 0 14px;
-  border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
+  border-radius: var(--radius-sm, var(--r-0)); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
   background: transparent; color: inherit;
   font-family: inherit; font-size: var(--fs-micro); font-weight: 500; cursor: pointer;
   transition: background 120ms ease, border-color 120ms ease;
 }
 .tb-sess-modal-btn:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
-.tb-sess-modal-btn.primary { background: var(--os-accent); color: var(--on-color); border-color: var(--os-accent); }
-.tb-sess-modal-btn.primary:hover { background: color-mix(in oklab, var(--os-accent) 80%, var(--ink)); }
-.tb-sess-modal-btn.danger { background: var(--danger); color: var(--on-color); border-color: var(--danger); }
-.tb-sess-modal-btn.danger:hover { background: color-mix(in oklab, var(--danger) 80%, var(--ink)); }
+.tb-sess-modal-btn.primary { background: var(--accent-primary, var(--os-accent)); color: var(--on-color); border-color: var(--accent-primary, var(--os-accent)); }
+.tb-sess-modal-btn.primary:hover { background: color-mix(in oklab, var(--accent-primary, var(--os-accent)) 80%, var(--ink)); }
+.tb-sess-modal-btn.danger { background: var(--color-danger); color: var(--on-color); border-color: var(--color-danger); }
+.tb-sess-modal-btn.danger:hover { background: color-mix(in oklab, var(--color-danger) 80%, var(--ink)); }
 
 .tb-sess-empty {
   position: fixed; inset: 0; z-index: var(--z-window);
@@ -837,7 +981,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   background: var(--bg);
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
-  border-radius: var(--r-2);
+  border-radius: var(--radius-md, var(--r-2));
   box-shadow: var(--shadow-3);
   padding: var(--space-5) 40px; text-align: center;
   font-family: var(--ff-ui);
@@ -847,8 +991,8 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .tb-sess-empty-sub { font-size: var(--fs-tiny); opacity: 0.7; margin-bottom: var(--space-3-5); }
 .tb-sess-empty-cta {
   height: 40px; padding: 0 var(--space-4);
-  background: var(--os-accent); color: var(--on-color);
-  border: 0; border-radius: var(--r-pill, 999px);
+  background: var(--accent-primary, var(--os-accent)); color: var(--on-color);
+  border: 0; border-radius: var(--radius-pill, var(--r-pill, 999px));
   font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
   cursor: pointer;
   transition: transform 120ms ease, box-shadow 120ms ease;
@@ -861,25 +1005,25 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .tb-sessions-title { font-weight: 600; font-size: var(--fs-xs); }
 .ds-247420 .tb-sessions-count { font-size: var(--fs-micro); opacity: 0.6; margin-left: var(--space-1); }
 .ds-247420 .tb-sessions-spacer { flex: 1; }
-.ds-247420 .tb-sessions-btn { height: 28px; padding: 0 var(--space-2-75); border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent); background: transparent; color: inherit; font-size: var(--fs-micro); font-weight: 500; cursor: pointer; font-family: inherit; }
+.ds-247420 .tb-sessions-btn { height: 28px; padding: 0 var(--space-2-75); border-radius: var(--radius-sm, var(--r-0)); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent); background: transparent; color: inherit; font-size: var(--fs-micro); font-weight: 500; cursor: pointer; font-family: inherit; }
 .ds-247420 .tb-sessions-btn:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
-.ds-247420 .tb-sessions-btn.primary { background: var(--os-accent); color: var(--on-color); border-color: var(--os-accent); }
-.ds-247420 .tb-sessions-btn.danger { background: var(--danger); color: var(--on-color); border-color: var(--danger); }
+.ds-247420 .tb-sessions-btn.primary { background: var(--accent-primary, var(--os-accent)); color: var(--on-color); border-color: var(--accent-primary, var(--os-accent)); }
+.ds-247420 .tb-sessions-btn.danger { background: var(--color-danger); color: var(--on-color); border-color: var(--color-danger); }
 .ds-247420 .tb-sessions-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 .ds-247420 .tb-sessions-grid { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2-75); align-content: start; }
-.ds-247420 .tb-sessions-card { padding: var(--space-2-75); border-radius: var(--r-1, 10px); border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent); background: color-mix(in oklab, var(--fg) 3%, transparent); display: flex; flex-direction: column; gap: var(--space-2); transition: border-color 120ms ease, transform 120ms ease; }
+.ds-247420 .tb-sessions-card { padding: var(--space-2-75); border-radius: var(--radius-sm, var(--r-1, 10px)); border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent); background: color-mix(in oklab, var(--fg) 3%, transparent); display: flex; flex-direction: column; gap: var(--space-2); transition: border-color 120ms ease, transform 120ms ease; }
 .ds-247420 .tb-sessions-card:hover { border-color: var(--os-accent); }
 .ds-247420 .tb-sessions-card.active { border-color: var(--os-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--os-accent) 30%, transparent); }
 .ds-247420 .tb-sessions-card-head { display: flex; align-items: center; gap: var(--space-2); }
 .ds-247420 .tb-sessions-card-check { width: 14px; height: 14px; cursor: pointer; flex: 0 0 14px; }
-.ds-247420 .tb-sessions-card-name { font-weight: 600; font-size: var(--fs-tiny); flex: 1; outline: none; padding: var(--space-hair) var(--space-1); border-radius: var(--r-0); }
+.ds-247420 .tb-sessions-card-name { font-weight: 600; font-size: var(--fs-tiny); flex: 1; outline: none; padding: var(--space-hair) var(--space-1); border-radius: var(--radius-sm, var(--r-0)); }
 .ds-247420 .tb-sessions-card-name[contenteditable="true"] { background: color-mix(in oklab, var(--fg) 8%, transparent); }
 .ds-247420 .tb-sessions-card-id { font-family: var(--os-mono, monospace); font-size: var(--fs-pico); opacity: 0.5; }
 .ds-247420 .tb-sessions-card-stats { font-size: var(--fs-nano); opacity: 0.7; display: flex; gap: var(--space-2-75); }
 .ds-247420 .tb-sessions-card-actions { display: flex; gap: var(--space-1-75); margin-top: var(--space-1); }
-.ds-247420 .tb-sessions-card-actions button { flex: 1; height: 24px; font-size: var(--fs-nano); padding: 0 var(--space-2); border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
+.ds-247420 .tb-sessions-card-actions button { flex: 1; height: 24px; font-size: var(--fs-nano); padding: 0 var(--space-2); border-radius: var(--radius-sm, var(--r-0)); border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
 .ds-247420 .tb-sessions-card-actions button:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
-.ds-247420 .tb-sessions-card-actions button.danger:hover { background: var(--danger); color: var(--on-color); border-color: var(--danger); }
+.ds-247420 .tb-sessions-card-actions button.danger:hover { background: var(--color-danger); color: var(--on-color); border-color: var(--color-danger); }
 .ds-247420 .tb-sessions-empty-mid { padding: 40px; text-align: center; opacity: 0.6; font-size: var(--fs-tiny); }
 
 /* ---- prefers-contrast: more — strengthen borders + focus so the translucent
@@ -924,9 +1068,9 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .freddie-chat-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
 .ds-247420 .freddie-chat-wrap > freddie-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
 .ds-247420 .cc-strip { flex: 0 0 auto; font-size: var(--fs-micro); border-bottom: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); }
-.ds-247420 .cc-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; padding: .35em .7em; color: var(--fg, inherit); opacity: .75; }
-.ds-247420 .cc-toggle:hover { opacity: 1; }
-.ds-247420 .cc-toggle.cc-open { opacity: 1; font-weight: 600; }
+.ds-247420 .cc-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; padding: .35em .7em; color: var(--fg, inherit); opacity: .75; border: 1px solid transparent; border-radius: var(--r-1, 8px); }
+.ds-247420 .cc-toggle:hover { opacity: 1; background: var(--panel-hover, var(--os-bg-2)); border-color: color-mix(in oklab, var(--fg) 18%, transparent); color: var(--os-fg, inherit); }
+.ds-247420 .cc-toggle.cc-open { opacity: 1; font-weight: 600; background: var(--panel-hover, var(--os-bg-2)); border-color: color-mix(in oklab, var(--fg) 18%, transparent); }
 .ds-247420 .cc-body { padding: .5em .7em .7em; display: flex; flex-direction: column; gap: .5em; max-height: 42vh; max-height: 42dvh; overflow: auto; }
 .ds-247420 .cc-body[hidden] { display: none; }
 .ds-247420 .cc-row { display: flex; gap: .6em; flex-wrap: wrap; }
@@ -1029,13 +1173,13 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 /* Tool-call card — collapsible details with status icon + name + label. */
 .ds-247420 .chat-tool { display: block; background: var(--panel-1, color-mix(in oklab, var(--fg) 4%, transparent)); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: var(--r-0); padding: 0; max-width: min(640px, 92%); overflow: hidden; font-size: var(--fs-micro); }
 .ds-247420 .chat-tool[open] { background: var(--panel-1, color-mix(in oklab, var(--fg) 6%, transparent)); }
-.ds-247420 .chat-tool.tool-error { border-color: color-mix(in oklab, var(--danger, #c0392b) 60%, transparent); }
-.ds-247420 .chat-tool.tool-done { border-color: color-mix(in oklab, var(--os-accent, #247420) 35%, transparent); }
+.ds-247420 .chat-tool.tool-error { border-color: color-mix(in oklab, var(--color-danger) 60%, transparent); }
+.ds-247420 .chat-tool.tool-done { border-color: color-mix(in oklab, var(--color-success) 35%, transparent); }
 .ds-247420 .chat-tool-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1-75) var(--space-2-5); cursor: pointer; list-style: none; user-select: none; }
 .ds-247420 .chat-tool-head::-webkit-details-marker { display: none; }
 .ds-247420 .chat-tool-icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; font-family: var(--os-mono, monospace); font-size: var(--fs-micro); opacity: 0.7; }
-.ds-247420 .chat-tool.tool-error .chat-tool-icon { color: var(--danger, #c0392b); opacity: 1; }
-.ds-247420 .chat-tool.tool-done .chat-tool-icon { color: var(--os-accent, #247420); opacity: 1; }
+.ds-247420 .chat-tool.tool-error .chat-tool-icon { color: var(--color-danger); opacity: 1; }
+.ds-247420 .chat-tool.tool-done .chat-tool-icon { color: var(--color-success); opacity: 1; }
 .ds-247420 .chat-tool.tool-running .chat-tool-icon { animation: chat-spin 1.4s linear infinite; }
 @keyframes chat-spin { to { transform: rotate(360deg); } }
 .ds-247420 .chat-tool-name { font-family: var(--os-mono, monospace); font-weight: 600; font-size: var(--fs-micro); }
@@ -1045,7 +1189,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .chat-tool-section { display: flex; flex-direction: column; gap: var(--space-half); }
 .ds-247420 .chat-tool-section-label { font-size: var(--fs-pico); opacity: 0.5; text-transform: lowercase; letter-spacing: 0.05em; }
 .ds-247420 .chat-tool-pre { margin: 0; padding: var(--space-1-75) var(--space-2); background: color-mix(in oklab, var(--fg) 4%, transparent); border-radius: var(--r-0); max-height: 200px; overflow: auto; font: var(--fs-nano)/1.45 var(--os-mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-word; }
-.ds-247420 .chat-tool-pre.is-error { color: var(--danger, #c0392b); }
+.ds-247420 .chat-tool-pre.is-error { color: var(--color-danger); }
 
 /* Thinking indicator — typing dots + label, transient (assistant-side). */
 .ds-247420 .chat-thinking { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: 0; padding: var(--space-1) var(--space-2); opacity: 0.7; font-size: var(--fs-micro); }
@@ -1066,8 +1210,8 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--os-accent, #247420); outline-offset: 2px; }
 
 /* Cancel-while-generating button replaces send. */
-.ds-247420 .chat-composer .send.cancel { background: var(--danger); color: var(--on-color); }
-.ds-247420 .chat-composer .send.cancel:hover { background: color-mix(in oklab, var(--danger, #c0392b) 80%, black); }
+.ds-247420 .chat-composer .send.cancel { background: var(--color-danger); color: var(--on-color); }
+.ds-247420 .chat-composer .send.cancel:hover { background: color-mix(in oklab, var(--color-danger) 80%, black); }
 
 /* ============================================================================
  *  Jank pass 2 (2026-05-30) — outer-layer scroll containment + iframe gesture
@@ -1095,10 +1239,34 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 
 /* Subtle backdrop blur behind modal overlays — depth cue without compounding
  * paint cost since the blur layer is GPU-composited. Respect reduced-motion
- * by falling back to plain dim. */
-.ds-247420 .tb-sess-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
+ * by falling back to plain dim. Shared with the overlay-primitives backdrops
+ * below (.ov-cmd-backdrop / .ov-lightbox-backdrop / .ov-auth-backdrop) so
+ * every full-viewport modal in the kit reads as one consistent "on top of
+ * dimmed content" language instead of some floating over undimmed chrome. */
+.ds-247420 .tb-sess-overlay,
+.ds-247420 .ov-cmd-backdrop,
+.ds-247420 .ov-lightbox-backdrop,
+.ds-247420 .ov-auth-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
 @media (prefers-reduced-motion: reduce) {
-  .ds-247420 .tb-sess-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
+  .ds-247420 .tb-sess-overlay,
+  .ds-247420 .ov-cmd-backdrop,
+  .ds-247420 .ov-lightbox-backdrop,
+  .ds-247420 .ov-auth-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
+}
+
+/* Shared full-viewport dimming scrim for the overlay-primitives components
+ * (CommandPalette, VideoLightbox, AuthModal) — these three ship a *-backdrop
+ * root element (command-palette.js / full-screen.js / auth-modal.js) but had
+ * zero CSS anywhere in the kit, so they rendered undimmed, competing with
+ * whatever page content sat behind them instead of reading as on-top. Same
+ * position:fixed/inset:0/var(--z-modal)/var(--scrim) shape as .tb-sess-overlay
+ * above — one scrim implementation, not three near-duplicates. */
+.ov-cmd-backdrop,
+.ov-lightbox-backdrop,
+.ov-auth-backdrop {
+  position: fixed; inset: 0; z-index: var(--z-modal);
+  background: var(--scrim);
+  display: flex; align-items: center; justify-content: center;
 }
 
 /* -----------------------------------------------------------------------
@@ -1271,12 +1439,17 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 
 .ds-247420 .chat-bubble {
-  background: var(--panel-1, color-mix(in oklab, var(--fg) 5%, transparent));
+  /* --panel-1 aliases the same --bg-2 the window body already sits on
+     (.wm-body uses --os-bg-1 = --bg-2), so an incoming bubble on --panel-1
+     read as near-invisible against its own window. --panel-2 (--bg-3) is
+     the next real step up the existing panel scale — visible separation,
+     no new token. */
+  background: var(--panel-2, color-mix(in oklab, var(--fg) 10%, transparent));
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
-  border-radius: var(--r-1);
+  border-radius: var(--radius-sm, var(--r-1));
   padding: var(--space-2) var(--space-2-75);
-  font-size: var(--fs-xs);
+  font-size: var(--font-size-body, var(--fs-xs));
   line-height: 1.5;
   max-width: min(720px, 86%);
   overflow-wrap: anywhere;
@@ -1317,8 +1490,8 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 
 .ds-247420 .chat-meta {
-  font-size: var(--fs-nano);
-  opacity: 0.55;
+  font-size: var(--font-size-meta, var(--fs-nano));
+  color: var(--fg-3);
   display: inline-flex;
   align-items: center;
   gap: var(--space-1-75);