ui-style-kit-css 2.4.0 → 2.4.1

package/docs/PUBLISHING.md

@@ -1,11 +1,11 @@
 # Publishing Guide
 
-## 2.4.0 release workflow
+## 2.4.1 release workflow
 
-The current checkout is a release candidate. [Release preparation notes](RELEASE-2.4.0.md)
+The current checkout is a release candidate. [Release preparation notes](RELEASE-2.4.1.md)
 record the current local scope and gates; existing visual-QA documents are historical
-evidence, not proof that subsequent edits passed browser validation. Replace the
-2.4.0 changelog's `Unreleased` marker with the actual release date at approved publication.
+evidence, not proof that subsequent edits passed browser validation. The 2.4.1
+changelog entry must carry the approved publication date before tagging.
 
 Update the tracked `wiki/` sources with the README and docs. Publishing those pages
 to GitHub Wiki is a separate handoff, not a side effect of the CSS build. No jsdoc2md
@@ -13,9 +13,9 @@ documentation generator is configured in this package; reusable JavaScript helpe
 use JSDoc-compatible comments, and the checked-in build owns generated CSS, manifests,
 icons, README size measurements, and demo asset hashes.
 
-Prepare `ui-style-kit-css@2.4.0` on its release branch, open a pull request against `main`, and merge only after the fast automated gate is green and any requested manual demo review is complete. The aligned companion set is `layout-style-css@3.1.0` and `interactive-surface-css@1.7.0`.
+Prepare `ui-style-kit-css@2.4.1` on its release branch, open a pull request against `main`, and merge only after the fast automated gate is green and any requested manual demo review is complete. The aligned companion set is `layout-style-css@3.1.0` and `interactive-surface-css@1.7.0`.
 
-Do not push `v2.4.0` before the reviewed release commit is on `main`. A pushed version tag runs Release Version Alignment, which validates the tag/package/changelog contract and creates the GitHub Release; publishing that release triggers the protected npm workflow.
+Do not push `v2.4.1` before the reviewed release commit is on `main`. A pushed version tag runs Release Version Alignment, which validates the tag/package/changelog contract and creates the GitHub Release; publishing that release triggers the protected npm workflow.
 
 Release Version Alignment owns the fast automated release gate: lint, build, unit checks, the tagged Chromium release-smoke Playwright suite, and packed ecosystem preflight with `--skip-clean-install`. The visual-baseline suite, full UI matrix, and clean-install ecosystem matrix are manual escalation tools, not default push or publish blockers. The protected npm workflow intentionally does not rerun browser gates; it revalidates the immutable tag, package contracts, browser-free compatibility checks, companion commit reachability, the explicit release preflight with `--skip-clean-install`, npm token presence, npm owner authorization, and registry state before publishing.
 
@@ -33,7 +33,7 @@ Manual release review should open the checked-in demo, exercise the changed pres
 
 The local UI matrix stops after the first failing 100-case block. Every case has a stable global number, so diagnose each failure with `npm run test:matrix:case -- --case N`. The rest of that block has already completed; after its targeted failures pass, continue at the next untested block with `npm run test:matrix -- --from-block B`. Already green blocks do not run again. `npm run test:matrix:block -- --block B` and `npm run test:matrix:range -- --from N --to M` provide bounded alternatives. `test:matrix:raw` is reserved for the manual sharded automation workflow.
 
-`npm run release:preflight` validates the shared manifests and compatibility contract, queries npm for every exact minimum/current version, resolves every export from the candidate tarball, checks maintained documentation against installed packages, and can run the current/minimum clean-install browser matrix when `--skip-clean-install` is omitted. Normal UI preflight remains strict and queries `ui-style-kit-css@2.4.0` alongside every other documented exact version. The release workflows pass `--candidate-package ui-style-kit-css`, which excludes only that exact current version while it is absent from npm and still requires every published minimum and companion version. The default PR and release workflows also pass `--skip-clean-install`; run `release:verify:full` or `check:ecosystem:packs` when clean-install browser proof is explicitly requested. The gate performs no publish, tag, release, or deployment mutation and is therefore safe to execute on pull requests.
+`npm run release:preflight` validates the shared manifests and compatibility contract, queries npm for every exact minimum/current version, resolves every export from the candidate tarball, checks maintained documentation against installed packages, and can run the current/minimum clean-install browser matrix when `--skip-clean-install` is omitted. Normal UI preflight remains strict and queries `ui-style-kit-css@2.4.1` alongside every other documented exact version. The release workflows pass `--candidate-package ui-style-kit-css`, which excludes only that exact current version while it is absent from npm and still requires every published minimum and companion version. The default PR and release workflows also pass `--skip-clean-install`; run `release:verify:full` or `check:ecosystem:packs` when clean-install browser proof is explicitly requested. The gate performs no publish, tag, release, or deployment mutation and is therefore safe to execute on pull requests.
 
 `npm run check` rebuilds dist CSS, runs stylelint, executes package and API contracts, validates all theme/mode contrast pairs, enforces the Browserslist compatibility contract through `check:compat`, verifies CSS ownership, and confirms package metadata. Default browser gates cover the release-smoke Playwright set; visual-baseline and full matrix checks are explicit manual gates. `npm run check:ecosystem:packs` remains the full standalone, pairwise, and all-three packed package compatibility proof for canonical visual/theme/state/layout imports and deprecated bridge imports in both supported matrices. `npm run pack:dry-run` shows the exact files that would publish without re-entering `prepack`.
 
@@ -41,7 +41,7 @@ The local UI matrix stops after the first failing 100-case block. Every case has
 
 `npm run check:ecosystem:minimum` downloads and repacks the declared minimum published runtime versions: `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`. Those tarballs predate the additive shared-manifest policy introduced on the coordinated branches, so the minimum matrix validates their exact installed versions and published CSS entry points; current packed heads retain the stricter manifest-schema and current-documentation checks. `npm run check:ecosystem:packs` runs current first and minimum second.
 
-The current matrix checks `ui-style-kit-css@2.4.0` as the active candidate only while its exact npm version is absent, `interactive-surface-css@1.7.0` as a published release, and `layout-style-css@3.1.0` as a published release. The minimum published matrix remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
+The current matrix checks `ui-style-kit-css@2.4.1` as the active candidate only while its exact npm version is absent, `interactive-surface-css@1.7.0` as a published release, and `layout-style-css@3.1.0` as a published release. The minimum published matrix remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
 
 Both matrices install fresh tarball consumers for UI only, Interaction only, Layout only, every pair, and all three. Chromium then checks selected theme paint, native and prefixed components, interaction focus/disabled/loading/selected/persistent states, Layout wrappers/primitives/recipes/personalities, console cleanliness, and an empty external-request log. Three text-free baselines under `tests/snapshots/clean-install/` cover the highest-risk integrated combinations.
 
