@helixui/library 3.1.0 → 3.2.0

package/dist/css/helix-core.css

@@ -23,8 +23,8 @@
     overflow: hidden;
     width: var(--hx-avatar-size);
     height: var(--hx-avatar-size);
-    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));
-    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100, #dbf0f0));
+    color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
     border-radius: var(--hx-avatar-border-radius);
     flex-shrink: 0;
   }
@@ -92,7 +92,7 @@
   .avatar__fallback-icon {
     width: 60%;
     height: 60%;
-    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+    color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
   }
 
   /* ─── Badge Slot ─── */
@@ -145,8 +145,8 @@
     justify-content: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-badge-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-badge-color, var(--hx-color-text-on-primary, #0d1825));
     font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -178,65 +178,65 @@
   /* ─── Style Variants ─── */
 
   .badge--primary {
-    --hx-badge-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797));
+    --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #0d1825));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-primary-500, #2563eb)
+      var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797))
     );
   }
 
   .badge--secondary {
-    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9));
-    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #334155));
+    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9));
+    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #313e4b));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9))
+      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9))
     );
   }
 
   .badge--success {
-    --hx-badge-bg: var(--hx-color-success-700, #166534);
-    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-bg: var(--hx-badge-success-bg, var(--hx-color-success-700, #146831));
+    --hx-badge-color: var(--hx-badge-success-color, var(--hx-color-neutral-0, #ffffff));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-success-700, #166534)
+      var(--hx-badge-success-bg, var(--hx-color-success-700, #146831))
     );
   }
 
   .badge--warning {
-    --hx-badge-bg: var(--hx-color-warning-500, #d97706);
-    --hx-badge-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-badge-bg: var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c));
+    --hx-badge-color: var(--hx-badge-warning-color, var(--hx-color-neutral-900, #0d1825));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-warning-500, #d97706)
+      var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c))
     );
   }
 
   .badge--error {
-    --hx-badge-bg: var(--hx-color-error-500, #dc2626);
-    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-bg: var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e));
+    --hx-badge-color: var(--hx-badge-error-color, var(--hx-color-text-on-error, #0d1825));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-error-500, #dc2626)
+      var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e))
     );
   }
 
   .badge--neutral {
-    --hx-badge-bg: var(--hx-color-neutral-200, #e2e8f0);
-    --hx-badge-color: var(--hx-color-neutral-700, #334155);
+    --hx-badge-bg: var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5));
+    --hx-badge-color: var(--hx-badge-neutral-color, var(--hx-color-neutral-700, #313e4b));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-neutral-200, #e2e8f0)
+      var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5))
     );
   }
 
   .badge--info {
-    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #075985));
+    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997));
     --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-info-bg, var(--hx-color-info-700, #075985))
+      var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997))
     );
   }
 
@@ -376,7 +376,7 @@
     gap: var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-button-border-color, transparent);
     border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-button-bg, var(--hx-color-primary-500, #2563eb));
+    background-color: var(--hx-button-bg, var(--hx-color-primary-500, #429797));
     color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));
     font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-button-font-weight, var(--hx-font-weight-semibold, 600));
