anentrypoint-design 0.0.292 → 0.0.294

package/app-shell.css

@@ -30,8 +30,8 @@ button, input, select, textarea { font: inherit; }
 }
 .skip-link:focus {
   top: 10px;
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 body {
   background: var(--bg);
@@ -42,7 +42,12 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
-::selection { background: color-mix(in oklab, var(--accent) 24%, var(--bg-2)); color: var(--fg); }
+/* Light (paper, the default theme) needs a stronger accent share than dark to
+   clear a visible selection tint against --bg-2 -- the dark-theme value (24%)
+   read too weak on paper. Dark/ink keeps its existing 24% mix, restored below
+   in the ink/dark + auto-dark blocks (mirrors the --danger/--flame pattern of
+   scoping a value per theme rather than sharing one across both). */
+::selection { background: color-mix(in oklab, var(--accent) 46%, var(--bg-2)); color: var(--fg); }
 
 /* Every root has a CQ container so fluid type can resolve to a meaningful inline-size. */
 .app, .ds-stage {
@@ -247,8 +252,8 @@ body.canvas-host { background: transparent !important; }
 }
 .app-topbar nav a:hover { background: var(--bg-2); color: var(--fg); }
 .app-topbar nav a:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 /* Active tab reads as a subtle tinted pill with an accent underline rather than
    an oversized filled oval that sits taller than its inactive siblings and reads
@@ -283,8 +288,8 @@ body.canvas-host { background: transparent !important; }
   width: 100%;
 }
 .app-search:focus-within {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 .app-crumb {
@@ -325,8 +330,8 @@ body.canvas-host { background: transparent !important; }
 }
 .app-side a:hover { background: var(--bg-2); color: var(--fg); }
 .app-side a:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 .app-side a.active {
   color: var(--accent-fg);
@@ -499,7 +504,7 @@ body.canvas-host { background: transparent !important; }
 .ds-icon-btn-ghost { background: transparent; }
 .ds-icon-btn-ghost:hover { background: var(--fg); color: var(--bg); }
 .ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); }
-.ds-icon-btn-primary:hover { background: var(--fg); color: var(--bg); }
+.ds-icon-btn-primary:hover { background: var(--fg); color: var(--accent-ink); }
 /* warn = destructive ACTION tone; flame stays exclusively error STATUS. */
 .ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
 .ds-icon-btn-danger:hover { filter: brightness(0.92); }
@@ -518,19 +523,27 @@ body.canvas-host { background: transparent !important; }
   border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
-.ds-badge.tone-green   { background: var(--green-tint);  color: var(--green-deep); }
+/* Canonical tone names are tone-success / tone-error / tone-neutral. Every
+   other tone name grouped into the same rule below (tone-green/tone-live,
+   tone-flame, tone-wip, tone-sun/tone-yellow, tone-ok/tone-miss) is a
+   true-synonym legacy alias, kept working but sharing one declaration so the
+   tone-family colors can't drift apart across names. */
+.ds-badge.tone-green, .ds-badge.tone-live, .ds-badge.tone-success {
+  background: var(--green-tint); color: var(--green-deep);
+}
+.ds-badge.tone-flame, .ds-badge.tone-error {
+  background: var(--flame); color: var(--on-color);
+}
+.ds-badge.tone-wip, .ds-badge.tone-neutral {
+  background: var(--bg-3); color: var(--fg-2);
+}
 .ds-badge.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
 .ds-badge.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
-.ds-badge.tone-sun     { background: var(--sun);         color: var(--ink); }
-.ds-badge.tone-flame   { background: var(--flame);       color: var(--on-color); }
-.ds-badge.tone-live    { background: var(--green-tint);  color: var(--green-deep); }
-.ds-badge.tone-wip     { background: var(--bg-3);        color: var(--fg-2); }
-.ds-badge.tone-error   { background: var(--flame);       color: var(--on-color); }
-.ds-badge.tone-success { background: var(--green-tint);  color: var(--green-deep); }
-.ds-badge.tone-neutral { background: var(--bg-3);        color: var(--fg-2); }
+.ds-badge.tone-sun, .ds-badge.tone-yellow {
+  background: var(--sun); color: var(--ink);
+}
 .ds-badge.tone-blue    { background: var(--accent-tint); color: var(--accent-ink); }
 .ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
-.ds-badge.tone-yellow  { background: var(--sun);         color: var(--ink); }
 
 .chip {
   display: inline-flex; align-items: center; gap: 6px;
@@ -541,19 +554,22 @@ body.canvas-host { background: transparent !important; }
   letter-spacing: var(--tr-caps); text-transform: uppercase;
   border-radius: var(--r-pill);
 }
-.chip.tone-green   { background: var(--green-tint);  color: var(--green-deep); }
+/* Same canonical/legacy-alias grouping as .ds-badge above. */
+.chip.tone-green, .chip.tone-live, .chip.tone-success, .chip.tone-ok {
+  background: var(--green-tint); color: var(--green-deep);
+}
+.chip.tone-flame, .chip.tone-error, .chip.tone-miss {
+  background: var(--flame); color: var(--on-color);
+}
+.chip.tone-wip, .chip.tone-neutral {
+  background: var(--bg-3); color: var(--fg-2);
+}
 .chip.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
 .chip.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
-.chip.tone-sun     { background: var(--sun);         color: var(--ink); }
-.chip.tone-flame   { background: var(--flame);       color: var(--on-color); }
-.chip.tone-live    { background: var(--green-tint);  color: var(--green-deep); }
-.chip.tone-wip     { background: var(--bg-3);        color: var(--fg-2); }
-.chip.tone-error    { background: var(--flame);       color: var(--on-color); }
-.chip.tone-success  { background: var(--green-tint);  color: var(--green-deep); }
+.chip.tone-sun, .chip.tone-yellow {
+  background: var(--sun); color: var(--ink);
+}
 .chip.tone-disabled { background: var(--bg-3);        color: var(--fg-3); }
-.chip.tone-ok       { background: var(--green-tint);  color: var(--green-deep); }
-.chip.tone-miss     { background: var(--flame);       color: var(--on-color); }
-.chip.tone-neutral  { background: var(--bg-3);        color: var(--fg-2); }
 .chip.tone-blue     { background: var(--accent-tint); color: var(--accent-ink); }
 .chip.tone-orange   { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
 .chip.tone-yellow   { background: var(--sun);         color: var(--ink); }
@@ -1004,7 +1020,7 @@ table td { padding: 14px 16px; border-top: 1px solid var(--rule); }
 table tr.clickable { cursor: pointer; }
 table tr.clickable:hover td { background: var(--bg-2); }
 table tr.clickable:focus-visible {
-  outline: 2px solid var(--accent-ink);
+  outline: var(--focus-w) solid var(--focus-color);
   outline-offset: -2px;
 }
 table tr.clickable:focus-visible td { background: var(--bg-2); }
@@ -1445,7 +1461,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   flex-direction: column;
   gap: 4px;
 }
-.ds-file-grid:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-2); }
+.ds-file-grid:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-2); }
 
 /* Listing wrapper holds the optional filter + sort header above the grid. */
 .ds-file-listing { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
@@ -1467,7 +1483,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); }
 .ds-file-sort-btn.active { color: var(--accent-ink); }