@@ -76,7 +76,7 @@ npm run check:ecosystem:packs -- --layout-repo ../Layout-Style-CSS --interactive
 npm publish
 ```
 
-`prepublishOnly` runs `npm run release:verify`, so a direct `npm publish` still has the default fast release gate. For GitHub releases, push or dispatch the matching package tag, such as `v2.4.0`, only after the release PR is merged. The release workflows verify that `package.json`, `package-lock.json`, `CHANGELOG.md`, generated dist banners, and ecosystem pins are aligned before publishing. Dispatch the protected npm workflow from the current `main` workflow file when recovering publication for a release that has already passed Release Version Alignment.
+`prepublishOnly` runs `npm run release:verify`, so a direct `npm publish` still has the default fast release gate. For GitHub releases, push or dispatch the matching package tag, such as `v2.4.1`, only after the release PR is merged. The release workflows verify that `package.json`, `package-lock.json`, `CHANGELOG.md`, generated dist banners, and ecosystem pins are aligned before publishing. Dispatch the protected npm workflow from the current `main` workflow file when recovering publication for a release that has already passed Release Version Alignment.
 
 The repository `NPM_TOKEN` secret must authenticate to npm as a user that appears in `npm owner ls ui-style-kit-css`. If the token belongs to another npm account or lacks package publish rights, npm may report a misleading registry `E404` at publish time.
 
@@ -88,4 +88,4 @@ npm run release:minor
 npm run release:major
 ```
 
-Use patch for compatible fixes, minor for new themes, presets, component capabilities, or browser-support contracts, and major for incompatible public API changes. The complete preset-specific native-control identity and browser coverage contract make `2.4.0` a minor release.
+Use patch for compatible fixes, minor for new themes, presets, component capabilities, or browser-support contracts, and major for incompatible public API changes. Version `2.4.1` is the explicitly approved patch release for the already-merged, backward-compatible five-theme expansion; future feature versioning continues to follow this policy.

package/docs/RELEASE-2.4.1.md

@@ -0,0 +1,35 @@
+# v2.4.1 release preparation
+
+## Scope
+
+UI Style Kit CSS 2.4.1 packages the five shared color themes already merged into
+`main`: Signal Yellow, Botanical Green, Cobalt Electric, Stone Graphite, and Walnut
+Clay. Each theme provides light, dark, and contrast palettes through the existing
+`data-theme` and `data-mode` contract.
+
+The release preserves the v2 selectors and package entrypoints. It does not add or
+remove preset identifiers, exports, cascade layers, or companion-library ownership
+boundaries.
+
+## Release surfaces
+
+- Package, lockfile, public manifest, web manifests, structured metadata, generated
+  CSS banners, compatibility metadata, README, wiki sources, and maintained release
+  documentation identify `2.4.1`.
+- The changelog records the theme additions, expanded 4,500-case browser matrix,
+  demo metadata refresh, and Signal Yellow foreground correction under the dated
+  `2.4.1` entry.
+- The aligned companion versions remain `interactive-surface-css@1.7.0` and
+  `layout-style-css@3.1.0`.
+
+## Verification boundary
+
+Run focused version and compatibility tests after updating source metadata, then run
+the repository's final `npm run release:verify` gate. That gate rebuilds generated
+assets, lints authored CSS, executes unit and release-smoke browser checks, validates
+contrast, compatibility, ownership, package contents, ecosystem preflight, audit,
+and the dry-run tarball.
+
+A local green gate does not publish anything. Merge the reviewed release branch into
+`main` before creating `v2.4.1`; the tag-alignment workflow creates the GitHub Release,
+and the protected npm workflow publishes the immutable tagged package.

package/docs/STYLE-GUIDE.md

@@ -23,7 +23,7 @@
 | Paper Editorial | News, magazines, journals, cultural sites and story-led publishing |
 | Neo-Noir | Cinematic portfolios, nightlife, premium creative studios and dramatic product sites |
 
-All styles share the same 20 color schemes through `styles/theme-colors.css`, so changing `data-theme` affects the active color scheme independently from the selected UI treatment.
+All styles share the same 25 color schemes through `styles/theme-colors.css`, so changing `data-theme` affects the active color scheme independently from the selected UI treatment.
 
 Omit `data-theme` to use the chosen preset's native light, dark, or contrast colors.
 The [demo guide](DEMO-SHOWCASE.md) explains the unified style-specific gallery and

package/manifest.json

@@ -5,7 +5,7 @@
     "breakingChange": "increment-schemaVersion-before-removing-or-renaming-fields"
   },
   "name": "ui-style-kit-css",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "cascadeLayers": [
     "ui-style-kit.theme_colors",
     "ui-style-kit.native_elements",
@@ -215,7 +215,12 @@
     "newsprint-crimson",
     "foundry-amber",
     "soft-orchid",
-    "electric-noir"
+    "electric-noir",
+    "signal-yellow",
+    "botanical-green",
+    "cobalt-electric",
+    "stone-graphite",
+    "walnut-clay"
   ],
   "modes": [
     "light",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "CSS theme and UI style preset library for accessible websites, dashboards, admin interfaces, and client-facing pages.",
   "style": "dist/ui-style-kit.css",
   "main": "dist/ui-style-kit.css",
@@ -219,8 +219,9 @@
     "stylelint": "~17.14.1"
   },
   "overrides": {
+    "colord": "2.9.4",
     "fast-uri": "3.1.6",
-    "js-yaml": "4.3.1",
+    "js-yaml": "4.3.2",
     "nanoid": "3.3.18",
     "postcss": "8.5.23"
   },

package/styles/art-deco.css