@@ -395,7 +395,10 @@
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(
+        --hx-button-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -433,63 +436,77 @@
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-button-bg: var(--hx-color-primary-500);
-    --hx-button-color: var(--hx-color-neutral-0);
+    --hx-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-button-border-color: transparent;
   }
 
   .button--secondary {
     --hx-button-bg: transparent;
-    --hx-button-color: var(--hx-color-primary-500);
-    --hx-button-border-color: var(--hx-color-primary-500);
+    /* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
+       primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
+    --hx-button-color: var(--hx-color-primary-600, #0f7078);
+    --hx-button-border-color: var(--hx-color-primary-600, #0f7078);
   }
 
   .button--secondary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-50));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   .button--tertiary {
-    --hx-button-bg: var(--hx-color-neutral-100);
-    --hx-button-color: var(--hx-color-neutral-900);
+    --hx-button-bg: var(--hx-color-surface-sunken, #ebeee9);
+    --hx-button-color: var(--hx-color-text-primary, #0d1825);
     --hx-button-border-color: transparent;
   }
 
   .button--tertiary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-200));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   .button--danger {
-    --hx-button-bg: var(--hx-color-error-500);
-    --hx-button-color: var(--hx-color-neutral-0);
+    --hx-button-bg: var(--hx-color-error-500, #e5493e);
+    --hx-button-color: var(--hx-color-text-on-error, #ffffff);
     --hx-button-border-color: transparent;
   }
 
+  /* on-error tokens are tuned for error-500 (neutral-900 on #E5493E ≈ 4.59:1).
+     error-600 (#C92A2A) drops that to 2.25:1 — AA fail. Hold fg at neutral-0
+     directly so darker hover fills stay legible. Mirrors hx-toast precedent
+     (commit 300e21ab0). */
   .button--danger:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600, #c92a2a));
+    --hx-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .button--ghost {
     --hx-button-bg: transparent;
-    --hx-button-color: var(--hx-color-primary-500);
+    /* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
+       primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
+    --hx-button-color: var(--hx-color-primary-600, #0f7078);
     --hx-button-border-color: transparent;
   }
 
   .button--ghost:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-100));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   .button--outline {
     --hx-button-bg: transparent;
-    --hx-button-color: var(--hx-color-neutral-900);
-    --hx-button-border-color: var(--hx-color-neutral-300);
+    --hx-button-color: var(--hx-color-text-primary, #0d1825);
+    --hx-button-border-color: var(--hx-color-border-strong, #8e9c98);
   }
 
   .button--outline:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-50));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
+  /* on-primary token resolves to neutral-900 (#0D1825) — tuned for primary-500.
+     primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. Pin fg at
+     neutral-0 for the darker hover fill. Mirrors hx-toast precedent
+     (commit 300e21ab0). */
   .button--primary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600, #0f7078));
+    --hx-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   /* ─── Disabled ─── */
@@ -535,7 +552,7 @@
 
   /* Override text color and filter-based hover/active for all variants */
   :host([inverted]) .button {
-    color: var(--hx-button-inverted-color, var(--hx-color-neutral-0));
+    color: var(--hx-button-inverted-color, var(--hx-color-neutral-0, #ffffff));
     filter: none;
   }
 
@@ -556,7 +573,7 @@
 
   /* Primary inverted — slight transparent white overlay on hover */
   :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-primary-400, #60a5fa);
+    --hx-button-bg: var(--hx-color-primary-400, #6ab1b1);
   }
 
   /* Secondary inverted — white border and text */
@@ -670,33 +687,43 @@
   /* ─── No Double Borders: Horizontal ─── */
 
   .group--horizontal ::slotted(*:not(:first-child)) {
-    margin-inline-start: calc(-1 * var(--hx-border-width-thin, 1px));
+    margin-inline-start: var(
+      --hx-button-group-divider-offset,
+      calc(-1 * var(--hx-border-width-thin, 1px))
+    );
   }
 
   /* ─── No Double Borders: Vertical ─── */
 
   .group--vertical ::slotted(*:not(:first-child)) {
-    margin-top: calc(-1 * var(--hx-border-width-thin, 1px));
+    margin-top: var(--hx-button-group-divider-offset, calc(-1 * var(--hx-border-width-thin, 1px)));
   }
 
   /* ─── Border Radius: Horizontal — Single child keeps all corners ─── */
 
   .group--horizontal ::slotted(:only-child) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: var(
+      --hx-button-group-border-radius,
+      var(--hx-border-radius-md, 0.375rem)
+    );
   }
 
   /* ─── Border Radius: Horizontal — First child keeps left corners ─── */
 
   .group--horizontal ::slotted(:first-child:not(:only-child)) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem) 0 0
-      var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: var(
+        --hx-button-group-border-radius,
+        var(--hx-border-radius-md, 0.375rem)
+      )
+      0 0 var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Border Radius: Horizontal — Last child keeps right corners ─── */
 
   .group--horizontal ::slotted(:last-child:not(:only-child)) {
-    --hx-button-border-radius: 0 var(--hx-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem) 0;
+    --hx-button-border-radius: 0
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
   }
 
   /* ─── Border Radius: Horizontal — Middle children have no radius ─── */
@@ -708,21 +735,28 @@
   /* ─── Border Radius: Vertical — Single child keeps all corners ─── */
 
   .group--vertical ::slotted(:only-child) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: var(
+      --hx-button-group-border-radius,
+      var(--hx-border-radius-md, 0.375rem)
+    );
   }
 
   /* ─── Border Radius: Vertical — First child keeps top corners ─── */
 
   .group--vertical ::slotted(:first-child:not(:only-child)) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem) 0 0;