-.ds-file-sort-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-file-sort-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Skeleton shimmer rows shown while a directory loads. */
 .ds-file-row-skeleton { cursor: default; pointer-events: none; }
@@ -1515,7 +1531,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   color: inherit; font: inherit; text-align: left; cursor: pointer;
 }
 .ds-file-open[disabled] { cursor: default; }
-.ds-file-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-1); }
+.ds-file-open:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
 .ds-file-row:hover {
   background: var(--bg-2);
   border-color: var(--rule);
@@ -1619,7 +1635,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .ds-file-check:hover { background: var(--bg-3); color: var(--fg); }
 .ds-file-check.is-marked { color: var(--accent-ink); }
-.ds-file-check:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-file-check:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-file-check[disabled] { opacity: 0.4; cursor: default; }
 .ds-file-row.is-marked { background: var(--accent-tint); border-color: var(--accent); }
 .ds-file-selectall {
@@ -1629,7 +1645,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   padding: var(--space-1); border-radius: var(--r-1);
 }
 .ds-file-selectall:hover { background: var(--bg-2); color: var(--fg); }
-.ds-file-selectall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-file-selectall:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-file-controls { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); flex-wrap: wrap; }
 .ds-file-controls .spread { flex: 1 1 auto; }
 .ds-file-controls .ds-file-sort { padding: 0; }
@@ -1667,7 +1683,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .ds-density-btn:hover { color: var(--fg); }
 .ds-density-btn.active { background: var(--accent-tint); color: var(--fg); }
-.ds-density-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-density-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Compact density — tighter rows for long listings. */
 .ds-file-grid[data-density="compact"] { gap: 2px; }
