ui-style-kit-css 2.4.0 → 2.5.0

package/styles/technical-blueprint.css

@@ -489,7 +489,7 @@
 .blueprint-title, .blueprint-heading, .blueprint-kicker, .blueprint-button, .blueprint-badge, .blueprint-nav-link { font-family: var(--blueprint-font-heading); }
 .blueprint-title { margin: 0; color: var(--blueprint-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
 .blueprint-heading { margin: 0; color: var(--blueprint-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
-.blueprint-kicker { margin: 0; color: var(--blueprint-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
+.blueprint-kicker { margin: 0; color: var(--usk-primary-ink, var(--blueprint-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
 .blueprint-subtitle, .blueprint-copy { margin: 0; color: var(--blueprint-text-muted); line-height: 1.65; }
 .blueprint-text-muted { color: var(--blueprint-text-muted); }
 .blueprint-divider { width: 100%; height: 1px; border: 0; background: var(--blueprint-border); }
@@ -623,7 +623,7 @@
    Utilities
 ========================================================= */
 
-.blueprint-text-primary { color: var(--blueprint-primary); } .blueprint-text-secondary { color: var(--blueprint-secondary); } .blueprint-text-accent { color: var(--blueprint-accent); } .blueprint-text-success { color: var(--blueprint-success); } .blueprint-text-warning { color: var(--blueprint-warning); } .blueprint-text-danger { color: var(--blueprint-danger); }
+.blueprint-text-primary { color: var(--usk-primary-ink, var(--blueprint-primary)); } .blueprint-text-secondary { color: var(--blueprint-secondary); } .blueprint-text-accent { color: var(--usk-accent-ink, var(--blueprint-accent)); } .blueprint-text-success { color: var(--blueprint-success); } .blueprint-text-warning { color: var(--blueprint-warning); } .blueprint-text-danger { color: var(--blueprint-danger); }
 .blueprint-bg-primary { background: var(--blueprint-primary); color: var(--blueprint-on-primary); } .blueprint-bg-secondary { background: var(--blueprint-secondary); color: var(--blueprint-on-secondary); }
 .blueprint-border { border: 1px solid var(--blueprint-border); } .blueprint-rounded { border-radius: var(--blueprint-radius-md); } .blueprint-rounded-lg { border-radius: var(--blueprint-radius-lg); } .blueprint-rounded-xl { border-radius: var(--blueprint-radius-xl); } .blueprint-pill { border-radius: var(--blueprint-radius-pill); }
 .blueprint-sr-only, .blueprint-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; }
@@ -731,7 +731,7 @@
 .blueprint-button.blueprint-button-outline-heavy,
 .blueprint-button-outline-heavy {
   background: transparent;
-  color: var(--blueprint-primary);
+  color: var(--usk-primary-ink, var(--blueprint-primary));
   border-style: solid;
   border-width: 2px;
   border-color: var(--blueprint-primary);
@@ -801,7 +801,7 @@
 
 .blueprint-eyebrow {
   margin: 0;
-  color: var(--blueprint-primary);
+  color: var(--usk-primary-ink, var(--blueprint-primary));
   font-family: var(--blueprint-font-heading);
   font-size: .76rem;
   font-weight: 900;
@@ -881,7 +881,7 @@
 .blueprint-input, .blueprint-textarea, .blueprint-select, .blueprint-badge, .blueprint-alert, .blueprint-metric, .blueprint-well, .blueprint-inset { border-radius: 0; }
 .blueprint-table { font-family: var(--blueprint-font-control); font-size: .82rem; }
 .blueprint-card-media, .blueprint-media-scrim, .blueprint-feature-strip, .blueprint-callout-bar { border-radius: 0; }
-.blueprint-icon-medallion { border-radius: 0; background: transparent; color: var(--blueprint-primary); box-shadow: inset 0 0 0 1px rgb(var(--blueprint-primary-rgb) / .35); }
+.blueprint-icon-medallion { border-radius: 0; background: transparent; color: var(--usk-primary-ink, var(--blueprint-primary)); box-shadow: inset 0 0 0 1px rgb(var(--blueprint-primary-rgb) / .35); }
 .blueprint-badge-seal { border-radius: 0; background: transparent; font-family: var(--blueprint-font-control); }
 .blueprint-card-accent-edge { border-inline-start-width: 1px; box-shadow: inset .35rem 0 0 rgb(var(--blueprint-primary-rgb) / .12); }
 
@@ -1037,7 +1037,7 @@
 .blueprint-button-primary { background: var(--blueprint-primary); color: var(--blueprint-on-primary); border-color: var(--blueprint-primary); }
 .blueprint-button-secondary { background: transparent; color: var(--blueprint-secondary); border-color: var(--blueprint-secondary); }
 .blueprint-button-danger { background: transparent; color: var(--blueprint-danger); border-color: var(--blueprint-danger); }
-.blueprint-button-ghost { background: transparent; color: var(--blueprint-primary); border-color: transparent; }
+.blueprint-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--blueprint-primary)); border-color: transparent; }
 }
 
 @layer ui-style-kit.technical_blueprint {
@@ -1049,7 +1049,7 @@
 @layer ui-style-kit.technical_blueprint {
 /** Reusable sheet frame, reference datum, and calibrated line samples. */
 .blueprint-sheet { position: relative; border: 3px double var(--blueprint-line-strong); padding: 16px; }
-.blueprint-datum { position: relative; display: inline-grid; place-items: center; flex: 0 0 52px; inline-size: 52px; block-size: 52px; color: var(--blueprint-primary); border: 1.5px solid currentColor; border-radius: 50%; font: 700 16px/1 var(--blueprint-font-mono); }
+.blueprint-datum { position: relative; display: inline-grid; place-items: center; flex: 0 0 52px; inline-size: 52px; block-size: 52px; color: var(--usk-primary-ink, var(--blueprint-primary)); border: 1.5px solid currentColor; border-radius: 50%; font: 700 16px/1 var(--blueprint-font-mono); }
 .blueprint-datum::before { content: ""; position: absolute; inset: 50% -5px auto; border-top: 1px solid currentColor; }
 .blueprint-datum::after { content: ""; position: absolute; inset: -5px auto -5px 50%; border-left: 1px solid currentColor; }
 .blueprint-line-swatch { display: inline-block; inline-size: 58px; border-top: var(--blueprint-line-weight, 1px) solid var(--blueprint-primary); }
@@ -1130,7 +1130,7 @@
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: none;
 }
-[data-ui="technical-blueprint"] :where(a) { color: var(--blueprint-primary); }
+[data-ui="technical-blueprint"] :where(a) { color: var(--usk-primary-ink, var(--blueprint-primary)); }
 [data-ui="technical-blueprint"] :where(h1, h2, h3, h4, h5, h6) { letter-spacing: 0; }
 .blueprint-title { font-size: 32px; line-height: 1.15; letter-spacing: 0; }
 .blueprint-overline, .blueprint-label { display: block; margin: 0 0 6px; color: var(--blueprint-text-soft); font: 700 12px/1.3 var(--blueprint-font-mono); letter-spacing: 0; text-transform: uppercase; }
@@ -1167,7 +1167,7 @@
 .blueprint-input::placeholder, .blueprint-textarea::placeholder { color: var(--blueprint-text-soft); opacity: 1; }
 .blueprint-input-wrap { display: flex; align-items: center; position: relative; }
 .blueprint-input-wrap .blueprint-input { padding-inline-end: 36px; }
-.blueprint-input-icon { position: absolute; inset-inline-end: 11px; color: var(--blueprint-primary); pointer-events: none; }
+.blueprint-input-icon { position: absolute; inset-inline-end: 11px; color: var(--usk-primary-ink, var(--blueprint-primary)); pointer-events: none; }
 .blueprint-helper, .blueprint-error-text { display: block; margin-block-start: 4px; color: var(--blueprint-text-soft); font: 12px/1.4 var(--blueprint-font-mono); }
 .blueprint-error-text { border-inline-start: 2px solid var(--blueprint-danger); padding-inline-start: 6px; }
 .blueprint-input.is-error, .blueprint-input[aria-invalid="true"], .blueprint-select[aria-invalid="true"], .blueprint-textarea[aria-invalid="true"] { border-color: var(--blueprint-danger); box-shadow: 0 0 0 1px var(--blueprint-danger); }
@@ -1180,13 +1180,13 @@
 .blueprint-option:disabled { opacity: .5; cursor: not-allowed; }
 .blueprint-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-block-size: 48px; padding: 8px; background: var(--blueprint-surface-input); border: 1px solid var(--blueprint-line-color); }
 .blueprint-chip, .blueprint-badge { display: inline-flex; align-items: center; gap: 6px; min-block-size: 24px; padding: 4px 10px; border: 1px solid var(--blueprint-line-strong); border-radius: 0; background: transparent; color: var(--blueprint-text); box-shadow: none; font: 700 12px/1.2 var(--blueprint-font-body); letter-spacing: 0; text-transform: uppercase; }
-.blueprint-chip, .blueprint-badge-primary { color: var(--blueprint-primary); border-color: var(--blueprint-primary); }
+.blueprint-chip, .blueprint-badge-primary { color: var(--usk-primary-ink, var(--blueprint-primary)); border-color: var(--blueprint-primary); }
 .blueprint-chip-danger, .blueprint-badge-danger { background: rgb(var(--blueprint-danger-rgb) / .04); color: var(--blueprint-danger); border-color: var(--blueprint-danger); }
 .blueprint-chip-warning, .blueprint-badge-warning { background: rgb(var(--blueprint-warning-rgb) / .08); color: var(--blueprint-warning); border-color: var(--blueprint-warning); }
 .blueprint-badge-success { background: rgb(var(--blueprint-success-rgb) / .08); color: var(--blueprint-success); border-color: var(--blueprint-success); }
 .blueprint-chip { cursor: pointer; }
 .blueprint-file { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; position: relative; min-block-size: 112px; padding: 16px; border: 1px dashed var(--blueprint-line-strong); background: var(--blueprint-grid-image), var(--blueprint-surface-input); background-size: 16px 16px; color: var(--blueprint-text-soft); text-align: center; font: 14px/1.4 var(--blueprint-font-body); cursor: pointer; }
-.blueprint-file strong { color: var(--blueprint-primary); }
+.blueprint-file strong { color: var(--usk-primary-ink, var(--blueprint-primary)); }
 .blueprint-file input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
 .blueprint-file:focus-within { outline: 2px solid var(--blueprint-focus); outline-offset: 2px; }
 .blueprint-choice, .blueprint-switch { display: inline-flex; align-items: center; gap: 8px; position: relative; min-block-size: 32px; color: var(--blueprint-text-soft); font: 14px/1.3 var(--blueprint-font-body); cursor: pointer; }
@@ -1216,7 +1216,7 @@
 .blueprint-range::-webkit-slider-thumb { appearance: none; inline-size: 18px; block-size: 18px; margin-top: -7px; border: 2px solid var(--blueprint-primary); border-radius: 50%; background: radial-gradient(var(--blueprint-primary) 0 2px, var(--blueprint-bg) 2px); box-shadow: none; }
 .blueprint-range::-moz-range-thumb { inline-size: 18px; block-size: 18px; border: 2px solid var(--blueprint-primary); border-radius: 50%; background: radial-gradient(var(--blueprint-primary) 0 2px, var(--blueprint-bg) 2px); box-shadow: none; }
 .blueprint-progress { position: relative; block-size: 12px; height: 12px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--blueprint-line-color); border-radius: 0; overflow: visible; }
-.blueprint-progress-bar { display: block; position: absolute; inset-block-end: 0; block-size: 3px; inline-size: var(--blueprint-progress-value, 64%); background: var(--blueprint-primary); color: var(--blueprint-primary); border-radius: 0; box-shadow: none; }
+.blueprint-progress-bar { display: block; position: absolute; inset-block-end: 0; block-size: 3px; inline-size: var(--blueprint-progress-value, 64%); background: var(--blueprint-primary); color: var(--usk-primary-ink, var(--blueprint-primary)); border-radius: 0; box-shadow: none; }
 .blueprint-progress-bar::after { content: ""; position: absolute; inset: auto -4px 3px auto; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor; }
 .blueprint-progress-danger .blueprint-progress-bar { background: var(--blueprint-danger); color: var(--blueprint-danger); }
 .blueprint-meter { position: relative; block-size: 3px; margin-block: 16px; background: linear-gradient(90deg, var(--blueprint-success) 0 46%, var(--blueprint-warning) 46% 72%, var(--blueprint-danger) 72% 100%); }
@@ -1227,12 +1227,12 @@
 .blueprint-step { position: relative; flex: 1; margin-block: 0; color: var(--blueprint-text-soft); text-align: center; font: 12px/1.4 var(--blueprint-font-mono); }
 .blueprint-step b { display: flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px; margin: 0 auto 8px; background: var(--blueprint-bg); border: 1px solid var(--blueprint-line-strong); }
 .blueprint-step.is-complete b { background: var(--blueprint-fill); color: var(--blueprint-fill-ink); border-color: var(--blueprint-primary); }
-.blueprint-step.is-active b { color: var(--blueprint-primary); border: 2px solid var(--blueprint-primary); }
+.blueprint-step.is-active b { color: var(--usk-primary-ink, var(--blueprint-primary)); border: 2px solid var(--blueprint-primary); }
 .blueprint-alert { display: flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 8px; border: 1px solid var(--blueprint-primary); border-radius: 0; background: transparent; color: var(--blueprint-text-soft); box-shadow: none; font: 14px/1.4 var(--blueprint-font-body); }
 .blueprint-alert-success { border-color: var(--blueprint-success); }
 .blueprint-alert-warning { border-color: var(--blueprint-warning); }
 .blueprint-alert-danger { border-color: var(--blueprint-danger); }
-.blueprint-alert > :first-child { color: var(--blueprint-primary); }
+.blueprint-alert > :first-child { color: var(--usk-primary-ink, var(--blueprint-primary)); }
 .blueprint-alert-success > :first-child, .blueprint-toast > :first-child { color: var(--blueprint-success); }
 .blueprint-alert-warning > :first-child { color: var(--blueprint-warning); }
 .blueprint-alert-danger > :first-child { color: var(--blueprint-danger); }
@@ -1243,7 +1243,7 @@
 .blueprint-breadcrumb, .blueprint-tabs, .blueprint-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
 .blueprint-breadcrumb { color: var(--blueprint-text-soft); font: 12px/1.4 var(--blueprint-font-mono); }
 .blueprint-breadcrumb a { color: var(--blueprint-text-soft); }
-.blueprint-breadcrumb [aria-current] { color: var(--blueprint-primary); font-weight: 700; }
+.blueprint-breadcrumb [aria-current] { color: var(--usk-primary-ink, var(--blueprint-primary)); font-weight: 700; }
 .blueprint-tab { font: 700 12px/1.4 var(--blueprint-font-mono); }
 .blueprint-pagination-page { min-inline-size: 36px; padding: 8px; font-size: 12px; }
 .blueprint-nav { padding: 0; background: transparent; border: 0; box-shadow: none; gap: 6px; }
@@ -1259,7 +1259,7 @@
 .blueprint-table th { font-family: var(--blueprint-font-mono); }
 .blueprint-list { margin: 0; padding-inline-start: 20px; color: var(--blueprint-text-soft); font: 14px/1.5 var(--blueprint-font-body); }
 .blueprint-list li + li { margin-top: 8px; }
-.blueprint-list li::marker { color: var(--blueprint-primary); }
+.blueprint-list li::marker { color: var(--usk-primary-ink, var(--blueprint-primary)); }
 .blueprint-tooltip, [data-ui="technical-blueprint"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { position: relative; padding: 12px; max-inline-size: 100%; background: var(--blueprint-surface-strong); color: var(--blueprint-text); border: 1px solid var(--blueprint-primary); border-radius: 0; box-shadow: none; font: 700 12px/1.4 var(--blueprint-font-mono); letter-spacing: 0; }
 .blueprint-tooltip::after { content: ""; position: absolute; inset: 100% auto auto 50%; block-size: 16px; border-left: 1px solid var(--blueprint-primary); transform: rotate(45deg); transform-origin: top; }
 .blueprint-modal { max-inline-size: min(440px, calc(100vw - 32px)); }
@@ -1270,7 +1270,7 @@
 .blueprint-accordion { margin: 0; padding: 0; background: var(--blueprint-surface-input); border: 1px solid var(--blueprint-line-color); color: var(--blueprint-text); }
 .blueprint-accordion summary { min-block-size: 36px; padding: 10px 12px; font: 700 12px/1.4 var(--blueprint-font-mono); cursor: pointer; list-style: none; }
 .blueprint-accordion summary::-webkit-details-marker { display: none; }
-.blueprint-accordion summary::after { content: "+"; float: right; color: var(--blueprint-primary); }
+.blueprint-accordion summary::after { content: "+"; float: right; color: var(--usk-primary-ink, var(--blueprint-primary)); }
 .blueprint-accordion[open] summary::after { content: "-"; }
 .blueprint-accordion p { margin: 0; padding: 4px 12px 12px; color: var(--blueprint-text-soft); font: 14px/1.4 var(--blueprint-font-body); }
 .blueprint-code { display: block; margin: 0; padding: 12px; border-inline-start: 2px solid var(--blueprint-primary); background: var(--blueprint-surface-input); color: var(--blueprint-text-soft); white-space: pre-wrap; overflow-wrap: break-word; font: 12px/1.5 var(--blueprint-font-mono); }
@@ -1281,7 +1281,7 @@
 .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]),
 .blueprint-button[aria-busy="true"]::after, .blueprint-icon-button[aria-busy="true"]::after,
 [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after { box-sizing: border-box; border: 2px solid var(--blueprint-line-color); border-top-color: currentColor; border-radius: 50%; background: none; box-shadow: none; clip-path: none; padding: 0; flex-shrink: 0; animation: blueprint-spin .85s linear infinite; }
-.blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) { color: var(--blueprint-primary); }
+.blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) { color: var(--usk-primary-ink, var(--blueprint-primary)); }
 .blueprint-button[aria-busy="true"]::after, .blueprint-icon-button[aria-busy="true"]::after,
 [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after { content: ""; display: inline-block; inline-size: 16px; block-size: 16px; flex: 0 0 16px; }
 .blueprint-spinner::before, .blueprint-spinner::after { content: none; }

package/styles/theme-colors.css

@@ -4,8 +4,21 @@
 ========================================================= */
 
 @layer ui-style-kit.theme_colors {
+/**
+ * Optional text inks let bright palette fills retain their color without making
+ * text on neutral surfaces unreadable. Initial values preserve preset colors and
+ * prevent an outer palette's text override from leaking into a nested UI root.
+ */
+:where([data-ui]) {
+  --usk-primary-ink: initial;
+  --usk-accent-ink: initial;
+}
+
 /* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
 :where([data-ui][data-mode="light"]) {
+  /* Keep vivid fills intact while using the darker link role for text treatments. */
+  --usk-primary-ink: rgb(var(--usk-link-rgb));
+  --usk-accent-ink: rgb(var(--usk-link-rgb));
   --usk-border-text-mix: 45%;
   --usk-border-min-alpha: 1;
 }
@@ -1575,4 +1588,401 @@
   --usk-danger-text-rgb: 0 0 0;
   --usk-focus-rgb: 255 255 255;
 }
+
+/** Signal Yellow pairs vivid yellow actions with ink-navy supporting roles. */
+:where([data-ui][data-theme="signal-yellow"][data-mode="light"]) {
+  --usk-primary-ink: rgb(var(--usk-link-rgb));
+  --usk-accent-ink: rgb(var(--usk-link-rgb));
+  --usk-bg-rgb: 255 251 232;
+  --usk-surface-rgb: 255 255 255;
+  --usk-surface-strong-rgb: 255 254 245;
+  --usk-surface-soft-rgb: 247 237 187;
+  --usk-text-rgb: 33 29 12;
+  --usk-text-muted-rgb: 100 91 55;
+  --usk-border-rgb: 217 199 111;
+  --usk-primary-rgb: 255 204 0;
+  --usk-primary-hover-rgb: 222 175 0;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 37 50 78;
+  --usk-secondary-hover-rgb: 25 37 61;
+  --usk-secondary-text-rgb: 255 255 255;
+  --usk-accent-rgb: 255 228 92;
+  --usk-success-rgb: 34 122 75;
+  --usk-warning-rgb: 144 92 0;
+  --usk-danger-rgb: 177 54 54;
+  --usk-link-rgb: 112 79 0;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 255 255 255;
+  --usk-warning-text-rgb: 255 255 255;
+  --usk-danger-text-rgb: 255 255 255;
+  --usk-focus-rgb: 255 204 0;
+}
+
+:where([data-ui][data-theme="signal-yellow"][data-mode="dark"]) {
+  --usk-bg-rgb: 18 15 3;
+  --usk-surface-rgb: 32 27 7;
+  --usk-surface-strong-rgb: 48 40 10;
+  --usk-surface-soft-rgb: 25 21 5;
+  --usk-text-rgb: 255 249 222;
+  --usk-text-muted-rgb: 207 195 145;
+  --usk-border-rgb: 104 88 31;
+  --usk-primary-rgb: 255 216 59;
+  --usk-primary-hover-rgb: 255 234 130;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 142 198 255;
+  --usk-secondary-hover-rgb: 182 220 255;
+  --usk-secondary-text-rgb: 0 0 0;
+  --usk-accent-rgb: 255 232 102;
+  --usk-success-rgb: 103 217 151;
+  --usk-warning-rgb: 255 194 62;
+  --usk-danger-rgb: 255 119 119;
+  --usk-link-rgb: 255 232 102;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 0 0 0;
+  --usk-warning-text-rgb: 0 0 0;
+  --usk-danger-text-rgb: 0 0 0;
+  --usk-focus-rgb: 255 232 102;
+}
+
+:where([data-ui][data-theme="signal-yellow"][data-mode="contrast"]) {
+  --usk-bg-rgb: 0 0 0;
+  --usk-surface-rgb: 13 11 0;
+  --usk-surface-strong-rgb: 26 22 0;
+  --usk-surface-soft-rgb: 0 0 0;
+  --usk-text-rgb: 255 255 255;
+  --usk-text-muted-rgb: 255 250 222;
+  --usk-border-rgb: 255 255 255;
+  --usk-primary-rgb: 255 214 0;
+  --usk-primary-hover-rgb: 255 255 255;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 0 217 255;
+  --usk-secondary-hover-rgb: 255 255 255;
+  --usk-secondary-text-rgb: 0 0 0;
+  --usk-accent-rgb: 255 234 0;
+  --usk-success-rgb: 0 255 144;
+  --usk-warning-rgb: 255 191 0;
+  --usk-danger-rgb: 255 77 77;
+  --usk-link-rgb: 255 234 0;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 0 0 0;
+  --usk-warning-text-rgb: 0 0 0;
+  --usk-danger-text-rgb: 0 0 0;
+  --usk-focus-rgb: 255 255 255;
+}
+
+/** Botanical Green pairs leaf-green actions with restrained berry support. */
+:where([data-ui][data-theme="botanical-green"][data-mode="light"]) {
+  --usk-bg-rgb: 239 249 242;
+  --usk-surface-rgb: 255 255 255;
+  --usk-surface-strong-rgb: 248 253 249;
+  --usk-surface-soft-rgb: 214 237 220;
+  --usk-text-rgb: 14 38 23;
+  --usk-text-muted-rgb: 75 98 81;
+  --usk-border-rgb: 176 207 185;
+  --usk-primary-rgb: 13 126 66;
+  --usk-primary-hover-rgb: 8 97 50;
+  --usk-primary-text-rgb: 255 255 255;
+  --usk-secondary-rgb: 121 48 88;
+  --usk-secondary-hover-rgb: 91 35 65;
+  --usk-secondary-text-rgb: 255 255 255;
+  --usk-accent-rgb: 64 201 117;
+  --usk-success-rgb: 24 116 65;
+  --usk-warning-rgb: 150 96 0;
+  --usk-danger-rgb: 178 60 70;
+  --usk-link-rgb: 8 97 50;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 255 255 255;
+  --usk-warning-text-rgb: 255 255 255;
+  --usk-danger-text-rgb: 255 255 255;
+  --usk-focus-rgb: 64 201 117;
+}
+
+:where([data-ui][data-theme="botanical-green"][data-mode="dark"]) {
+  --usk-bg-rgb: 4 17 9;
+  --usk-surface-rgb: 10 32 18;
+  --usk-surface-strong-rgb: 17 48 28;
+  --usk-surface-soft-rgb: 7 24 14;
+  --usk-text-rgb: 235 252 241;
+  --usk-text-muted-rgb: 173 205 182;
+  --usk-border-rgb: 49 91 63;
+  --usk-primary-rgb: 82 222 139;
+  --usk-primary-hover-rgb: 128 240 169;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 238 148 199;
+  --usk-secondary-hover-rgb: 255 187 222;
+  --usk-secondary-text-rgb: 0 0 0;
+  --usk-accent-rgb: 107 240 164;
+  --usk-success-rgb: 100 218 149;
+  --usk-warning-rgb: 255 205 91;
+  --usk-danger-rgb: 255 126 137;
+  --usk-link-rgb: 128 240 169;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 0 0 0;
+  --usk-warning-text-rgb: 0 0 0;
+  --usk-danger-text-rgb: 0 0 0;
+  --usk-focus-rgb: 107 240 164;
+}
+
+:where([data-ui][data-theme="botanical-green"][data-mode="contrast"]) {
+  --usk-bg-rgb: 0 0 0;
+  --usk-surface-rgb: 0 14 5;
+  --usk-surface-strong-rgb: 0 29 11;
+  --usk-surface-soft-rgb: 0 0 0;
+  --usk-text-rgb: 255 255 255;
+  --usk-text-muted-rgb: 238 255 244;
+  --usk-border-rgb: 255 255 255;
+  --usk-primary-rgb: 0 255 112;
+  --usk-primary-hover-rgb: 255 255 255;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 255 92 178;
+  --usk-secondary-hover-rgb: 255 255 255;
+  --usk-secondary-text-rgb: 0 0 0;
+  --usk-accent-rgb: 103 255 166;
+  --usk-success-rgb: 0 255 117;
+  --usk-warning-rgb: 255 212 0;
+  --usk-danger-rgb: 255 77 91;
+  --usk-link-rgb: 103 255 166;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 0 0 0;
+  --usk-warning-text-rgb: 0 0 0;
+  --usk-danger-text-rgb: 0 0 0;
+  --usk-focus-rgb: 255 255 255;
+}
+
+/** Cobalt Electric pairs saturated blue actions with coral supporting roles. */
+:where([data-ui][data-theme="cobalt-electric"][data-mode="light"]) {
+  --usk-bg-rgb: 240 244 255;
+  --usk-surface-rgb: 255 255 255;
+  --usk-surface-strong-rgb: 248 250 255;
+  --usk-surface-soft-rgb: 220 229 250;
+  --usk-text-rgb: 14 27 57;
+  --usk-text-muted-rgb: 73 89 123;
+  --usk-border-rgb: 177 195 232;
+  --usk-primary-rgb: 0 82 204;
+  --usk-primary-hover-rgb: 0 61 158;
+  --usk-primary-text-rgb: 255 255 255;
+  --usk-secondary-rgb: 181 57 72;
+  --usk-secondary-hover-rgb: 143 41 54;
+  --usk-secondary-text-rgb: 255 255 255;
+  --usk-accent-rgb: 82 121 255;
+  --usk-success-rgb: 35 121 78;
+  --usk-warning-rgb: 151 96 0;
+  --usk-danger-rgb: 180 55 74;
+  --usk-link-rgb: 0 64 163;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 255 255 255;
+  --usk-warning-text-rgb: 255 255 255;
+  --usk-danger-text-rgb: 255 255 255;
+  --usk-focus-rgb: 82 121 255;
+}
+
+:where([data-ui][data-theme="cobalt-electric"][data-mode="dark"]) {
+  --usk-bg-rgb: 4 9 25;
+  --usk-surface-rgb: 10 20 48;
+  --usk-surface-strong-rgb: 16 32 72;
+  --usk-surface-soft-rgb: 7 14 36;
+  --usk-text-rgb: 239 244 255;
+  --usk-text-muted-rgb: 174 188 218;
+  --usk-border-rgb: 49 70 122;
+  --usk-primary-rgb: 111 149 255;
+  --usk-primary-hover-rgb: 164 188 255;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 255 133 147;
+  --usk-secondary-hover-rgb: 255 173 183;
+  --usk-secondary-text-rgb: 0 0 0;
+  --usk-accent-rgb: 143 170 255;
+  --usk-success-rgb: 105 219 159;
+  --usk-warning-rgb: 255 205 91;
+  --usk-danger-rgb: 255 121 139;
+  --usk-link-rgb: 164 188 255;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 0 0 0;
+  --usk-warning-text-rgb: 0 0 0;
+  --usk-danger-text-rgb: 0 0 0;
+  --usk-focus-rgb: 143 170 255;
+}
+
+:where([data-ui][data-theme="cobalt-electric"][data-mode="contrast"]) {
+  --usk-bg-rgb: 0 0 0;
+  --usk-surface-rgb: 0 7 22;
+  --usk-surface-strong-rgb: 0 15 44;
+  --usk-surface-soft-rgb: 0 0 0;
+  --usk-text-rgb: 255 255 255;
+  --usk-text-muted-rgb: 239 245 255;
+  --usk-border-rgb: 255 255 255;
+  --usk-primary-rgb: 76 133 255;
+  --usk-primary-hover-rgb: 255 255 255;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 255 105 125;
+  --usk-secondary-hover-rgb: 255 255 255;
+  --usk-secondary-text-rgb: 0 0 0;
+  --usk-accent-rgb: 132 168 255;
+  --usk-success-rgb: 0 255 144;
+  --usk-warning-rgb: 255 212 0;
+  --usk-danger-rgb: 255 92 112;
+  --usk-link-rgb: 132 168 255;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 0 0 0;
+  --usk-warning-text-rgb: 0 0 0;
+  --usk-danger-text-rgb: 0 0 0;
+  --usk-focus-rgb: 255 255 255;
+}
+
+/** Stone Graphite uses neutral surfaces while preserving semantic status colors. */
+:where([data-ui][data-theme="stone-graphite"][data-mode="light"]) {
+  --usk-bg-rgb: 244 244 242;
+  --usk-surface-rgb: 255 255 255;
+  --usk-surface-strong-rgb: 250 250 248;
+  --usk-surface-soft-rgb: 227 229 225;
+  --usk-text-rgb: 27 29 28;
+  --usk-text-muted-rgb: 86 91 88;
+  --usk-border-rgb: 184 189 185;
+  --usk-primary-rgb: 56 60 58;
+  --usk-primary-hover-rgb: 37 40 38;
+  --usk-primary-text-rgb: 255 255 255;
+  --usk-secondary-rgb: 91 97 93;
+  --usk-secondary-hover-rgb: 69 74 71;
+  --usk-secondary-text-rgb: 255 255 255;
+  --usk-accent-rgb: 184 190 186;
+  --usk-success-rgb: 48 115 79;
+  --usk-warning-rgb: 145 94 0;
+  --usk-danger-rgb: 168 60 60;
+  --usk-link-rgb: 52 60 56;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 255 255 255;
+  --usk-warning-text-rgb: 255 255 255;
+  --usk-danger-text-rgb: 255 255 255;
+  --usk-focus-rgb: 112 121 116;
+}
+
+:where([data-ui][data-theme="stone-graphite"][data-mode="dark"]) {
+  --usk-bg-rgb: 12 13 13;
+  --usk-surface-rgb: 25 27 26;
+  --usk-surface-strong-rgb: 40 43 41;
+  --usk-surface-soft-rgb: 18 20 19;
+  --usk-text-rgb: 245 246 245;
+  --usk-text-muted-rgb: 189 193 190;
+  --usk-border-rgb: 78 84 80;
+  --usk-primary-rgb: 208 212 209;
+  --usk-primary-hover-rgb: 235 237 235;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 164 170 166;
+  --usk-secondary-hover-rgb: 194 199 196;
+  --usk-secondary-text-rgb: 0 0 0;
+  --usk-accent-rgb: 230 232 231;
+  --usk-success-rgb: 130 210 165;
+  --usk-warning-rgb: 242 197 112;
+  --usk-danger-rgb: 240 137 137;
+  --usk-link-rgb: 220 224 221;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 0 0 0;
+  --usk-warning-text-rgb: 0 0 0;
+  --usk-danger-text-rgb: 0 0 0;
+  --usk-focus-rgb: 255 255 255;
+}
+
+:where([data-ui][data-theme="stone-graphite"][data-mode="contrast"]) {
+  --usk-bg-rgb: 0 0 0;
+  --usk-surface-rgb: 8 8 8;
+  --usk-surface-strong-rgb: 20 20 20;
+  --usk-surface-soft-rgb: 0 0 0;
+  --usk-text-rgb: 255 255 255;
+  --usk-text-muted-rgb: 245 245 245;
+  --usk-border-rgb: 255 255 255;
+  --usk-primary-rgb: 255 255 255;
+  --usk-primary-hover-rgb: 221 221 221;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 205 205 205;
+  --usk-secondary-hover-rgb: 255 255 255;
+  --usk-secondary-text-rgb: 0 0 0;
+  --usk-accent-rgb: 245 245 245;
+  --usk-success-rgb: 0 255 144;
+  --usk-warning-rgb: 255 212 0;
+  --usk-danger-rgb: 255 92 92;
+  --usk-link-rgb: 255 255 255;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 0 0 0;
+  --usk-warning-text-rgb: 0 0 0;
+  --usk-danger-text-rgb: 0 0 0;
+  --usk-focus-rgb: 255 255 255;
+}
+
+/** Walnut Clay pairs deep brown actions with clay accents and muted foliage. */
+:where([data-ui][data-theme="walnut-clay"][data-mode="light"]) {
+  --usk-bg-rgb: 248 241 233;
+  --usk-surface-rgb: 255 255 255;
+  --usk-surface-strong-rgb: 253 249 245;
+  --usk-surface-soft-rgb: 232 216 202;
+  --usk-text-rgb: 49 36 29;
+  --usk-text-muted-rgb: 102 84 74;
+  --usk-border-rgb: 199 172 154;
+  --usk-primary-rgb: 112 67 48;
+  --usk-primary-hover-rgb: 83 47 34;
+  --usk-primary-text-rgb: 255 255 255;
+  --usk-secondary-rgb: 88 98 78;
+  --usk-secondary-hover-rgb: 66 75 57;
+  --usk-secondary-text-rgb: 255 255 255;
+  --usk-accent-rgb: 190 111 82;
+  --usk-success-rgb: 53 117 76;
+  --usk-warning-rgb: 147 91 0;
+  --usk-danger-rgb: 173 61 55;
+  --usk-link-rgb: 105 60 43;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 255 255 255;
+  --usk-warning-text-rgb: 255 255 255;
+  --usk-danger-text-rgb: 255 255 255;
+  --usk-focus-rgb: 190 111 82;
+}
+
+:where([data-ui][data-theme="walnut-clay"][data-mode="dark"]) {
+  --usk-bg-rgb: 18 12 9;
+  --usk-surface-rgb: 35 24 19;
+  --usk-surface-strong-rgb: 51 34 26;
+  --usk-surface-soft-rgb: 27 18 14;
+  --usk-text-rgb: 250 241 233;
+  --usk-text-muted-rgb: 205 184 169;
+  --usk-border-rgb: 107 78 61;
+  --usk-primary-rgb: 218 158 124;
+  --usk-primary-hover-rgb: 240 188 156;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 178 192 157;
+  --usk-secondary-hover-rgb: 207 217 190;
+  --usk-secondary-text-rgb: 0 0 0;
+  --usk-accent-rgb: 235 169 136;
+  --usk-success-rgb: 133 214 164;
+  --usk-warning-rgb: 255 203 100;
+  --usk-danger-rgb: 255 135 128;
+  --usk-link-rgb: 240 188 156;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 0 0 0;
+  --usk-warning-text-rgb: 0 0 0;
+  --usk-danger-text-rgb: 0 0 0;
+  --usk-focus-rgb: 235 169 136;
+}
+
+:where([data-ui][data-theme="walnut-clay"][data-mode="contrast"]) {
+  --usk-bg-rgb: 0 0 0;
+  --usk-surface-rgb: 15 7 3;
+  --usk-surface-strong-rgb: 31 15 7;
+  --usk-surface-soft-rgb: 0 0 0;
+  --usk-text-rgb: 255 255 255;
+  --usk-text-muted-rgb: 255 244 237;
+  --usk-border-rgb: 255 255 255;
+  --usk-primary-rgb: 255 174 128;
+  --usk-primary-hover-rgb: 255 255 255;
+  --usk-primary-text-rgb: 0 0 0;
+  --usk-secondary-rgb: 208 234 166;
+  --usk-secondary-hover-rgb: 255 255 255;
+  --usk-secondary-text-rgb: 0 0 0;
+  --usk-accent-rgb: 255 194 160;
+  --usk-success-rgb: 0 255 144;
+  --usk-warning-rgb: 255 212 0;
+  --usk-danger-rgb: 255 102 96;
+  --usk-link-rgb: 255 194 160;
+  --usk-accent-text-rgb: 0 0 0;
+  --usk-success-text-rgb: 0 0 0;
+  --usk-warning-text-rgb: 0 0 0;
+  --usk-danger-text-rgb: 0 0 0;
+  --usk-focus-rgb: 255 255 255;
+}
 }

package/styles/y2k.css

@@ -430,7 +430,7 @@
 .y2k-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); background-image: radial-gradient(rgb(var(--y2k-border-rgb) / var(--y2k-grid-alpha)) 1px, transparent 1px); background-size: 22px 22px; }
 .y2k-container { width: min(100% - 2rem, 1200px); margin-inline: auto; } .y2k-stack { display: flex; flex-direction: column; gap: var(--y2k-space-4); } .y2k-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--y2k-space-3); } .y2k-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--y2k-space-5); } .y2k-section { padding: clamp(1.25rem, 4vw, 2.5rem); }
 .y2k-title, .y2k-heading, .y2k-kicker, .y2k-button, .y2k-badge, .y2k-nav-link { font-family: var(--y2k-font-heading); }