+    --hx-button-border-radius: var(
+        --hx-button-group-border-radius,
+        var(--hx-border-radius-md, 0.375rem)
+      )
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0;
   }
 
   /* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */
 
   .group--vertical ::slotted(:last-child:not(:only-child)) {
-    --hx-button-border-radius: 0 0 var(--hx-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: 0 0
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Border Radius: Vertical — Middle children have no radius ─── */
@@ -734,7 +768,7 @@
   /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */
 
   .group ::slotted(:focus-within) {
-    z-index: 1;
+    z-index: var(--hx-button-group-focus-z-index, 1);
     position: relative;
   }
 
@@ -747,24 +781,24 @@
      * outline from hx-button's own forced-colors block is fully visible.
      */
     .group ::slotted(:focus-within) {
-      z-index: 2;
+      z-index: var(--hx-button-group-focus-z-index-hc, 2);
     }
   }
 /* ── hx-card ── */
 :host {
     display: block;
     color: var(--hx-card-color, inherit);
-    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
   }
 
   .card {
     display: flex;
     flex-direction: column;
     gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
-    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-card-color, var(--hx-color-neutral-800, #1e293b));
+    background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-card-color, var(--hx-color-text-strong, #202b39));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-card-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
     overflow: hidden;
     font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));
@@ -780,11 +814,14 @@
   }
 
   .card--raised {
-    box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+    box-shadow: var(--hx-card-shadow, var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)));
   }
 
   .card--floating {
-    box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));
+    box-shadow: var(
+      --hx-card-shadow-floating,
+      var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1))
+    );
   }
 
   /* ─── Style Variants ─── */
@@ -794,8 +831,8 @@
   }
 
   .card--featured {
-    border-color: var(--hx-color-primary-500, #2563eb);
-    border-width: var(--hx-border-width-medium, 2px);
+    border-color: var(--hx-card-featured-border-color, var(--hx-color-primary-500, #429797));
+    border-width: var(--hx-card-featured-border-width, var(--hx-border-width-medium, 2px));
   }
 
   .card--compact .card__body {
@@ -827,13 +864,16 @@
   }
 
   .card--interactive:hover {
-    box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    box-shadow: var(--hx-card-shadow-hover, var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)));
     transform: translateY(var(--hx-transform-lift-md, -2px));
   }
 
   .card--interactive:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(
+        --hx-card-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -890,7 +930,14 @@
     flex: 1;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
-    color: var(--hx-card-color, var(--hx-color-neutral-600, #475569));
+    /*
+     * Body color cascades: component-tier --hx-card-body-color overrides
+     * the host-tier --hx-card-color, which falls back to text-secondary.
+     * Preserves the propagation contract: setting --hx-card-color on the
+     * host flows into the body slot (and through to slotted light-DOM
+     * descendants via flat-tree inheritance).
+     */
+    color: var(--hx-card-body-color, var(--hx-card-color, var(--hx-color-text-secondary, #313e4b)));
   }
 
   .card__footer {
@@ -908,11 +955,12 @@
     padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-card-border-color, var(--hx-color-border-default, #d6dbd5));
     margin-top: auto;
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .card {
@@ -926,9 +974,9 @@
 /* ── hx-divider ── */
 :host {
     display: block;
-    --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_divider-color: var(--hx-divider-color, var(--hx-color-border-default, #d6dbd5));
     --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));
-    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-neutral-500, #64748b));
+    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-text-muted, #66787b));
     --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));
     --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));
   }
@@ -1106,23 +1154,23 @@
 
   :host([disabled]) {
     pointer-events: none;
-    opacity: var(--hx-opacity-disabled);
+    opacity: var(--hx-opacity-disabled, 0.5);
   }
 
   .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);
-    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));
-    background-color: var(--hx-icon-button-bg);
-    color: var(--hx-icon-button-color, var(--hx-color-primary-500));
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-icon-button-border-color, transparent);
+    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-icon-button-bg, transparent);
+    color: var(--hx-icon-button-color, var(--hx-color-primary-500, #429797));
     cursor: pointer;
     transition:
-      background-color var(--hx-transition-fast),
-      color var(--hx-transition-fast),
-      border-color var(--hx-transition-fast),
-      box-shadow var(--hx-transition-fast);
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
     text-decoration: none;
     user-select: none;
     -webkit-user-select: none;
@@ -1130,9 +1178,12 @@
   }
 
   .button:focus-visible {
-    outline: var(--hx-focus-ring-width) solid
-      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));
-    outline-offset: var(--hx-focus-ring-offset);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-icon-button-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .button:active {
@@ -1146,82 +1197,90 @@
      the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */
 
   .button--sm {
-    padding: var(--hx-space-1);
-    width: var(--hx-icon-button-size, var(--hx-size-8));
-    height: var(--hx-icon-button-size, var(--hx-size-8));
+    padding: var(--hx-space-1, 0.25rem);
+    width: var(--hx-icon-button-size, var(--hx-size-8, 2rem));
+    height: var(--hx-icon-button-size, var(--hx-size-8, 2rem));
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    font-size: var(--hx-font-size-sm);
+    font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
   .button--md {
-    padding: var(--hx-space-2);
-    width: var(--hx-icon-button-size, var(--hx-size-10));
-    height: var(--hx-icon-button-size, var(--hx-size-10));
+    padding: var(--hx-space-2, 0.5rem);
+    width: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));
+    height: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    font-size: var(--hx-font-size-md);
+    font-size: var(--hx-font-size-md, 1rem);
   }
 
   .button--lg {
-    padding: var(--hx-space-3);
-    width: var(--hx-icon-button-size, var(--hx-size-12));
-    height: var(--hx-icon-button-size, var(--hx-size-12));
+    padding: var(--hx-space-3, 0.75rem);
+    width: var(--hx-icon-button-size, var(--hx-size-12, 3rem));
+    height: var(--hx-icon-button-size, var(--hx-size-12, 3rem));
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    font-size: var(--hx-font-size-lg);
+    font-size: var(--hx-font-size-lg, 1.125rem);
   }
 
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-icon-button-bg: var(--hx-color-primary-500);
-    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-icon-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-icon-button-border-color: transparent;
   }
 
