@helixui/library 3.1.0 → 3.2.0-next.102

package/dist/css/helix-feedback.css

@@ -38,10 +38,10 @@
     gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));
     border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-alert-border-color, var(--hx-color-info-200, #bae6fd));
+      var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));
     border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #f0f9ff));
-    color: var(--hx-alert-color, var(--hx-color-info-800, #0c4a6e));
+    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #eff6fe));
+    color: var(--hx-alert-color, var(--hx-color-info-800, #064172));
     font-family: var(--hx-alert-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -54,7 +54,7 @@
   .alert--accent {
     border-width: 0;
     border-inline-start: var(--hx-alert-accent-width, 4px) solid
-      var(--hx-alert-border-color, var(--hx-color-info-200, #bae6fd));
+      var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));
     border-radius: 0;
   }
 
@@ -81,7 +81,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0284c7));
+    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
   .alert__icon svg {
@@ -141,7 +141,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-alert-color, var(--hx-color-info-800, #0c4a6e));
+    color: var(--hx-alert-color, var(--hx-color-info-800, #064172));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -160,7 +160,7 @@
 
   .alert__close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-alert-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -181,40 +181,41 @@
 
   :host([variant='info']) .alert,
   :host(:not([variant])) .alert {
-    --hx-alert-bg: var(--hx-color-info-50, #f0f9ff);
-    --hx-alert-border-color: var(--hx-color-info-200, #bae6fd);
-    --hx-alert-color: var(--hx-color-info-800, #0c4a6e);
-    --hx-alert-icon-color: var(--hx-color-info-500, #0284c7);
+    --hx-alert-bg: var(--hx-color-info-50, #eff6fe);
+    --hx-alert-border-color: var(--hx-color-info-200, #bedcfc);
+    --hx-alert-color: var(--hx-color-info-800, #064172);
+    --hx-alert-icon-color: var(--hx-color-info-500, #0c8beb);
   }
 
   /* ─── Variant: success ─── */
 
   :host([variant='success']) .alert {
-    --hx-alert-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-alert-border-color: var(--hx-color-success-200, #bbf7d0);
-    --hx-alert-color: var(--hx-color-success-800, #14532d);
-    --hx-alert-icon-color: var(--hx-color-success-500, #16a34a);
+    --hx-alert-bg: var(--hx-color-success-50, #eafaec);
+    --hx-alert-border-color: var(--hx-color-success-200, #bae6c2);
+    --hx-alert-color: var(--hx-color-success-800, #0b4d23);
+    --hx-alert-icon-color: var(--hx-color-success-500, #3b9e58);
   }
 
   /* ─── Variant: warning ─── */
 
   :host([variant='warning']) .alert {
-    --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-alert-color: var(--hx-color-warning-800, #78350f);
-    --hx-alert-icon-color: var(--hx-color-warning-500, #d97706);
+    --hx-alert-bg: var(--hx-color-warning-50, #fff3ea);
+    --hx-alert-border-color: var(--hx-color-warning-200, #facfae);
+    --hx-alert-color: var(--hx-color-warning-800, #603301);
+    --hx-alert-icon-color: var(--hx-color-warning-500, #c2711c);
   }
 
   /* ─── Variant: error ─── */
 
   :host([variant='error']) .alert {
-    --hx-alert-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-alert-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-alert-color: var(--hx-color-error-800, #7f1d1d);
-    --hx-alert-icon-color: var(--hx-color-error-500, #dc2626);
+    --hx-alert-bg: var(--hx-color-error-50, #fff2f0);
+    --hx-alert-border-color: var(--hx-color-error-200, #fccbc4);
+    --hx-alert-color: var(--hx-color-error-800, #7a090a);
+    --hx-alert-icon-color: var(--hx-color-error-500, #e5493e);
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .alert {
@@ -276,10 +277,10 @@
     align-items: center;
     gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
-    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #f0f9ff));
-    color: var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e));
+    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #eff6fe));
+    color: var(--hx-banner-color, var(--hx-color-info-800, #064172));
     border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-banner-border-color, var(--hx-color-info-200, #bae6fd));
+      var(--hx-banner-border-color, var(--hx-color-info-200, #bedcfc));
     font-family: var(--hx-banner-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -292,7 +293,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0284c7));
+    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
   .banner__icon svg {
@@ -314,7 +315,7 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e)));
+    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #064172)));
     font-weight: var(--hx-font-weight-semibold, 600);
     text-decoration: underline;
     text-underline-offset: 2px;
@@ -332,7 +333,7 @@
 
   .banner__action:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-banner-action-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -354,7 +355,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e));
+    color: var(--hx-banner-color, var(--hx-color-info-800, #064172));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -373,7 +374,7 @@
 
   .banner__close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-banner-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -388,37 +389,37 @@
 
   :host([variant='info']) .banner,
   :host(:not([variant])) .banner {
-    --hx-banner-bg: var(--hx-color-info-50, #f0f9ff);
-    --hx-banner-border-color: var(--hx-color-info-200, #bae6fd);
-    --hx-banner-color: var(--hx-color-info-800, #0c4a6e);
-    --hx-banner-icon-color: var(--hx-color-info-500, #0284c7);
+    --hx-banner-bg: var(--hx-color-info-50, #eff6fe);
+    --hx-banner-border-color: var(--hx-color-info-200, #bedcfc);
+    --hx-banner-color: var(--hx-color-info-800, #064172);
+    --hx-banner-icon-color: var(--hx-color-info-500, #0c8beb);
   }
 
   /* ─── Variant: success ─── */
 
   :host([variant='success']) .banner {
-    --hx-banner-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-banner-border-color: var(--hx-color-success-200, #bbf7d0);
-    --hx-banner-color: var(--hx-color-success-800, #14532d);
-    --hx-banner-icon-color: var(--hx-color-success-500, #16a34a);
+    --hx-banner-bg: var(--hx-color-success-50, #eafaec);
+    --hx-banner-border-color: var(--hx-color-success-200, #bae6c2);
+    --hx-banner-color: var(--hx-color-success-800, #0b4d23);
+    --hx-banner-icon-color: var(--hx-color-success-500, #3b9e58);
   }
 
   /* ─── Variant: warning ─── */
 
   :host([variant='warning']) .banner {
-    --hx-banner-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-banner-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-banner-color: var(--hx-color-warning-800, #78350f);
-    --hx-banner-icon-color: var(--hx-color-warning-500, #d97706);
+    --hx-banner-bg: var(--hx-color-warning-50, #fff3ea);
+    --hx-banner-border-color: var(--hx-color-warning-200, #facfae);
+    --hx-banner-color: var(--hx-color-warning-800, #603301);
+    --hx-banner-icon-color: var(--hx-color-warning-500, #c2711c);
   }
 
   /* ─── Variant: error ─── */
 
   :host([variant='error']) .banner {
-    --hx-banner-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-banner-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-banner-color: var(--hx-color-error-800, #7f1d1d);
-    --hx-banner-icon-color: var(--hx-color-error-500, #dc2626);
+    --hx-banner-bg: var(--hx-color-error-50, #fff2f0);
+    --hx-banner-border-color: var(--hx-color-error-200, #fccbc4);
+    --hx-banner-color: var(--hx-color-error-800, #7a090a);
+    --hx-banner-icon-color: var(--hx-color-error-500, #e5493e);
   }
 
   /* ─── Position: fixed ─── */
@@ -439,6 +440,7 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .banner {
@@ -470,14 +472,14 @@
   }
 
   .meter:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #60a5fa);
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .meter__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #313e4b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -485,7 +487,7 @@
     position: relative;
     width: 100%;
     height: var(--hx-meter-track-height, var(--hx-space-2, 0.5rem));
-    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e2e8f0));
+    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #d6dbd5));
     border-radius: var(--hx-meter-track-radius, var(--hx-border-radius-full, 9999px));
     overflow: hidden;
   }
@@ -514,21 +516,21 @@
   /* ─── Default (no thresholds configured) ─── */
 
   :host {
-    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #2563eb));
+    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #429797));
   }
 
   /* ─── Semantic state colors ─── */
 
   :host([data-state='optimum']) {
-    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #16a34a));
+    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #3b9e58));
   }
 
   :host([data-state='warning']) {
-    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #d97706));
+    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #c2711c));
   }
 
   :host([data-state='danger']) {
-    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #dc2626));
+    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #e5493e));
   }
 
   /* ─── State Label (WCAG 1.4.1) ─── */
@@ -544,15 +546,15 @@
   }
 
   .meter__state-label[data-state='optimum'] {
-    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #166534));
+    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #146831));
   }
 
   .meter__state-label[data-state='warning'] {
-    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #92400e));
+    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #804605));
   }
 
   .meter__state-label[data-state='danger'] {
-    color: var(--hx-meter-color-danger, var(--hx-color-error-700, #991b1b));
+    color: var(--hx-meter-color-danger, var(--hx-color-error-700, #a21312));
   }
 
   /* ─── Native meter hidden (we use custom rendering) ─── */
@@ -608,7 +610,7 @@
     font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-progress-bar-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-tight, 1.25);
   }
 
@@ -616,7 +618,7 @@
     position: relative;
     overflow: hidden;
     border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));
-    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));
+    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-surface-sunken, #ebeee9));
     width: 100%;
   }
 
@@ -638,7 +640,7 @@
     height: 100%;
     width: 100%;
     border-radius: inherit;
-    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));
+    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500, #429797));
     transform-origin: left center;
     transform: scaleX(var(--_value-ratio, 0));
     transition: transform var(--hx-transition-fast, 150ms ease);
@@ -653,19 +655,19 @@
   /* ─── Variant Colors ─── */
 
   .progress-bar--default .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);
+    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500, #429797);
   }
 
   .progress-bar--success .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-success-700);
+    --hx-progress-bar-indicator-bg: var(--hx-color-success-700, #146831);
   }
 
   .progress-bar--warning .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);
+    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500, #c2711c);
   }
 
   .progress-bar--danger .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-error-500);
+    --hx-progress-bar-indicator-bg: var(--hx-color-error-500, #e5493e);
   }
 
   /* ─── Indeterminate Animation ─── */
@@ -741,14 +743,14 @@
 
   .progress-ring__track {
     fill: none;
-    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #e2e8f0));
+    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   /* ─── Indicator ─── */
 
   .progress-ring__indicator {
     fill: none;
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #2563eb));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #429797));
     stroke-linecap: round;
     transition: stroke-dashoffset var(--hx-transition-base, 300ms ease);
   }
@@ -756,15 +758,15 @@
   /* ─── Variant Colors ─── */
 
   :host([variant='success']) .progress-ring__indicator {
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #16a34a));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #3b9e58));
   }
 
   :host([variant='warning']) .progress-ring__indicator {
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #d97706));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #c2711c));
   }
 
   :host([variant='danger']) .progress-ring__indicator {
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #dc2626));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #e5493e));
   }
 
   /* ─── Indeterminate Animation ─── */
@@ -853,7 +855,7 @@
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-family: var(--hx-progress-ring-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0d1825));
     pointer-events: none;
   }
 
@@ -888,7 +890,7 @@
     flex-direction: column;
     gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
     font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
-    color: var(--hx-stat-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-stat-color, var(--hx-color-text-strong, #202b39));
   }
 
   /* ─── Size Variants ─── */
@@ -932,13 +934,13 @@
   }
 
   .stat__value {
-    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-stat-value-color, var(--hx-color-text-primary, #0d1825));
   }
 
   /* ─── Label ─── */
 
   .stat__label {
-    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-stat-label-color, var(--hx-color-text-muted, #4a5362));
     font-weight: var(--hx-font-weight-normal, 400);
   }
 
@@ -947,7 +949,7 @@
   .stat__icon {
     display: flex;
     align-items: center;
-    color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #429797));
     flex-shrink: 0;
   }
 
@@ -964,13 +966,13 @@
   }
 
   .stat__trend--up {
-    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #166534));
-    background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #f0fdf4));
+    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #146831));
+    background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #eafaec));
   }
 
   .stat__trend--down {
-    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #991b1b));
-    background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fef2f2));
+    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #a21312));
+    background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fff2f0));
   }
 
   .stat__trend-arrow {
@@ -1039,7 +1041,7 @@
     gap: var(--hx-space-2, 0.5rem);
     position: relative;
     flex-shrink: 0;
-    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #cbd5e1));
+    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #b6bfb9));
     /* Default size (md) — always defined so .indicator never collapses to 0x0 */
     --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
   }
@@ -1103,7 +1105,7 @@
       --hx-status-indicator-label-font-size,
       var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))
     );
-    color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-status-indicator-label-color, var(--hx-color-text-strong, #202b39));
     line-height: 1;
     white-space: nowrap;
   }
@@ -1139,23 +1141,23 @@
   /* ─── Status Colors ─── */
 
   :host([status='online']) {
-    --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500));
+    --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500, #3b9e58));
   }
 
   :host([status='offline']) {
-    --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400));
+    --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400, #8e9c98));
   }
 
   :host([status='away']) {
-    --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500));
+    --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500, #c2711c));
   }
 
   :host([status='busy']) {
-    --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500));
+    --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500, #e5493e));
   }
 
   :host([status='unknown']) {
-    --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
+    --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300, #b6bfb9));
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
@@ -1190,8 +1192,8 @@
     gap: var(--hx-space-3, 0.75rem);
     padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
     border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-toast-bg, var(--hx-color-surface-inverse, #0d1825));
+    color: var(--hx-toast-color, var(--hx-color-text-inverse, #ffffff));
     font-family: var(--hx-toast-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -1216,24 +1218,43 @@
 
   /* ─── Variant overrides ─── */
 
+  /*
+   * Toast variants paint on darker brand fills (primary-600/success-700/
+   * error-600) because the lighter -500 fills can't pass AA against white
+   * text in the precision-cool palette. The neutral-900 on-{role} tokens
+   * are tuned for the lighter -500 surfaces and would fail here (e.g.
+   * neutral-900 on primary-600 = 3.07:1), so the on-{role}-strong tokens
+   * (neutral-0, no dark-mode flip) keep fg legible on the darker fills.
+   * - text.on-primary-strong on info.bg-strong (primary-600, #0F7078) = 5.82:1
+   * - text.on-success-strong on success.bg-strong (success-700, #146831) = 6.88:1
+   *   (success-600 #0E8A4A on white = 4.42:1 — drifts under AA at 14px)
+   * - text.on-error-strong   on danger.bg-strong  (error-600, #C92A2A) = 5.46:1
+   * - text.on-warning        on warning.bg-strong (warning-500, #C2711C) = 4.83:1
+   *   (warning stays on the lighter -500 surface so on-warning works)
+   *
+   * 3.2.1 token-cascade: bg variants now route through surface.{role}-strong
+   * semantics; fg variants route through text.on-{role}-strong (or on-warning
+   * for the warning variant). Component-tier tokens are NOT bypassed — the
+   * --hx-toast-bg / --hx-toast-color slots remain the single override point.
+   */
   .toast--success {
-    --hx-toast-bg: var(--hx-color-success-600, #15803d);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-bg: var(--hx-color-surface-success-strong, #146831);
+    --hx-toast-color: var(--hx-color-text-on-success-strong, #ffffff);
   }
 
   .toast--warning {
-    --hx-toast-bg: var(--hx-color-warning-500, #d97706);
-    --hx-toast-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-toast-bg: var(--hx-color-surface-warning-strong, #c2711c);
+    --hx-toast-color: var(--hx-color-text-on-warning, #0d1825);
   }
 
   .toast--danger {
-    --hx-toast-bg: var(--hx-color-error-600, #b91c1c);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-bg: var(--hx-color-surface-danger-strong, #c92a2a);
+    --hx-toast-color: var(--hx-color-text-on-error-strong, #ffffff);
   }
 
   .toast--info {
-    --hx-toast-bg: var(--hx-color-primary-600, #1d4ed8);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-bg: var(--hx-color-surface-info-strong, #0f7078);
+    --hx-toast-color: var(--hx-color-text-on-primary-strong, #ffffff);
   }
 
   /* ─── Severity Label (WCAG 1.4.1) ─── */
@@ -1326,9 +1347,16 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Sole owner: bespoke per-class HC overrides on .toast and .toast__close.
+     The shared forcedColorsSurface mixin was dropped in 3.2.1 (XOR rule);
+     this block now carries the surface contract the mixin used to provide
+     (background:Canvas + color:CanvasText + border:1px solid CanvasText)
+     plus the per-class affordances the mixin never touched. */
 
   @media (forced-colors: active) {
     .toast {
+      background: Canvas;
+      color: CanvasText;
       border: 1px solid CanvasText;
     }