@helixui/library 3.1.0 → 3.2.0-next.102

package/dist/css/helix-forms.css

@@ -60,9 +60,9 @@
     width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     border: var(--hx-border-width-medium, 2px) solid
-      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-checkbox-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
       border-color var(--hx-transition-fast, 150ms ease),
@@ -73,38 +73,35 @@
   /* ─── Focus Ring ─── */
 
   .checkbox__input:focus-visible ~ .checkbox__box {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-checkbox-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-      );
-    outline-offset: var(--hx-focus-ring-offset, 2px);
+    outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
+      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
   }
 
   /* ─── Checked State ─── */
 
   .checkbox--checked .checkbox__box {
-    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
-    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
+    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
   }
 
   /* ─── Indeterminate State ─── */
 
   .checkbox--indeterminate .checkbox__box {
-    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
-    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
+    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
   }
 
   /* ─── Error State ─── */
 
   .checkbox--error .checkbox__box {
-    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
   }
 
   .checkbox--error.checkbox--checked .checkbox__box,
   .checkbox--error.checkbox--indeterminate .checkbox__box {
-    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
-    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
+    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
   }
 
   /* ─── Hover ─── */
@@ -113,7 +110,7 @@
   .checkbox__control:hover .checkbox__box {
     border-color: var(
       --hx-checkbox-hover-border-color,
-      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))
+      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #429797))
     );
   }
 
@@ -122,7 +119,7 @@
   }
 
   .checkbox--error .checkbox__control:hover .checkbox__box {
-    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
   }
 
   /* ─── Checkmark Icon ─── */
@@ -132,7 +129,7 @@
     width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
     height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
     fill: none;
-    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));
+    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
     stroke-width: 2.5;
     stroke-linecap: round;
     stroke-linejoin: round;
@@ -151,14 +148,14 @@
   .checkbox__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     user-select: none;
     -webkit-user-select: none;
   }
 
   .checkbox__required-marker {
-    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -166,7 +163,7 @@
 
   .checkbox__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
     padding-inline-start: calc(
       var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
@@ -175,7 +172,7 @@
 
   .checkbox__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal, 1.5);
     padding-inline-start: calc(
       var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
@@ -319,14 +316,14 @@
     gap: var(--hx-space-1);
     font-size: var(--hx-font-size-sm);
     font-weight: var(--hx-font-weight-medium);
-    color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-checkbox-group-label-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
     padding: 0;
     margin-bottom: var(--hx-space-1);
   }
 
   .fieldset__required-marker {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold);
   }
 
@@ -346,20 +343,20 @@
   /* ─── Error State ─── */
 
   .fieldset--error .fieldset__legend {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
   }
 
   /* ─── Help Text & Error Messages ─── */
 
   .fieldset__help-text {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-neutral-500));
+    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-text-muted));
     line-height: var(--hx-line-height-normal);
   }
 
   .fieldset__error {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal);
   }
 
@@ -410,18 +407,21 @@
     align-items: center;
     gap: var(--hx-space-2, 0.5rem);
     padding: var(--hx-space-1, 0.25rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: var(--hx-color-neutral-0, #ffffff);
     cursor: pointer;
     transition: border-color var(--hx-transition-fast, 150ms ease);
   }
   .trigger:hover:not([disabled]) {
-    border-color: var(--hx-color-primary-500, #2563eb);
+    border-color: var(
+      --hx-color-picker-trigger-hover-border-color,
+      var(--hx-color-primary-500, #429797)
+    );
   }
   :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500));
+      var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
   .trigger-swatch {
@@ -436,7 +436,7 @@
   }
   .trigger-label {
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-neutral-700, #313e4b);
     font-family: var(--hx-font-family-mono, monospace);
     white-space: nowrap;
   }
@@ -446,7 +446,7 @@
     top: calc(100% + 4px);
     left: 0;
     background: var(--hx-color-neutral-0, #ffffff);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
     border-radius: var(--hx-border-radius-lg, 0.5rem);
     box-shadow: 0 8px 24px
       var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, 0.15)));