+  /* on-primary tokens are tuned for primary-500. primary-600 + on-primary
+     drops icon contrast to 3.07:1 — fails the 4.5:1 floor for meaningful
+     icons. Pin fg at neutral-0 (5.82:1 on primary-600). Mirrors hx-button. */
   .button--primary:hover {
-    --hx-icon-button-bg: var(--hx-color-primary-600);
+    --hx-icon-button-bg: var(--hx-color-primary-600, #0f7078);
+    --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .button--secondary {
     --hx-icon-button-bg: transparent;
-    --hx-icon-button-color: var(--hx-color-primary-500);
-    --hx-icon-button-border-color: var(--hx-color-primary-500);
+    --hx-icon-button-color: var(--hx-color-primary-500, #429797);
+    --hx-icon-button-border-color: var(--hx-color-primary-500, #429797);
   }
 
   .button--secondary:hover {
-    --hx-icon-button-bg: var(--hx-color-primary-50);
+    --hx-icon-button-bg: var(--hx-color-primary-50, #ebf8f8);
   }
 
   .button--tertiary {
     --hx-icon-button-bg: transparent;
-    --hx-icon-button-color: var(--hx-color-neutral-700);
-    --hx-icon-button-border-color: var(--hx-color-neutral-300);
+    --hx-icon-button-color: var(--hx-color-text-strong, #202b39);
+    --hx-icon-button-border-color: var(--hx-color-border-strong, #8e9c98);
   }
 
   .button--tertiary:hover {
-    --hx-icon-button-bg: var(--hx-color-neutral-100);
+    --hx-icon-button-bg: var(--hx-color-surface-sunken, #ebeee9);
   }
 
   .button--danger {
-    --hx-icon-button-bg: var(--hx-color-error-500);
-    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-bg: var(--hx-color-error-500, #e5493e);
+    --hx-icon-button-color: var(--hx-color-text-on-error, #ffffff);
     --hx-icon-button-border-color: transparent;
   }
 
+  /* on-error tokens are tuned for error-500. error-600 + on-error drops
+     icon contrast to 2.25:1 — fails AA. Pin fg at neutral-0
+     (6.47:1 on error-600). Mirrors hx-button danger:hover. */
   .button--danger:hover {
-    --hx-icon-button-bg: var(--hx-color-error-600);
+    --hx-icon-button-bg: var(--hx-color-error-600, #c92a2a);
+    --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .button--ghost {
     --hx-icon-button-bg: transparent;
-    --hx-icon-button-color: var(--hx-color-primary-500);
+    --hx-icon-button-color: var(--hx-color-primary-500, #429797);
     --hx-icon-button-border-color: transparent;
   }
 
   .button--ghost:hover {
-    --hx-icon-button-bg: var(--hx-color-neutral-100);
+    --hx-icon-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   /* ─── Icon Container ─── */
@@ -1298,8 +1357,8 @@
     align-items: center;
     justify-content: center;
     min-height: var(--hx-image-fallback-min-height, 3rem);
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
-    color: var(--hx-color-neutral-500, #64748b);
+    background-color: var(--hx-image-fallback-bg, var(--hx-color-neutral-100, #ebeee9));
+    color: var(--hx-image-fallback-color, var(--hx-color-neutral-500, #66787b));
   }
 
   .image__img {
@@ -1312,7 +1371,7 @@
   .image__caption {
     display: none;
     padding: var(--hx-image-caption-padding, 0.5rem 0 0);
-    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4a5362));
     font-size: var(--hx-image-caption-font-size, 0.875rem);
   }
 
@@ -1342,7 +1401,7 @@
     display: inline-flex;
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
-    color: var(--hx-link-color, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-link-color, var(--hx-color-primary-600, #0f7078));
     font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));
     font-size: inherit;
     line-height: inherit;
@@ -1356,19 +1415,19 @@
   }
 
   .link:hover {
-    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #0f6363));
     text-decoration: var(--hx-link-text-decoration-hover, underline);
   }
 
   .link:active {
-    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e3a8a));
+    color: var(--hx-link-color-active, var(--hx-color-primary-800, #07494a));
   }
 
   .link:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-link-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -1377,29 +1436,29 @@
   /* --- Variant: subtle --- */
 
   .link--subtle {
-    color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #313e4b));
     text-decoration: none;
   }
 
   .link--subtle:hover {
-    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #0f6363));
     text-decoration: underline;
   }
 
   /* --- Variant: danger --- */
 
   .link--danger {
-    color: var(--hx-link-color-danger, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-link-color-danger, var(--hx-color-error-text, #c92a2a));
   }
 
   .link--danger:hover {
-    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #991b1b));
+    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #a21312));
   }
 
   /* --- Disabled --- */
 
   .link--disabled {
-    color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
+    color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #8e9c98));
     text-decoration: none;
     cursor: not-allowed;
   }
@@ -1463,7 +1522,7 @@
 
   .skeleton {
     display: block;
-    background-color: var(--hx-skeleton-bg, var(--hx-color-neutral-200, #e2e8f0));
+    background-color: var(--hx-skeleton-bg, var(--hx-color-neutral-200, #d6dbd5));
     overflow: hidden;
     position: relative;
     width: var(--_width, 100%);
@@ -1633,13 +1692,13 @@
   /* ─── Variant Colors ─── */
 
   :host([variant='default']) {
-    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #475569));
-    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #4a5362));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   :host([variant='primary']) {
-    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #2563eb));
-    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbeafe));
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #429797));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbf0f0));
   }
 
   :host([variant='inverted']) {
@@ -1688,15 +1747,15 @@
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f1f5f9));
-    color: var(--hx-tag-color, var(--hx-color-neutral-700, #334155));
+    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #ebeee9));
+    color: var(--hx-tag-color, var(--hx-color-neutral-700, #313e4b));
     font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));
     line-height: var(--hx-line-height-tight, 1.25);
     white-space: nowrap;
     vertical-align: middle;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-tag-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-tag-border-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   /* ─── Size Variants ─── */
@@ -1722,33 +1781,33 @@
   /* ─── Color Variants ─── */
 
   .tag--default {
-    --hx-tag-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-tag-color: var(--hx-color-neutral-700, #334155);
-    --hx-tag-border-color: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-tag-bg: var(--hx-tag-default-bg, var(--hx-color-neutral-100, #ebeee9));
+    --hx-tag-color: var(--hx-tag-default-color, var(--hx-color-neutral-700, #313e4b));
+    --hx-tag-border-color: var(--hx-tag-default-border-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   .tag--primary {
-    --hx-tag-bg: var(--hx-color-primary-50, #eff6ff);
-    --hx-tag-color: var(--hx-color-primary-700, #1e40af);
-    --hx-tag-border-color: var(--hx-color-primary-200, #bfdbfe);
+    --hx-tag-bg: var(--hx-tag-primary-bg, var(--hx-color-primary-50, #ebf8f8));
+    --hx-tag-color: var(--hx-tag-primary-color, var(--hx-color-primary-700, #0f6363));
+    --hx-tag-border-color: var(--hx-tag-primary-border-color, var(--hx-color-primary-200, #bce1e1));
   }
 
   .tag--success {
-    --hx-tag-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-tag-color: var(--hx-color-success-700, #166534);
-    --hx-tag-border-color: var(--hx-color-success-200, #bbf7d0);
+    --hx-tag-bg: var(--hx-tag-success-bg, var(--hx-color-success-50, #eafaec));
+    --hx-tag-color: var(--hx-tag-success-color, var(--hx-color-success-700, #146831));
+    --hx-tag-border-color: var(--hx-tag-success-border-color, var(--hx-color-success-200, #bae6c2));
   }
 
   .tag--warning {
-    --hx-tag-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-tag-color: var(--hx-color-warning-700, #92400e);
-    --hx-tag-border-color: var(--hx-color-warning-200, #fde68a);
+    --hx-tag-bg: var(--hx-tag-warning-bg, var(--hx-color-warning-50, #fff3ea));
+    --hx-tag-color: var(--hx-tag-warning-color, var(--hx-color-warning-700, #804605));
+    --hx-tag-border-color: var(--hx-tag-warning-border-color, var(--hx-color-warning-200, #facfae));
   }
 
   .tag--danger {
-    --hx-tag-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-tag-color: var(--hx-color-error-700, #991b1b);
-    --hx-tag-border-color: var(--hx-color-error-200, #fecaca);
+    --hx-tag-bg: var(--hx-tag-danger-bg, var(--hx-color-error-50, #fff2f0));
+    --hx-tag-color: var(--hx-tag-danger-color, var(--hx-color-error-700, #a21312));
+    --hx-tag-border-color: var(--hx-tag-danger-border-color, var(--hx-color-error-200, #fccbc4));
   }
 
   /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */
@@ -1912,31 +1971,33 @@
   /* ─── Colors ─── */
 
   .text--color-default {
-    --hx-text-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-text-color: var(--hx-text-default-color, var(--hx-color-neutral-900, #0d1825));
   }
 
   .text--color-subtle {
-    --hx-text-color: var(--hx-color-neutral-500, #64748b);
+    --hx-text-color: var(--hx-text-subtle-color, var(--hx-color-neutral-500, #66787b));
   }
 
   .text--color-disabled {
-    --hx-text-color: var(--hx-color-neutral-400, #94a3b8);
+    --hx-text-color: var(--hx-text-disabled-color, var(--hx-color-neutral-400, #8e9c98));
   }
 
   .text--color-inverse {
-    --hx-text-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-text-color: var(--hx-text-inverse-color, var(--hx-color-neutral-0, #ffffff));
   }
 
   .text--color-danger {
-    --hx-text-color: var(--hx-color-error-600, #b91c1c);
+    --hx-text-color: var(--hx-text-danger-color, var(--hx-color-error-600, #c92a2a));
   }
 
   .text--color-success {
-    --hx-text-color: var(--hx-color-success-600, #15803d);
+    --hx-text-color: var(--hx-text-success-color, var(--hx-color-success-700, #146831));
   }
 
   .text--color-warning {
-    --hx-text-color: var(--hx-color-warning-600, #b45309);
+    /* warning-600 (#B8650E) on white = 4.28:1 — fails AA body text in the
+       precision-cool palette. warning-700 (#804605) on white = 7.06:1 — AA pass. */
+    --hx-text-color: var(--hx-text-warning-color, var(--hx-color-warning-700, #804605));
   }
 
   /* ─── Weight Overrides ─── */