@@ -379,7 +379,7 @@
 .deco-title, .deco-heading, .deco-kicker, .deco-button, .deco-badge, .deco-nav-link { font-family: var(--deco-font-heading); }
 .deco-title { margin: 0; color: var(--deco-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
 .deco-heading { margin: 0; color: var(--deco-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
-.deco-kicker { margin: 0; color: var(--deco-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
+.deco-kicker { margin: 0; color: var(--usk-primary-ink, var(--deco-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
 .deco-subtitle, .deco-copy { margin: 0; color: var(--deco-text-muted); line-height: 1.65; }
 .deco-text-muted { color: var(--deco-text-muted); }
 .deco-divider { width: 100%; height: 1px; border: 0; background: var(--deco-border); }
@@ -513,7 +513,7 @@
    Utilities
 ========================================================= */
 
-.deco-text-primary { color: var(--deco-primary); } .deco-text-secondary { color: var(--deco-secondary); } .deco-text-accent { color: var(--deco-accent); } .deco-text-success { color: var(--deco-success); } .deco-text-warning { color: var(--deco-warning); } .deco-text-danger { color: var(--deco-danger); }
+.deco-text-primary { color: var(--usk-primary-ink, var(--deco-primary)); } .deco-text-secondary { color: var(--deco-secondary); } .deco-text-accent { color: var(--usk-accent-ink, var(--deco-accent)); } .deco-text-success { color: var(--deco-success); } .deco-text-warning { color: var(--deco-warning); } .deco-text-danger { color: var(--deco-danger); }
 .deco-bg-primary { background: var(--deco-primary); color: var(--deco-on-primary); } .deco-bg-secondary { background: var(--deco-secondary); color: var(--deco-on-secondary); }
 .deco-border { border: 1px solid var(--deco-border); } .deco-rounded { border-radius: var(--deco-radius-md); } .deco-rounded-lg { border-radius: var(--deco-radius-lg); } .deco-rounded-xl { border-radius: var(--deco-radius-xl); } .deco-pill { border-radius: var(--deco-radius-pill); }
 .deco-sr-only, .deco-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@@ -621,7 +621,7 @@
 .deco-button.deco-button-outline-heavy,
 .deco-button-outline-heavy {
   background: transparent;
-  color: var(--deco-primary);
+  color: var(--usk-primary-ink, var(--deco-primary));
   border-style: solid;
   border-width: 2px;
   border-color: var(--deco-primary);
@@ -691,7 +691,7 @@
 
 .deco-eyebrow {
   margin: 0;
-  color: var(--deco-primary);
+  color: var(--usk-primary-ink, var(--deco-primary));
   font-family: var(--deco-font-heading);
   font-size: .76rem;
   font-weight: 900;
@@ -767,7 +767,7 @@
 .deco-nav-link { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; }
 .deco-input, .deco-textarea, .deco-select { border-radius: 0; }
 .deco-card-media, .deco-media-scrim, .deco-feature-strip, .deco-callout-bar { border-radius: 0; border-style: double; border-width: 3px; }
-.deco-icon-medallion, .deco-badge-seal { border-style: double; border-width: 4px; background: transparent; color: var(--deco-primary); box-shadow: 0 0 0 .25rem rgb(var(--deco-primary-rgb) / .07); }
+.deco-icon-medallion, .deco-badge-seal { border-style: double; border-width: 4px; background: transparent; color: var(--usk-primary-ink, var(--deco-primary)); box-shadow: 0 0 0 .25rem rgb(var(--deco-primary-rgb) / .07); }
 .deco-feature-item { text-align: center; grid-template-columns: 1fr; justify-items: center; }
 .deco-card-accent-edge { border-inline-start-width: 3px; }
 
@@ -943,7 +943,7 @@
 .deco-button-primary { background: linear-gradient(135deg, var(--deco-primary), var(--deco-success)); color: var(--deco-on-primary); border-color: var(--deco-border); }
 .deco-button-secondary { background: linear-gradient(135deg, var(--deco-secondary), var(--deco-warning)); color: var(--deco-on-secondary); border-color: var(--deco-border); }
 .deco-button-danger { background: linear-gradient(135deg, var(--deco-danger), rgb(var(--deco-danger-rgb) / .72)); color: var(--deco-on-danger); border-color: var(--deco-border); }
-.deco-button-ghost { background: transparent; color: var(--deco-primary); border-color: transparent; }
+.deco-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--deco-primary)); border-color: transparent; }
 }
 
 @layer ui-style-kit.art_deco {

package/styles/bauhaus.css

@@ -393,7 +393,7 @@
 .bau-title, .bau-heading, .bau-kicker, .bau-button, .bau-badge, .bau-nav-link { font-family: var(--bau-font-heading); }
 .bau-title { margin: 0; color: var(--bau-text); font-size: clamp(2.35rem, 6vw, 4.65rem); font-stretch: condensed; font-weight: 950; line-height: .94; letter-spacing: -0.075em; text-transform: uppercase; }
 .bau-heading { margin: 0; color: var(--bau-text); font-size: clamp(1.15rem, 2.4vw, 2rem); font-stretch: condensed; font-weight: 950; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
-.bau-kicker { margin: 0; color: var(--bau-primary); font-size: .82rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
+.bau-kicker { margin: 0; color: var(--usk-primary-ink, var(--bau-primary)); font-size: .82rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
 .bau-subtitle, .bau-copy { margin: 0; color: var(--bau-text-muted); line-height: 1.65; }
 .bau-text-muted { color: var(--bau-text-muted); }
 .bau-divider { width: 100%; height: var(--bau-rule-width); border: 0; background: var(--bau-text); }
@@ -540,7 +540,7 @@
    Utilities
 ========================================================= */
 
-.bau-text-primary { color: var(--bau-primary); } .bau-text-secondary { color: var(--bau-secondary); } .bau-text-accent { color: var(--bau-accent); } .bau-text-success { color: var(--bau-success); } .bau-text-warning { color: var(--bau-warning); } .bau-text-danger { color: var(--bau-danger); }
+.bau-text-primary { color: var(--usk-primary-ink, var(--bau-primary)); } .bau-text-secondary { color: var(--bau-secondary); } .bau-text-accent { color: var(--usk-accent-ink, var(--bau-accent)); } .bau-text-success { color: var(--bau-success); } .bau-text-warning { color: var(--bau-warning); } .bau-text-danger { color: var(--bau-danger); }
 .bau-bg-primary { background: var(--bau-primary); color: var(--bau-on-primary); } .bau-bg-secondary { background: var(--bau-secondary); color: var(--bau-on-secondary); }
 .bau-border { border: 2px solid var(--bau-border); } .bau-rounded { border-radius: var(--bau-radius-md); } .bau-rounded-lg { border-radius: var(--bau-radius-lg); } .bau-rounded-xl { border-radius: var(--bau-radius-xl); } .bau-pill { border-radius: var(--bau-radius-pill); }
 .bau-sr-only, .bau-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@@ -653,7 +653,7 @@
 .bau-button.bau-button-outline-heavy,
 .bau-button-outline-heavy {
   background: transparent;
-  color: var(--bau-primary);
+  color: var(--usk-primary-ink, var(--bau-primary));
   border-style: solid;
   border-width: 2px;
   border-color: var(--bau-primary);
@@ -725,7 +725,7 @@
 
 .bau-eyebrow {
   margin: 0;
-  color: var(--bau-primary);
+  color: var(--usk-primary-ink, var(--bau-primary));
   font-family: var(--bau-font-heading);
   font-size: .76rem;
   font-weight: 900;
@@ -941,7 +941,7 @@
 .bau-button-primary { background: var(--bau-primary); color: var(--bau-on-primary); border-color: var(--bau-primary); }
 .bau-button-secondary { background: var(--bau-secondary); color: var(--bau-on-secondary); border-color: var(--bau-secondary); }
 .bau-button-danger { background: var(--bau-danger); color: var(--bau-on-danger); border-color: var(--bau-danger); }
-.bau-button-ghost { background: transparent; color: var(--bau-primary); border-color: transparent; }
+.bau-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--bau-primary)); border-color: transparent; }
 }
 
 @layer ui-style-kit.bauhaus {
@@ -970,7 +970,7 @@
 [data-ui="bauhaus"][data-mode] .bau-sheet svg { display:block; flex:0 0 auto }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-panel { background:var(--bau-surface); border:2px solid var(--bau-border); border-radius:0; box-shadow:none; min-height:0; overflow:hidden; padding:14px }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-panel>header { align-items:center; border-bottom:2px solid currentColor; display:flex; justify-content:space-between; margin-bottom:10px; padding-bottom:6px }
-[data-ui="bauhaus"][data-mode] .bau-sheet .bau-panel>header>svg { color:var(--bau-primary); height:18px; width:18px }
+[data-ui="bauhaus"][data-mode] .bau-sheet .bau-panel>header>svg { color:var(--usk-primary-ink, var(--bau-primary)); height:18px; width:18px }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-sidebar { background:var(--bau-workshop-rail-bg); border-right:3px solid var(--bau-workshop-rail-text); color:var(--bau-workshop-rail-text); display:flex; flex-direction:column; height:100%; overflow:hidden; padding:24px 0 14px }
 [data-ui="bauhaus"][data-mode] .bau-sheet[data-mode="light"] .bau-sidebar { border-right-color:var(--bau-on-warning) }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-brand { align-items:center; display:flex; gap:10px; padding:0 18px 24px }
@@ -1005,9 +1005,9 @@
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-bottom-grid { grid-template-columns:5.6fr 2.05fr 4.15fr }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-hero { background:var(--bau-surface); padding:0; position:relative }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-hero-copy { left:34px; position:absolute; top:48px; z-index:2 }
-[data-ui="bauhaus"][data-mode] .bau-sheet .bau-eyebrow { color:var(--bau-primary); font-family:var(--bau-font-heading); font-size:12px; font-weight:700; letter-spacing:0 }
+[data-ui="bauhaus"][data-mode] .bau-sheet .bau-eyebrow { color:var(--usk-primary-ink, var(--bau-primary)); font-family:var(--bau-font-heading); font-size:12px; font-weight:700; letter-spacing:0 }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-hero h1 { font-family:var(--bau-font-heading); font-size:57px; font-weight:800; letter-spacing:0; line-height:0.83; margin:14px 0 17px; max-width:490px; text-transform:uppercase }
-[data-ui="bauhaus"][data-mode] .bau-sheet .bau-hero h1 span { color:var(--bau-primary); font-size:37px; letter-spacing:0 }
+[data-ui="bauhaus"][data-mode] .bau-sheet .bau-hero h1 span { color:var(--usk-primary-ink, var(--bau-primary)); font-size:37px; letter-spacing:0 }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-hero p { font-size:12px; font-weight:600; letter-spacing:0; max-width:350px }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-inline-actions { display:flex; gap:8px; margin-top:24px }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-button { align-items:center; background:var(--bau-surface); border:2px solid var(--bau-border); border-radius:0; display:inline-flex; font-family:var(--bau-font-heading); font-size:12px; font-weight:700; gap:7px; justify-content:center; letter-spacing:0; min-height:35px; padding:0 15px; text-transform:uppercase; transition:background-color 100ms linear,color 100ms linear,transform 100ms linear }
@@ -1017,7 +1017,7 @@
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-button.is-hover { background:var(--bau-primary-hover); transform:translate(-2px,-2px) }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-button.is-secondary { background:transparent; border-color:var(--bau-border); color:var(--bau-text) }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-button.is-danger { background:var(--bau-danger); border-color:var(--bau-danger); color:var(--bau-on-primary) }
-[data-ui="bauhaus"][data-mode] .bau-sheet .bau-button.is-ghost { background:transparent; border-color:transparent; color:var(--bau-primary) }
+[data-ui="bauhaus"][data-mode] .bau-sheet .bau-button.is-ghost { background:transparent; border-color:transparent; color:var(--usk-primary-ink, var(--bau-primary)) }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-button:disabled { background:var(--bau-surface-soft); border-color:var(--bau-surface-soft); color:var(--bau-on-primary); cursor:not-allowed; opacity:0.7 }
 [data-ui="bauhaus"][data-mode] .bau-sheet[data-mode="dark"] .bau-button:disabled { background:var(--bau-surface-soft); border-color:var(--bau-surface-soft); color:var(--bau-text-muted) }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-actions { display:grid; gap:6px; grid-template-rows:auto repeat(7,1fr) }
@@ -1072,7 +1072,7 @@
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-input-icon.is-end>button svg { height:12px; width:12px }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-field input[type="color"] { padding:2px }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-file input { height:27px; opacity:0; position:absolute; top:13px; z-index:2 }
-[data-ui="bauhaus"][data-mode] .bau-sheet .bau-file>span:last-child { align-items:center; background:var(--bau-surface); border:1px dashed var(--bau-border); color:var(--bau-primary); display:flex; font-size:12px; font-weight:700; gap:5px; height:27px; justify-content:center; text-transform:uppercase }
+[data-ui="bauhaus"][data-mode] .bau-sheet .bau-file>span:last-child { align-items:center; background:var(--bau-surface); border:1px dashed var(--bau-border); color:var(--usk-primary-ink, var(--bau-primary)); display:flex; font-size:12px; font-weight:700; gap:5px; height:27px; justify-content:center; text-transform:uppercase }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-file>span:last-child svg { height:12px; width:12px }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-choices fieldset { border:0; margin:0 0 7px; padding:0 }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-choices legend { font-size:12px; font-weight:800; margin-bottom:4px }
@@ -1118,7 +1118,7 @@
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-tooltip-panel [role="tooltip"] { background:var(--bau-workshop-rail-bg); border:2px solid var(--bau-warning); bottom:9px; color:var(--bau-on-primary); font-size:12px; left:39px; line-height:1.45; padding:8px; position:absolute; width:105px }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-loading { align-items:center; display:flex; flex-wrap:wrap; gap:.75rem }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-loading>header { flex:1 0 100% }
-[data-ui="bauhaus"][data-mode] .bau-sheet .bau-spinner { color:var(--bau-primary); height:31px; width:31px }
+[data-ui="bauhaus"][data-mode] .bau-sheet .bau-spinner { color:var(--usk-primary-ink, var(--bau-primary)); height:31px; width:31px }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-spin { animation:bau-spin 1s linear infinite }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-skeleton { display:grid; gap:5px }
 [data-ui="bauhaus"][data-mode] .bau-sheet .bau-skeleton span { animation:bau-workshop-pulse 1.5s steps(2,end) infinite; background:var(--bau-border); display:block; height:7px }
@@ -1285,7 +1285,7 @@
 [data-ui="bauhaus"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) { box-shadow: none; border-color: var(--bau-border); }
 [data-ui="bauhaus"][data-mode] :where(dialog) { background: var(--bau-surface-strong); color: var(--bau-text); border: 2px solid var(--bau-border); box-shadow: .5rem .5rem 0 var(--bau-warning); }
 .bau-spinner, [data-ui="bauhaus"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
-  display: inline-block; flex: 0 0 auto; inline-size: 1.75rem; block-size: 1.75rem; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%; background: none; color: var(--bau-primary); box-shadow: none; clip-path: none; animation: bau-spin 1s linear infinite;
+  display: inline-block; flex: 0 0 auto; inline-size: 1.75rem; block-size: 1.75rem; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%; background: none; color: var(--usk-primary-ink, var(--bau-primary)); box-shadow: none; clip-path: none; animation: bau-spin 1s linear infinite;
 }
 .bau-spinner-sm { inline-size: 1rem; block-size: 1rem; }
 .bau-spinner-lg { inline-size: 2.5rem; block-size: 2.5rem; }

package/styles/bento.css

@@ -396,7 +396,7 @@
 .bento-title, .bento-heading, .bento-kicker, .bento-button, .bento-badge, .bento-nav-link { font-family: var(--bento-font-heading); }
 .bento-title { margin: 0; color: var(--bento-text); font-size: clamp(2.1rem, 5.5vw, 3.9rem); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
 .bento-heading { margin: 0; color: var(--bento-text); font-size: clamp(1.25rem, 2.75vw, 2.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }
-.bento-kicker { margin: 0; color: var(--bento-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
+.bento-kicker { margin: 0; color: var(--usk-primary-ink, var(--bento-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
 .bento-subtitle, .bento-copy { margin: 0; color: var(--bento-text-muted); line-height: 1.55; }
 .bento-text-muted { color: var(--bento-text-muted); }
 .bento-divider { width: 100%; height: 1px; border: 0; background: var(--bento-border); }
@@ -436,10 +436,10 @@
 .bento-button:active, .bento-icon-button:active, .bento-button[aria-pressed="true"], .bento-icon-button[aria-pressed="true"], .bento-button.is-active, .bento-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgb(var(--bento-text-rgb) / .14); }
 .bento-button-primary { background: var(--bento-primary); color: var(--bento-on-primary); border-color: var(--bento-primary); }
 .bento-button-primary:hover { background: var(--bento-primary-hover); border-color: var(--bento-primary-hover); }
-.bento-button-secondary { background: rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha)); color: var(--bento-primary); border-color: rgb(var(--bento-primary-rgb) / .32); box-shadow: none; }
+.bento-button-secondary { background: rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha)); color: var(--usk-primary-ink, var(--bento-primary)); border-color: rgb(var(--bento-primary-rgb) / .32); box-shadow: none; }
 .bento-button-secondary:hover { background: rgb(var(--bento-primary-rgb) / .06); border-color: rgb(var(--bento-primary-rgb) / .52); }
 .bento-button-danger { background: var(--bento-danger); color: var(--bento-on-danger); border-color: var(--bento-danger); }
-.bento-button-ghost { background: transparent; color: var(--bento-primary); border-color: transparent; box-shadow: none; }
+.bento-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--bento-primary)); border-color: transparent; box-shadow: none; }
 .bento-icon-button { width: 2.75rem; padding: 0; border-radius: var(--bento-control-radius); }
 .bento-button:disabled, .bento-icon-button:disabled, .bento-disabled { opacity: .55; cursor: not-allowed; transform: none; }
 
@@ -491,7 +491,7 @@
 
 .bento-badge { display: inline-flex; align-items: center; gap: var(--bento-space-1); min-height: 1.75rem; padding: .38rem .72rem; background: var(--bento-tile-secondary-bg); color: var(--bento-text); border: 1px solid var(--bento-tile-edge); border-radius: var(--bento-radius-sm); box-shadow: inset 0 1px 0 rgb(var(--bento-surface-strong-rgb) / .62); font-size: .8125rem; font-weight: 800; line-height: 1; }
 .bento-badge-primary { background: var(--bento-primary); color: var(--bento-on-primary); border-color: var(--bento-primary); }
-.bento-badge-secondary { background: rgb(var(--bento-primary-rgb) / .10); color: var(--bento-primary); border-color: transparent; }
+.bento-badge-secondary { background: rgb(var(--bento-primary-rgb) / .10); color: var(--usk-primary-ink, var(--bento-primary)); border-color: transparent; }
 .bento-badge-success { background: rgb(var(--bento-success-rgb) / .14); color: var(--bento-success); border-color: transparent; }
 .bento-badge-warning { background: rgb(var(--bento-warning-rgb) / .14); color: var(--bento-warning); border-color: transparent; }
 .bento-badge-danger { background: rgb(var(--bento-danger-rgb) / .14); color: var(--bento-danger); border-color: transparent; }
@@ -531,7 +531,7 @@
    Utilities
 ========================================================= */
 
-.bento-text-primary { color: var(--bento-primary); } .bento-text-secondary { color: var(--bento-secondary); } .bento-text-accent { color: var(--bento-accent); } .bento-text-success { color: var(--bento-success); } .bento-text-warning { color: var(--bento-warning); } .bento-text-danger { color: var(--bento-danger); }
+.bento-text-primary { color: var(--usk-primary-ink, var(--bento-primary)); } .bento-text-secondary { color: var(--bento-secondary); } .bento-text-accent { color: var(--usk-accent-ink, var(--bento-accent)); } .bento-text-success { color: var(--bento-success); } .bento-text-warning { color: var(--bento-warning); } .bento-text-danger { color: var(--bento-danger); }
 .bento-bg-primary { background: var(--bento-primary); color: var(--bento-on-primary); } .bento-bg-secondary { background: var(--bento-secondary); color: var(--bento-on-secondary); }
 .bento-border { border: 1px solid var(--bento-border); } .bento-rounded { border-radius: var(--bento-radius-md); } .bento-rounded-lg { border-radius: var(--bento-radius-lg); } .bento-rounded-xl { border-radius: var(--bento-radius-xl); } .bento-pill { border-radius: var(--bento-radius-pill); }
 .bento-sr-only, .bento-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@@ -558,7 +558,7 @@
   grid-row: auto;
 }
 .bento-stat { display: grid; gap: .25rem; }
-.bento-stat-value { color: var(--bento-primary); font-size: clamp(2rem, 4vw, 3rem); font-weight: 950; line-height: 1; }
+.bento-stat-value { color: var(--usk-primary-ink, var(--bento-primary)); font-size: clamp(2rem, 4vw, 3rem); font-weight: 950; line-height: 1; }
 .bento-stat-label { color: var(--bento-text-muted); font-weight: 750; overflow-wrap: normal; word-break: normal; }
 
 @container (min-width: 34rem) {
@@ -666,7 +666,7 @@
 .bento-button.bento-button-outline-heavy,
 .bento-button-outline-heavy {
   background: transparent;
-  color: var(--bento-primary);
+  color: var(--usk-primary-ink, var(--bento-primary));
   border-style: solid;
   border-width: 2px;
   border-color: var(--bento-primary);
@@ -736,7 +736,7 @@
 
 .bento-eyebrow {
   margin: 0;
-  color: var(--bento-primary);
+  color: var(--usk-primary-ink, var(--bento-primary));
   font-family: var(--bento-font-heading);
   font-size: .76rem;
   font-weight: 900;
@@ -785,7 +785,7 @@
 .bento-card-feature { background: var(--bento-tile-accent-bg); border-radius: var(--bento-tile-radius); }
 .bento-icon-medallion {
   background: rgb(var(--bento-primary-rgb) / .10);
-  color: var(--bento-primary);
+  color: var(--usk-primary-ink, var(--bento-primary));
   border: 1px solid rgb(var(--bento-primary-rgb) / .20);
   border-radius: var(--bento-radius-md);
   box-shadow: var(--bento-shadow-sm);
@@ -808,7 +808,7 @@
 }
 .bento-button.bento-button-outline-heavy, .bento-button-outline-heavy {
   background: rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha));
-  color: var(--bento-primary);
+  color: var(--usk-primary-ink, var(--bento-primary));
   border-width: 1px;
   border-color: rgb(var(--bento-primary-rgb) / .32);
   border-radius: var(--bento-control-radius);
@@ -999,7 +999,7 @@
 .bento-button-primary { background: var(--bento-primary); color: var(--bento-on-primary); border-color: var(--bento-primary); }
 .bento-button-secondary { background: var(--bento-secondary); color: var(--bento-on-secondary); border-color: var(--bento-secondary); }
 .bento-button-danger { background: var(--bento-danger); color: var(--bento-on-danger); border-color: var(--bento-danger); }
-.bento-button-ghost { background: transparent; color: var(--bento-primary); border-color: transparent; }
+.bento-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--bento-primary)); border-color: transparent; }
 }
 
 @layer ui-style-kit.bento {
@@ -1064,7 +1064,7 @@
 }
 
 [data-ui=bento][data-mode] .bento-panel > header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 11px; }
-[data-ui=bento][data-mode] .bento-panel > header > svg { color: var(--bento-mosaic-primary); height: 17px; width: 17px; }
+[data-ui=bento][data-mode] .bento-panel > header > svg { color: var(--usk-primary-ink, var(--bento-mosaic-primary)); height: 17px; width: 17px; }
 
 [data-ui=bento][data-mode] .bento-sidebar {
   background: var(--bento-mosaic-panel);
@@ -1086,7 +1086,7 @@
   background: var(--bento-mosaic-primary-soft);
   border: 1px solid var(--bento-mosaic-primary);
   border-radius: 8px;
-  color: var(--bento-mosaic-primary);
+  color: var(--usk-primary-ink, var(--bento-mosaic-primary));
   display: flex;
   height: 30px;
   justify-content: center;
@@ -1188,9 +1188,9 @@
 [data-ui=bento][data-mode] .bento-hero { background: var(--bento-mosaic-primary-soft); border-color: var(--bento-border); padding: 0; position: relative; }
 [data-ui=bento][data-mode] .bento-sheet[data-mode="dark"] .bento-hero { background: var(--bento-mosaic-primary-soft); border-color: var(--bento-border); }
 [data-ui=bento][data-mode] .bento-hero-copy { left: 40px; position: absolute; top: 55px; z-index: 2; }
-[data-ui=bento][data-mode] .bento-eyebrow { color: var(--bento-mosaic-primary); font-size: 12px; font-weight: 800; letter-spacing: 0; }
+[data-ui=bento][data-mode] .bento-eyebrow { color: var(--usk-primary-ink, var(--bento-mosaic-primary)); font-size: 12px; font-weight: 800; letter-spacing: 0; }
 [data-ui=bento][data-mode] .bento-hero h1 { font-size: 50px; font-weight: 850; letter-spacing: 0; line-height: 1.08; margin: 11px 0 14px; }
-[data-ui=bento][data-mode] .bento-hero h1 span { color: var(--bento-mosaic-primary); }
+[data-ui=bento][data-mode] .bento-hero h1 span { color: var(--usk-primary-ink, var(--bento-mosaic-primary)); }
 [data-ui=bento][data-mode] .bento-hero p { color: var(--bento-mosaic-muted); font-size: 13px; max-width: 270px; }
 [data-ui=bento][data-mode] .bento-inline-actions { display: flex; gap: 10px; margin-top: 20px; }
 [data-ui=bento][data-mode] .bento-hero-art { height: 345px; object-fit: contain; object-position: center; position: absolute; right: -30px; top: 20px; transform: rotate(-3deg); width: 420px; z-index: 1; }
@@ -1218,10 +1218,10 @@
 [data-ui=bento][data-mode] .bento-button.is-hover,
 [data-ui=bento][data-mode] .bento-button.is-busy { background: var(--bento-mosaic-primary); border-color: var(--bento-mosaic-primary); color: var(--bento-on-primary); }
 [data-ui=bento][data-mode] .bento-button.is-hover { background: var(--bento-mosaic-primary-hover); box-shadow: 0 8px 18px var(--bento-mosaic-primary); }
-[data-ui=bento][data-mode] .bento-button.is-secondary { background: transparent; border-color: var(--bento-mosaic-primary); color: var(--bento-mosaic-primary); }
+[data-ui=bento][data-mode] .bento-button.is-secondary { background: transparent; border-color: var(--bento-mosaic-primary); color: var(--usk-primary-ink, var(--bento-mosaic-primary)); }
 [data-ui=bento][data-mode] .bento-sheet[data-mode="dark"] .bento-button.is-secondary { border-color: var(--bento-border); color: var(--bento-link); }
 [data-ui=bento][data-mode] .bento-button.is-danger { background: var(--bento-mosaic-danger-soft); border-color: var(--bento-mosaic-danger); color: var(--bento-mosaic-danger); }
-[data-ui=bento][data-mode] .bento-button.is-ghost { background: transparent; border-color: transparent; color: var(--bento-mosaic-primary); }
+[data-ui=bento][data-mode] .bento-button.is-ghost { background: transparent; border-color: transparent; color: var(--usk-primary-ink, var(--bento-mosaic-primary)); }
 [data-ui=bento][data-mode] .bento-button:disabled { color: var(--bento-mosaic-faint); cursor: not-allowed; opacity: 0.62; }
 
 [data-ui=bento][data-mode] .bento-actions { display: grid; gap: 5px; grid-template-rows: auto repeat(7, 1fr); }
@@ -1302,7 +1302,7 @@
 [data-ui=bento][data-mode] .bento-input-icon.is-end > button svg { height: 12px; width: 12px; }
 [data-ui=bento][data-mode] .bento-field input[type="color"] { padding: 2px; }
 [data-ui=bento][data-mode] .bento-file input { height: 26px; opacity: 0; position: absolute; top: 12px; z-index: 2; }
-[data-ui=bento][data-mode] .bento-file > span:last-child { align-items: center; background: var(--bento-mosaic-panel-soft); border: 1px dashed var(--bento-mosaic-line-strong); border-radius: 6px; color: var(--bento-mosaic-primary); display: flex; font-size: 12px; font-weight: 750; gap: 5px; height: 26px; justify-content: center; }
+[data-ui=bento][data-mode] .bento-file > span:last-child { align-items: center; background: var(--bento-mosaic-panel-soft); border: 1px dashed var(--bento-mosaic-line-strong); border-radius: 6px; color: var(--usk-primary-ink, var(--bento-mosaic-primary)); display: flex; font-size: 12px; font-weight: 750; gap: 5px; height: 26px; justify-content: center; }
 [data-ui=bento][data-mode] .bento-file > span:last-child svg { height: 12px; width: 12px; }
 
 [data-ui=bento][data-mode] .bento-choices fieldset { border: 0; margin: 0 0 7px; padding: 0; }
@@ -1327,10 +1327,10 @@
 
 [data-ui=bento][data-mode] .bento-segment { background: var(--bento-mosaic-panel-soft); border: 1px solid var(--bento-mosaic-line); border-radius: 7px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px; }
 [data-ui=bento][data-mode] .bento-segment button { background: transparent; border: 0; border-radius: 5px; color: var(--bento-mosaic-muted); font-size: 12px; min-height: 24px; }
-[data-ui=bento][data-mode] .bento-segment button.is-active { background: var(--bento-mosaic-panel-raised); box-shadow: 0 2px 8px rgba(24, 35, 72, 0.1); color: var(--bento-mosaic-primary); font-weight: 800; }
+[data-ui=bento][data-mode] .bento-segment button.is-active { background: var(--bento-mosaic-panel-raised); box-shadow: 0 2px 8px rgba(24, 35, 72, 0.1); color: var(--usk-primary-ink, var(--bento-mosaic-primary)); font-weight: 800; }
 
 [data-ui=bento][data-mode] .bento-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
-[data-ui=bento][data-mode] .bento-status { align-items: center; background: var(--bento-mosaic-primary-soft); border: 1px solid var(--bento-mosaic-primary); border-radius: 5px; color: var(--bento-mosaic-primary); display: inline-flex; font-size: 12px; font-weight: 800; min-height: 22px; padding: 0 8px; white-space: nowrap; }
+[data-ui=bento][data-mode] .bento-status { align-items: center; background: var(--bento-mosaic-primary-soft); border: 1px solid var(--bento-mosaic-primary); border-radius: 5px; color: var(--usk-primary-ink, var(--bento-mosaic-primary)); display: inline-flex; font-size: 12px; font-weight: 800; min-height: 22px; padding: 0 8px; white-space: nowrap; }
 [data-ui=bento][data-mode] .bento-status.is-violet { background: var(--bento-mosaic-violet-soft); color: var(--bento-mosaic-violet); }
 [data-ui=bento][data-mode] .bento-status.is-success { background: var(--bento-mosaic-success-soft); color: var(--bento-mosaic-success); }
 [data-ui=bento][data-mode] .bento-status.is-warning { background: var(--bento-mosaic-warning-soft); color: var(--bento-mosaic-warning); }
@@ -1361,13 +1361,13 @@
 [data-ui=bento][data-mode] .bento-tooltip > header,
 [data-ui=bento][data-mode] .bento-loading > header { margin-bottom: 7px; }
 [data-ui=bento][data-mode] .bento-tooltip { overflow: visible; position: relative; z-index: 4; }
-[data-ui=bento][data-mode] .bento-tooltip > button { align-items: center; background: var(--bento-mosaic-primary-soft); border: 0; border-radius: 50%; color: var(--bento-mosaic-primary); display: flex; height: 23px; justify-content: center; width: 23px; }
+[data-ui=bento][data-mode] .bento-tooltip > button { align-items: center; background: var(--bento-mosaic-primary-soft); border: 0; border-radius: 50%; color: var(--usk-primary-ink, var(--bento-mosaic-primary)); display: flex; height: 23px; justify-content: center; width: 23px; }
 [data-ui=bento][data-mode] .bento-tooltip > button svg { height: 13px; width: 13px; }
 [data-ui=bento][data-mode] .bento-tooltip [role="tooltip"] { background: var(--bento-tooltip-bg); border: 1px solid var(--bento-border); border-radius: 7px; bottom: 11px; color: var(--bento-on-primary); font-size: 12px; left: 41px; line-height: 1.5; padding: 9px; position: absolute; width: 102px; }
 
 [data-ui=bento][data-mode] .bento-loading { align-items: center; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto 1fr; }
 [data-ui=bento][data-mode] .bento-loading > header { width: 100%; }
-[data-ui=bento][data-mode] .bento-spinner { color: var(--bento-mosaic-primary); height: 31px; width: 31px; }
+[data-ui=bento][data-mode] .bento-spinner { color: var(--usk-primary-ink, var(--bento-mosaic-primary)); height: 31px; width: 31px; }
 [data-ui=bento][data-mode] .bento-spin { animation: bento-mosaic-spin 1s linear infinite; }
 @keyframes bento-mosaic-spin { to { transform: rotate(360deg); } }
 [data-ui=bento][data-mode] .bento-skeleton { display: grid; gap: 5px; }
@@ -1407,11 +1407,11 @@
 [data-ui=bento][data-mode] .bento-table-panel > footer { align-items: center; color: var(--bento-mosaic-muted); display: flex; font-size: 12px; justify-content: space-between; padding-top: 9px; }
 [data-ui=bento][data-mode] .bento-table-panel > footer nav { display: flex; gap: 4px; }
 [data-ui=bento][data-mode] .bento-table-panel > footer nav button { align-items: center; background: var(--bento-mosaic-panel-soft); border: 1px solid var(--bento-mosaic-line); border-radius: 6px; display: flex; font-size: 12px; height: 26px; justify-content: center; padding: 0; width: 26px; }
-[data-ui=bento][data-mode] .bento-table-panel > footer nav button.is-active { background: var(--bento-mosaic-primary-soft); border-color: var(--bento-mosaic-primary); color: var(--bento-mosaic-primary); font-weight: 800; }
+[data-ui=bento][data-mode] .bento-table-panel > footer nav button.is-active { background: var(--bento-mosaic-primary-soft); border-color: var(--bento-mosaic-primary); color: var(--usk-primary-ink, var(--bento-mosaic-primary)); font-weight: 800; }
 
 [data-ui=bento][data-mode] .bento-service-card { display: flex; flex-direction: column; }
 [data-ui=bento][data-mode] .bento-service-card > header { align-items: center; justify-content: flex-start; }
-[data-ui=bento][data-mode] .bento-service-icon { align-items: center; background: var(--bento-mosaic-primary-soft); border: 1px solid var(--bento-mosaic-primary); border-radius: 9px; color: var(--bento-mosaic-primary); display: flex; height: 38px; justify-content: center; width: 38px; }
+[data-ui=bento][data-mode] .bento-service-icon { align-items: center; background: var(--bento-mosaic-primary-soft); border: 1px solid var(--bento-mosaic-primary); border-radius: 9px; color: var(--usk-primary-ink, var(--bento-mosaic-primary)); display: flex; height: 38px; justify-content: center; width: 38px; }
 [data-ui=bento][data-mode] .bento-service-icon svg { height: 22px; width: 22px; }
 [data-ui=bento][data-mode] .bento-service-card > header > div { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; }
 [data-ui=bento][data-mode] .bento-service-card > header .bento-status { min-height: 18px; padding-inline: 5px; }
@@ -1424,7 +1424,7 @@
 [data-ui=bento][data-mode] .bento-listbox { background: var(--bento-mosaic-panel-soft); border: 1px solid var(--bento-mosaic-line); border-radius: 8px; display: grid; margin-bottom: 8px; overflow: hidden; }
 [data-ui=bento][data-mode] .bento-listbox button { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--bento-mosaic-line); display: flex; font-size: 12px; justify-content: space-between; min-height: 27px; padding: 0 8px; text-align: left; }
 [data-ui=bento][data-mode] .bento-listbox button:last-child { border-bottom: 0; }
-[data-ui=bento][data-mode] .bento-listbox button[aria-selected="true"] { color: var(--bento-mosaic-primary); font-weight: 800; }
+[data-ui=bento][data-mode] .bento-listbox button[aria-selected="true"] { color: var(--usk-primary-ink, var(--bento-mosaic-primary)); font-weight: 800; }
 [data-ui=bento][data-mode] .bento-listbox button svg { height: 12px; width: 12px; }
 [data-ui=bento][data-mode] .bento-service-card details { color: var(--bento-mosaic-muted); font-size: 12px; margin-bottom: 8px; }
 [data-ui=bento][data-mode] .bento-service-card summary { align-items: center; color: var(--bento-mosaic-text); cursor: pointer; display: flex; font-weight: 800; justify-content: space-between; list-style: none; }
@@ -1444,7 +1444,7 @@
 [data-ui=bento][data-mode] .bento-dialog-surface dialog:not([open]) { display: none; }
 [data-ui=bento][data-mode] .bento-dialog-close { background: transparent; border: 0; color: var(--bento-mosaic-muted); padding: 0; position: absolute; right: 13px; top: 13px; }
 [data-ui=bento][data-mode] .bento-dialog-close svg { height: 15px; width: 15px; }
-[data-ui=bento][data-mode] .bento-dialog-icon { align-items: center; background: var(--bento-mosaic-primary-soft); border-radius: 9px; color: var(--bento-mosaic-primary); display: flex; height: 38px; justify-content: center; margin-bottom: 13px; width: 38px; }
+[data-ui=bento][data-mode] .bento-dialog-icon { align-items: center; background: var(--bento-mosaic-primary-soft); border-radius: 9px; color: var(--usk-primary-ink, var(--bento-mosaic-primary)); display: flex; height: 38px; justify-content: center; margin-bottom: 13px; width: 38px; }
 [data-ui=bento][data-mode] .bento-dialog-icon svg { height: 21px; width: 21px; }
 [data-ui=bento][data-mode] .bento-dialog-surface h2 { font-size: 15px; }
 [data-ui=bento][data-mode] .bento-dialog-surface p { color: var(--bento-mosaic-muted); font-size: 12px; margin: 9px 0 18px; }
@@ -1675,7 +1675,8 @@
 [data-ui=bento][data-mode] .bento-loading-spinner,
 [data-ui=bento][data-mode] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]),
 [data-ui=bento][data-mode] .bento-sheet .bento-spinner { border: 2px solid currentColor; border-top-color: transparent; background: transparent; clip-path: none; border-radius: 50%; box-shadow: none; animation: bento-mosaic-spin 1s linear infinite; width: 28px; height: 28px; inline-size: 28px; block-size: 28px; flex: 0 0 auto; }
-[data-ui=bento][data-mode] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) { color: var(--bento-spinner-stroke); }
+/** Keeps semantic spinner paint aligned with the prefixed readable ink treatment. */
+[data-ui=bento][data-mode] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) { color: var(--usk-primary-ink, var(--bento-spinner-stroke)); }
 [data-ui=bento][data-mode] .bento-spinner-sm { width: 16px; height: 16px; inline-size: 16px; block-size: 16px; }
 [data-ui=bento][data-mode] .bento-spinner-lg { width: 40px; height: 40px; inline-size: 40px; block-size: 40px; }
 /** Keeps native busy controls on the same Soft Mosaic ring as authored button aliases. */

package/styles/brutalism.css

@@ -472,7 +472,7 @@
 
 .brutal-title { margin: 0; font-size: clamp(2rem, 6vw, 4.25rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--brutal-text); text-shadow: 4px 4px 0 var(--brutal-accent); }
 .brutal-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.05; letter-spacing: -0.02em; }