-.y2k-title { margin: 0; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: .95; letter-spacing: -0.05em; color: var(--y2k-text); text-shadow: 2px 2px 0 rgb(var(--y2k-accent-rgb) / .56), 0 0 24px var(--y2k-glow-accent); } .y2k-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: -0.03em; } .y2k-kicker { margin: 0; color: var(--y2k-primary); font-size: .82rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .y2k-subtitle, .y2k-copy { margin: 0; color: var(--y2k-text-muted); line-height: 1.65; } .y2k-text-muted { color: var(--y2k-text-muted); }
+.y2k-title { margin: 0; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: .95; letter-spacing: -0.05em; color: var(--y2k-text); text-shadow: 2px 2px 0 rgb(var(--y2k-accent-rgb) / .56), 0 0 24px var(--y2k-glow-accent); } .y2k-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: -0.03em; } .y2k-kicker { margin: 0; color: var(--usk-primary-ink, var(--y2k-primary)); font-size: .82rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .y2k-subtitle, .y2k-copy { margin: 0; color: var(--y2k-text-muted); line-height: 1.65; } .y2k-text-muted { color: var(--y2k-text-muted); }
 
 .y2k-card, .y2k-panel, .y2k-bubble, .y2k-toolbar, .y2k-table-wrap { position: relative; background: linear-gradient(145deg, rgb(255 255 255 / .42), rgb(255 255 255 / .08)), var(--y2k-surface); color: var(--y2k-text); border: 1px solid rgb(255 255 255 / .38); border-bottom-color: rgb(var(--y2k-border-rgb) / .4); border-right-color: rgb(var(--y2k-border-rgb) / .35); border-radius: var(--y2k-radius-xl); box-shadow: var(--y2k-shadow-md), inset 0 1px 0 rgb(255 255 255 / .42), 0 0 28px var(--y2k-glow-accent); transition: transform var(--y2k-transition-base), box-shadow var(--y2k-transition-base); }
 .y2k-card::before, .y2k-panel::before, .y2k-bubble::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 0%, rgb(255 255 255 / .42), transparent 22%), linear-gradient(120deg, transparent 0 55%, rgb(var(--y2k-accent-rgb) / .12)); border-radius: inherit; }