@@ -460,7 +460,7 @@
   :host([inline]) .panel {
     position: static;
     box-shadow: none;
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
     border-radius: var(--hx-border-radius-lg, 0.5rem);
   }
   .gradient-grid {
@@ -573,12 +573,12 @@
   .format-btn {
     flex-shrink: 0;
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    background: var(--hx-color-neutral-100, #f1f5f9);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    background: var(--hx-color-neutral-100, #ebeee9);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-600, #475569);
+    color: var(--hx-color-neutral-600, #4a5362);
     text-transform: uppercase;
     font-weight: var(--hx-font-weight-semibold, 600);
     letter-spacing: 0.05em;
@@ -587,18 +587,22 @@
     flex: 1;
     min-width: 0;
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     font-family: var(--hx-font-family-mono, monospace);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-900, #0f172a);
+    color: var(--hx-color-neutral-900, #0d1825);
     background: var(--hx-color-neutral-0, #ffffff);
     outline: none;
   }
   .color-input:focus-visible {
-    border-color: var(--hx-focus-ring-color, var(--hx-color-primary-500));
+    border-color: var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     box-shadow: 0 0 0 2px
-      color-mix(in srgb, var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%, transparent);
+      color-mix(
+        in srgb,
+        var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078)) 20%,
+        transparent
+      );
   }
   .input-preview {
     width: 24px;
@@ -695,11 +699,11 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-combobox-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__required-marker {
-    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
   .field__input-wrapper {
@@ -707,38 +711,32 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
   }
   .field__input-wrapper:focus-within {
-    border-color: var(
-      --hx-combobox-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
+    border-color: var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(
-            --hx-combobox-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
+        var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
   .field--error .field__input-wrapper {
-    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e));
   }
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626))
+        var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -748,7 +746,7 @@
     display: flex;
     align-items: center;
     padding: 0 var(--hx-space-2, 0.5rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
     flex-shrink: 0;
   }
   .field__input {
@@ -761,11 +759,11 @@
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
-    color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-combobox-color, var(--hx-color-text-strong, #202b39));
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
   }
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #66787b);
   }
   .field__input--sm {
     min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
@@ -784,7 +782,7 @@
     justify-content: center;
     margin-inline-end: var(--hx-space-2, 0.5rem);
     flex-shrink: 0;
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #66787b);
   }
   .field__clear-button {
     width: 1.25rem;
@@ -797,11 +795,11 @@
     transition: color var(--hx-transition-fast, 150ms ease);
   }
   .field__clear-button:hover {
-    color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-text-strong, #202b39);
   }
   .field__clear-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
   .field__loading-indicator {
@@ -832,13 +830,13 @@
     left: 0;
     right: 0;
     z-index: var(--hx-z-index-dropdown, 1000);
-    background-color: var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-combobox-listbox-shadow,
-      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 12%, transparent)
+      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1825) 12%, transparent)
     );
     max-height: var(--hx-combobox-listbox-max-height, 16rem);
     overflow: hidden;
@@ -859,27 +857,27 @@
     gap: var(--hx-space-2, 0.5rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-combobox-color, var(--hx-color-text-strong, #202b39));
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     transition: background-color var(--hx-transition-fast, 150ms ease);
   }
   .field__option:hover {
-    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
   }
   .field__option--selected {
-    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbf0f0));
     font-weight: var(--hx-font-weight-medium, 500);
   }
   .field__option--focused {
-    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);
   }
   .field__option--focused.field__option--selected {
-    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbf0f0));
   }
   .field__option--disabled {
     opacity: var(--hx-opacity-disabled, 0.5);
@@ -895,7 +893,7 @@
   .field__no-options {
     padding: var(--hx-space-3, 0.75rem);
     text-align: center;
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #66787b);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
   .field__sr-only {
@@ -915,10 +913,10 @@
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
   }
   .field__error {
-    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #c92a2a));
   }
   @media (prefers-reduced-motion: reduce) {
     .field__input-wrapper,
@@ -1023,8 +1021,8 @@
     gap: var(--hx-space-1, 0.25rem);
     padding: 0 var(--hx-space-1, 0.25rem) 0 var(--hx-space-2, 0.5rem);
     height: 1.5rem;
-    background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));
-    color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e3a8a));
+    background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbf0f0));
+    color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #07494a));
     border-radius: var(--hx-border-radius-full, 9999px);
     font-size: var(--hx-font-size-sm, 0.875rem);
     white-space: nowrap;