@@ -1705,7 +1721,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   background: none; border: none; cursor: pointer; color: var(--fg);
 }
 .ds-file-cell-open[disabled] { cursor: default; }
-.ds-file-cell-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
+.ds-file-cell-open:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; border-radius: var(--r-2); }
 .ds-file-cell-media {
   display: flex; align-items: center; justify-content: center;
   width: 100%; aspect-ratio: 4 / 3;
@@ -1945,7 +1961,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-micro);
 }
 .ds-upload-act:hover { background: var(--bg-3); color: var(--fg); }
-.ds-upload-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-upload-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 @media (hover: none), (pointer: coarse) {
   .ds-upload-act { min-height: 44px; min-width: 44px; }
   /* 44px floor for file controls on ANY touch device, not only narrow ones
@@ -2016,7 +2032,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   border-radius: var(--r-2); color: var(--fg);
   font-family: inherit; font-size: var(--fs-sm);
 }
-.ds-modal-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-modal-input:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 /* iOS auto-zooms inputs under 16px on focus, breaking the modal layout. */
 @media (hover: none), (pointer: coarse) {
   .ds-modal-input { font-size: 16px; min-height: 44px; }
@@ -2203,7 +2219,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
 }
 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
-.ds-segmented .ds-seg-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-segmented .ds-seg-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-segmented .ds-seg-btn.is-on {
   background: var(--bg); color: var(--fg);
   box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
@@ -2653,8 +2669,8 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-composer .send:active { filter: brightness(0.94); }
 .chat-composer .send:focus-visible,
 .composer-btn:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 .chat-composer .send:disabled {
   background: var(--bg-3); color: var(--fg-3); cursor: not-allowed; transform: none;
@@ -3195,8 +3211,8 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 
 /* Base focus-visible: 2px ring + 2px offset clears dark bg-3 surfaces (WCAG 1.4.11) */
 :focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 /* Enhanced focus-visible for all interactive elements */
@@ -3205,8 +3221,8 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 [role="tab"]:focus-visible,
 .row:focus-visible,
 .row[tabindex]:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 /* Skip to main content link */
@@ -3598,7 +3614,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   border-radius: var(--r-1, 6px);
   cursor: pointer;
 }
-.app-side-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.app-side-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 @container (max-width: 900px) {
   .app-side-toggle { display: inline-flex; }
   .app-topbar .brand { margin-left: 44px; }
@@ -3692,7 +3708,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ws-resizer { grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: 5; cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; }
 .ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: transparent; transition: background var(--dur-snap) var(--ease); }
 .ws-resizer:hover::after, .ws-resizer:focus-visible::after { background: var(--accent); }
-.ws-resizer:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ws-resizer:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
 .ws-resizer.ws-resizer-rail { grid-column: 1; }
 .ws-resizer.ws-resizer-sessions { grid-column: 2; }
 .ws-resizer.ws-resizer-pane { grid-column: 3; justify-self: end; }
@@ -3744,7 +3760,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   border-radius: var(--r-1); cursor: pointer;
 }
 .ws-rail-toggle:hover { background: var(--bg-3); color: var(--fg); }
-.ws-rail-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ws-rail-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ws-rail-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: var(--space-3) var(--space-2); gap: var(--space-2); }
 .ws-rail-head { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }
 .ws-rail-brand { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); color: var(--fg); white-space: nowrap; overflow: hidden; }
@@ -3757,7 +3773,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   min-height: 40px; white-space: nowrap; overflow: hidden;
 }
 .ws-rail-action:hover { filter: brightness(0.92); }
-.ws-rail-action:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ws-rail-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ws-rail-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
 .ws-rail-item {
   display: flex; align-items: center; gap: var(--space-2);
@@ -3767,7 +3783,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   font-family: var(--ff-body); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden;
 }
 .ws-rail-item:hover { background: var(--bg-3); color: var(--fg); }
-.ws-rail-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ws-rail-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
 .ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
 .ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
 .ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
@@ -3840,7 +3856,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 /* Desktop-only chrome toggle (sessions collapse): inverse of the mobile drawer-toggle. */
 .ws-desktop-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--fg-2); cursor: pointer; border-radius: var(--r-1); }
 .ws-desktop-toggle:hover { background: var(--bg-2); color: var(--fg); }
