domma-js 0.22.9 → 0.24.0

package/public/dist/elements.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Elements CSS v0.22.9
+ * Domma Elements CSS v0.24.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-04-24T20:17:43.050Z
- * Commit: acc551f
+ * Built: 2026-05-02T17:40:23.703Z
+ * Commit: ef7021b
  */
 
 /**
@@ -117,7 +117,7 @@
 .btn-outline {
     background-color: transparent;
     border-color: var(--dm-primary);
-    color: var(--dm-primary);
+    color: var(--dm-link, color-mix(in oklab, var(--dm-primary, #0070d6), var(--dm-text, #1a1a1a) 55%));
 }
 
 .btn-outline:hover:not(:disabled) {
@@ -249,17 +249,17 @@
 
 .card-primary .card-header {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
     border-color: var(--dm-primary);
 }
 
 .card-primary .card-body {
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
 }
 
 .card-primary .card-footer {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
     border-color: var(--dm-primary);
 }
 
@@ -485,7 +485,7 @@
 }
 
 .tab-item.active {
-    color: var(--dm-primary);
+    color: var(--dm-link, color-mix(in oklab, var(--dm-primary, #0070d6), var(--dm-text, #1a1a1a) 55%));
     border-bottom-color: var(--dm-primary);
 }
 
@@ -585,7 +585,7 @@
 .tooltip-content {
     position: absolute;
     background-color: var(--dm-surface);
-    color: var(--dm-white);
+    color: var(--dm-text);
     padding: var(--dm-space-2) var(--dm-space-3);
     border-radius: var(--dm-radius-md);
     font-size: var(--dm-font-size-sm);
@@ -850,7 +850,7 @@ textarea:not([class])::placeholder {
 
 .form-select option:checked {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
 }
 
 .form-input.error,
@@ -1017,7 +1017,7 @@ textarea:not([class])::placeholder {
     justify-content: center;
     pointer-events: none;
     z-index: 1;
-    color: var(--dm-text-secondary);
+    color: var(--dm-text);
     background-color: var(--dm-hover-bg);
     padding: 0 var(--dm-space-3);
 }
@@ -1223,7 +1223,7 @@ textarea:not([class])::placeholder {
 
 .badge-primary {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
 }
 
 .badge-secondary {
@@ -1233,22 +1233,22 @@ textarea:not([class])::placeholder {
 
 .badge-success {
     background-color: var(--dm-success);
-    color: var(--dm-white);
+    color: var(--dm-success-text, var(--dm-white));
 }
 
 .badge-danger {
     background-color: var(--dm-danger);
-    color: var(--dm-white);
+    color: var(--dm-danger-text, var(--dm-white));
 }
 
 .badge-warning {
     background-color: var(--dm-warning);
-    color: var(--dm-text);
+    color: var(--dm-warning-text, var(--dm-text));
 }
 
 .badge-info {
     background-color: var(--dm-info);
-    color: var(--dm-white);
+    color: var(--dm-info-text, var(--dm-white));
 }
 
 /* Pulse animation for new content indicators */
@@ -1284,7 +1284,7 @@ textarea:not([class])::placeholder {
     line-height: 1;
     border-radius: var(--dm-radius-full);
     background-color: var(--dm-danger);
-    color: var(--dm-white);
+    color: var(--dm-danger-text, var(--dm-white));
 }
 
 /* Dot indicator — small coloured presence circle */