-.brutal-kicker { margin: 0; color: var(--brutal-primary); font-size: 0.85rem; font-weight: 900; letter-spacing: 0.12em; }
+.brutal-kicker { margin: 0; color: var(--usk-primary-ink, var(--brutal-primary)); font-size: 0.85rem; font-weight: 900; letter-spacing: 0.12em; }
 .brutal-subtitle, .brutal-copy { margin: 0; color: var(--brutal-text-muted); line-height: 1.6; }
 .brutal-text-muted { color: var(--brutal-text-muted); }
 
@@ -556,7 +556,7 @@
 .brutal-table-wrap { overflow: auto; box-shadow: 8px 8px 0 var(--brutal-primary); }
 .brutal-table { width: 100%; border-collapse: collapse; } .brutal-table th, .brutal-table td { padding: 0.9rem 1rem; border: 2px solid var(--brutal-border); text-align: left; } .brutal-table th { background: var(--brutal-primary); color: var(--brutal-on-primary); text-transform: uppercase; }
 
-.brutal-text-primary { color: var(--brutal-primary); } .brutal-text-secondary { color: var(--brutal-secondary); } .brutal-text-accent { color: var(--brutal-accent); } .brutal-text-success { color: var(--brutal-success); } .brutal-text-warning { color: var(--brutal-warning); } .brutal-text-danger { color: var(--brutal-danger); }
+.brutal-text-primary { color: var(--usk-primary-ink, var(--brutal-primary)); } .brutal-text-secondary { color: var(--brutal-secondary); } .brutal-text-accent { color: var(--usk-accent-ink, var(--brutal-accent)); } .brutal-text-success { color: var(--brutal-success); } .brutal-text-warning { color: var(--brutal-warning); } .brutal-text-danger { color: var(--brutal-danger); }
 .brutal-bg-primary { background: var(--brutal-primary); color: var(--brutal-on-primary); } .brutal-bg-secondary { background: var(--brutal-secondary); color: var(--brutal-on-secondary); }
 
 [data-ui="brutalism"] :focus-visible { outline: 4px solid var(--brutal-focus); outline-offset: 3px; }
