ui-style-kit-css 2.4.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "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"
   },
@@ -250,12 +251,12 @@
     "check:ecosystem:minimum": "node scripts/check-ecosystem-packs.mjs --matrix minimum --skip-docs",
     "check:ecosystem:packs": "npm run check:ecosystem:current && npm run check:ecosystem:minimum",
     "test:ecosystem:clean-install": "node --test tests/clean-install-ecosystem-contract.integration.mjs",
-    "release:preflight": "npm run build && node scripts/release-preflight.mjs --layout-repo ../Layout-Style-CSS --interactive-spec interactive-surface-css@1.7.0 --layout-docs-repo ../Layout-Style-CSS",
+    "release:preflight": "npm run build && node scripts/release-preflight.mjs --layout-repo ../Layout-Style-CSS --interactive-repo ../Interactive-Surface-CSS --layout-docs-repo ../Layout-Style-CSS --interactive-docs-repo ../Interactive-Surface-CSS",
     "check": "npm run build && npm run lint && npm run test:unit && npm run check:contrast && npm run check:compat && npm run check:ownership && npm run check:package",
     "pack:dry-run": "npm pack --dry-run --ignore-scripts",
     "prepack": "npm run check",
-    "release:verify": "npm run check && npm run test:e2e && npm run release:preflight -- --candidate-package ui-style-kit-css --skip-clean-install && npm audit --audit-level=moderate && npm run pack:dry-run",
-    "release:verify:full": "npm run check && npm run test:e2e:full && npm run test:axe:full && npm run test:visual:full && npm run test:matrix && npm run release:preflight -- --candidate-package ui-style-kit-css && npm audit --audit-level=moderate && npm run pack:dry-run",
+    "release:verify": "npm run check && npm run test:e2e && npm run release:preflight -- --candidate-package ui-style-kit-css --companion-candidate-root ../Layout-Style-CSS --companion-candidate-root ../Interactive-Surface-CSS --skip-clean-install && npm audit --audit-level=moderate && npm run pack:dry-run",
+    "release:verify:full": "npm run check && npm run test:e2e:full && npm run test:axe:full && npm run test:visual:full && npm run test:matrix && npm run release:preflight -- --candidate-package ui-style-kit-css --companion-candidate-root ../Layout-Style-CSS --companion-candidate-root ../Interactive-Surface-CSS && npm audit --audit-level=moderate && npm run pack:dry-run",
     "prepublishOnly": "npm run release:verify",
     "release:patch": "npm version patch && npm publish",
     "release:minor": "npm version minor && npm publish",

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); }
@@ -448,7 +448,7 @@
 .deco-input::placeholder, .deco-textarea::placeholder { color: var(--deco-text-muted); opacity: .82; }
 .deco-input:hover, .deco-textarea:hover, .deco-select:hover { border-color: rgb(var(--deco-primary-rgb) / .58); }
 .deco-input:focus, .deco-textarea:focus, .deco-select:focus { border-color: var(--deco-focus); box-shadow: var(--deco-focus-ring); }
-.deco-help-text { color: var(--deco-text-muted); font-size: .875rem; line-height: 1.45; }
+.deco-help-text { color: var(--deco-text); font-size: .875rem; line-height: 1.45; }
 
 /* Checkbox / Radio */
 .deco-check, .deco-radio { display: inline-flex; align-items: center; gap: var(--deco-space-2); color: var(--deco-text); cursor: pointer; }
@@ -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 {
@@ -1402,7 +1402,7 @@
   border-block-end: 2px solid currentColor;
   border-inline-start: 2px solid currentColor;
   color: var(--deco-jewel-on);
-  transform: translate(calc(-50% - 5px), calc(-62% - 5px)) rotate(-45deg);
+  transform: translate(-50%, -50%) rotate(-45deg);
   transform-origin: center;
 }
 