@@ -450,7 +450,7 @@
 .y2k-progress { width: 100%; height: .9rem; background: var(--y2k-surface-soft); border-radius: var(--y2k-radius-pill); box-shadow: inset 0 6px 14px rgb(0 0 0 / .12); overflow: hidden; } .y2k-progress-bar { height: 100%; width: var(--y2k-progress-value, 50%); background: linear-gradient(90deg, var(--y2k-primary), var(--y2k-accent), var(--y2k-secondary)); border-radius: inherit; }
 .y2k-alert { padding: var(--y2k-space-4); background: var(--y2k-surface); border: 1px solid rgb(255 255 255 / .38); border-radius: var(--y2k-radius-xl); box-shadow: var(--y2k-shadow-md); } .y2k-alert-title { margin: 0; font-weight: 900; } .y2k-alert-body { margin: .5rem 0 0; color: var(--y2k-text-muted); } .y2k-alert-success { box-shadow: var(--y2k-shadow-md), 0 0 22px rgb(var(--y2k-success-rgb) / .2); } .y2k-alert-warning { box-shadow: var(--y2k-shadow-md), 0 0 22px rgb(var(--y2k-warning-rgb) / .2); } .y2k-alert-danger { box-shadow: var(--y2k-shadow-md), 0 0 22px rgb(var(--y2k-danger-rgb) / .2); }
 .y2k-table-wrap { overflow: auto; } .y2k-table { width: 100%; border-collapse: collapse; } .y2k-table th, .y2k-table td { padding: .9rem 1rem; border-bottom: 1px solid rgb(var(--y2k-border-rgb) / .34); text-align: left; } .y2k-table th { background: rgb(255 255 255 / .16); font-weight: 900; } .y2k-table td { color: var(--y2k-text-muted); }