@@ -1321,7 +1321,7 @@ textarea:not([class])::placeholder {
     border: 2px solid var(--dm-background, #fff);
     z-index: 1;
     background-color: var(--dm-danger);
-    color: var(--dm-white);
+    color: var(--dm-danger-text, var(--dm-white));
 }
 
 /* Dot variant of counter — smaller, no text */
@@ -1344,14 +1344,14 @@ textarea:not([class])::placeholder {
 }
 
 /* Colour variants for .badge-number */
-.badge-number.badge-number-primary   { background-color: var(--dm-primary); color: var(--dm-white); }
+.badge-number.badge-number-primary   { background-color: var(--dm-primary); color: var(--dm-primary-text, var(--dm-white)); }
 .badge-number.badge-number-secondary { background-color: var(--dm-background-alt); color: var(--dm-text); }
-.badge-number.badge-number-success   { background-color: var(--dm-success); color: var(--dm-white); }
-.badge-number.badge-number-danger    { background-color: var(--dm-danger); color: var(--dm-white); }
-.badge-number.badge-number-warning   { background-color: var(--dm-warning); color: var(--dm-text); }
-.badge-number.badge-number-info      { background-color: var(--dm-info); color: var(--dm-white); }
+.badge-number.badge-number-success   { background-color: var(--dm-success); color: var(--dm-success-text, var(--dm-white)); }
+.badge-number.badge-number-danger    { background-color: var(--dm-danger); color: var(--dm-danger-text, var(--dm-white)); }
+.badge-number.badge-number-warning   { background-color: var(--dm-warning); color: var(--dm-warning-text, var(--dm-text)); }
+.badge-number.badge-number-info      { background-color: var(--dm-info); color: var(--dm-info-text, var(--dm-white)); }
 .badge-number.badge-number-light     { background-color: var(--dm-background-alt); color: var(--dm-text); }
-.badge-number.badge-number-dark      { background-color: var(--dm-surface-overlay); color: var(--dm-white); }
+.badge-number.badge-number-dark      { background-color: var(--dm-surface-overlay); color: var(--dm-text); }
 
 /* Colour variants for .badge-dot */
 .badge-dot.badge-dot-primary   { background-color: var(--dm-primary); }
@@ -1364,14 +1364,14 @@ textarea:not([class])::placeholder {
 .badge-dot.badge-dot-dark      { background-color: var(--dm-surface-overlay); }
 
 /* Colour variants for .badge-counter */
-.badge-counter.badge-counter-primary   { background-color: var(--dm-primary); color: var(--dm-white); }
+.badge-counter.badge-counter-primary   { background-color: var(--dm-primary); color: var(--dm-primary-text, var(--dm-white)); }
 .badge-counter.badge-counter-secondary { background-color: var(--dm-background-alt); color: var(--dm-text); }
-.badge-counter.badge-counter-success   { background-color: var(--dm-success); color: var(--dm-white); }
-.badge-counter.badge-counter-danger    { background-color: var(--dm-danger); color: var(--dm-white); }
-.badge-counter.badge-counter-warning   { background-color: var(--dm-warning); color: var(--dm-text); }
-.badge-counter.badge-counter-info      { background-color: var(--dm-info); color: var(--dm-white); }
+.badge-counter.badge-counter-success   { background-color: var(--dm-success); color: var(--dm-success-text, var(--dm-white)); }
+.badge-counter.badge-counter-danger    { background-color: var(--dm-danger); color: var(--dm-danger-text, var(--dm-white)); }
+.badge-counter.badge-counter-warning   { background-color: var(--dm-warning); color: var(--dm-warning-text, var(--dm-text)); }
+.badge-counter.badge-counter-info      { background-color: var(--dm-info); color: var(--dm-info-text, var(--dm-white)); }
 .badge-counter.badge-counter-light     { background-color: var(--dm-background-alt); color: var(--dm-text); }
-.badge-counter.badge-counter-dark      { background-color: var(--dm-surface-overlay); color: var(--dm-white); }
+.badge-counter.badge-counter-dark      { background-color: var(--dm-surface-overlay); color: var(--dm-text); }
 
 
 /* ============================================
@@ -1493,7 +1493,7 @@ textarea:not([class])::placeholder {
 /* Active/selected state — accent background takes precedence over colour variants */
 .list-group-item.active {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
     border-bottom-color: var(--dm-primary-hover);
     z-index: 1;
 }
@@ -1504,10 +1504,10 @@ textarea:not([class])::placeholder {
 
 /* Disabled state — dimmed and non-interactive */
 .list-group-item.disabled {
-    opacity: 0.55;
+    opacity: 0.7;
     cursor: not-allowed;
     pointer-events: none;
-    color: var(--dm-text-disabled);
+    color: var(--dm-text-muted);
 }
 
 /* ---- Colour Variants ---- */
@@ -1516,7 +1516,7 @@ textarea:not([class])::placeholder {
 .list-group-item-primary {
     border-left: 4px solid var(--dm-primary);
     background-color: var(--dm-primary-light);
-    color: var(--dm-primary-dark);
+    color: var(--dm-text);
 }
 
 .list-group-item-secondary {
@@ -1528,25 +1528,25 @@ textarea:not([class])::placeholder {
 .list-group-item-success {
     border-left: 4px solid var(--dm-success);
     background-color: var(--dm-success-light);
-    color: var(--dm-success-dark);
+    color: var(--dm-text);
 }
 
 .list-group-item-danger {
     border-left: 4px solid var(--dm-danger);
     background-color: var(--dm-danger-light);
-    color: var(--dm-danger-dark);
+    color: var(--dm-text);
 }
 
 .list-group-item-warning {
     border-left: 4px solid var(--dm-warning);
     background-color: var(--dm-warning-light);
-    color: var(--dm-warning-text);
+    color: var(--dm-text);
 }
 
 .list-group-item-info {
     border-left: 4px solid var(--dm-info);
     background-color: var(--dm-info-light);
-    color: var(--dm-info-dark);
+    color: var(--dm-text);
 }
 
 /* Active state wins over all colour variants */
@@ -1557,7 +1557,7 @@ textarea:not([class])::placeholder {
 .list-group-item.active.list-group-item-warning,
 .list-group-item.active.list-group-item-info {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
     border-left-color: var(--dm-primary-dark);
 }
 
@@ -1571,12 +1571,12 @@ textarea:not([class])::placeholder {
     color: var(--dm-text-muted);
 }
 
-[data-mode="dark"] .list-group-item-primary   { color: var(--dm-primary); }
+[data-mode="dark"] .list-group-item-primary   { color: var(--dm-text) !important; background-color: color-mix(in oklab, var(--dm-primary), transparent 85%); }
 [data-mode="dark"] .list-group-item-secondary { color: var(--dm-text); }
-[data-mode="dark"] .list-group-item-success   { color: var(--dm-success); }
-[data-mode="dark"] .list-group-item-danger    { color: var(--dm-danger); }
-[data-mode="dark"] .list-group-item-warning   { color: var(--dm-warning-text, var(--dm-warning)); }
-[data-mode="dark"] .list-group-item-info      { color: var(--dm-info); }
+[data-mode="dark"] .list-group-item-success   { color: var(--dm-text) !important; background-color: color-mix(in oklab, var(--dm-success), transparent 85%); }
+[data-mode="dark"] .list-group-item-danger    { color: var(--dm-text) !important; background-color: color-mix(in oklab, var(--dm-danger),  transparent 85%); }
+[data-mode="dark"] .list-group-item-warning   { color: var(--dm-text) !important; background-color: color-mix(in oklab, var(--dm-warning), transparent 85%); }
+[data-mode="dark"] .list-group-item-info      { color: var(--dm-text) !important; background-color: color-mix(in oklab, var(--dm-info),    transparent 85%); }
 
 [data-mode="dark"] .list-group-flush .list-group-item:first-child {
     border-top-color: var(--dm-border);
@@ -1667,7 +1667,7 @@ textarea:not([class])::placeholder {
 
 .pill-primary {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
 }
 
 .pill-primary:hover {
@@ -1697,23 +1697,23 @@ textarea:not([class])::placeholder {
 .pill-outline-primary {
     background-color: transparent;
     border-color: var(--dm-primary);
-    color: var(--dm-primary);
+    color: var(--dm-link, color-mix(in oklab, var(--dm-primary, #0070d6), var(--dm-text, #1a1a1a) 55%));
 }
 
 .pill-outline-primary:hover {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
 }
 
 .pill-light {
-    background-color: rgba(255, 255, 255, 0.15);
-    border-color: rgba(255, 255, 255, 0.3);
-    color: var(--dm-white);
+    background-color: var(--dm-surface-alt, var(--dm-background-alt, var(--dm-surface-raised, #f1f3f5)));
+    border-color: var(--dm-border);
+    color: var(--dm-text);
 }
 
 .pill-light:hover {
-    background-color: rgba(255, 255, 255, 0.25);
-    color: var(--dm-white);
+    background-color: var(--dm-hover-bg, rgba(0, 0, 0, 0.04));
+    color: var(--dm-text);
     text-decoration-line: none;
 }
 
@@ -1759,40 +1759,79 @@ textarea:not([class])::placeholder {
 .alert-primary {
     background-color: var(--dm-primary-light);
     border: 1px solid var(--dm-primary);
-    color: var(--dm-primary-dark);
+    color: var(--dm-text) !important;
 }
 
 .alert-success {
     background-color: var(--dm-success-light);
     border: 1px solid var(--dm-success);
-    color: var(--dm-success-dark);
+    color: var(--dm-text) !important;
 }
 
 .alert-danger {
     background-color: var(--dm-danger-light);
     border: 1px solid var(--dm-danger);
-    color: var(--dm-danger-dark);
+    color: var(--dm-text) !important;
 }
 
 .alert-warning {
     background-color: var(--dm-warning-light);
     border: 1px solid var(--dm-warning);
-    color: var(--dm-warning-text);
+    color: var(--dm-text) !important;
 }
 
 .alert-info {
     background-color: var(--dm-info-light);
     border: 1px solid var(--dm-info);
-    color: var(--dm-info-dark);
+    color: var(--dm-text) !important;
 }
 
 /* In dark themes, the "-dark" colour variants are designed for light backgrounds.
    Use the base colour (readable on dark backgrounds) instead. */
-[data-mode="dark"] .alert-primary { color: var(--dm-primary); }
-[data-mode="dark"] .alert-success { color: var(--dm-success); }
-[data-mode="dark"] .alert-danger  { color: var(--dm-danger);  }
-[data-mode="dark"] .alert-warning { color: var(--dm-warning-text, var(--dm-warning)); }
-[data-mode="dark"] .alert-info    { color: var(--dm-info);    }
+[data-mode="dark"] .alert-primary { color: var(--dm-text) !important; }
+[data-mode="dark"] .alert-success { color: var(--dm-text) !important; }
+[data-mode="dark"] .alert-danger  { color: var(--dm-text) !important; }
+[data-mode="dark"] .alert-warning { color: var(--dm-text) !important; }
+[data-mode="dark"] .alert-info    { color: var(--dm-text) !important; }
+
+/* In dark mode, force alert backgrounds to a low-opacity tint of the brand
+   colour rather than the *-light token, which some themes leave as the
+   solid pale pastel from the light defaults (light-on-pale failures). */
+[data-mode="dark"] .alert-primary { background-color: color-mix(in oklab, var(--dm-primary), transparent 85%); }
+[data-mode="dark"] .alert-success { background-color: color-mix(in oklab, var(--dm-success), transparent 85%); }
+[data-mode="dark"] .alert-danger  { background-color: color-mix(in oklab, var(--dm-danger),  transparent 85%); }
+[data-mode="dark"] .alert-warning { background-color: color-mix(in oklab, var(--dm-warning), transparent 85%); }
+[data-mode="dark"] .alert-info    { background-color: color-mix(in oklab, var(--dm-info),    transparent 85%); }
+
+
+/* ============================================
+   PROGRESS
+   ============================================ */
+
+.progress {
+    display: flex;
+    height: 1rem;
+    overflow: hidden;
+    font-size: var(--dm-font-size-xs);
+    background-color: var(--dm-progress-bg, var(--dm-surface-alt, #e9ecef));
+    border-radius: var(--dm-radius-md);
+}
+
+.progress-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--dm-primary-text, #fff);
+    text-align: center;
+    white-space: nowrap;
+    background-color: var(--dm-progress-bar, var(--dm-primary));
+    transition: width 0.3s ease;
+}
+
+.progress-bar-success { background-color: var(--dm-success); color: var(--dm-success-text, #fff); }
+.progress-bar-warning { background-color: var(--dm-warning); color: var(--dm-warning-text, #1a1a1a); }
+.progress-bar-danger  { background-color: var(--dm-danger);  color: var(--dm-danger-text, #fff); }
+.progress-bar-info    { background-color: var(--dm-info);    color: var(--dm-info-text, #fff); }
 
 
 /* ============================================
@@ -1818,7 +1857,7 @@ textarea:not([class])::placeholder {
 
 code {
     background-color: var(--dm-code-bg, var(--dm-background-alt));
-    color: var(--dm-danger);
+    color: var(--dm-code-text, var(--dm-text));
     padding: 0.125rem 0.25rem;
     border-radius: var(--dm-radius-sm);
     font-size: 0.875em;
@@ -1840,10 +1879,10 @@ code {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--dm-hover-bg, rgba(0, 0, 0, 0.05));
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: var(--dm-radius-sm);
-    color: var(--dm-text-disabled);
+    color: var(--dm-text-secondary);
     padding: 0.375rem 0.5rem;
     cursor: pointer;
     opacity: 0;
@@ -1867,14 +1906,14 @@ code {
 
 .code-block-copy:hover {
     background: rgba(255, 255, 255, 0.2);
-    color: var(--dm-white);
+    color: var(--dm-text);
     transform: scale(1.05);
 }
 
 .code-block-copy.copied {
     background: var(--dm-success);
     border-color: var(--dm-success);
-    color: var(--dm-white);
+    color: var(--dm-success-text, var(--dm-white));
     opacity: 1;
 }
 
@@ -1918,7 +1957,7 @@ code {
 .pagination-link.active {
     background-color: var(--dm-primary);
     border-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
 }
 
 .pagination-link:disabled,
@@ -2245,7 +2284,7 @@ code {
 
 .navbar-light .navbar-action-link,
 .navbar-light .navbar-action-link:hover {
-    color: var(--dm-white) !important;
+    color: var(--dm-text) !important;
 }
 
 /* Navbar user info - properly theme aware with solid background */
@@ -2257,7 +2296,7 @@ code {
 
 [data-mode="dark"] .navbar-user-info {
     background: var(--dm-surface) !important;
-    color: var(--dm-white) !important;
+    color: var(--dm-text) !important;
     border-color: var(--dm-border) !important;
 }
 
@@ -2517,9 +2556,9 @@ code {
 }
 
 .pill-light {
-    background: rgba(255, 255, 255, 0.15);
-    border-color: rgba(255, 255, 255, 0.3);
-    color: var(--dm-white);
+    background: var(--dm-surface-alt, rgba(255, 255, 255, 0.15));
+    border-color: var(--dm-border, rgba(255, 255, 255, 0.3));
+    color: var(--dm-text);
 }
 
 .pill-light:hover {
@@ -2571,7 +2610,7 @@ code {
 
 .dm-autocomplete-item.active {
     background-color: var(--dm-primary-light);
-    color: var(--dm-white);
+    color: var(--dm-text);
 }
 
 .dm-autocomplete-loading,
@@ -2603,7 +2642,7 @@ code {
 
 [data-mode="dark"].dm-autocomplete-item.active {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-text);
 }
 
 /* ============================================
@@ -2644,7 +2683,7 @@ code {
     gap: 0.25rem;
     padding: 0.25rem 0.5rem;
     background: var(--dm-primary-light);
-    color: var(--dm-white);
+    color: var(--dm-text);
     border-radius: var(--dm-radius-full);
     font-size: var(--dm-font-size-sm);
     line-height: 1.2;
@@ -2723,7 +2762,7 @@ code {
 
 .dm-pillbox-option.selected {
     background-color: var(--dm-primary-light);
-    color: var(--dm-white);
+    color: var(--dm-text);
 }
 
 .dm-pillbox-message {
@@ -3106,7 +3145,7 @@ code {
     gap: var(--dm-space-2);
     padding: var(--dm-space-1) var(--dm-space-3);
     background: var(--dm-primary);
-    color: var(--dm-text-inverse);
+    color: var(--dm-primary-text, var(--dm-text-inverse));
     font-size: var(--dm-font-size-sm);
     font-weight: 500;
     border-radius: var(--dm-radius-full);
@@ -3125,25 +3164,13 @@ code {
     color: inherit;
 }
 
-.hero-badge-success {
-    background: var(--dm-success);
-    color: var(--dm-text-inverse);
-}
+.hero-badge-success { background: var(--dm-success); color: var(--dm-success-text, var(--dm-white)); }
 
-.hero-badge-warning {
-    background: var(--dm-warning);
-    color: var(--dm-text, var(--dm-text));
-}
+.hero-badge-warning { background: var(--dm-warning); color: var(--dm-warning-text, var(--dm-text)); }
 
-.hero-badge-danger {
-    background: var(--dm-danger);
-    color: var(--dm-text-inverse);
-}
+.hero-badge-danger { background: var(--dm-danger); color: var(--dm-danger-text, var(--dm-white)); }
 
-.hero-badge-info {
-    background: var(--dm-info);
-    color: var(--dm-text-inverse);
-}
+.hero-badge-info { background: var(--dm-info); color: var(--dm-info-text, var(--dm-white)); }
 
 /* Badge icon/emoji support */
 .hero-badge-icon {
@@ -3735,7 +3762,7 @@ code {
 }
 
 .sidebar-toggle-btn:hover {
-    background: var(--dm-gray-200, #e9ecef);
+    background: var(--dm-hover-bg, var(--dm-gray-200, #e9ecef));
     color: var(--dm-text, #212529);
 }
 
@@ -3774,12 +3801,12 @@ code {
 
 .sidebar-link:hover {
     color: var(--dm-text, #212529);
-    background: var(--dm-gray-100, #f8f9fa);
+    background: var(--dm-hover-bg, var(--dm-gray-100, #f8f9fa));
     text-decoration: none;
 }
 
 .sidebar-link.active {
-    color: var(--dm-primary, #007bff);
+    color: var(--dm-text);
     background: var(--dm-primary-bg, rgba(0, 123, 255, 0.1));
     font-weight: 500;
     border-left-color: var(--dm-primary, #007bff);
@@ -3811,7 +3838,7 @@ code {
     font-size: var(--dm-font-size-xs, 0.75rem);
     font-weight: 600;
     line-height: 1;
-    color: var(--dm-white, #fff);
+    color: var(--dm-primary-text, var(--dm-white, #fff));
     background: var(--dm-primary, #007bff);
     border-radius: 10px;
 }
@@ -3949,7 +3976,7 @@ code {
 .sidebar-dark .sidebar-link.active {
     color: var(--dm-text-light, #eaeaea);
     background: var(--dm-primary-light, rgba(102, 178, 255, 0.15));
-    border-left-color: var(--dm-primary-light, #66b2ff);
+    border-left-color: var(--dm-text);
 }
 
 .sidebar-dark .sidebar-heading {
@@ -4028,7 +4055,7 @@ code {
         width: 40px;
         height: 40px;
         background: var(--dm-primary, #007bff);
-        color: var(--dm-white, #fff);
+        color: var(--dm-primary-text, var(--dm-white, #fff));
         border: none;
         border-radius: 0 var(--dm-radius-md, 0.375rem) var(--dm-radius-md, 0.375rem) 0;
         cursor: pointer;
@@ -4208,7 +4235,7 @@ code {
 }
 
 [data-mode="light"] .syntax-number {
-    color: #098658;
+    color: #076b46;
 }
 
 [data-mode="light"] .syntax-function {
@@ -4442,8 +4469,8 @@ code {
 }
 
 .footer-social-link:hover {
-    color: var(--dm-primary, #007bff);
-    background: var(--dm-gray-100, #f8f9fa);
+    color: var(--dm-text);
+    background: var(--dm-hover-bg, var(--dm-gray-100, #f8f9fa));
 }
 
 .footer-copyright {
@@ -4622,7 +4649,7 @@ code {
 }
 
 .footer-dark .footer-social-link:hover {
-    color: var(--dm-primary-light, #66b2ff);
+    color: var(--dm-text);
     background: var(--dm-background-alt, var(--dm-gray-800));
 }
 
@@ -4694,22 +4721,22 @@ code {
 
 .bg-primary {
     background-color: var(--dm-primary) !important;
-    color: var(--dm-white) !important;
+    color: var(--dm-primary-text, var(--dm-white)) !important;
 }
 
 .bg-secondary {
     background-color: var(--dm-secondary) !important;
-    color: var(--dm-white) !important;
+    color: var(--dm-secondary-text, var(--dm-white)) !important;
 }
 
 .bg-success {
     background-color: var(--dm-success) !important;
-    color: var(--dm-white) !important;
+    color: var(--dm-success-text, var(--dm-white)) !important;
 }
 
 .bg-danger {
     background-color: var(--dm-danger) !important;
-    color: var(--dm-white) !important;
+    color: var(--dm-danger-text, var(--dm-white)) !important;
 }
 
 .bg-warning {
@@ -4719,7 +4746,7 @@ code {
 
 .bg-info {
     background-color: var(--dm-info) !important;
-    color: var(--dm-white) !important;
+    color: var(--dm-info-text, var(--dm-white)) !important;
 }
 
 .bg-light {
@@ -4729,7 +4756,7 @@ code {
 
 .bg-dark {
     background-color: var(--dm-background) !important;
-    color: var(--dm-white) !important;
+    color: var(--dm-text-inverse, var(--dm-white)) !important;
 }
 
 /* Background Tints (Lighter) */
@@ -4773,23 +4800,25 @@ code {
 }
 
 .text-secondary {
-    color: var(--dm-secondary) !important;
+    color: var(--dm-text-secondary) !important;
 }
 
+/* Status text utilities use color-mix with --dm-text so they auto-adapt to
+   light/dark modes — keeping brand identity while staying ≥4.5:1 readable. */
 .text-success {
-    color: var(--dm-success) !important;
+    color: color-mix(in oklab, var(--dm-success), var(--dm-text) 30%) !important;
 }
 
 .text-danger {
-    color: var(--dm-danger) !important;
+    color: color-mix(in oklab, var(--dm-danger), var(--dm-text) 30%) !important;
 }
 
 .text-warning {
-    color: var(--dm-warning) !important;
+    color: color-mix(in oklab, var(--dm-warning), var(--dm-text) 45%) !important;
 }
 
 .text-info {
-    color: var(--dm-info) !important;
+    color: color-mix(in oklab, var(--dm-info), var(--dm-text) 30%) !important;
 }
 
 .text-muted {
@@ -4899,7 +4928,7 @@ code {
 
 .dm-treeview-badge {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
     font-size: 0.75rem;
     font-weight: 600;
     padding: 0.125rem 0.5rem;
@@ -5022,7 +5051,7 @@ code {
 /* Start button - green/success */
 .dm-timer-start {
     background-color: var(--dm-success);
-    color: var(--dm-white);
+    color: var(--dm-success-text, var(--dm-white));
     border-color: var(--dm-success);
 }
 
@@ -5038,7 +5067,7 @@ code {
 /* Pause button - warning/orange */
 .dm-timer-pause {
     background-color: var(--dm-warning);
-    color: var(--dm-white);
+    color: var(--dm-warning-text, var(--dm-white));
     border-color: var(--dm-warning);
 }
 
@@ -5054,7 +5083,7 @@ code {
 /* Reset button - secondary/gray */
 .dm-timer-reset {
     background-color: var(--dm-secondary);
-    color: var(--dm-white);
+    color: var(--dm-secondary-text, var(--dm-white));
     border-color: var(--dm-secondary);
 }
 
@@ -5097,7 +5126,7 @@ code {
     position: absolute;
     z-index: 9999;
     background-color: var(--dm-background);
-    color: var(--dm-white);
+    color: var(--dm-text);
     padding: 0.5rem 0.75rem;
     border-radius: var(--dm-radius-md);
     font-size: 0.875rem;
@@ -5308,7 +5337,7 @@ code {
     max-width: 350px;
     padding: 1rem;
     background-color: var(--dm-surface);
-    color: var(--dm-white);
+    color: var(--dm-text);
     border-radius: var(--dm-radius-md);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     opacity: 0;
@@ -5337,7 +5366,7 @@ code {
 
 .domma-toast.domma-toast-warning {
     background-color: var(--dm-warning);
-    color: var(--dm-text);
+    color: var(--dm-warning-text, var(--dm-text));
 }
 
 .domma-toast.domma-toast-info {
@@ -5402,7 +5431,7 @@ code {
     height: 2.5rem;
     padding: 0;
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
     border: none;
     border-radius: var(--dm-radius-full);
     cursor: pointer;
@@ -5729,7 +5758,7 @@ code {
 .domma-table-regex-button.active {
     border-color: var(--dm-primary);
     background: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
 }
 
 .domma-table-regex-button:hover:not(.active) {
@@ -5862,7 +5891,7 @@ code {
 .domma-table-export-button:hover {
     background: var(--dm-primary);
     border-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
 }
 
 /* Dark theme support */
@@ -5906,7 +5935,7 @@ code {
 [data-mode="dark"] .domma-table-export-button:hover {
     background: var(--dm-primary);
     border-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
 }
 
 [data-mode="dark"] .domma-column-dropdown {
@@ -6232,7 +6261,7 @@ code {
     width: 120px;
     padding: var(--dm-space-2) var(--dm-space-3);
     background: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
     border-radius: var(--dm-radius-md);
     text-align: center;
     font-weight: 600;
@@ -6327,16 +6356,17 @@ code {
 /* Dark Theme Support */
 [data-mode="dark"] .dm-timeline-content {
     background: var(--dm-surface);
-    border-color: var(--dm-text);
-    color: var(--dm-text-secondary);
+    border-color: var(--dm-border);
+    color: var(--dm-text);
 }
 
 [data-mode="dark"] .dm-timeline-title {
-    color: var(--dm-white);
+    color: var(--dm-text);
 }
 
 [data-mode="dark"] .dm-timeline-description {
-    color: var(--dm-text-disabled);
+    color: var(--dm-text);
+    opacity: 0.85;
 }
 
 [data-mode="dark"] .dm-timeline-minimal .dm-timeline-content {
@@ -6390,14 +6420,15 @@ code {
     margin: 0 0 var(--dm-space-2);
     font-size: var(--dm-font-size-lg);
     font-weight: 600;
-    color: var(--dm-text-primary);
+    color: var(--dm-text);
 }
 
 .dm-progression-description {
     margin: 0;
     font-size: var(--dm-font-size-base);
-    color: var(--dm-text-secondary);
+    color: var(--dm-text);
     line-height: 1.6;
+    opacity: 0.85;
 }
 
 /* Vertical layout (default) */
@@ -6666,17 +6697,17 @@ code {
 
 .dm-progression-priority-medium {
     background: var(--dm-info-light, rgba(59, 130, 246, 0.1));
-    color: var(--dm-info, #3b82f6);
+    color: var(--dm-text);
 }
 
 .dm-progression-priority-high {
     background: var(--dm-warning-light, rgba(245, 158, 11, 0.1));
-    color: var(--dm-warning, #f59e0b);
+    color: var(--dm-text);
 }
 
 .dm-progression-priority-critical {
     background: var(--dm-danger-light, rgba(239, 68, 68, 0.1));
-    color: var(--dm-danger, #ef4444);
+    color: var(--dm-text);
 }
 
 /* Tags */
@@ -6689,7 +6720,7 @@ code {
 
 .dm-progression-tag {
     background: var(--dm-primary-light, rgba(59, 130, 246, 0.1));
-    color: var(--dm-primary, #3b82f6);
+    color: var(--dm-text);
     padding: 2px 8px;
     border-radius: var(--dm-radius-sm);
     font-size: var(--dm-font-size-xs);
@@ -7254,7 +7285,7 @@ code {
 
 .signature-mode-btn.active {
     background: var(--dm-primary);
-    color: #fff;
+    color: var(--dm-primary-text, #fff);
 }
 
 .signature-mode-btn:not(.active):hover {