@@ -630,7 +630,7 @@
 .brutal-button.brutal-button-outline-heavy,
 .brutal-button-outline-heavy {
   background: transparent;
-  color: var(--brutal-primary);
+  color: var(--usk-primary-ink, var(--brutal-primary));
   border-style: solid;
   border-width: 2px;
   border-color: var(--brutal-primary);
@@ -700,7 +700,7 @@
 
 .brutal-eyebrow {
   margin: 0;
-  color: var(--brutal-primary);
+  color: var(--usk-primary-ink, var(--brutal-primary));
   font-family: var(--brutal-font-heading);
   font-size: .76rem;
   font-weight: 900;
@@ -893,7 +893,7 @@
 .brutal-button-primary { background: var(--brutal-primary); color: var(--brutal-on-primary); border-color: var(--brutal-primary); }
 .brutal-button-secondary { background: var(--brutal-secondary); color: var(--brutal-on-secondary); border-color: var(--brutal-secondary); }
 .brutal-button-danger { background: var(--brutal-danger); color: var(--brutal-on-danger); border-color: var(--brutal-danger); }
-.brutal-button-ghost { background: transparent; color: var(--brutal-primary); border-color: transparent; }
+.brutal-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--brutal-primary)); border-color: transparent; }
 }
 
 @layer ui-style-kit.brutalism {