@@ -1877,7 +1877,8 @@
 .deco-button, .deco-icon-button { position: relative; isolation: isolate; min-height: 36px; min-block-size: 36px; min-inline-size: 0; padding: 8px 14px; border: 0; border-radius: 0; clip-path: none; background: var(--deco-surface); color: var(--deco-text); box-shadow: none; font: 500 12px/1.2 var(--deco-font-control); letter-spacing: 0; text-transform: uppercase; gap: 8px; }
 .deco-button::before, .deco-icon-button::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--deco-metal); border: 0; pointer-events: none; clip-path: polygon(evenodd, 7px 0, calc(100% - 7px) 0, calc(100% - 7px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 7px) calc(100% - 3px), calc(100% - 7px) 100%, 7px 100%, 7px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 7px 3px, 7px 0, 8px 1px, 8px 4px, 1px 4px, 1px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 1px), calc(100% - 8px) calc(100% - 1px), calc(100% - 8px) calc(100% - 4px), calc(100% - 1px) calc(100% - 4px), calc(100% - 1px) 4px, calc(100% - 8px) 4px, calc(100% - 8px) 1px, 8px 1px, 7px 0); }
 .deco-button, .deco-icon-button { background-color: transparent; clip-path: var(--deco-step-sm); }
-.deco-button { min-inline-size: 12rem; }
+/** Caps the 12rem Deco action measure when text zoom leaves a narrower flex line. */
+.deco-button { min-inline-size: min(100%, 12rem); max-inline-size: 100%; }
 .deco-button:focus-visible, .deco-icon-button:focus-visible { outline-offset: -6px; }
 .deco-button-primary { background-color: var(--deco-jewel-primary); color: var(--deco-jewel-on); }
 .deco-button-secondary { background-color: var(--deco-jewel-secondary); color: var(--deco-jewel-on); }
@@ -1915,24 +1916,6 @@
 .deco-check, .deco-radio { min-height: 32px; font-size: 12px; gap: 8px; }
 .deco-check input:checked + .deco-check-control, .deco-radio input:checked + .deco-radio-control, .deco-switch input:checked + .deco-switch-track { background: var(--deco-secondary); }
 .deco-check input:checked + .deco-check-control::after { color: var(--deco-on-secondary); }
