@trismegisto/core 3.3.0 → 3.3.1

package/dist/core.css

@@ -341,7 +341,7 @@ button, input, select, textarea {
   padding: 0 var(--hm-space-micro);
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius-micro);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--hm-text);
   font-family: var(--hm-font-mono);
   overflow-wrap: anywhere;
@@ -351,7 +351,7 @@ button, input, select, textarea {
   padding: 0 var(--hm-space-micro);
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius-micro);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--hm-text);
   font-family: var(--hm-font-mono);
   overflow-wrap: anywhere;
@@ -364,7 +364,7 @@ button, input, select, textarea {
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-block-end-width: var(--hm-border-thin);
   border-radius: var(--hm-radius-micro);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--hm-text);
   font-family: var(--hm-font-family);
   font-size: var(--hm-font-size-xs);
@@ -381,7 +381,7 @@ button, input, select, textarea {
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-block-end-width: var(--hm-border-thin);
   border-radius: var(--hm-radius-micro);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--hm-text);
   font-family: var(--hm-font-family);
   font-size: var(--hm-font-size-xs);
@@ -409,7 +409,7 @@ button, input, select, textarea {
   overflow: auto;
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--hm-text);
   font-family: var(--hm-font-mono);
   font-size: var(--hm-font-size-sm);
@@ -431,7 +431,7 @@ button, input, select, textarea {
   overflow: auto;
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--hm-text);
   font-family: var(--hm-font-mono);
   font-size: var(--hm-font-size-sm);
@@ -1008,7 +1008,7 @@ hm-icon-button,
   padding: 0;
   border: var(--hm-border-hairline) solid var(--intent-color);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--intent-color);
   line-height: 1;
   cursor: pointer;