-.y2k-text-primary { color: var(--y2k-primary); } .y2k-text-secondary { color: var(--y2k-secondary); } .y2k-text-accent { color: var(--y2k-accent); } .y2k-text-success { color: var(--y2k-success); } .y2k-text-warning { color: var(--y2k-warning); } .y2k-text-danger { color: var(--y2k-danger); }
+.y2k-text-primary { color: var(--usk-primary-ink, var(--y2k-primary)); } .y2k-text-secondary { color: var(--y2k-secondary); } .y2k-text-accent { color: var(--usk-accent-ink, var(--y2k-accent)); } .y2k-text-success { color: var(--y2k-success); } .y2k-text-warning { color: var(--y2k-warning); } .y2k-text-danger { color: var(--y2k-danger); }
 [data-ui="y2k"] :focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; }
 @media (prefers-reduced-motion: reduce) { [data-ui="y2k"] *, [data-ui="y2k"] *::before, [data-ui="y2k"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
 
@@ -559,7 +559,7 @@
 .y2k-button.y2k-button-outline-heavy,
 .y2k-button-outline-heavy {
   background: transparent;
-  color: var(--y2k-primary);
+  color: var(--usk-primary-ink, var(--y2k-primary));
   border-style: solid;
   border-width: 2px;
   border-color: var(--y2k-primary);
@@ -629,7 +629,7 @@
 
 .y2k-eyebrow {
   margin: 0;
-  color: var(--y2k-primary);
+  color: var(--usk-primary-ink, var(--y2k-primary));
   font-family: var(--y2k-font-heading);
   font-size: .76rem;
   font-weight: 900;
@@ -823,13 +823,13 @@
 
 @layer ui-style-kit.y2k {
 /* Keeps semantic field states above preset-specific material paint. */
-.y2k-input[aria-invalid="true"], .y2k-textarea[aria-invalid="true"], .y2k-select[aria-invalid="true"] { border-color: var(--y2k-danger); box-shadow: 0 0 0 2px rgb(var(--y2k-danger-rgb) / .2); }
-.y2k-input[readonly], .y2k-textarea[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
+[data-ui="y2k"][data-mode] :is(.y2k-input, .y2k-textarea, .y2k-select)[aria-invalid="true"] { border-color: var(--y2k-danger); box-shadow: 0 0 0 2px rgb(var(--y2k-danger-rgb) / .2); }
+[data-ui="y2k"][data-mode] :is(.y2k-input, .y2k-textarea)[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
 /* Restores semantic action paint after identity-specific geometry. */
 .y2k-button-primary { background: linear-gradient(180deg, rgb(var(--y2k-surface-strong-rgb) / .46), transparent 52%), var(--y2k-primary); color: var(--y2k-on-primary); border-color: var(--y2k-primary); }
 .y2k-button-secondary { background: linear-gradient(180deg, rgb(var(--y2k-surface-strong-rgb) / .42), transparent 52%), var(--y2k-secondary); color: var(--y2k-on-secondary); border-color: var(--y2k-secondary); }
 .y2k-button-danger { background: linear-gradient(180deg, rgb(var(--y2k-surface-strong-rgb) / .38), transparent 52%), var(--y2k-danger); color: var(--y2k-on-danger); border-color: var(--y2k-danger); }
-.y2k-button-ghost { background: transparent; color: var(--y2k-primary); border-color: transparent; }
+.y2k-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--y2k-primary)); border-color: transparent; }
 }
 
 @layer ui-style-kit.y2k {
@@ -1413,7 +1413,7 @@
   min-block-size: 1.375rem;
   padding: .125rem .375rem;
   color: var(--y2k-text);
-  background: var(--y2k-surface);
+  background-color: var(--y2k-surface);
   border: 1px inset var(--y2k-border);
   border-radius: 0;
   box-shadow: var(--y2k-bevel-recessed);
@@ -1487,3 +1487,17 @@
   outline: 2px dotted #d21212;
   outline-offset: 2px;
 }
+
+/** Keeps unclassed invalid fields visibly semantic after the late bevel reset. */
+[data-ui="y2k"][data-mode] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select)[aria-invalid="true"] {
+  border-color: var(--y2k-danger);
+  box-shadow: var(--y2k-bevel-recessed), 0 0 0 2px rgb(var(--y2k-danger-rgb) / .24);
+}
+
+/** Keeps read-only native fields distinct from invalid and editable controls. */
+[data-ui="y2k"][data-mode] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea)[readonly] {
+  background-color: var(--y2k-surface-soft);
+  border-style: dashed;
+  filter: saturate(.72);
+  opacity: .78;
+}