@rokkit/themes 1.3.0 → 1.3.2

package/dist/index.css

@@ -6013,6 +6013,34 @@ button[data-step-number] {
   min-width: 0;
 }
 
+/* Contrast-critical (applies to every style): the status soft-bg is a fixed
+   light tint that does NOT flip in dark mode, so the body text must be a fixed
+   DARK tone to stay readable. Darken the status hue toward black — keeps the
+   colour identity and reaches WCAG AA on the light tint in both modes. The
+   icon / border keep the vibrant status-500.
+
+   The same darkened tone is also set on the ROOT (not just [data-message-text]):
+   the root's `color` is the inherited default for any banner text, and the
+   styles set the vibrant `text-{status}` on the root — which fails AA on the
+   light soft-bg. The vibrant icon/dismiss keep their own higher-specificity
+   `text-{status}` rules, so this only re-tones the readable copy. */
+[data-message-root][data-type='error'],
+[data-message-root][data-type='error'] [data-message-text] {
+  color: color-mix(in oklch, var(--error) 55%, black);
+}
+[data-message-root][data-type='warning'],
+[data-message-root][data-type='warning'] [data-message-text] {
+  color: color-mix(in oklch, var(--warning) 55%, black);
+}
+[data-message-root][data-type='info'],
+[data-message-root][data-type='info'] [data-message-text] {
+  color: color-mix(in oklch, var(--info) 55%, black);
+}
+[data-message-root][data-type='success'],
+[data-message-root][data-type='success'] [data-message-text] {
+  color: color-mix(in oklch, var(--success) 55%, black);
+}
+
 [data-message-actions] {
   display: flex;
   align-items: center;
@@ -6043,6 +6071,271 @@ button[data-step-number] {
   opacity: 1;
 }
 
+/* Chat — structural + neutral styling for the @rokkit/ui chat components
+   (ChatShell / ChatHistory / ChatTimeline / ChatMessage / ChatComposer).
+
+   The components are headless and emit data-* hooks only; this file owns
+   their visual treatment using the Rokkit named-token vocabulary
+   (--paper, --ink, --accent, …) so it adapts to every theme + mode
+   automatically. Component-intrinsic rules work standalone; shell-context
+   rules (the history rail width, composer inset, scroll) are scoped under
+   [data-chat-shell]. Per-style files may override for flavor. */
+
+/* ─── ChatMessage: avatar + bubble row ──────────────────────────────── */
+[data-chat-message] {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+[data-chat-bubble] {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+[data-chat-body] {
+	font: 400 14px/1.55 var(--font-ui);
+	color: var(--ink);
+}
+
+[data-chat-message][data-role='user'] [data-chat-body] {
+	font-family: var(--font-display, var(--font-ui));
+	font-size: 16px;
+	line-height: 1.4;
+	letter-spacing: -0.005em;
+}
+
+/* Inline-code chips in prose — but NOT inside a CodeBlock's <pre><code>. */
+[data-chat-body] code:not([data-code-block] code) {
+	font: 500 12px var(--font-mono);
+	padding: 1px 6px;
+	border: 1px solid var(--paper-edge);
+	border-radius: 4px;
+	background: var(--paper-soft);
+	color: var(--ink-mute);
+}
+
+[data-chat-time] {
+	margin-top: 6px;
+	font: 500 10.5px var(--font-mono);
+	color: var(--ink-soft);
+	letter-spacing: 0.04em;
+}
+
+/* Streaming caret (data-status='streaming' on the message). */
+[data-chat-caret] {
+	display: inline-block;
+	width: 7px;
+	height: 1.05em;
+	margin-left: 3px;
+	vertical-align: text-bottom;
+	background: var(--accent);
+	border-radius: 1px;
+	animation: rokkit-chat-caret 1s steps(2, start) infinite;
+}
+
+@keyframes rokkit-chat-caret {
+	to {
+		opacity: 0;
+	}
+}
+
+/* ─── ChatTimeline: message list ────────────────────────────────────── */
+[data-chat-timeline] {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	gap: 22px;
+	padding: 24px 20px;
+}
+
+/* ─── ChatComposer: input card ──────────────────────────────────────── */
+[data-chat-composer] {
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 10px 12px;
+	background: var(--paper-soft);
+	/* Match the standard input chrome: a subtle paper-mute hairline at rest,
+	   darkening to ink-soft on focus — NOT paper-edge (the near-black etched
+	   edge in dark mode, which reads as a heavy border). */
+	border: 1px solid var(--paper-mute);
+	border-radius: 10px;
+	transition: border-color 120ms ease;
+}
+
+/* Single, calm focus affordance — just darken the border (no ring), exactly
+   like [data-input-root]:focus-within. */
+[data-chat-composer]:focus-within {
+	border-color: var(--ink-soft);
+}
+
+/* Disabled — mirror the input disabled treatment (dim + not-allowed). */
+[data-chat-composer]:has([data-chat-input]:disabled) {
+	opacity: 0.55;
+}
+
+[data-chat-input]:disabled {
+	cursor: not-allowed;
+}
+
+[data-chat-input] {
+	width: 100%;
+	min-height: 22px;
+	max-height: 160px;
+	padding: 0;
+	border: 0;
+	outline: none;
+	background: transparent;
+	resize: none;
+	font: 400 14px/1.45 var(--font-ui);
+	color: var(--ink);
+}
+
+[data-chat-input]::placeholder {
+	color: var(--ink-soft);
+}
+
+[data-chat-composer][data-busy] [data-chat-input] {
+	opacity: 0.7;
+}
+
+/* ─── ChatHistory: conversation rail ────────────────────────────────── */
+[data-chat-history] {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	overflow-y: auto;
+	padding: 8px;
+	background: var(--paper);
+	color: var(--ink);
+}
+
+[data-chat-history-new] {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	height: 32px;
+	padding: 0 10px;
+	margin-bottom: 6px;
+	border: 1px solid var(--paper-edge);
+	border-radius: 6px;
+	background: var(--paper-soft);
+	color: var(--ink);
+	font: 500 12.5px var(--font-ui);
+	cursor: pointer;
+}
+
+[data-chat-history-new]:hover {
+	border-color: var(--ink-soft);
+	background: var(--paper);
+}
+
+[data-chat-history-row] {
+	display: flex;
+	align-items: center;
+	border-radius: 6px;
+}
+
+[data-chat-history-row]:hover {
+	background: var(--paper-soft);
+}
+
+[data-chat-history-row][data-active] {
+	background: var(--paper-mute);
+}
+
+[data-chat-history-item] {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 7px 8px;
+	border: 0;
+	background: transparent;
+	color: var(--ink-mute);
+	cursor: pointer;
+	text-align: left;
+	font-family: var(--font-ui);
+}
+
+[data-chat-history-row][data-active] [data-chat-history-item] {
+	color: var(--ink);
+}
+
+[data-chat-history-title] {
+	flex: 1;
+	min-width: 0;
+	font: 450 12.5px var(--font-ui);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+[data-chat-history-time] {
+	flex-shrink: 0;
+	font: 500 10px var(--font-mono);
+	color: var(--ink-soft);
+}
+
+[data-chat-history-delete] {
+	flex-shrink: 0;
+	width: 24px;
+	height: 24px;
+	display: grid;
+	place-items: center;
+	border: 0;
+	background: transparent;
+	color: var(--ink-soft);
+	border-radius: 4px;
+	cursor: pointer;
+	opacity: 0;
+}
+
+[data-chat-history-row]:hover [data-chat-history-delete] {
+	opacity: 1;
+}
+
+[data-chat-history-delete]:hover {
+	background: var(--paper-mute);
+	color: var(--ink);
+}
+
+/* ─── ChatShell: history rail + main column ─────────────────────────── */
+[data-chat-shell] {
+	display: flex;
+	min-height: 0;
+	background: var(--paper);
+	color: var(--ink);
+}
+
+[data-chat-main] {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Rail chrome only applies inside the shell — a standalone ChatHistory
+   fills its own container instead of imposing a fixed rail width. */
+[data-chat-shell] [data-chat-history] {
+	width: 280px;
+	flex-shrink: 0;
+	border-right: 1px solid var(--paper-edge);
+}
+
+/* Inset the composer from the column edges inside the shell. */
+[data-chat-main] [data-chat-composer] {
+	margin: 0 20px 20px;
+}
+
 /* AlertList — base structural styles for the fixed toast container */
 
 [data-alert-list] {
@@ -7008,7 +7301,9 @@ button[data-step-number] {
 [data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
 [data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
-  border-width:1px;border-color:var(--paper-edge);color:var(--ink-mute);
+  /* ink (not ink-mute): the button label is primary content; ink-mute on the
+     paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
+  border-width:1px;border-color:var(--paper-edge);color:var(--ink);
   background: var(--paper-mute);
 }
 
@@ -8566,7 +8861,9 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-header] th {
-  border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
+  /* ink (not ink-mute): column headers are primary content; ink-mute on the
+     paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
+  border-bottom-width:1px;color:var(--ink);border-color:var(--paper-edge);background-color:var(--paper-mute);
 }
 
 [data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
@@ -9299,7 +9596,7 @@ button[data-step-number] {
 
 /* Type colors */
 [data-style='rokkit'] [data-message-root][data-type='error'] {
-  background-color:var(--error-soft);border-color:var(--error);color:var(--error);
+  background-color:var(--error-soft);border-color:var(--error);
 }
 [data-style='rokkit'] [data-message-root][data-type='error'] [data-message-icon] {
   color:var(--error);
@@ -9309,7 +9606,7 @@ button[data-step-number] {
 }
 
 [data-style='rokkit'] [data-message-root][data-type='warning'] {
-  background-color:var(--warning-soft);border-color:var(--warning);color:var(--warning);
+  background-color:var(--warning-soft);border-color:var(--warning);
 }
 [data-style='rokkit'] [data-message-root][data-type='warning'] [data-message-icon] {
   color:var(--warning);
@@ -9319,7 +9616,7 @@ button[data-step-number] {
 }
 
 [data-style='rokkit'] [data-message-root][data-type='info'] {
-  background-color:var(--info-soft);border-color:var(--info);color:var(--info);
+  background-color:var(--info-soft);border-color:var(--info);
 }
 [data-style='rokkit'] [data-message-root][data-type='info'] [data-message-icon] {
   color:var(--info);
@@ -9329,7 +9626,7 @@ button[data-step-number] {
 }
 
 [data-style='rokkit'] [data-message-root][data-type='success'] {
-  background-color:var(--success-soft);border-color:var(--success);color:var(--success);
+  background-color:var(--success-soft);border-color:var(--success);
 }
 [data-style='rokkit'] [data-message-root][data-type='success'] [data-message-icon] {
   color:var(--success);
@@ -9354,7 +9651,7 @@ button[data-step-number] {
   color:var(--warning);
 }
 [data-style='rokkit'] [data-status-item][data-status='unknown'] span {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 /* ── @rokkit/ui StatusList: text color by status ── */
@@ -9807,7 +10104,9 @@ button[data-step-number] {
 [data-style='minimal'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='minimal'] [data-button][data-style='default']:not([data-variant]),
 [data-style='minimal'] [data-button]:not([data-style]):not([data-variant]) {
-  border-width:1px;background-image:none;background-color:var(--paper-mute);border-color:var(--paper-edge);color:var(--ink-mute);
+  /* ink (not ink-mute): the button label is primary content; ink-mute on the
+     paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
+  border-width:1px;background-image:none;background-color:var(--paper-mute);border-color:var(--paper-edge);color:var(--ink);
 }
 
 [data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
@@ -10193,7 +10492,7 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='minimal'] [data-tabs-trigger] [data-tabs-icon] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -11188,7 +11487,9 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='minimal'] [data-table-header] th {
-  border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
+  /* ink (not ink-mute): column headers are primary content; ink-mute on the
+     paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
+  border-bottom-width:1px;color:var(--ink);border-color:var(--paper-edge);background-color:var(--paper-mute);
 }
 
 [data-style='minimal'] [data-table-header-cell][data-sortable='true']:hover {
@@ -11736,7 +12037,7 @@ button[data-step-number] {
  */
 
 [data-style='minimal'] [data-message-root][data-type='error'] {
-  background-color:var(--error-soft);border-color:var(--error);color:var(--error);
+  background-color:var(--error-soft);border-color:var(--error);
 }
 [data-style='minimal'] [data-message-root][data-type='error'] [data-message-icon],
 [data-style='minimal'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -11744,7 +12045,7 @@ button[data-step-number] {
 }
 
 [data-style='minimal'] [data-message-root][data-type='warning'] {
-  background-color:var(--warning-soft);border-color:var(--warning);color:var(--warning);
+  background-color:var(--warning-soft);border-color:var(--warning);
 }
 [data-style='minimal'] [data-message-root][data-type='warning'] [data-message-icon],
 [data-style='minimal'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -11752,7 +12053,7 @@ button[data-step-number] {
 }
 
 [data-style='minimal'] [data-message-root][data-type='info'] {
-  background-color:var(--info-soft);border-color:var(--info);color:var(--info);
+  background-color:var(--info-soft);border-color:var(--info);
 }
 [data-style='minimal'] [data-message-root][data-type='info'] [data-message-icon],
 [data-style='minimal'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -11760,7 +12061,7 @@ button[data-step-number] {
 }
 
 [data-style='minimal'] [data-message-root][data-type='success'] {
-  background-color:var(--success-soft);border-color:var(--success);color:var(--success);
+  background-color:var(--success-soft);border-color:var(--success);
 }
 [data-style='minimal'] [data-message-root][data-type='success'] [data-message-icon],
 [data-style='minimal'] [data-message-root][data-type='success'] [data-message-dismiss] {
@@ -11783,7 +12084,7 @@ button[data-step-number] {
   color:var(--warning);
 }
 [data-style='minimal'] [data-status-item][data-status='unknown'] span {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='minimal'] [data-status-item][data-status='pass'] {
@@ -12140,7 +12441,9 @@ button[data-step-number] {
 [data-style='material'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='material'] [data-button][data-style='default']:not([data-variant]),
 [data-style='material'] [data-button]:not([data-style]):not([data-variant]) {
-  background-image:none;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--paper-mute);color:var(--ink-mute);
+  /* ink (not ink-mute): the button label is primary content; ink-mute on the
+     paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
+  background-image:none;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--paper-mute);color:var(--ink);
 }
 
 [data-style='material'] [data-button][data-style='default'][data-variant='primary'],
@@ -12582,8 +12885,11 @@ button[data-step-number] {
    Tab Triggers
    ============================================================================= */
 
+/* ink (not ink-mute): an unselected tab label is an interactive navigation
+   target that must read clearly; ink-mute on the paper-mute tab list only
+   reaches 4.07:1 in dark mode (AA fail). */
 [data-style='material'] [data-tabs-trigger] {
-  border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-mute);
+  border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink);
 }
 
 [data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
@@ -12591,7 +12897,7 @@ button[data-step-number] {
 }
 
 [data-style='material'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
-  background-color:var(--paper-mute);color:var(--ink-mute);
+  background-color:var(--paper-mute);color:var(--ink);
 }
 
 /* Selected state */
@@ -12668,13 +12974,16 @@ button[data-step-number] {
    Toggle Options
    ============================================================================= */
 
+/* ink (not ink-mute): an unselected option label is an interactive target
+   that must read clearly; ink-mute on the paper-mute container only reaches
+   4.07:1 in dark mode (AA fail). */
 [data-style='material'] [data-toggle-option] {
-  border-radius:9999px;color:var(--ink-mute);
+  border-radius:9999px;color:var(--ink);
 }
 
 [data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
 [data-style='material'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
-  background-image:none;background-color:var(--paper-mute);color:var(--ink-mute);
+  background-image:none;background-color:var(--paper-mute);color:var(--ink);
 }
 
 /* Selected state */
@@ -13093,7 +13402,9 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='material'] [data-select-tag] {
-  border-radius:9999px;background-image:none;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--paper-mute);color:var(--ink-mute);
+  /* ink (not ink-mute): the tag holds the selected value (primary content);
+     ink-mute on the paper-mute chip only reaches 4.07:1 in dark mode (AA fail). */
+  border-radius:9999px;background-image:none;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--paper-mute);color:var(--ink);
 }
 
 [data-style='material'] [data-select-tag-remove] {
@@ -13440,7 +13751,9 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='material'] [data-table-header] th {
-  border-bottom-width:1px;font-weight:500;color:var(--ink-mute);background-color:var(--paper-mute);border-color:var(--paper-edge);
+  /* ink (not ink-mute): column headers are primary content; ink-mute on the
+     paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
+  border-bottom-width:1px;font-weight:500;color:var(--ink);background-color:var(--paper-mute);border-color:var(--paper-edge);
 }
 
 [data-style='material'] [data-table-header-cell][data-sortable='true']:hover {
@@ -13996,7 +14309,7 @@ button[data-step-number] {
  */
 
 [data-style='material'] [data-message-root][data-type='error'] {
-  --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--error-soft);border-color:var(--error);color:var(--error);
+  --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--error-soft);border-color:var(--error);
 }
 [data-style='material'] [data-message-root][data-type='error'] [data-message-icon],
 [data-style='material'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -14004,7 +14317,7 @@ button[data-step-number] {
 }
 
 [data-style='material'] [data-message-root][data-type='warning'] {
-  --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--warning-soft);border-color:var(--warning);color:var(--warning);
+  --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--warning-soft);border-color:var(--warning);
 }
 [data-style='material'] [data-message-root][data-type='warning'] [data-message-icon],
 [data-style='material'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -14012,7 +14325,7 @@ button[data-step-number] {
 }
 
 [data-style='material'] [data-message-root][data-type='info'] {
-  --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--info-soft);border-color:var(--info);color:var(--info);
+  --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--info-soft);border-color:var(--info);
 }
 [data-style='material'] [data-message-root][data-type='info'] [data-message-icon],
 [data-style='material'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -14020,7 +14333,7 @@ button[data-step-number] {
 }
 
 [data-style='material'] [data-message-root][data-type='success'] {
-  --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--success-soft);border-color:var(--success);color:var(--success);
+  --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--success-soft);border-color:var(--success);
 }
 [data-style='material'] [data-message-root][data-type='success'] [data-message-icon],
 [data-style='material'] [data-message-root][data-type='success'] [data-message-dismiss] {
@@ -14043,7 +14356,7 @@ button[data-step-number] {
   color:var(--warning);
 }
 [data-style='material'] [data-status-item][data-status='unknown'] span {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='material'] [data-status-item][data-status='pass'] {
@@ -14409,9 +14722,15 @@ button[data-step-number] {
     0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
+/* Filled frosted variants use a translucent fill (bg-X/60) that composites
+   over the page, so the effective fill is a diluted tint that flips light/dark
+   with the mode. The auto on-color (computed against the full-opacity status
+   500) is wrong for the diluted fill — near-black on the dark dilution only
+   reaches ~2.4:1. ink flips with the mode and clears AA on both poles
+   (~6.2:1 dark, ~7.8:1 light). */
 [data-style='frosted'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='primary'] {
-  border-width:1px;background-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--on-primary);
+  border-width:1px;background-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -14420,7 +14739,7 @@ button[data-step-number] {
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='secondary'] {
-  border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--on-primary);
+  border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -14429,7 +14748,7 @@ button[data-step-number] {
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='accent'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='accent'] {
-  border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -14438,7 +14757,7 @@ button[data-step-number] {
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='danger'] {
-  border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -14877,9 +15196,14 @@ button[data-step-number] {
   background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }
 
-/* Selected state */
+/* Selected state.
+   ink (not primary): the selected pill's bg is a translucent primary tint
+   (bg-primary/40) that composites to a light tint in light mode and a dark
+   tint in dark mode. Vibrant primary text on the light tint is only ~1.6:1.
+   ink flips with the mode and clears AA on both poles (~10:1 light, ~8.6:1
+   dark). The vibrant primary lives on the border + icon below. */
 [data-style='frosted'] [data-tabs-trigger][data-selected] {
-  border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--primary);
+  border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
 }
 
 /* =============================================================================
@@ -14936,9 +15260,14 @@ button[data-step-number] {
   background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }
 
-/* Selected state */
+/* Selected state.
+   ink (not primary): the selected bg is a translucent primary tint
+   (bg-primary/40) that composites to a light tint in light mode and a dark
+   tint in dark mode. Vibrant primary text on the light tint is only ~1.6:1.
+   ink flips with the mode and clears AA on both poles. Vibrant primary stays
+   on the border + icon. */
 [data-style='frosted'] [data-toggle-option][data-selected='true'] {
-  border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--primary);
+  border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
 }
 
 /* =============================================================================
@@ -15753,7 +16082,9 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='frosted'] [data-table-header] th {
-  border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-mute);
+  /* ink (not ink-mute): column headers are primary content; ink-mute on the
+     paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
+  border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
   border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
   background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
 }
@@ -16351,7 +16682,7 @@ button[data-step-number] {
  */
 
 [data-style='frosted'] [data-message-root][data-type='error'] {
-  border-color:color-mix(in srgb, var(--color-error) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--error);
+  border-color:color-mix(in srgb, var(--color-error) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   background-color: var(--error-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='error'] [data-message-icon],
@@ -16360,7 +16691,7 @@ button[data-step-number] {
 }
 
 [data-style='frosted'] [data-message-root][data-type='warning'] {
-  border-color:color-mix(in srgb, var(--color-warning) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--warning);
+  border-color:color-mix(in srgb, var(--color-warning) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   background-color: var(--warning-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-icon],
@@ -16369,7 +16700,7 @@ button[data-step-number] {
 }
 
 [data-style='frosted'] [data-message-root][data-type='info'] {
-  border-color:color-mix(in srgb, var(--color-info) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--info);
+  border-color:color-mix(in srgb, var(--color-info) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   background-color: var(--info-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='info'] [data-message-icon],
@@ -16378,7 +16709,7 @@ button[data-step-number] {
 }
 
 [data-style='frosted'] [data-message-root][data-type='success'] {
-  border-color:color-mix(in srgb, var(--color-success) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--success);
+  border-color:color-mix(in srgb, var(--color-success) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   background-color: var(--success-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],
@@ -16402,7 +16733,7 @@ button[data-step-number] {
   color:var(--warning);
 }
 [data-style='frosted'] [data-status-item][data-status='unknown'] span {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='frosted'] [data-status-item][data-status='pass'] {
@@ -16925,12 +17256,35 @@ button[data-step-number] {
    Hover States — darken, no glow
    ============================================================================= */
 
-[data-style='zen-sumi']
-  [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
-[data-style='zen-sumi'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
+/* Default / unspecified variant — the ink fill stays inky on hover. */
+[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='zen-sumi'] [data-button][data-style='default']:not([data-variant]):hover:not(:disabled):not([data-disabled]),
+[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='zen-sumi'] [data-button]:not([data-style]):not([data-variant]):hover:not(:disabled):not([data-disabled]) {
   background-image:none;background-color:var(--ink);
 }
 
+/* Filled colored variants — darken the fill, keep the on-color label.
+   The old rule flipped these to bg-ink, which put zen-sumi's near-black
+   on-primary / on-accent label on a near-black background (invisible in
+   light mode). Darkening the variant's own fill preserves contrast. */
+[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='primary']:hover:not(:disabled):not([data-disabled]),
+[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='primary']:hover:not(:disabled):not([data-disabled]) {
+  background-color: color-mix(in oklab, var(--primary) 88%, black);
+}
+
+[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='secondary']:hover:not(:disabled):not([data-disabled]),
+[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='secondary']:hover:not(:disabled):not([data-disabled]),
+[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='accent']:hover:not(:disabled):not([data-disabled]),
+[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='accent']:hover:not(:disabled):not([data-disabled]) {
+  background-color: color-mix(in oklab, var(--accent) 88%, black);
+}
+
+[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='danger']:hover:not(:disabled):not([data-disabled]),
+[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='danger']:hover:not(:disabled):not([data-disabled]) {
+  background-color: color-mix(in oklab, var(--danger) 88%, black);
+}
+
 [data-style='zen-sumi']
   [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
   background-image:none;background-color:var(--paper-soft);border-color:var(--ink-soft);
@@ -17013,7 +17367,7 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-toolbar-item] [data-toolbar-icon] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
@@ -17096,7 +17450,7 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-tabs-trigger] [data-tabs-icon] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -17906,7 +18260,7 @@ button[data-step-number] {
 
 /* Item icon */
 [data-style='zen-sumi'] [data-fab-item] [data-fab-item-icon] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
@@ -18063,7 +18417,7 @@ button[data-step-number] {
 
 /* Description */
 [data-style='zen-sumi'] [data-description] {
-  margin-top:0.125rem;font-size:0.75rem;line-height:1rem;color:var(--paper-edge);
+  margin-top:0.125rem;font-size:0.75rem;line-height:1rem;color:var(--ink-soft);
 }
 
 /* Message */
@@ -18073,7 +18427,7 @@ button[data-step-number] {
 
 /* Checkbox */
 [data-style='zen-sumi'] [data-checkbox-icon] {
-  font-size:1.125rem;line-height:1.75rem;color:var(--paper-edge);
+  font-size:1.125rem;line-height:1.75rem;color:var(--ink-soft);
 }
 
 [data-style='zen-sumi']
@@ -18284,7 +18638,7 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-search-clear] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-search-clear]:hover {
@@ -18300,7 +18654,7 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-search-tag-remove] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-search-tag-remove]:hover {
@@ -18347,7 +18701,7 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-range-tick] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-tick-bar] {
@@ -18355,7 +18709,7 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-tick-label] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 /* =============================================================================
@@ -18382,7 +18736,7 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-timeline-circle] {
-  border-color:var(--paper-mute);color:var(--paper-edge);
+  border-color:var(--paper-mute);color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-timeline-item][data-completed] [data-timeline-circle] {
@@ -18414,7 +18768,7 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-timeline-description] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 /**
@@ -18439,11 +18793,11 @@ button[data-step-number] {
    ============================================================================= */
 
 [data-style='zen-sumi'] [data-floating-nav-title] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-floating-nav-pin] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-floating-nav-pin]:hover {
@@ -18477,7 +18831,7 @@ button[data-step-number] {
 
 /* Icon */
 [data-style='zen-sumi'] [data-floating-nav-icon] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
@@ -18495,7 +18849,7 @@ button[data-step-number] {
 /* TableOfContents — Zen-Sumi theme */
 
 [data-style='zen-sumi'] [data-toc] [data-toc-label] {
-  color:var(--paper-edge);
+  color:var(--ink-mute);
   font-size: 0.6875rem;
   font-weight: 600;
   letter-spacing: 0.05em;
@@ -18503,12 +18857,14 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-toc] [data-toc-item] {
-  color:var(--paper-edge);
+  /* Readable secondary text — NOT paper-edge (a border token that renders as a
+     faint 0.85 grey in light and a near-black 0.04 in dark → invisible). */
+  color:var(--ink-mute);
 }
 
 [data-style='zen-sumi'] [data-toc] [data-toc-item]:hover,
 [data-style='zen-sumi'] [data-toc] [data-toc-item][data-toc-focused] {
-  outline:2px solid transparent;outline-offset:2px;color:var(--ink-mute);
+  outline:2px solid transparent;outline-offset:2px;color:var(--ink);
 }
 
 [data-style='zen-sumi'] [data-toc] [data-toc-item][data-toc-active] {
@@ -18684,7 +19040,7 @@ button[data-step-number] {
  */
 
 [data-style='zen-sumi'] [data-message-root][data-type='error'] {
-  background-color:var(--error-soft);border-color:var(--error-soft);color:var(--error);
+  background-color:var(--error-soft);border-color:var(--error-soft);
 }
 [data-style='zen-sumi'] [data-message-root][data-type='error'] [data-message-icon],
 [data-style='zen-sumi'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -18692,7 +19048,7 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-message-root][data-type='warning'] {
-  background-color:var(--warning-soft);border-color:var(--warning-soft);color:var(--warning);
+  background-color:var(--warning-soft);border-color:var(--warning-soft);
 }
 [data-style='zen-sumi'] [data-message-root][data-type='warning'] [data-message-icon],
 [data-style='zen-sumi'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -18700,7 +19056,7 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-message-root][data-type='info'] {
-  background-color:var(--info-soft);border-color:var(--info-soft);color:var(--info);
+  background-color:var(--info-soft);border-color:var(--info-soft);
 }
 [data-style='zen-sumi'] [data-message-root][data-type='info'] [data-message-icon],
 [data-style='zen-sumi'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -18708,7 +19064,7 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-message-root][data-type='success'] {
-  background-color:var(--success-soft);border-color:var(--success-soft);color:var(--success);
+  background-color:var(--success-soft);border-color:var(--success-soft);
 }
 [data-style='zen-sumi'] [data-message-root][data-type='success'] [data-message-icon],
 [data-style='zen-sumi'] [data-message-root][data-type='success'] [data-message-dismiss] {
@@ -18731,7 +19087,7 @@ button[data-step-number] {
   color:var(--warning);
 }
 [data-style='zen-sumi'] [data-status-item][data-status='unknown'] span {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-status-item][data-status='pass'] {
@@ -18744,7 +19100,7 @@ button[data-step-number] {
   color:var(--warning);
 }
 [data-style='zen-sumi'] [data-status-item][data-status='unknown'] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 /* ── @rokkit/forms StatusList: group headers by severity ── */
@@ -18779,7 +19135,7 @@ button[data-step-number] {
 
 /* Count badge */
 [data-style='zen-sumi'] [data-status-count] {
-  background-image:none;font-weight:500;color:var(--paper-edge);
+  background-image:none;font-weight:500;color:var(--ink-soft);
 }
 
 /* StepIndicator — Zen-Sumi theme (flat, hairline border) */
@@ -18795,7 +19151,7 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-step-item][data-step-state='upcoming'] [data-step-number] {
-  background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--paper-edge);
+  background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-soft);
 }
 
 /* ── Labels ── */
@@ -18809,7 +19165,7 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-step-item][data-step-state='upcoming'] [data-step-label] {
-  background-image:none;color:var(--paper-edge);
+  background-image:none;color:var(--ink-soft);
 }
 
 /* ── Connector lines ── */
@@ -18862,7 +19218,7 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-facet-title] {
-  color:var(--paper-edge);
+  color:var(--ink-soft);
 }
 
 /**
@@ -19049,7 +19405,7 @@ button[data-step-number] {
 
 [data-style='zen-sumi'] [data-command-input] {
 	color:var(--ink-mute);
-}[data-style='zen-sumi'] [data-command-input]::placeholder{color:var(--paper-edge);}
+}[data-style='zen-sumi'] [data-command-input]::placeholder{color:var(--ink-soft);}
 
 [data-style='zen-sumi'] [data-command-item] {
 	color:var(--ink-soft);
@@ -19060,15 +19416,15 @@ button[data-step-number] {
 }
 
 [data-style='zen-sumi'] [data-command-shortcut] {
-	color:var(--paper-edge);
+	color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-command-label] {
-	font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--paper-edge);
+	font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--ink-soft);
 }
 
 [data-style='zen-sumi'] [data-command-empty] {
-	color:var(--paper-edge);
+	color:var(--ink-soft);
 }