-/** Keeps prefixed checkbox rasterization centered without generating semantic aliases. */
-:is([class="deco-check"], [class^="deco-check "], [class*=" deco-check "], [class$=" deco-check"]) input:checked + :is([class="deco-check-control"], [class^="deco-check-control "], [class*=" deco-check-control "], [class$=" deco-check-control"])::after { transform: translate(calc(-50% - 5px), calc(-62% + 4px)) rotate(-45deg); }
-
-/**
- * Aligns the stroked checkbox mark with Firefox and WebKit rasterization while
- * preserving Chromium's established pixel center.
- */
-@supports (-moz-appearance: none) {
-  :is([class="deco-check"], [class^="deco-check "], [class*=" deco-check "], [class$=" deco-check"]) input:checked + :is([class="deco-check-control"], [class^="deco-check-control "], [class*=" deco-check-control "], [class$=" deco-check-control"])::after {
-    transform: translate(calc(-50% - 5px), calc(-62% - 5px)) rotate(-45deg);
-  }
-}
-
-@supports (-webkit-hyphens: none) {
-  .deco-check input:checked + .deco-check-control::after {
-    transform: translate(calc(-50% - 5px), calc(-62% + 3px)) rotate(-45deg);
-  }
-}
 .deco-radio input:checked + .deco-radio-control::after { background: var(--deco-on-secondary); }
 .deco-switch { min-height: 32px; }
 .deco-switch-track { width: 40px; height: 22px; inline-size: 40px; block-size: 22px; border-width: 3px; }

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);
@@ -882,8 +882,8 @@
 
 @layer ui-style-kit.bento {
 /* Keeps semantic field states above preset-specific material paint. */
-.bento-input[aria-invalid="true"], .bento-textarea[aria-invalid="true"], .bento-select[aria-invalid="true"] { border-color: var(--bento-danger); box-shadow: 0 0 0 2px rgb(var(--bento-danger-rgb) / .18); }
-.bento-input[readonly], .bento-textarea[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
+[data-ui="bento"][data-mode] :is(.bento-input, .bento-textarea, .bento-select)[aria-invalid="true"] { border-color: var(--bento-danger); box-shadow: 0 0 0 2px rgb(var(--bento-danger-rgb) / .18); }
+[data-ui="bento"][data-mode] :is(.bento-input, .bento-textarea)[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
 }
 
 @layer ui-style-kit.bento {
@@ -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; }
@@ -1199,7 +1199,7 @@
 [data-ui=bento][data-mode] .bento-sheet[data-mode="dark"] .bento-hero-art.is-dark { display: block; }
 [data-ui=bento][data-mode] .bento-sheet[data-mode="dark"] .bento-hero-art.is-dark { height: 300px; right: -10px; top: 40px; width: 300px; }
 
-[data-ui=bento][data-mode] .bento-button {
+[data-ui=bento][data-mode] :is(.bento-button, .bento-icon-button) {
   align-items: center;
   background: var(--bento-mosaic-panel-soft);
   border: 1px solid var(--bento-mosaic-line);
@@ -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; }
@@ -1520,7 +1520,12 @@
   --bento-fallback-focus-rgb: 122 107 233;
   --bento-success-ink: var(--bento-success);
 }
-[data-ui="bento"][data-mode] {
+/**
+ * Keeps Soft Mosaic reference overrides inside the retained reference sheet.
+ * The canonical Bento and native-element tokens continue to use the public
+ * preset material outside that specimen.
+ */
+[data-ui="bento"][data-mode] .bento-sheet {
   --bento-panel-alpha: 1;
   --bento-panel-soft-alpha: 1;
   --bento-border-alpha: 1;
@@ -1675,7 +1680,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 {

package/styles/clay.css

@@ -387,7 +387,7 @@
 .clay-title, .clay-heading, .clay-kicker, .clay-button, .clay-badge, .clay-nav-link { font-family: var(--clay-font-heading); }
 .clay-title { margin: 0; color: var(--clay-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
 .clay-heading { margin: 0; color: var(--clay-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
-.clay-kicker { margin: 0; color: var(--clay-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
+.clay-kicker { margin: 0; color: var(--usk-primary-ink, var(--clay-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
 .clay-subtitle, .clay-copy { margin: 0; color: var(--clay-text-muted); line-height: 1.65; }
 .clay-text-muted { color: var(--clay-text-muted); }
 .clay-divider { width: 100%; height: 1px; border: 0; background: var(--clay-border); }
@@ -521,7 +521,7 @@
    Utilities
 ========================================================= */
 
-.clay-text-primary { color: var(--clay-primary); } .clay-text-secondary { color: var(--clay-secondary); } .clay-text-accent { color: var(--clay-accent); } .clay-text-success { color: var(--clay-success); } .clay-text-warning { color: var(--clay-warning); } .clay-text-danger { color: var(--clay-danger); }
+.clay-text-primary { color: var(--usk-primary-ink, var(--clay-primary)); } .clay-text-secondary { color: var(--clay-secondary); } .clay-text-accent { color: var(--usk-accent-ink, var(--clay-accent)); } .clay-text-success { color: var(--clay-success); } .clay-text-warning { color: var(--clay-warning); } .clay-text-danger { color: var(--clay-danger); }
 .clay-bg-primary { background: var(--clay-primary); color: var(--clay-on-primary); } .clay-bg-secondary { background: var(--clay-secondary); color: var(--clay-on-secondary); }
 .clay-border { border: 1px solid var(--clay-border); } .clay-rounded { border-radius: var(--clay-radius-md); } .clay-rounded-lg { border-radius: var(--clay-radius-lg); } .clay-rounded-xl { border-radius: var(--clay-radius-xl); } .clay-pill { border-radius: var(--clay-radius-pill); }
 .clay-sr-only, .clay-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; }
@@ -629,7 +629,7 @@
 .clay-button.clay-button-outline-heavy,
 .clay-button-outline-heavy {
   background: transparent;
-  color: var(--clay-primary);
+  color: var(--usk-primary-ink, var(--clay-primary));
   border-style: solid;
   border-width: 2px;
   border-color: var(--clay-primary);
@@ -699,7 +699,7 @@
 
 .clay-eyebrow {
   margin: 0;
-  color: var(--clay-primary);
+  color: var(--usk-primary-ink, var(--clay-primary));
   font-family: var(--clay-font-heading);
   font-size: .76rem;
   font-weight: 900;
@@ -1118,7 +1118,7 @@
 }
 .clay-button.clay-button-outline-heavy, .clay-button-outline-heavy {
   background-color: var(--clay-material-raised);
-  color: var(--clay-primary);
+  color: var(--usk-primary-ink, var(--clay-primary));
   border: 2px solid var(--clay-primary);
   clip-path: var(--clay-chip-clip);
 }