-.ws-desktop-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ws-desktop-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 @media (max-width: 900px) { .ws-desktop-toggle { display: none; } }
 /* The pane collapse toggle is meaningless once the pane TRACK is dropped (the
    pane becomes a mobile overlay drawer at <=1480px, reached via its own
@@ -3964,7 +3980,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   .ws-crumb .app-crumb .crumb-right { margin-left: 0; flex-wrap: wrap; min-width: 0; display: inline-flex; }
 }
 .ws-drawer-toggle:hover { background: var(--bg-2); color: var(--fg); }
-.ws-drawer-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ws-drawer-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 @media (prefers-reduced-motion: reduce) {
   .ws-shell, .ws-rail, .ws-pane, .ws-sessions, .ws-scrim { transition: none; }
@@ -3989,7 +4005,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .row-act:hover { background: var(--bg-3); color: var(--fg); }
-.row-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.row-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* FilterPills - a group of pill toggle buttons (aria-pressed). */
 .ds-filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@@ -4002,7 +4018,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 }
 .ds-filter-pill:hover { background: var(--bg-3); color: var(--fg); }
 .ds-filter-pill.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
-.ds-filter-pill:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-filter-pill:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Touch floor for the new small controls. */
 @media (pointer: coarse) {
@@ -4012,7 +4028,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 /* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
 .ds-file-act:disabled { opacity: .45; cursor: default; }
 .ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
-.ds-file-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-file-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* ============================================================
    Print — linearize WorkspaceShell so main content prints in full.
@@ -4337,7 +4353,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
    .ds-feature above), so the hover affordance is a lift, matching the same
    translateY + shadow idiom .chat-msg:hover .chat-bubble already uses. */
 .ds-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
-.ds-gallery-tile:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-gallery-tile:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
 .ds-lightbox {
   position: fixed; inset: 0; background: var(--scrim);

package/colors_and_type.css

@@ -90,7 +90,11 @@
   --accent-fg:   var(--ink);
   --accent-ink:  var(--acid-deep);
   --accent-bright: var(--acid); /* base value so var(--accent-bright) never falls back empty; ink + [data-accent] retune it */
-  --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
+  /* Blends --accent-ink (the readable/darker ink variant), not the raw
+     --accent fill, so light-theme active states clear contrast against --bg;
+     dark/ink and auto-dark restate the prior --accent-based value explicitly
+     below so this change does not leak into them via inheritance. */
+  --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
 
   /* On-color foregrounds — text/icons that sit ON a saturated fill (accent,
      danger, category chips). Theme-driven so white-on-color never hard-codes
@@ -327,6 +331,9 @@ select:focus-visible {
   --accent-fg: var(--ink);
   --accent-ink: var(--acid); /* on ink, the lime itself reads as bright text */
   --accent-bright: var(--acid);
+  /* Preserves the prior --accent-based blend for dark; the :root light-theme
+     value above was retuned to blend --accent-ink instead. */
+  --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
   --danger:    oklch(0.68 0.19 25);
   --flame:     #FF5A1F;
   --amber:     #D9A93A;
@@ -341,6 +348,14 @@ select:focus-visible {
   --code-num:     var(--sun);
 }
 
+/* Restores the pre-existing (weaker) dark-theme selection tint after the
+   light-theme-only bump in app-shell.css's base ::selection rule. */
+[data-theme="ink"] ::selection,
+[data-theme="dark"] ::selection {
+  background: color-mix(in oklab, var(--accent) 24%, var(--bg-2));
+  color: var(--fg);
+}
+
 /* NOTE: the [data-theme="auto"] block below mirrors the
    [data-theme="ink"/"dark"] block above token-for-token. 'auto + OS-dark' and
    'explicit dark' are the same visual context and resolve every token —
@@ -368,6 +383,7 @@ select:focus-visible {
     --accent-fg: var(--ink);
     --accent-ink: var(--acid);
     --accent-bright: var(--acid);
+    --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
     --danger:    oklch(0.68 0.19 25);
     --flame:     #FF5A1F;
     --amber:     #D9A93A;
@@ -379,6 +395,10 @@ select:focus-visible {
     --code-str-alt: var(--mascot);
     --code-num:     var(--sun);
   }
+  [data-theme="auto"] ::selection {
+    background: color-mix(in oklab, var(--accent) 24%, var(--bg-2));
+    color: var(--fg);
+  }
 }
 
 /* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g.
@@ -438,6 +458,7 @@ select:focus-visible {
   --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
   --fg: var(--ink);   --fg-2: var(--ink-2);   --fg-3: var(--ink-3);
   --accent: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep);
+  --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
   /* A paper island under a dark ancestor must not inherit the dark signal pair. */
   --flame: #C53E00; --amber: #7C570F; --warn: #E0241A; --sky: #3A6EFF;
 }