@@ -1162,7 +1162,7 @@ hm-icon-button,
   max-inline-size: 100%;
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
 }
 .hm-toggle-group--vertical {
   flex-direction: column;
@@ -1772,7 +1772,7 @@ hm-form-required-hint {
   margin: 0;
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-micro);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   vertical-align: middle;
   cursor: pointer;
   transition: background var(--hm-duration-quick) var(--hm-ease), border-color var(--hm-duration-quick) var(--hm-ease);
@@ -1805,7 +1805,7 @@ hm-form-required-hint {
 }
 .hm-check:indeterminate, .hm-check--indeterminate {
   border-color: var(--hm-action);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
 }
 .hm-check:indeterminate::after, .hm-check--indeterminate::after {
   display: block;
@@ -1817,7 +1817,7 @@ hm-form-required-hint {
 }
 .hm-check:disabled, .hm-check--disabled {
   border-color: var(--hm-divider);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   cursor: not-allowed;
 }
 .hm-check:disabled:checked, .hm-check:disabled.hm-check--checked, .hm-check--disabled:checked, .hm-check--disabled.hm-check--checked {
@@ -2166,7 +2166,7 @@ hm-modal, .hm-modal-host {
   width: 100%;
   max-width: 640px;
   border-radius: var(--hm-radius);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-lg);
 }
 .hm-modal__window--small {
@@ -2380,7 +2380,7 @@ hm-theme-picker {
   padding: var(--hm-border-thin);
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-pill);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
 }
 .hm-theme-picker__mode {
   display: inline-flex;
@@ -2452,7 +2452,8 @@ hm-theme-picker {
    compartilhado em vez de duplicado. */
 .hm-code-input {
   display: flex;
-  gap: 8px;
+  /* 8px nas duas densidades, como antes (a escala não tem 8px no modo confortável). */
+  gap: calc(var(--hm-space-micro) * 2);
   justify-content: center;
 }
 
@@ -3186,7 +3187,7 @@ hm-bubble {
 }
 .hm-bubble--received .hm-bubble__content {
   border-color: var(--hm-divider);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--hm-text);
 }
 .hm-bubble--sent {
@@ -3240,7 +3241,7 @@ hm-bubble {
   padding-inline: var(--hm-space-xs);
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-pill);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
   font-size: var(--hm-font-size-xs);
@@ -3434,7 +3435,7 @@ hm-message-scroller {
   padding-inline: var(--hm-space-xs);
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-pill);
-  background: var(--hm-surface);
+  background: var(--hm-surface-overlay);
   color: var(--hm-text);
   box-shadow: var(--hm-shadow-overlay);
   font: inherit;
@@ -3730,7 +3731,7 @@ hm-sidebar-node {
   min-block-size: 0;
   overflow: hidden;
   border-inline-end: var(--hm-border-hairline) solid var(--hm-divider);
-  background: var(--hm-surface-raised);
+  background: var(--hm-sidebar-bg);
   color: var(--hm-text);
   font-size: var(--hm-font-size-md);
   transition: inline-size var(--hm-duration-relaxed) var(--hm-ease-standard), box-shadow var(--hm-duration-relaxed) var(--hm-ease-standard), border-color var(--hm-duration-relaxed) var(--hm-ease-standard);
@@ -4053,7 +4054,7 @@ hm-sidebar-group,
   block-size: var(--hm-space-nano);
   border-radius: var(--hm-radius-pill);
   background: var(--hm-accent);
-  box-shadow: 0 0 0 var(--hm-border-thin) var(--hm-surface);
+  box-shadow: 0 0 0 var(--hm-border-thin) var(--hm-surface-raised);
 }
 .hm-sidebar-group__label {
   flex: 1 1 auto;
@@ -4226,7 +4227,7 @@ hm-menu {
   flex-direction: column;
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   color: var(--hm-text);
   font-family: var(--hm-font-family);
@@ -4420,7 +4421,7 @@ hm-menu {
   flex-direction: column;
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   color: var(--hm-text);
   font-family: var(--hm-font-family);
@@ -4505,7 +4506,7 @@ hm-menu {
 }
 .hm-menu__item:hover:not(:disabled), .hm-menu__item:focus-visible, .hm-menu__item[aria-expanded=true] {
   background: var(--hm-accent);
-  color: var(--hm-surface);
+  color: var(--hm-on-action);
 }
 .hm-menu__item:focus-visible {
   outline: var(--hm-border-thin) solid currentColor;
@@ -4519,7 +4520,7 @@ hm-menu {
 }
 .hm-menu__item--danger:hover:not(:disabled), .hm-menu__item--danger:focus-visible {
   background: var(--hm-danger);
-  color: var(--hm-surface);
+  color: var(--hm-on-action);
 }
 .hm-menu__item:disabled {
   color: var(--hm-disabled-text);
@@ -4846,7 +4847,7 @@ hm-menu-button,
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius);
   padding: var(--hm-space-xs);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   color: var(--hm-text);
   box-shadow: var(--hm-shadow-overlay);
   font-size: var(--hm-font-size-sm);
@@ -4997,7 +4998,7 @@ hm-tab-bar,
   align-items: flex-end;
   gap: var(--hm-space-micro);
   min-width: 0;
-  padding: var(--hm-space-micro) var(--hm-space-xs) 0;
+  padding: var(--hm-tab-gap) var(--hm-tab-gap) 0;
   background: var(--hm-tab-strip-bg);
 }
 
@@ -5005,7 +5006,7 @@ hm-tab-bar,
   display: flex;
   flex: 0 1 auto;
   align-items: flex-end;
-  gap: var(--hm-space-micro);
+  gap: var(--hm-tab-gap);
   min-width: 0;
   padding-inline: var(--hm-radius);
   overflow-x: auto;
@@ -5021,9 +5022,11 @@ hm-tab-bar,
   box-sizing: border-box;
   min-inline-size: 7rem;
   max-inline-size: 15rem;
-  block-size: var(--hm-control-height-large);
+  block-size: calc(var(--hm-tab-height) + var(--hm-tab-gap));
+  padding-block-end: var(--hm-tab-gap);
   border-radius: var(--hm-radius) var(--hm-radius) 0 0;
   background: transparent;
+  isolation: isolate;
   color: var(--hm-muted);
   font-size: var(--hm-font-size-sm);
   touch-action: manipulation;
@@ -5032,8 +5035,31 @@ hm-tab-bar,
   transition: background-color var(--hm-duration-quick) var(--hm-ease-standard), color var(--hm-duration-quick) var(--hm-ease-standard), opacity var(--hm-duration-quick) var(--hm-ease-standard);
   animation: hm-tab-bar-enter var(--hm-duration-quick) var(--hm-ease-decelerate);
 }
-.hm-tab-bar__tab:hover:not(.hm-tab-bar__tab--active) {
-  background: var(--hm-nav-hover);
+.hm-tab-bar__tab:not(.hm-tab-bar__tab--active)::before {
+  content: "";
+  position: absolute;
+  inset-block: 0 var(--hm-tab-gap);
+  inset-inline-start: calc((var(--hm-tab-gap) + var(--hm-border-hairline)) / -2);
+  inline-size: var(--hm-border-hairline);
+  block-size: calc(var(--hm-tab-height) / 2);
+  margin-block: auto;
+  background: var(--hm-tab-separator);
+  pointer-events: none;
+}
+.hm-tab-bar__tab:not(.hm-tab-bar__tab--active)::after {
+  content: "";
+  position: absolute;
+  inset-block: 0 var(--hm-tab-gap);
+  inset-inline: 0;
+  z-index: -1;
+  border-radius: var(--hm-radius);
+  background: var(--hm-tab-hover-bg);
+  opacity: 0;
+  transition: opacity var(--hm-duration-quick) var(--hm-ease-standard);
+  pointer-events: none;
+}
+.hm-tab-bar__tab:not(.hm-tab-bar__tab--active):hover::after {
+  opacity: 1;
 }
 .hm-tab-bar__tab--active {
   background: var(--hm-tab-active-bg);
@@ -5059,6 +5085,9 @@ hm-tab-bar,
 .hm-tab-bar__tab--dragging {
   opacity: 0.5;
 }
+.hm-tab-bar__tab:first-child::before, .hm-tab-bar__tab:hover::before, .hm-tab-bar__tab--active + .hm-tab-bar__tab::before, .hm-tab-bar__tab:hover + .hm-tab-bar__tab::before {
+  opacity: 0;
+}
 .hm-tab-bar__tab.hm-drag-source--hidden {
   display: flex !important;
   opacity: 0.5;
@@ -5071,7 +5100,7 @@ hm-tab-bar,
   gap: var(--hm-space-nano);
   align-self: stretch;
   min-width: 0;
-  padding-inline: var(--hm-space-xxxs) var(--hm-space-micro);
+  padding-inline: calc(var(--hm-tab-gap) * 2) var(--hm-space-micro);
   border-radius: inherit;
   cursor: pointer;
 }
@@ -5128,7 +5157,7 @@ hm-tab-bar,
 }
 .hm-tab-bar__close:hover,
 .hm-tab-bar__new:hover {
-  background: var(--hm-nav-hover-strong);
+  background: color-mix(in srgb, var(--hm-text) 12%, transparent);
   color: var(--hm-text);
 }
 .hm-tab-bar__close:focus-visible,
@@ -5138,20 +5167,72 @@ hm-tab-bar,
 }
 
 .hm-tab-bar__close {
-  inline-size: var(--hm-control-height-dense);
-  block-size: var(--hm-control-height-dense);
-  margin-inline-end: var(--hm-space-micro);
-  border-radius: var(--hm-radius-micro);
+  inline-size: calc(var(--hm-tab-height) - 10px);
+  block-size: calc(var(--hm-tab-height) - 10px);
+  margin-inline-end: var(--hm-tab-gap);
+  border-radius: var(--hm-radius-pill);
 }
 
 .hm-tab-bar__new {
-  align-self: center;
-  inline-size: var(--hm-control-height);
-  block-size: var(--hm-control-height);
-  border-radius: var(--hm-radius-control);
+  align-self: flex-end;
+  --hm-tab-new-size: calc(var(--hm-tab-height) - 2px);
+  inline-size: var(--hm-tab-new-size);
+  block-size: var(--hm-tab-new-size);
+  margin-block-end: calc(var(--hm-tab-gap) + (var(--hm-tab-height) - var(--hm-tab-new-size)) / 2);
+  border-radius: var(--hm-radius-pill);
   color: var(--hm-muted);
 }
 
+.hm-tab-bar__tab.hm-drag-preview {
+  border-radius: var(--hm-radius) var(--hm-radius) 0 0;
+  background: var(--hm-tab-active-bg);
+  box-shadow: none;
+  color: var(--hm-text);
+  opacity: 1;
+  transition: border-radius var(--hm-duration-quick) var(--hm-ease-standard), box-shadow var(--hm-duration-quick) var(--hm-ease-standard);
+}
+.hm-tab-bar__tab.hm-drag-preview::before, .hm-tab-bar__tab.hm-drag-preview::after {
+  display: none;
+}
+
+.hm-tab-bar__tab.hm-drag-preview--released {
+  block-size: var(--hm-tab-height);
+  padding-block-end: 0;
+  border: var(--hm-border-hairline) solid var(--hm-divider);
+  border-radius: var(--hm-radius);
+  box-shadow: var(--hm-shadow-overlay);
+}
+
+.hm-tab-bar__preview {
+  position: fixed;
+  z-index: var(--hm-z-tooltip);
+  display: flex;
+  flex-direction: column;
+  gap: var(--hm-space-micro);
+  box-sizing: border-box;
+  max-inline-size: 20rem;
+  padding: var(--hm-space-sm) var(--hm-space-md);
+  border: var(--hm-border-hairline) solid var(--hm-divider);
+  border-radius: var(--hm-radius);
+  background: var(--hm-surface-overlay);
+  box-shadow: var(--hm-shadow-overlay);
+  color: var(--hm-text);
+  font-size: var(--hm-font-size-sm);
+  pointer-events: none;
+  animation: hm-tab-bar-enter var(--hm-duration-quick) var(--hm-ease-decelerate);
+}
+
+.hm-tab-bar__preview-title {
+  font-weight: var(--hm-font-weight-semibold);
+  overflow-wrap: anywhere;
+}
+
+.hm-tab-bar__preview-description {
+  color: var(--hm-muted);
+  font-size: var(--hm-font-size-xs);
+  overflow-wrap: anywhere;
+}
+
 @keyframes hm-tab-bar-enter {
   from {
     opacity: 0;
@@ -5159,15 +5240,19 @@ hm-tab-bar,
 }
 @media (prefers-reduced-motion: reduce) {
   :where(:root:not([data-motion])) .hm-tab-bar__tab,
+  :where(:root:not([data-motion])) .hm-tab-bar__tab::after,
   :where(:root:not([data-motion])) .hm-tab-bar__close,
-  :where(:root:not([data-motion])) .hm-tab-bar__new {
+  :where(:root:not([data-motion])) .hm-tab-bar__new,
+  :where(:root:not([data-motion])) .hm-tab-bar__preview {
     transition: none;
     animation: none;
   }
 }
 :where(:root[data-motion=reduce]) .hm-tab-bar__tab,
+:where(:root[data-motion=reduce]) .hm-tab-bar__tab::after,
 :where(:root[data-motion=reduce]) .hm-tab-bar__close,
-:where(:root[data-motion=reduce]) .hm-tab-bar__new {
+:where(:root[data-motion=reduce]) .hm-tab-bar__new,
+:where(:root[data-motion=reduce]) .hm-tab-bar__preview {
   transition: none;
   animation: none;
 }
@@ -5219,15 +5304,15 @@ hm-tab-bar,
 }
 .hm-badge--success {
   background: var(--hm-success);
-  color: var(--hm-surface);
+  color: var(--hm-on-status);
 }
 .hm-badge--warning {
   background: var(--hm-warning);
-  color: var(--hm-surface);
+  color: var(--hm-on-status);
 }
 .hm-badge--danger {
   background: var(--hm-danger);
-  color: var(--hm-surface);
+  color: var(--hm-on-status);
 }
 .hm-badge--dot {
   --hm-badge-size: var(--hm-space-xs);
@@ -5285,7 +5370,7 @@ hm-toast,
   padding: var(--hm-space-sm) var(--hm-space-xs) var(--hm-space-sm) var(--hm-space-sm);
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-lg);
   color: var(--hm-text);
   pointer-events: auto;
@@ -5420,7 +5505,7 @@ hm-toast,
   border-radius: var(--hm-radius-micro);
   padding: var(--hm-space-micro) var(--hm-space-sm);
   background: var(--hm-text);
-  color: var(--hm-surface);
+  color: var(--hm-surface-raised);
   font-family: inherit;
   font-size: var(--hm-font-size-xs);
   font-weight: var(--hm-font-weight-medium);
@@ -5472,7 +5557,7 @@ hm-toast,
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-control);
   padding: var(--hm-space-xs) var(--hm-space-sm);
-  background: var(--hm-surface);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   color: var(--hm-text);
   font-family: var(--hm-font-family);
@@ -5525,7 +5610,7 @@ hm-toast,
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-control);
   padding: var(--hm-space-sm) var(--hm-space-md);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   color: var(--hm-text);
   font-family: var(--hm-font-family);
@@ -6154,7 +6239,7 @@ hm-step,
   height: var(--hm-stepper-mark);
   border: var(--hm-border-thin) solid var(--hm-border);
   border-radius: var(--hm-radius-pill);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-muted);
   font-size: var(--hm-font-size-xs);
   font-weight: var(--hm-font-weight-semibold);
@@ -6416,7 +6501,7 @@ hm-wizard {
   z-index: -1;
   grid-area: 1/1/-1/2;
   border-inline-end: var(--hm-border-hairline) solid var(--hm-divider);
-  background: var(--hm-surface);
+  background: var(--hm-surface-muted);
 }
 .hm-wizard--side .hm-wizard__stepper,
 .hm-wizard--side .hm-wizard__stepper > .hm-stepper {
@@ -6615,7 +6700,7 @@ hm-timeline-item,
   height: var(--hm-timeline-mark);
   border: var(--hm-timeline-ring) solid var(--hm-border);
   border-radius: var(--hm-radius-pill);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-muted);
 }
 .hm-timeline__glyph {
@@ -6878,7 +6963,7 @@ hm-avatar-group {
   margin-inline-start: var(--hm-avatar-group-overlap);
 }
 .hm-avatar-group__face {
-  box-shadow: 0 0 0 var(--hm-avatar-group-ring) var(--hm-surface);
+  box-shadow: 0 0 0 var(--hm-avatar-group-ring) var(--hm-surface-raised);
 }
 .hm-avatar-group__more {
   display: inline-flex;
@@ -6888,7 +6973,7 @@ hm-avatar-group {
   inline-size: var(--hm-avatar-size);
   block-size: var(--hm-avatar-size);
   border-radius: 50%;
-  box-shadow: 0 0 0 var(--hm-avatar-group-ring) var(--hm-surface);
+  box-shadow: 0 0 0 var(--hm-avatar-group-ring) var(--hm-surface-raised);
   background: var(--hm-hover);
   color: var(--hm-text);
   font-size: calc(var(--hm-avatar-size) * 0.34);
@@ -7219,11 +7304,11 @@ hm-reorder-list {
 .hm-reorder-list__item--grabbed, .hm-reorder-list__item.hm-drag-preview {
   z-index: 1;
   border-color: var(--hm-action);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-lg);
 }
 .hm-reorder-list__item--grabbed:hover, .hm-reorder-list__item.hm-drag-preview:hover {
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
 }
 .hm-reorder-list__item.hm-drag-source--grabbed {
   outline: none;
@@ -7671,6 +7756,28 @@ hm-list-editor {
     outline: var(--hm-border-thin) solid Highlight;
   }
 }
+/* Fundo da coluna e do cartão. A coluna antes era `--hm-surface`, a mesma cor da página: ficava só a borda e a coluna
+   vazia parecia um buraco. Agora a coluna se destaca da página e o cartão contrasta com a coluna: no claro, coluna
+   `--hm-surface-muted` (um tom abaixo da página) e cartão `--hm-surface-raised` (branco). No escuro os degraus entre as
+   superfícies são curtos (coluna raised e cartão muted ficavam quase iguais, e era difícil ver onde um cartão começa):
+   a coluna fica entre a página e o raised, o cartão clareia na direção do texto e ganha uma borda mais visível
+   (`--hm-kanban-card-border`). Redeclarados onde o tema e a família mudam (`var()` resolve onde é declarado); o app
+   pode sobrescrever os três. */
+:root,
+[data-theme],
+[data-family] {
+  --hm-kanban-column-bg: var(--hm-surface-muted);
+  --hm-kanban-card-bg: var(--hm-surface-raised);
+  --hm-kanban-card-border: var(--hm-border);
+}
+
+[data-theme=dark],
+[data-theme=dark] [data-family]:not([data-theme]) {
+  --hm-kanban-column-bg: color-mix(in srgb, var(--hm-surface) 55%, var(--hm-surface-raised));
+  --hm-kanban-card-bg: color-mix(in srgb, var(--hm-text) 9%, var(--hm-surface-raised));
+  --hm-kanban-card-border: color-mix(in srgb, var(--hm-text) 22%, var(--hm-surface-raised));
+}
+
 hm-kanban {
   display: block;
   min-width: 0;
@@ -7723,7 +7830,7 @@ hm-kanban {
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius);
   padding: var(--hm-space-xs);
-  background: var(--hm-surface);
+  background: var(--hm-kanban-column-bg);
   transition: border-color var(--hm-duration-quick) var(--hm-ease-standard);
 }
 .hm-kanban-column__header {
@@ -7798,6 +7905,25 @@ hm-kanban {
   flex: none;
   color: var(--hm-warning);
 }
+.hm-kanban-column__summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--hm-space-micro) var(--hm-space-xs);
+  min-width: 0;
+  color: var(--hm-muted);
+  font-size: var(--hm-font-size-xs);
+}
+.hm-kanban-column__summary:empty {
+  display: none;
+}
+.hm-kanban-column__footer {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: var(--hm-space-nano);
+  min-width: 0;
+}
 .hm-kanban-column__list {
   display: flex;
   flex: 1;
@@ -7817,6 +7943,14 @@ hm-kanban {
   font-size: var(--hm-font-size-sm);
   text-align: center;
 }
+.hm-kanban-column__empty--custom {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-style: none;
+}
 .hm-kanban-column__empty--hidden {
   display: none;
 }
@@ -7859,10 +7993,10 @@ hm-kanban {
 .hm-kanban-card {
   display: block;
   box-sizing: border-box;
-  border: var(--hm-border-hairline) solid var(--hm-border);
+  border: var(--hm-border-hairline) solid var(--hm-kanban-card-border);
   border-radius: var(--hm-radius);
   padding: var(--hm-space-xs);
-  background: var(--hm-surface-raised);
+  background: var(--hm-kanban-card-bg);
   color: var(--hm-text);
   font-size: var(--hm-font-size-md);
   line-height: var(--hm-line-height-normal);
@@ -8184,7 +8318,7 @@ hm-kanban {
   inline-size: var(--hm-control-height-large);
   block-size: var(--hm-control-height-large);
   border: var(--hm-border-hairline) solid var(--hm-border);
-  background: var(--hm-surface);
+  background: var(--hm-surface-muted);
   color: var(--hm-muted);
 }
 .hm-item__icon {
@@ -8534,7 +8668,7 @@ hm-description-list {
   padding: 0 var(--hm-space-xxxs);
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
 }
@@ -8587,7 +8721,7 @@ hm-property-view {
   min-height: var(--hm-control-height);
   border: 0;
   padding: var(--hm-space-nano) var(--hm-space-xs);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
   font-size: var(--hm-font-size-md);
@@ -8765,7 +8899,7 @@ hm-card-container {
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius);
   padding: var(--hm-space-sm);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
 }
 .hm-card-container__skeleton-title {
   border-radius: var(--hm-radius-micro);
@@ -8861,7 +8995,7 @@ hm-card-container {
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-control);
   padding-inline: var(--hm-space-nano);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
   font-size: var(--hm-font-size-sm);
@@ -9134,7 +9268,7 @@ hm-legend {
   margin: calc(var(--hm-card-pad) * -1) calc(var(--hm-card-pad) * -1) var(--hm-card-pad);
   border-start-start-radius: var(--hm-card-media-radius);
   border-start-end-radius: var(--hm-card-media-radius);
-  background: var(--hm-surface);
+  background: var(--hm-surface-muted);
   aspect-ratio: var(--hm-card-media-ratio, 16/9);
 }
 .hm-card__media:empty {
@@ -9655,7 +9789,7 @@ hm-drawer, .hm-drawer-host {
   display: grid;
   grid-template-rows: auto 1fr auto;
   width: min(var(--hm-drawer-width), 100vw);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-lg);
   opacity: 1;
   translate: 0 0;
@@ -9842,7 +9976,7 @@ hm-floating-window {
   min-width: 0;
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   color: var(--hm-text);
 }
@@ -9903,7 +10037,7 @@ hm-floating-window {
   overflow: auto;
   border-block-start: var(--hm-border-hairline) solid var(--hm-divider);
   padding: var(--hm-space-sm);
-  background: var(--hm-surface);
+  background: var(--hm-surface-overlay);
 }
 .hm-floating-window__body[hidden] {
   display: none;
@@ -9922,7 +10056,7 @@ hm-floating-window {
   gap: var(--hm-space-xs);
   border-block-start: var(--hm-border-hairline) solid var(--hm-divider);
   padding: var(--hm-space-xs) var(--hm-space-sm);
-  background: var(--hm-surface);
+  background: var(--hm-surface-overlay);
   border-end-start-radius: var(--hm-radius);
   border-end-end-radius: var(--hm-radius);
 }
@@ -10015,7 +10149,8 @@ hm-palette-shell {
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  padding: 10dvh var(--hm-space-md) var(--hm-space-md);
+  /* Logo abaixo do cabeçalho (onde fica o campo de busca que abre a paleta), não no meio da tela. */
+  padding: calc(var(--hm-header-height) + var(--hm-space-lg)) var(--hm-space-md) var(--hm-space-md);
 }
 .hm-command-palette__backdrop {
   position: absolute;
@@ -10031,8 +10166,8 @@ hm-palette-shell {
   max-height: 70dvh;
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius);
-  padding: var(--hm-space-sm);
-  background: var(--hm-surface-raised);
+  padding: var(--hm-space-md);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   color: var(--hm-text);
 }
@@ -10044,17 +10179,16 @@ hm-palette-shell {
   flex: none;
   align-items: center;
   gap: var(--hm-space-xs);
-  min-height: var(--hm-control-height);
+  min-height: var(--hm-control-height-large);
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-control);
-  padding: 0 var(--hm-space-sm);
-  background: var(--hm-surface);
+  padding: 0 var(--hm-space-xs) 0 var(--hm-space-sm);
+  background: var(--hm-surface-raised);
   color: var(--hm-muted);
-  /* O foco visível é a borda do campo: dois anéis no mesmo controle leem como dois controles. */
+  /* O foco visível é a borda do campo, na cor de destaque (um anel só). */
 }
 .hm-command-palette__field:focus-within {
   border-color: var(--hm-accent);
-  box-shadow: 0 0 0 var(--hm-border-hairline) var(--hm-accent);
 }
 .hm-command-palette__search-icon {
   flex: none;
@@ -10085,7 +10219,7 @@ hm-palette-shell {
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-micro);
   padding: 0 var(--hm-space-micro);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--hm-muted);
   font-family: inherit;
   font-size: var(--hm-font-size-xs);
@@ -10095,19 +10229,27 @@ hm-palette-shell {
 .hm-command-palette__list {
   flex: 1 1 auto;
   min-height: 0;
-  margin-block-start: var(--hm-space-xs);
+  margin-block-start: var(--hm-space-sm);
   overflow-y: auto;
   overscroll-behavior: contain;
 }
 .hm-command-palette__list[hidden] {
   display: none;
 }
+.hm-command-palette {
+  /* Grupos separados por um divisor, como seções, com respiro igual acima e abaixo. */
+}
 .hm-command-palette__group + .hm-command-palette__group {
-  margin-block-start: var(--hm-space-xs);
+  margin-block-start: var(--hm-space-sm);
+  padding-block-start: var(--hm-space-sm);
+  border-block-start: var(--hm-border-hairline) solid var(--hm-divider);
 }
 .hm-command-palette__group-label {
-  padding: var(--hm-space-xs) var(--hm-space-sm) var(--hm-space-micro);
-  color: var(--hm-muted);
+  display: flex;
+  align-items: center;
+  gap: var(--hm-space-xs);
+  padding: var(--hm-space-xs) var(--hm-space-sm);
+  color: var(--hm-text);
   font-size: var(--hm-font-size-xs);
   font-weight: var(--hm-font-weight-semibold);
   text-transform: uppercase;
@@ -10117,17 +10259,16 @@ hm-palette-shell {
   display: flex;
   align-items: center;
   gap: var(--hm-space-sm);
-  min-height: var(--hm-control-height);
+  min-height: var(--hm-control-height-large);
   border-radius: var(--hm-radius-control);
   padding: var(--hm-space-xs) var(--hm-space-sm);
   color: var(--hm-text);
   cursor: pointer;
-  /* Ativa (aria-activedescendant): fundo e barra de destaque — a barra garante o sinal sem
-     depender só da cor de fundo (WCAG 1.4.11). */
+  /* Ativa (aria-activedescendant): fundo neutro, como o hover de uma lista (sem barra lateral). No alto
+     contraste, o contorno de sistema marca a ativa (ver forced-colors abaixo). */
 }
 .hm-command-palette__option--active {
-  background: var(--hm-accent-subtle);
-  box-shadow: inset var(--hm-border-thin) 0 0 var(--hm-accent);
+  background: var(--hm-hover);
 }
 .hm-command-palette__option[aria-disabled=true] {
   color: var(--hm-disabled-text);
@@ -10135,12 +10276,13 @@ hm-palette-shell {
 }
 .hm-command-palette__option-icon {
   flex: none;
-  color: var(--hm-accent-strong);
+  color: var(--hm-muted);
 }
 .hm-command-palette__option-text {
   display: flex;
   flex: 1;
   flex-direction: column;
+  gap: var(--hm-space-nano);
   min-width: 0;
 }
 .hm-command-palette__option-label {
@@ -10278,7 +10420,7 @@ hm-carousel {
   margin-block-end: var(--hm-space-xs);
   overflow: hidden;
   border-radius: var(--hm-radius);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
 }
 .hm-carousel__image {
   display: block;
@@ -10418,7 +10560,7 @@ hm-paginator {
   padding-inline: var(--hm-space-xs) calc(var(--hm-icon-md) + var(--hm-space-xs));
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
   font-size: var(--hm-font-size-sm);
@@ -10579,7 +10721,7 @@ hm-paginator {
   border: 1px solid var(--hm-border);
   border-radius: var(--hm-radius-control);
   padding-inline: var(--hm-space-nano);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-muted);
 }
 .hm-data-grid-action-bar__search:focus-within {
@@ -10683,6 +10825,20 @@ hm-data-grid {
   display: block;
   inline-size: 100%;
   min-inline-size: 0;
+  /* Tons do tema na grade: cabeçalho na banda de marca da família (como o menu do topo), linhas intercaladas
+     e rodapé com um véu do accent. No escuro a banda é o próprio fundo da página, então o cabeçalho vira o
+     accent sobre o card. Quem hospeda a grade pode sobrescrever qualquer um. */
+  --hm-data-grid-head-bg: var(--hm-table-head-bg);
+  --hm-data-grid-head-text: var(--hm-table-head-text);
+  --hm-data-grid-head-accent: var(--hm-panel-accent);
+  --hm-data-grid-row-alt: color-mix(in srgb, var(--hm-accent) 4%, var(--hm-surface-muted));
+  --hm-data-grid-footer-bg: color-mix(in srgb, var(--hm-accent) 10%, var(--hm-surface-raised));
+}
+
+[data-theme=dark] hm-data-grid {
+  --hm-data-grid-head-accent: var(--hm-accent);
+  --hm-data-grid-row-alt: color-mix(in srgb, var(--hm-accent) 7%, var(--hm-surface-raised));
+  --hm-data-grid-footer-bg: color-mix(in srgb, var(--hm-accent) 14%, var(--hm-surface-raised));
 }
 
 .hm-data-grid {
@@ -10693,6 +10849,7 @@ hm-data-grid {
   table-layout: fixed;
   font-size: var(--hm-font-size-sm);
   color: var(--hm-text);
+  background: var(--hm-surface-raised);
 }
 .hm-data-grid th,
 .hm-data-grid td {
@@ -10726,8 +10883,17 @@ hm-data-grid {
 }
 
 .hm-data-grid thead {
-  background: var(--hm-surface-raised);
+  background: var(--hm-data-grid-head-bg);
   padding-inline-end: var(--hm-data-grid-scrollbar, 0);
+  /* Os tokens do conteúdo passam ao tom da banda: título, ícones de ordenar/filtrar, checkbox de
+     selecionar tudo, divisores e foco ficam legíveis sobre ela sem regra própria em cada peça. */
+  --hm-text: var(--hm-data-grid-head-text);
+  --hm-muted: color-mix(in srgb, var(--hm-data-grid-head-text) 80%, var(--hm-data-grid-head-bg));
+  --hm-accent: var(--hm-data-grid-head-accent);
+  --hm-on-action: var(--hm-data-grid-head-bg);
+  --hm-divider: color-mix(in srgb, var(--hm-data-grid-head-text) 28%, var(--hm-data-grid-head-bg));
+  --hm-border: color-mix(in srgb, var(--hm-data-grid-head-text) 40%, var(--hm-data-grid-head-bg));
+  --hm-focus-color: var(--hm-data-grid-head-text);
 }
 
 .hm-data-grid th {
@@ -10878,6 +11044,11 @@ hm-data-grid {
 
 .hm-data-grid__row {
   transition: background var(--hm-duration-quick) var(--hm-ease);
+  /* Linhas intercaladas (contando só as linhas de dado, não as de detalhe). `:where` zera a
+     especificidade: hover, selecionada e erro/aviso continuam vencendo. */
+}
+.hm-data-grid__row:where(:nth-child(even of .hm-data-grid__row)) {
+  background: var(--hm-data-grid-row-alt);
 }
 .hm-data-grid__row:hover {
   background: var(--hm-hover);
@@ -10890,7 +11061,7 @@ hm-data-grid {
      regra inteira — não existia faixa nenhuma, só o tingimento de fundo abaixo). */
 }
 .hm-data-grid__row--selected {
-  background: color-mix(in srgb, var(--hm-accent) 10%, var(--hm-surface));
+  background: color-mix(in srgb, var(--hm-accent) 10%, var(--hm-surface-raised));
 }
 .hm-data-grid__row--selected td:first-child {
   box-shadow: inset var(--hm-space-micro) 0 0 0 var(--hm-accent);
@@ -10903,10 +11074,10 @@ hm-data-grid {
      para um alerta sozinho, não para várias linhas seguidas). O texto do status fica numa célula. */
 }
 .hm-data-grid__row--error {
-  background: color-mix(in srgb, var(--hm-danger) 10%, var(--hm-surface));
+  background: color-mix(in srgb, var(--hm-danger) 10%, var(--hm-surface-raised));
 }
 .hm-data-grid__row--warning {
-  background: color-mix(in srgb, var(--hm-warning) 10%, var(--hm-surface));
+  background: color-mix(in srgb, var(--hm-warning) 10%, var(--hm-surface-raised));
 }
 .hm-data-grid__row--error:hover, .hm-data-grid__row--warning:hover {
   background: var(--hm-hover);
@@ -10990,7 +11161,7 @@ hm-data-grid {
   gap: var(--hm-space-sm);
   min-block-size: var(--hm-control-height-large);
   border-top: 1px solid var(--hm-border);
-  background: var(--hm-surface-raised);
+  background: var(--hm-data-grid-footer-bg);
   padding: var(--hm-space-micro) var(--hm-space-sm);
   color: var(--hm-muted);
   font-size: var(--hm-font-size-xs);
@@ -11029,7 +11200,7 @@ hm-data-grid {
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-micro);
   padding-inline: var(--hm-space-micro);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
   cursor: pointer;
@@ -11091,7 +11262,7 @@ hm-data-grid {
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-micro);
   padding-inline: var(--hm-space-micro);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
   text-align: center;
@@ -11155,7 +11326,7 @@ hm-data-grid {
 }
 
 .hm-data-grid__row--pane {
-  background: color-mix(in srgb, var(--hm-accent) 14%, var(--hm-surface));
+  background: color-mix(in srgb, var(--hm-accent) 14%, var(--hm-surface-raised));
 }
 .hm-data-grid__row--pane td:first-child {
   box-shadow: inset var(--hm-space-micro) 0 0 0 var(--hm-accent);
@@ -11172,7 +11343,7 @@ hm-data-grid {
   min-block-size: 0;
   flex-direction: column;
   border-inline-start: var(--hm-border-hairline) solid var(--hm-border);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   animation: hm-data-grid-pane-in var(--hm-duration-medium) var(--hm-ease);
 }
 
@@ -11183,7 +11354,7 @@ hm-data-grid {
   gap: var(--hm-space-sm);
   border-block-end: var(--hm-border-hairline) solid var(--hm-divider);
   padding: var(--hm-space-nano) var(--hm-space-sm);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
 }
 
 .hm-data-grid__pane-title {
@@ -11254,7 +11425,7 @@ hm-data-grid {
   border: 1px solid var(--hm-border);
   border-radius: var(--hm-radius-control);
   padding-inline: var(--hm-space-nano);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font-size: var(--hm-font-size-sm);
 }
@@ -11283,8 +11454,15 @@ hm-data-grid {
 
 .hm-data-grid__toolbar {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   justify-content: flex-end;
+  gap: var(--hm-space-xs);
   margin-block-end: var(--hm-space-sm);
+  /* Sem botão do app nem ferramenta: a barra não ocupa espaço. */
+}
+.hm-data-grid__toolbar:not(:has(*)) {
+  display: none;
 }
 
 .hm-data-grid__tools {
@@ -11302,7 +11480,7 @@ hm-data-grid {
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-control);
   padding-inline: var(--hm-space-nano);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
   font-size: var(--hm-font-size-sm);
@@ -11363,7 +11541,7 @@ hm-data-grid {
 }
 
 .hm-data-grid__group-row {
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
 }
 
 .hm-data-grid .hm-data-grid__group-cell {
@@ -11439,7 +11617,7 @@ hm-data-grid {
 }
 
 .hm-data-grid tfoot {
-  background: var(--hm-surface-raised);
+  background: var(--hm-data-grid-footer-bg);
 }
 
 .hm-data-grid__totals td,
@@ -11508,7 +11686,7 @@ hm-data-grid {
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-micro);
   padding-inline: var(--hm-space-micro);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
   font-size: var(--hm-font-size-sm);
@@ -11646,16 +11824,20 @@ hm-data-grid {
 .hm-data-grid .hm-data-grid__pinned {
   position: sticky;
   z-index: 1;
-  background-color: var(--hm-surface);
+  background-color: var(--hm-surface-raised);
 }
 
 .hm-data-grid thead .hm-data-grid__pinned {
   z-index: 3;
-  background-color: var(--hm-surface-raised);
+  background-color: var(--hm-data-grid-head-bg);
 }
 
 .hm-data-grid tfoot .hm-data-grid__pinned {
-  background-color: var(--hm-surface-raised);
+  background-color: var(--hm-data-grid-footer-bg);
+}
+
+.hm-data-grid__row:where(:nth-child(even of .hm-data-grid__row)) > .hm-data-grid__pinned {
+  background-color: var(--hm-data-grid-row-alt);
 }
 
 .hm-data-grid__row:hover > .hm-data-grid__pinned {
@@ -11663,19 +11845,19 @@ hm-data-grid {
 }
 
 .hm-data-grid__row--selected > .hm-data-grid__pinned {
-  background-color: color-mix(in srgb, var(--hm-accent) 10%, var(--hm-surface));
+  background-color: color-mix(in srgb, var(--hm-accent) 10%, var(--hm-surface-raised));
 }
 
 .hm-data-grid__row--pane > .hm-data-grid__pinned {
-  background-color: color-mix(in srgb, var(--hm-accent) 14%, var(--hm-surface));
+  background-color: color-mix(in srgb, var(--hm-accent) 14%, var(--hm-surface-raised));
 }
 
 .hm-data-grid__row--error > .hm-data-grid__pinned {
-  background-color: color-mix(in srgb, var(--hm-danger) 10%, var(--hm-surface));
+  background-color: color-mix(in srgb, var(--hm-danger) 10%, var(--hm-surface-raised));
 }
 
 .hm-data-grid__row--warning > .hm-data-grid__pinned {
-  background-color: color-mix(in srgb, var(--hm-warning) 10%, var(--hm-surface));
+  background-color: color-mix(in srgb, var(--hm-warning) 10%, var(--hm-surface-raised));
 }
 
 /* Divisor + sombra na borda das fixas, só quando há conteúdo passando por baixo daquele lado
@@ -11713,7 +11895,7 @@ hm-data-grid {
   position: sticky;
   inset-block-start: 0;
   z-index: 2;
-  background-color: var(--hm-surface-raised);
+  background-color: var(--hm-data-grid-head-bg);
 }
 
 .hm-data-grid--virtual .hm-data-grid__scroll:focus-visible {
@@ -11893,7 +12075,7 @@ hm-data-grid {
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius-control);
   padding: var(--hm-space-sm);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   color: var(--hm-text);
   font-family: var(--hm-font-family);
@@ -12229,6 +12411,7 @@ hm-workspace-node {
   min-inline-size: 0;
   min-block-size: 0;
   overflow: hidden;
+  /* O painel é a página: os cards (surface-raised) se destacam dele. */
   background: var(--hm-surface);
 }
 
@@ -12559,7 +12742,7 @@ hm-workspace-node {
   max-width: min(32rem, 100vw - var(--hm-space-md));
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   color: var(--hm-text);
   box-shadow: var(--hm-shadow-overlay);
   font-size: var(--hm-font-size-sm);
@@ -12851,7 +13034,7 @@ hm-workspace-node {
   max-width: min(32rem, 100vw - var(--hm-space-md));
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   color: var(--hm-text);
   box-shadow: var(--hm-shadow-overlay);
   font-size: var(--hm-font-size-sm);
@@ -12945,7 +13128,7 @@ hm-workspace-node {
   height: var(--hm-icon-md);
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-micro);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-on-action);
   --hm-icon-size: calc(var(--hm-icon-md) - var(--hm-space-micro));
 }
@@ -13236,7 +13419,7 @@ hm-workspace-node {
   padding: 0 var(--hm-space-xxxs);
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
   font-size: var(--hm-font-size-sm);
@@ -14016,7 +14199,7 @@ hm-tab {
 .hm-rich-text__bar {
   padding: var(--hm-space-micro) var(--hm-space-xs);
   border-block-end: var(--hm-border-hairline) solid var(--hm-divider);
-  background: var(--hm-surface);
+  background: var(--hm-surface-muted);
   cursor: default;
 }
 .hm-rich-text__bar .hm-toolbar__start {
@@ -14057,8 +14240,9 @@ hm-tab {
   max-block-size: calc(var(--hm-rich-text-max-rows) * 1lh);
   overflow-y: auto;
 }
-.hm-rich-text__area :where(pre) {
-  white-space: pre;
+.hm-rich-text__area.hm-prose :where(pre) {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 .hm-rich-text__frame--disabled .hm-rich-text__area {
   color: var(--hm-disabled-text);
@@ -14603,7 +14787,7 @@ hm-radio {
   border-color: var(--hm-danger);
 }
 .hm-radio--card .hm-radio__row--disabled {
-  background: var(--hm-surface);
+  background: var(--hm-surface-muted);
 }
 .hm-radio--card.hm-radio--inline .hm-radio__options {
   flex-flow: row wrap;
@@ -14708,7 +14892,7 @@ hm-radio {
   --hm-tag-tone: var(--hm-warning);
   --hm-tag-fill: var(--hm-warning-bg);
 }
-.hm-tag--danger, .hm-tag--error {
+.hm-tag--danger {
   --hm-tag-tone: var(--hm-danger);
   --hm-tag-fill: var(--hm-danger-bg);
 }
@@ -15138,7 +15322,7 @@ hm-settings-dialog {
   overflow: hidden;
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius);
-  background: var(--hm-surface);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-lg);
 }
 .hm-settings__window:focus-visible {
@@ -15162,7 +15346,7 @@ hm-settings-dialog {
   min-width: 0;
   padding: var(--hm-space-sm) var(--hm-space-lg);
   border-top: var(--hm-border-hairline) solid var(--hm-divider);
-  background: var(--hm-surface);
+  background: var(--hm-surface-overlay);
 }
 .hm-settings__footer-spacer {
   flex: 1;
@@ -15183,7 +15367,7 @@ hm-settings-dialog {
   gap: var(--hm-space-xxxs);
   border-inline-end: var(--hm-border-hairline) solid var(--hm-divider);
   padding: var(--hm-space-sm) var(--hm-space-xxxs);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
 }
 .hm-settings__heading {
   margin: 0 var(--hm-space-nano);
@@ -15199,7 +15383,7 @@ hm-settings-dialog {
   padding: 0 var(--hm-space-xxxs);
   border: var(--hm-border-hairline) solid var(--hm-border);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-muted);
 }
 .hm-settings__search:focus-within {
@@ -15824,7 +16008,7 @@ hm-accordion-panel,
   overflow-y: auto;
   padding: var(--hm-space-micro) 0;
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   outline: var(--hm-border-hairline) solid var(--hm-divider);
   color: var(--hm-text);
@@ -15867,7 +16051,7 @@ hm-accordion-panel,
 }
 .hm-dropdown__item:hover:not(:disabled, [aria-disabled=true]), .hm-dropdown__item:focus-visible {
   background: var(--hm-accent);
-  color: var(--hm-surface);
+  color: var(--hm-on-action);
 }
 .hm-dropdown__item:focus-visible {
   outline: var(--hm-border-thin) solid currentColor;
@@ -16008,7 +16192,7 @@ hm-accordion-panel,
   position: fixed;
   z-index: calc(var(--hm-z-menu) + 1);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   outline: var(--hm-border-hairline) solid var(--hm-divider);
   transition: opacity var(--hm-duration-quick) ease-out, scale var(--hm-duration-quick) ease-out;
@@ -16350,7 +16534,7 @@ hm-event-calendar {
   border-inline-start: var(--hm-border-thin) solid var(--hm-ec-color);
   border-radius: var(--hm-radius-micro);
   padding: var(--hm-space-micro) var(--hm-space-nano);
-  background: color-mix(in srgb, var(--hm-ec-color) 18%, var(--hm-surface));
+  background: color-mix(in srgb, var(--hm-ec-color) 18%, var(--hm-surface-raised));
   color: var(--hm-text);
   font: inherit;
   font-size: var(--hm-font-size-xs);
@@ -16359,7 +16543,7 @@ hm-event-calendar {
   cursor: pointer;
 }
 .hm-event-calendar__event:hover {
-  background: color-mix(in srgb, var(--hm-ec-color) 28%, var(--hm-surface));
+  background: color-mix(in srgb, var(--hm-ec-color) 28%, var(--hm-surface-raised));
 }
 .hm-event-calendar__event:focus-visible {
   z-index: 2;
@@ -16405,7 +16589,7 @@ hm-event-calendar {
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius);
   overflow: hidden;
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
 }
 
 .hm-event-calendar__weekdays,
@@ -16416,7 +16600,7 @@ hm-event-calendar {
 
 .hm-event-calendar__weekday {
   padding: var(--hm-space-micro) var(--hm-space-nano);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--hm-muted);
   font-size: var(--hm-font-size-xs);
   font-weight: var(--hm-font-weight-semibold);
@@ -16433,14 +16617,14 @@ hm-event-calendar {
   border-block-start: var(--hm-border-hairline) solid var(--hm-divider);
   border-inline-end: var(--hm-border-hairline) solid var(--hm-divider);
   padding-block: var(--hm-space-micro);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
 }
 .hm-event-calendar__cell:last-child {
   border-inline-end: none;
 }
 
 .hm-event-calendar__cell--outside {
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
 }
 .hm-event-calendar__cell--outside .hm-event-calendar__date {
   color: var(--hm-muted);
@@ -16558,7 +16742,7 @@ hm-event-calendar {
   border: var(--hm-border-hairline) solid var(--hm-divider);
   border-radius: var(--hm-radius);
   overflow: hidden;
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
 }
 
 .hm-event-calendar__time-head,
@@ -16570,7 +16754,7 @@ hm-event-calendar {
 
 .hm-event-calendar__time-head {
   border-block-end: var(--hm-border-hairline) solid var(--hm-divider);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
 }
 
 .hm-event-calendar__col-head {
@@ -16753,14 +16937,14 @@ hm-event-calendar {
   border-inline-start: var(--hm-border-thin) solid var(--hm-ec-color);
   border-radius: var(--hm-radius-micro);
   padding: var(--hm-space-nano) var(--hm-space-xs);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font: inherit;
   text-align: start;
   cursor: pointer;
 }
 .hm-event-calendar__list-event:hover {
-  background: color-mix(in srgb, var(--hm-ec-color) 12%, var(--hm-surface));
+  background: color-mix(in srgb, var(--hm-ec-color) 12%, var(--hm-surface-raised));
 }
 .hm-event-calendar__list-event:focus-visible {
   outline: var(--hm-border-thin) solid var(--hm-focus-color);
@@ -17477,6 +17661,22 @@ hm-event-calendar {
    Puro CSS, sem componente Angular: `<table>`/`<th>`/`<td>` continuam sendo os elementos nativos
    do consumidor, isto só estiliza. Se a lista crescer e precisar de paginação/busca/ordenação de
    verdade, a resposta é trocar pro `hm-data-grid`, não esticar este utilitário. */
+/* Cabeçalho de tabela no tom do tema — o mesmo do `hm-data-grid`: a faixa de marca da família no claro (como o menu do
+   topo) e o accent sobre o card no escuro. Tabela própria de um app usa estes dois tokens no `<thead>`, nunca
+   `--hm-muted` (cinza, não acompanha o tema). Redeclarados onde o tema e a família mudam (`var()` resolve onde é
+   declarado). */
+:root,
+[data-theme],
+[data-family] {
+  --hm-table-head-bg: var(--hm-panel-bg);
+  --hm-table-head-text: var(--hm-panel-text);
+}
+
+[data-theme=dark] {
+  --hm-table-head-bg: color-mix(in srgb, var(--hm-accent) 26%, var(--hm-surface-raised));
+  --hm-table-head-text: var(--hm-text);
+}
+
 .hm-table {
   width: 100%;
   border-collapse: collapse;
@@ -17490,6 +17690,14 @@ hm-event-calendar {
   font-weight: var(--hm-font-weight-semibold);
   text-align: start;
 }
+.hm-table {
+  /* Cabeçalho de colunas no tom do tema; o `th scope="row"` da tabela vertical continua rótulo discreto. */
+}
+.hm-table thead th {
+  background: var(--hm-table-head-bg);
+  color: var(--hm-table-head-text);
+  border-bottom-color: transparent;
+}
 .hm-table td {
   padding: var(--hm-space-xxxs) var(--hm-space-xs);
   border-bottom: var(--hm-border-hairline) solid var(--hm-divider);
@@ -17508,7 +17716,7 @@ hm-event-calendar {
 }
 
 /* Sem bordas entre as linhas: lista curta dentro de um cartão ou painel que já tem moldura. O
-   cabeçalho continua se distinguindo pelo peso e pela cor `--hm-muted`; se as linhas forem muitas ou
+   cabeçalho continua se distinguindo pela faixa no tom do tema; se as linhas forem muitas ou
    largas, prefira a tabela com bordas (a borda guia o olho na linha certa). */
 .hm-table--borderless th,
 .hm-table--borderless td {
@@ -18542,7 +18750,7 @@ hm-slider {
   padding: var(--hm-space-micro) var(--hm-space-xs);
   border-radius: var(--hm-radius-micro);
   background: var(--hm-text);
-  color: var(--hm-surface);
+  color: var(--hm-surface-raised);
   font-size: var(--hm-font-size-xs);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
@@ -18702,7 +18910,7 @@ hm-slider {
   margin: 0;
   padding: var(--hm-space-micro);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   outline: var(--hm-border-hairline) solid var(--hm-divider);
   color: var(--hm-text);
@@ -18883,7 +19091,7 @@ hm-slider {
 }
 
 .hm-fab__button--highlight {
-  box-shadow: var(--hm-shadow-lg), 0 0 0 var(--hm-border-thin) var(--hm-surface), 0 0 0 calc(var(--hm-border-thin) * 2) var(--hm-accent);
+  box-shadow: var(--hm-shadow-lg), 0 0 0 var(--hm-border-thin) var(--hm-surface-raised), 0 0 0 calc(var(--hm-border-thin) * 2) var(--hm-accent);
 }
 
 .hm-fab__icon {
@@ -18945,7 +19153,7 @@ hm-slider {
   outline-offset: var(--hm-border-thin);
 }
 .hm-fab__action:hover:not([aria-disabled=true]) .hm-fab__action-icon {
-  background: color-mix(in srgb, var(--hm-accent) 14%, var(--hm-surface-raised));
+  background: color-mix(in srgb, var(--hm-accent) 14%, var(--hm-surface-overlay));
 }
 .hm-fab__action[aria-disabled=true] {
   color: var(--hm-disabled-text);
@@ -18959,7 +19167,7 @@ hm-slider {
   inline-size: var(--hm-fab-action-size);
   block-size: var(--hm-fab-action-size);
   border-radius: var(--hm-radius-pill);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   color: var(--hm-accent-strong);
   transition: background-color var(--hm-duration-quick) var(--hm-ease);
@@ -18978,7 +19186,7 @@ hm-slider {
   translate: 0 -50%;
   padding: var(--hm-space-micro) var(--hm-space-xs);
   border-radius: var(--hm-radius-micro);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-overlay);
   box-shadow: var(--hm-shadow-overlay);
   color: inherit;
   font-size: var(--hm-font-size-xs);
@@ -19367,7 +19575,7 @@ hm-search-field {
   padding-inline: var(--hm-space-nano);
   border: 1px solid var(--hm-border);
   border-radius: var(--hm-radius-control);
-  background: var(--hm-surface);
+  background: var(--hm-surface-raised);
   color: var(--hm-text);
   font-family: var(--hm-font-mono);
   font-size: var(--hm-font-size-sm);
@@ -19485,7 +19693,7 @@ hm-search-field {
   white-space: nowrap;
 }
 .hm-theme-builder__checks thead th {
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   font-weight: var(--hm-font-weight-semibold);
 }
 .hm-theme-builder__checks tbody th {
@@ -19547,7 +19755,7 @@ hm-search-field {
   overflow: auto;
   border: 1px solid var(--hm-border);
   border-radius: var(--hm-radius);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   color: var(--hm-text);
   font-family: var(--hm-font-mono);
   font-size: var(--hm-font-size-sm);
@@ -20129,7 +20337,7 @@ hm-file-upload {
   padding: var(--hm-file-upload-zone-padding);
   border: var(--hm-border-hairline) dashed var(--hm-border);
   border-radius: var(--hm-radius);
-  background: var(--hm-surface-raised);
+  background: var(--hm-surface-muted);
   text-align: center;
   transition: border-color var(--hm-duration-quick) var(--hm-ease), background-color var(--hm-duration-quick) var(--hm-ease);
 }