@@ -1055,11 +1053,11 @@
   }
   .field__chip-remove:hover {
     opacity: 1;
-    background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe));
+    background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bce1e1));
   }
   .field__chip-remove:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -1104,12 +1102,12 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__required-marker {
-    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -1121,9 +1119,9 @@
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -1131,32 +1129,26 @@
   }
 
   .field__input-wrapper:focus-within {
-    border-color: var(
-      --hx-date-picker-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
+    border-color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(
-            --hx-date-picker-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
+        var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e));
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626))
+        var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -1174,7 +1166,7 @@
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-date-picker-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-date-picker-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
@@ -1182,7 +1174,7 @@
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #66787b);
   }
 
   .field__input:disabled {
@@ -1200,9 +1192,9 @@
     padding: 0 var(--hx-space-3, 0.75rem);
     border: none;
     border-left: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #66787b));
     background: transparent;
-    color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #4a5362));
     cursor: pointer;
     flex-shrink: 0;
     transition: color var(--hx-transition-fast, 150ms ease);
@@ -1210,24 +1202,17 @@
   }
 
   .field__trigger:focus-visible {
-    color: var(
-      --hx-date-picker-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
+    color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     background-color: color-mix(
       in srgb,
-      var(
-          --hx-date-picker-focus-ring-color,
-          var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-        )
-        8%,
+      var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078)) 8%,
       transparent
     );
   }
 
   .field__trigger:hover:not(:disabled) {
-    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #334155));
-    background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
+    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #202b39));
+    background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0d1825) 4%, transparent);
   }
 
   .field__trigger:disabled {
@@ -1244,9 +1229,9 @@
     left: 0;
     z-index: var(--hx-z-index-dropdown, 1000);
     min-width: var(--hx-date-picker-calendar-min-width, 18rem);
-    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
     box-shadow: var(
       --hx-date-picker-calendar-shadow,
@@ -1305,22 +1290,19 @@
   }
 
   .calendar__nav-btn {
-    color: var(--hx-color-neutral-600, #475569);
+    color: var(--hx-color-text-secondary, #313e4b);
     font-size: var(--hx-font-size-lg, 1.125rem);
     line-height: 1;
   }
 
   .calendar__nav-btn:hover {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
-    color: var(--hx-color-neutral-900, #0f172a);
+    background-color: var(--hx-date-picker-day-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+    color: var(--hx-color-text-primary, #0d1825);
   }
 
   :is(.calendar__nav-btn, .calendar__day):focus-visible {
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      var(
-        --hx-date-picker-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-      );
+      var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     z-index: 1;
   }
 
@@ -1333,7 +1315,7 @@
   .calendar__month-label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-text-strong, #202b39);
     flex: 1;
     text-align: center;
   }
@@ -1358,7 +1340,7 @@
     height: var(--hx-size-8, 2rem);
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
@@ -1368,30 +1350,30 @@
      ============================================================ */
 
   .calendar__day {
-    color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-text-strong, #202b39);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     position: relative;
   }
 
   .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
-    color: var(--hx-color-neutral-900, #0f172a);
+    background-color: var(--hx-date-picker-day-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+    color: var(--hx-color-text-primary, #0d1825);
   }
 
   .calendar__day--selected {
-    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
   }
 
   .calendar__day--selected:hover {
-    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8));
+    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #0f7078));
   }
 
   .calendar__day--today:not(.calendar__day--selected) {
     font-weight: var(--hx-font-weight-bold, 700);
-    color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));
+    color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #0f7078));
   }
 
   .calendar__day--today:not(.calendar__day--selected)::after {
@@ -1439,11 +1421,11 @@
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
   }
 
   .field__error {
-    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #c92a2a));
   }
 
   /* ============================================================
@@ -1549,13 +1531,13 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-field-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
   }
 
   .field__required-marker {
-    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -1599,24 +1581,24 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   /* ─── Error State ─── */
 
   .field--error .field__label {
-    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
   }
 
   .field--error .field__control {
-    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #dc2626));
+    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #e5493e));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -1667,20 +1649,20 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-field-label-color, var(--hx-color-text-strong, #313e4b));
     line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));
     font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));
   }
 
   .required-indicator {
-    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
   .optional-indicator {
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-normal, 400);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #66787b);
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -1739,7 +1721,7 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-text-strong, #202b39);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -1754,9 +1736,9 @@
     min-height: var(--hx-space-32, 8rem);
     padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
     border: var(--hx-border-width-thin, 1px) dashed
-      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
-    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f5f8f3));
     cursor: pointer;
     text-align: center;
     transition:
@@ -1764,38 +1746,32 @@
       background-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
     user-select: none;
-    color: var(--hx-color-neutral-600, #475569);
+    color: var(--hx-color-text-secondary, #313e4b);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
   .dropzone:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-file-upload-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
-      );
+      var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
-    border-color: var(
-      --hx-file-upload-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-500))
-    );
+    border-color: var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
   }
 
   .dropzone--drag-over {
-    border-color: var(--hx-color-primary-500, #2563eb);
+    border-color: var(--hx-color-primary-500, #429797);
     background-color: var(
       --hx-file-upload-dropzone-active-bg,
       color-mix(
         in srgb,
-        var(--hx-color-primary-500, #2563eb) 8%,
-        var(--hx-color-neutral-0, #ffffff)
+        var(--hx-color-primary-500, #429797) 8%,
+        var(--hx-color-surface-default, #ffffff)
       )
     );
     border-style: solid;
   }
 
   .dropzone--error {
-    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #e5493e));
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -1840,9 +1816,9 @@
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5);
     border-radius: var(--hx-border-radius-md, 0.375rem);
-    background-color: var(--hx-color-neutral-0, #ffffff);
+    background-color: var(--hx-color-surface-default, #ffffff);
   }
 
   .file-item__row {
@@ -1855,7 +1831,7 @@
     flex: 1;
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-text-strong, #202b39);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1864,7 +1840,7 @@
   .file-item__size {
     flex-shrink: 0;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
   }
 
   .file-item__remove {
@@ -1878,7 +1854,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
     cursor: pointer;
     line-height: 1;
     transition:
@@ -1887,16 +1863,13 @@
   }
 
   .file-item__remove:hover {
-    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
-    background-color: color-mix(in srgb, var(--hx-color-error-500, #dc2626) 8%, transparent);
+    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));
+    background-color: color-mix(in srgb, var(--hx-color-error-500, #e5493e) 8%, transparent);
   }
 
   .file-item__remove:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-file-upload-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
-      );
+      var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -1911,7 +1884,7 @@
   .progress-track {
     width: 100%;
     height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));
-    background-color: var(--hx-color-neutral-200, #e2e8f0);
+    background-color: var(--hx-color-border-default, #d6dbd5);
     border-radius: var(--hx-border-radius-full, 9999px);
     overflow: hidden;
   }
@@ -1919,7 +1892,7 @@
   .progress-bar {
     height: 100%;
     width: 100%;
-    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #2563eb));
+    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #429797));
     border-radius: inherit;
     transform-origin: left center;
     transform: scaleX(var(--_progress-ratio, 0));
@@ -1950,7 +1923,7 @@
 
   .field__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -2012,7 +1985,7 @@
     font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
     line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
-    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-help-text-color, var(--hx-color-text-muted, #4a5362));
     margin: 0;
   }
 
@@ -2029,25 +2002,25 @@
   /* ─── Variant: default ─── */
 
   .help-text--default {
-    --hx-help-text-color: var(--hx-color-neutral-500, #64748b);
+    --hx-help-text-color: var(--hx-color-text-muted, #4a5362);
   }
 
   /* ─── Variant: error ─── */
 
   .help-text--error {
-    --hx-help-text-color: var(--hx-color-error-600, #b91c1c);
+    --hx-help-text-color: var(--hx-color-error-600, #c92a2a);
   }
 
   /* ─── Variant: warning ─── */
 
   .help-text--warning {
-    --hx-help-text-color: var(--hx-color-warning-700, #92400e);
+    --hx-help-text-color: var(--hx-color-warning-700, #804605);
   }
 
   /* ─── Variant: success ─── */
 
   .help-text--success {
-    --hx-help-text-color: var(--hx-color-success-700, #166534);
+    --hx-help-text-color: var(--hx-color-success-700, #146831);
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -2102,12 +2075,12 @@
     gap: var(--hx-space-1);
     font-size: var(--hx-font-size-sm);
     font-weight: var(--hx-font-weight-medium);
-    color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-number-input-label-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
   }
 
   .field__required-marker {
-    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold);
   }
 
@@ -2117,9 +2090,9 @@
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
     border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));
-    background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-number-input-bg, var(--hx-color-surface-default));
     transition:
       border-color var(--hx-transition-fast),
       box-shadow var(--hx-transition-fast);
@@ -2143,18 +2116,18 @@
   /* ─── Error State ─── */
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
     /* Fallback for Safari < 16.2 (no color-mix support) */
     box-shadow: 0 0 0 var(--hx-focus-ring-width)
-      var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+      var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
     box-shadow: 0 0 0 var(--hx-focus-ring-width)
       color-mix(
         in srgb,
-        var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))
+        var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity) * 100%),
         transparent
       );
@@ -2167,7 +2140,7 @@
     display: flex;
     align-items: center;
     padding: 0 var(--hx-space-3);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     flex-shrink: 0;
   }
 
@@ -2179,7 +2152,7 @@
     outline: none;
     background: transparent;
     font-family: inherit;
-    color: var(--hx-number-input-color, var(--hx-color-neutral-800));
+    color: var(--hx-number-input-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
     width: 100%;
     /* Size: md (default) */
@@ -2189,7 +2162,7 @@
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400);
+    color: var(--hx-color-text-placeholder);
   }
 
   .field__input:disabled {
@@ -2228,7 +2201,7 @@
     flex-direction: column;
     flex-shrink: 0;
     border-inline-start: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn {
@@ -2238,7 +2211,7 @@
     background: transparent;
     border: none;
     cursor: pointer;
-    color: var(--hx-color-neutral-600);
+    color: var(--hx-color-text-secondary);
     padding: 0;
     flex: 1;
     min-width: var(--hx-size-8);
@@ -2250,12 +2223,12 @@
 
   .field__stepper-btn:not(:last-child) {
     border-bottom: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn:hover:not(:disabled) {
-    background-color: var(--hx-color-neutral-50);
-    color: var(--hx-color-neutral-800);
+    background-color: var(--hx-color-surface-raised);
+    color: var(--hx-color-text-strong);
   }
 
   /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
@@ -2294,13 +2267,13 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     line-height: var(--hx-line-height-normal);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal);
   }
 
@@ -2427,14 +2400,14 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-radio-group-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     padding: 0;
     margin-bottom: var(--hx-space-1, 0.25rem);
   }
 
   .fieldset__required-marker {
-    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -2454,20 +2427,20 @@
   /* ─── Error State ─── */
 
   .fieldset--error .fieldset__legend {
-    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
   }
 
   /* ─── Help Text & Error Messages ─── */
 
   .fieldset__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #66787b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .fieldset__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -2537,7 +2510,7 @@
     justify-content: center;
     position: relative;
     cursor: pointer;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
+    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #66787b));
     line-height: 1;
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
@@ -2545,15 +2518,14 @@
   }
 
   .symbol:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 
   .symbol--full,
   .symbol--half {
-    color: var(--hx-rating-color, var(--hx-color-warning-400, #fbbf24));
+    color: var(--hx-rating-color, var(--hx-color-warning-400, #da904f));
   }
 
   .symbol--disabled {
@@ -2562,7 +2534,7 @@
 
   .base:not(.base--readonly) .symbol:hover {
     transform: scale(1.15);
-    color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #fcd34d));
+    color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #eeb383));
   }
 
   /* ─── Half-Star Layout ─── */
@@ -2588,7 +2560,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
+    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #66787b));
     /* Clip to right 50% for the empty half */
     clip-path: inset(0 0 0 50%);
   }
@@ -2645,36 +2617,36 @@
     display: block;
 
     /* Background & foreground */
-    --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
-    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #1e293b));
-    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #94a3b8));
+    --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
+    --_color: var(--hx-select-color, var(--hx-color-text-strong, #202b39));
+    --_placeholder-color: var(
+      --hx-select-placeholder-color,
+      var(--hx-color-text-placeholder, #66787b)
+    );
 
     /* Label */
-    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));
+    --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #202b39));
 
     /* Border */
-    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #66787b));
     --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
 
     /* Focus ring */
-    --_focus-ring-color: var(
-      --hx-select-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
+    --_focus-ring-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
 
     /* Error */
-    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));
+    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #e5493e));
 
     /* Chevron */
-    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #64748b));
+    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #4a5362));
     --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
 
     /* Listbox */
-    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
-    --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-surface-default, #ffffff));
+    --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
     --_option-selected-bg: var(
       --hx-select-option-selected-bg,
-      var(--hx-color-primary-100, #dbeafe)
+      var(--hx-color-primary-100, #dbf0f0)
     );
 
     /* Typography */
@@ -2709,7 +2681,7 @@
   }
 
   .field__required-marker {
-    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-select-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -2872,8 +2844,7 @@
 
   .field__option--focused {
     background-color: var(--_option-hover-bg);
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--_focus-ring-color, var(--hx-color-primary-500));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--_focus-ring-color);
     outline-offset: var(--hx-select-option-focus-ring-offset, -2px);
   }
 
@@ -2918,11 +2889,11 @@
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
   }
 
   .field__error {
-    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-select-error-color, var(--hx-color-error-text, #c92a2a));
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -3049,14 +3020,14 @@
   .slider__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-slider-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .slider__value-display {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #313e4b));
     line-height: var(--hx-line-height-normal, 1.5);
     font-variant-numeric: tabular-nums;
     min-width: var(--hx-size-8, 2rem);
@@ -3074,7 +3045,7 @@
     position: relative;
     width: 100%;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e2e8f0));
+    background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #d6dbd5));
     overflow: visible;
   }
 
@@ -3117,7 +3088,7 @@
     height: 100%;
     width: 100%;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #2563eb));
+    background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #429797));
     pointer-events: none;
     transform-origin: left center;
     transform: scaleX(var(--_fill-ratio, 0));
@@ -3196,9 +3167,9 @@
     left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));
     transform: translate(-50%, -50%);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-thumb-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-slider-thumb-border-width, 2px) solid
-      var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #2563eb));
+      var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #429797));
     box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
     pointer-events: none;
     transition:
@@ -3215,10 +3186,7 @@
   .slider__input:focus-visible ~ .slider__thumb-visual {
     box-shadow:
       0 0 0 var(--hx-focus-ring-width, 2px)
-        var(
-          --hx-slider-focus-ring-color,
-          var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-        ),
+        var(--hx-slider-focus-ring-color, var(--hx-focus-ring-color, #0f7078)),
       var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
   }
 
@@ -3274,7 +3242,7 @@
     top: 0;
     width: var(--hx-border-width-thin, 1px);
     height: 100%;
-    background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #94a3b8));
+    background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #66787b));
     transform: translateX(-50%);
   }
 
@@ -3284,7 +3252,7 @@
     display: flex;
     justify-content: space-between;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
     margin-top: var(--hx-space-0-5, 0.125rem);
   }
@@ -3293,18 +3261,21 @@
 
   .slider__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-slider-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   /* ─── Disabled state ─── */
 
   .slider--disabled .slider__fill {
-    background-color: var(--hx-color-neutral-400, #94a3b8);
+    background-color: var(--hx-slider-disabled-fill-bg, var(--hx-color-border-strong, #66787b));
   }
 
   .slider--disabled .slider__thumb-visual {
-    border-color: var(--hx-color-neutral-400, #94a3b8);
+    border-color: var(
+      --hx-slider-disabled-thumb-border-color,
+      var(--hx-color-border-strong, #66787b)
+    );
   }
 /* ── hx-switch ── */
 :host {
@@ -3349,7 +3320,7 @@
     border: none;
     padding: 0;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #cbd5e1));
+    background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #66787b));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     outline: none;
@@ -3359,15 +3330,20 @@
 
   .switch__track:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-switch-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-      );
+      var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .switch--checked .switch__track {
-    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));
+    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #429797));
+  }
+
+  .switch:not(.switch--checked) .switch__track:hover {
+    background-color: var(--hx-switch-track-hover-bg, var(--hx-color-border-strong, #66787b));
+  }
+
+  .switch--checked .switch__track:hover {
+    background-color: var(--hx-switch-track-checked-hover-bg, var(--hx-color-primary-600, #0f7078));
   }
 
   /* --- Thumb --- */
@@ -3375,7 +3351,7 @@
   .switch__thumb {
     position: absolute;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-switch-thumb-bg, var(--hx-color-surface-default, #ffffff));
     box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
     transition: transform var(--hx-transition-fast, 150ms ease);
   }
@@ -3445,7 +3421,7 @@
   .switch__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-switch-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
     user-select: none;
@@ -3453,7 +3429,7 @@
   }
 
   .switch__required-marker {
-    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-switch-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -3461,13 +3437,13 @@
 
   .switch__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .switch__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-switch-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -3540,6 +3516,94 @@
 /* ── hx-text-input ── */
 :host {
     display: block;
+
+    /* ─── Component tokens (3.2.0) ──────────────────────────────────── */
+
+    /* Surface */
+    --_text-input-bg: var(
+      --hx-text-input-bg,
+      var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))
+    );
+    --_text-input-color: var(
+      --hx-text-input-color,
+      var(--hx-input-color, var(--hx-color-text-strong, #202b39))
+    );
+    --_text-input-placeholder-color: var(
+      --hx-text-input-placeholder-color,
+      var(--hx-color-text-placeholder, #66787b)
+    );
+
+    /* Border */
+    --_text-input-border-color: var(
+      --hx-text-input-border-color,
+      var(--hx-input-border-color, var(--hx-color-border-strong, #66787b))
+    );
+    --_text-input-border-color-hover: var(
+      --hx-text-input-border-color-hover,
+      var(--hx-color-border-strong, #66787b)
+    );
+    --_text-input-border-color-focus: var(
+      --hx-text-input-border-color-focus,
+      var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
+    );
+    --_text-input-border-color-invalid: var(
+      --hx-text-input-border-color-invalid,
+      var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))
+    );
+    --_text-input-border-width: var(--hx-text-input-border-width, var(--hx-border-width-thin, 1px));
+    --_text-input-border-radius: var(
+      --hx-text-input-border-radius,
+      var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))
+    );
+
+    /* Spacing */
+    --_text-input-padding-x: var(--hx-text-input-padding-x, var(--hx-space-3, 0.75rem));
+    --_text-input-padding-y: var(--hx-text-input-padding-y, var(--hx-space-2, 0.5rem));
+
+    /* Typography */
+    --_text-input-font-family: var(
+      --hx-text-input-font-family,
+      var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))
+    );
+    --_text-input-font-size: var(--hx-text-input-font-size, var(--hx-font-size-md, 1rem));
+
+    /* Focus ring */
+    --_text-input-focus-ring-color: var(
+      --hx-text-input-focus-ring-color,
+      var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
+    );
+    --_text-input-focus-ring-width: var(
+      --hx-text-input-focus-ring-width,
+      var(--hx-focus-ring-width, 2px)
+    );
+    --_text-input-focus-ring-offset: var(
+      --hx-text-input-focus-ring-offset,
+      var(--hx-focus-ring-offset, 0px)
+    );
+
+    /* Disabled */
+    --_text-input-disabled-bg: var(
+      --hx-text-input-disabled-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
+    --_text-input-disabled-color: var(
+      --hx-text-input-disabled-color,
+      var(--hx-color-text-disabled, #8e9c98)
+    );
+
+    /* Label / help / error */
+    --_text-input-label-color: var(
+      --hx-text-input-label-color,
+      var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
+    );
+    --_text-input-help-text-color: var(
+      --hx-text-input-help-text-color,
+      var(--hx-color-text-muted, #4a5362)
+    );
+    --_text-input-error-color: var(
+      --hx-text-input-error-color,
+      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
+    );
   }
 
   :host([disabled]) {
@@ -3554,36 +3618,13 @@
    * These complement the :focus-within rules on .field__input-wrapper and are
    * exposed as theming hooks for consumers who target the host element.
    */
-  :host([focused]) .field__input-wrapper {
-    border-color: var(
-      --hx-input-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      color-mix(
-        in srgb,
-        var(
-            --hx-input-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
-        transparent
-      );
-  }
-
+  :host([focused]) .field__input-wrapper,
   :host([focused-visible]) .field__input-wrapper {
-    border-color: var(
-      --hx-input-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+    border-color: var(--_text-input-border-color-focus);
+    box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
       color-mix(
         in srgb,
-        var(
-            --hx-input-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -3596,7 +3637,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
+    font-family: var(--_text-input-font-family);
   }
 
   /* ─── Label ─── */
@@ -3611,12 +3652,12 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--_text-input-label-color);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__required-marker {
-    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--_text-input-error-color);
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -3625,29 +3666,25 @@
   .field__input-wrapper {
     display: flex;
     align-items: center;
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
-    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--_text-input-border-width) solid var(--_text-input-border-color);
+    border-radius: var(--_text-input-border-radius);
+    background-color: var(--_text-input-bg);
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
     overflow: hidden;
   }
 
+  .field__input-wrapper:hover {
+    border-color: var(--_text-input-border-color-hover);
+  }
+
   .field__input-wrapper:focus-within {
-    border-color: var(
-      --hx-input-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+    border-color: var(--_text-input-border-color-focus);
+    box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
       color-mix(
         in srgb,
-        var(
-            --hx-input-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -3655,16 +3692,15 @@
   /* ─── Error State ─── */
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--_text-input-border-color-invalid);
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+    border-color: var(--_text-input-border-color-invalid);
+    box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
       color-mix(
         in srgb,
-        var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_text-input-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -3675,17 +3711,17 @@
   .field__suffix {
     display: flex;
     align-items: center;
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
     flex-shrink: 0;
   }
 
   /* Only add padding when slot has content — avoids phantom space on empty slots */
   .field__prefix--filled {
-    padding: 0 var(--hx-space-3, 0.75rem);
+    padding: 0 var(--_text-input-padding-x);
   }
 
   .field__suffix--filled {
-    padding: 0 var(--hx-space-3, 0.75rem);
+    padding: 0 var(--_text-input-padding-x);
   }
 
   /* ─── Native Input ─── */
@@ -3695,17 +3731,17 @@
     border: none;
     outline: none;
     background: transparent;
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    padding: var(--_text-input-padding-y) var(--_text-input-padding-x);
     font-family: inherit;
-    font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
+    font-size: var(--_text-input-font-size);
+    color: var(--_text-input-color);
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--_text-input-placeholder-color);
   }
 
   .field__input:focus-visible {
@@ -3714,6 +3750,12 @@
 
   .field__input:disabled {
     cursor: not-allowed;
+    background-color: var(--_text-input-disabled-bg);
+    color: var(--_text-input-disabled-color);
+  }
+
+  :host([disabled]) .field__input-wrapper {
+    background-color: var(--_text-input-disabled-bg);
   }
 
   /* ─── Size Variants ─── */
@@ -3721,7 +3763,7 @@
   .field--size-sm .field__input {
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
     min-height: var(--hx-size-8, 2rem);
-    font-size: var(--hx-input-sm-font-size, 0.875rem);
+    font-size: var(--hx-text-input-sm-font-size, var(--hx-input-sm-font-size, 0.875rem));
   }
 
   .field--size-md .field__input {
@@ -3731,20 +3773,20 @@
   .field--size-lg .field__input {
     padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
     min-height: var(--hx-size-12, 3rem);
-    font-size: var(--hx-input-lg-font-size, 1.125rem);
+    font-size: var(--hx-text-input-lg-font-size, var(--hx-input-lg-font-size, 1.125rem));
   }
 
   /* ─── Help Text & Error Messages ─── */
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--_text-input-help-text-color);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--_text-input-error-color);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -3756,7 +3798,13 @@
     }
   }
 
-  /* ─── High Contrast Mode (forced-colors) ─── */
+  /* ─── High Contrast Mode (forced-colors) ───
+   *
+   * Bespoke block — sole owner of forced-colors deference for hx-text-input.
+   * Covers wrapper/input/placeholder/focus/disabled/error/label/help-text;
+   * strictly more than forcedColorsField. The mixin is intentionally NOT
+   * composed (XOR rule — see styles/forced-colors.ts COMPOSITION RULES).
+   */
 
   @media (forced-colors: active) {
     .field__input-wrapper {
@@ -3816,6 +3864,39 @@
 /* ── hx-textarea ── */
 :host {
     display: block;
+
+    /* ─── Component tokens (3.2.0) ──────────────────────────────────── */
+    --_textarea-bg: var(
+      --hx-textarea-bg,
+      var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))
+    );
+    --_textarea-color: var(
+      --hx-textarea-color,
+      var(--hx-input-color, var(--hx-color-text-strong, #202b39))
+    );
+    --_textarea-border-color: var(
+      --hx-textarea-border-color,
+      var(--hx-input-border-color, var(--hx-color-border-strong, #66787b))
+    );
+    --_textarea-border-color-focus: var(
+      --hx-textarea-border-color-focus,
+      var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
+    );
+    --_textarea-border-color-invalid: var(
+      --hx-textarea-border-color-invalid,
+      var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))
+    );
+    --_textarea-border-radius: var(
+      --hx-textarea-border-radius,
+      var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))
+    );
+    --_textarea-padding-x: var(--hx-textarea-padding-x, var(--hx-space-3, 0.75rem));
+    --_textarea-padding-y: var(--hx-textarea-padding-y, var(--hx-space-2, 0.5rem));
+    --_textarea-font-size: var(--hx-textarea-font-size, var(--hx-font-size-md, 1rem));
+    --_textarea-placeholder-color: var(
+      --hx-textarea-placeholder-color,
+      var(--hx-color-text-placeholder, #66787b)
+    );
   }
 
   :host([disabled]) {
@@ -3831,7 +3912,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
+    font-family: var(
+      --hx-textarea-font-family,
+      var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))
+    );
   }
 
   /* --- Label --- */
@@ -3846,12 +3930,18 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(
+      --hx-textarea-label-color,
+      var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
+    );
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__required-marker {
-    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(
+      --hx-textarea-error-color,
+      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
+    );
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -3860,10 +3950,9 @@
   .field__textarea-wrapper {
     display: flex;
     flex-direction: column;
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
-    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid var(--_textarea-border-color);
+    border-radius: var(--_textarea-border-radius);
+    background-color: var(--_textarea-bg);
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -3871,18 +3960,11 @@
   }
 
   .field__textarea-wrapper:focus-within {
-    border-color: var(
-      --hx-input-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
+    border-color: var(--_textarea-border-color-focus);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(
-            --hx-input-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_textarea-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -3890,16 +3972,15 @@
   /* --- Error State --- */
 
   .field--error .field__textarea-wrapper {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--_textarea-border-color-invalid);
   }
 
   .field--error .field__textarea-wrapper:focus-within {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--_textarea-border-color-invalid);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_textarea-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -3910,10 +3991,10 @@
     border: none;
     outline: none;
     background: transparent;
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    padding: var(--_textarea-padding-y) var(--_textarea-padding-x);
     font-family: inherit;
-    font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
+    font-size: var(--_textarea-font-size);
+    color: var(--_textarea-color);
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
     width: 100%;
@@ -3921,7 +4002,7 @@
   }
 
   .field__textarea::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--_textarea-placeholder-color);
   }
 
   .field__textarea:focus-visible {
@@ -3959,7 +4040,7 @@
 
   .field__counter {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-textarea-counter-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
     text-align: end;
   }
@@ -3982,13 +4063,16 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-textarea-help-text-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(
+      --hx-textarea-error-color,
+      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
+    );
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -4073,11 +4157,11 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-time-picker-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__required-marker {
-    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
   .field__combobox {
@@ -4085,9 +4169,9 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-time-picker-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -4104,14 +4188,14 @@
       );
   }
   .field--error .field__combobox {
-    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
   }
   .field--error .field__combobox:focus-within {
-    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-time-picker-error-color, var(--hx-color-error-500))
+        var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -4124,14 +4208,14 @@
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-time-picker-color, var(--hx-color-neutral-800));
+    color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
     cursor: text;
   }
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400);
+    color: var(--hx-color-text-placeholder, #66787b);
   }
   .field__input:disabled {
     cursor: not-allowed;
@@ -4143,13 +4227,13 @@
     border: none;
     background: transparent;
     padding: 0 var(--hx-space-3, 0.75rem);
-    color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));
+    color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));
     cursor: pointer;
     height: 100%;
     min-height: var(--hx-size-10, 2.5rem);
     flex-shrink: 0;
     border-inline-start: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
   }
   .field__toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
@@ -4163,9 +4247,9 @@
     inset-inline-start: 0;
     inset-inline-end: 0;
     z-index: var(--hx-z-index-dropdown, 1000);
-    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-time-picker-listbox-shadow,
@@ -4198,23 +4282,29 @@
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-md, 1rem);
     font-family: inherit;
-    color: var(--hx-time-picker-option-color, var(--hx-color-neutral-800));
+    color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #202b39));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__option:hover,
   .field__option--active {
-    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));
-    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700));
+    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
+    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700, #0f6363));
   }
   .field__option--selected {
-    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
-    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));
+    background-color: var(
+      --hx-time-picker-option-selected-bg,
+      var(--hx-color-primary-100, #dbf0f0)
+    );
+    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800, #07494a));
     font-weight: var(--hx-font-weight-medium, 500);
   }
   .field__option--selected.field__option--active {
-    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
+    background-color: var(
+      --hx-time-picker-option-selected-bg,
+      var(--hx-color-primary-100, #dbf0f0)
+    );
   }
   @media (prefers-reduced-motion: reduce) {
     .field__combobox,
@@ -4228,10 +4318,10 @@
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__help-text {
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted, #4a5362);
   }
   .field__error {
-    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
   }
   @media (forced-colors: active) {
     .field__combobox {
@@ -4293,8 +4383,8 @@
     gap: var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
     border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -4312,10 +4402,7 @@
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-toggle-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-      );
+      var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -4353,49 +4440,55 @@
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-toggle-button-border-color: transparent;
   }
 
+  /*
+   * secondary/ghost paint primary text on the surface (white). primary-500
+   * (#429797) on white = 3.43:1 — fails AA at body sizes. shift to
+   * primary-600 (#0F7078) = 6.06:1 — AA pass. border keeps primary-500
+   * for the brand affordance (3:1 non-text contrast still met).
+   */
   .button--secondary {
     --hx-toggle-button-bg: transparent;
-    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
-    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
+    --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
   }
 
   .button--secondary:hover {
-    --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);
+    --hx-toggle-button-bg: var(--hx-color-primary-50, #ebf8f8);
   }
 
   .button--tertiary {
-    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-toggle-button-bg: var(--hx-color-surface-sunken, #ebeee9);
+    --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
     --hx-toggle-button-border-color: transparent;
   }
 
   .button--tertiary:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   .button--ghost {
     --hx-toggle-button-bg: transparent;
-    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
     --hx-toggle-button-border-color: transparent;
   }
 
   .button--ghost:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   .button--outline {
     --hx-toggle-button-bg: transparent;
-    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
-    --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
+    --hx-toggle-button-border-color: var(--hx-color-border-strong, #66787b);
   }
 
   .button--outline:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   /* ─── Pressed State ─── */
@@ -4403,9 +4496,16 @@
   /*
    * Primary: already uses solid primary bg; pressed deepens to primary-700
    * to give clear visual feedback without introducing a new color.
+   *
+   * AA fix: text.on-primary (= neutral-900 #0D1825) on primary-700 (#0F6363)
+   * = 2.54:1 — fails AA. Pin fg at neutral-0 for the darker pressed fill
+   * (neutral-0 on primary-700 = 7.03:1, AAA pass). Mirrors hx-toast
+   * precedent (commit 300e21ab0) and hx-button hover treatment.
+   * Note: secondary.pressed below uses primary-500 and stays at 5.20:1 —
+   * leave it alone.
    */
   .button--primary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1e40af));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #0f6363));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
       var(--hx-color-neutral-0, #ffffff)
@@ -4418,44 +4518,47 @@
    * so the state change is immediately legible.
    */
   .button--secondary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-neutral-0, #ffffff)
+      var(--hx-color-text-on-primary, #ffffff)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);
   }
 
   /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
   .button--tertiary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1e40af)
+      var(--hx-color-primary-700, #0f6363)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
-    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);
+    --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
+    box-shadow: inset 0 0 0 1px var(--hx-color-primary-600, #0f7078);
   }
 
   /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
   .button--ghost.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1e40af)
+      var(--hx-color-primary-700, #0f6363)
     );
     --hx-toggle-button-border-color: transparent;
   }
 
   /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */
   .button--outline.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));
+    --hx-toggle-button-bg: var(
+      --hx-toggle-button-pressed-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-neutral-900, #0f172a)
+      var(--hx-color-text-primary, #0d1825)
     );
-    --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);
-    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);
+    --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);
+    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);
   }
 
   /* ─── Disabled ─── */