domma-js 0.23.0 → 0.25.0

package/public/dist/bundles/domma-data-focused.css

@@ -1,8 +1,8 @@
 /*!
- * Domma Data-Focused CSS Bundle v0.23.0
+ * Domma Data-Focused CSS Bundle v0.25.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-05-02T14:12:41.326Z
+ * Built: 2026-05-09T09:27:08.654Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.23.0
+ * Domma Core CSS v0.25.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-05-02T14:12:41.110Z
- * Commit: 99507eb
+ * Built: 2026-05-09T09:27:08.360Z
+ * Commit: 5de0709
  */
 
 /**
@@ -178,11 +178,12 @@
     /* ================================================
        STATUS COLORS
        ================================================ */
-    --dm-success: var(--dm-green-600);
-    --dm-success-hover: var(--dm-green-700);
-    --dm-success-active: var(--dm-green-800);
+    --dm-success: var(--dm-green-700);
+    --dm-success-hover: var(--dm-green-800);
+    --dm-success-active: var(--dm-green-900, #14532d);
     --dm-success-light: var(--dm-green-100);
     --dm-success-dark: var(--dm-green-800);
+    --dm-success-text: var(--dm-white);
 
     --dm-danger: var(--dm-red-600);
     --dm-danger-hover: var(--dm-red-700);
@@ -191,17 +192,19 @@
     --dm-danger-dark: var(--dm-red-800);
 
     --dm-warning: var(--dm-amber-500);
+    /* amber-950 ensures ≥6.9:1 contrast on amber-500 backgrounds (badges, alerts, btn-warning) */
     --dm-warning-hover: var(--dm-amber-600);
     --dm-warning-active: var(--dm-amber-700);
-    --dm-warning-text: var(--dm-amber-900);
+    --dm-warning-text: var(--dm-amber-950);
     --dm-warning-light: var(--dm-amber-100);
     --dm-warning-dark: var(--dm-amber-800);
 
-    --dm-info: var(--dm-sky-500);
-    --dm-info-hover: var(--dm-sky-600);
-    --dm-info-active: var(--dm-sky-700);
+    --dm-info: var(--dm-sky-700);
+    --dm-info-hover: var(--dm-sky-800);
+    --dm-info-active: var(--dm-sky-900, #0c4a6e);
     --dm-info-light: var(--dm-sky-100);
     --dm-info-dark: var(--dm-sky-800);
+    --dm-info-text: var(--dm-white);
 
     /* ================================================
        BACKGROUND TINTS (Lighter versions for backgrounds)
@@ -432,13 +435,13 @@ body {
 }
 
 a {
-    color: var(--dm-primary);
+    color: var(--dm-link, color-mix(in oklab, var(--dm-primary, #0070d6), var(--dm-text, #1a1a1a) 55%));
     text-decoration: none;
     transition: color 0.2s ease;
 }
 
 a:hover {
-    color: var(--dm-primary-hover);
+    color: var(--dm-link-hover, color-mix(in oklab, var(--dm-primary, #0070d6), var(--dm-text, #1a1a1a) 25%));
     text-decoration: none;
 }
 
@@ -1224,7 +1227,7 @@ code, pre {
 }
 
 .text-secondary {
-    color: var(--dm-secondary);
+    color: var(--dm-text-secondary);
 }
 
 .text-success {
@@ -2575,7 +2578,7 @@ code, pre {
 .btn-group > .btn-outline.active {
     background-color: var(--dm-primary);
     border-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-primary-text, var(--dm-white));
 }
 
 .btn-group > .btn-secondary.active {
@@ -4826,11 +4829,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.23.0
+ * Domma Grid CSS v0.25.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-05-02T14:12:41.115Z
- * Commit: 99507eb
+ * Built: 2026-05-09T09:27:08.365Z
+ * Commit: 5de0709
  */
 
 /**
@@ -5451,11 +5454,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.23.0
+ * Domma Elements CSS v0.25.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-05-02T14:12:41.120Z
- * Commit: 99507eb
+ * Built: 2026-05-09T09:27:08.374Z
+ * Commit: 5de0709
  */
 
 /**
@@ -5569,7 +5572,7 @@ body.dm-cloaked.dm-ready {
 .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) {
@@ -5701,17 +5704,17 @@ body.dm-cloaked.dm-ready {
 
 .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);
 }
 
@@ -5937,7 +5940,7 @@ body.dm-cloaked.dm-ready {
 }
 
 .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);
 }
 
@@ -6037,7 +6040,7 @@ body.dm-cloaked.dm-ready {
 .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);
@@ -6302,7 +6305,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,
@@ -6469,7 +6472,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);
 }
@@ -6675,7 +6678,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 {
@@ -6685,22 +6688,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 */
@@ -6736,7 +6739,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 */
@@ -6773,7 +6776,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 */
@@ -6796,14 +6799,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); }
@@ -6816,14 +6819,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); }
 
 
 /* ============================================
@@ -6945,7 +6948,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;
 }
@@ -6956,10 +6959,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 ---- */
@@ -6968,7 +6971,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 {
@@ -6980,25 +6983,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 */
@@ -7009,7 +7012,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);
 }
 
@@ -7023,12 +7026,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);
@@ -7119,7 +7122,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 {
@@ -7149,23 +7152,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;
 }
 
@@ -7211,40 +7214,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); }
 
 
 /* ============================================
@@ -7270,7 +7312,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;
@@ -7292,10 +7334,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;
@@ -7319,14 +7361,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;
 }
 
@@ -7370,7 +7412,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,
@@ -7697,7 +7739,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 */
@@ -7709,7 +7751,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;
 }
 
@@ -7969,9 +8011,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 {
@@ -8023,7 +8065,7 @@ code {
 
 .dm-autocomplete-item.active {
     background-color: var(--dm-primary-light);
-    color: var(--dm-white);
+    color: var(--dm-text);
 }
 
 .dm-autocomplete-loading,
@@ -8055,7 +8097,7 @@ code {
 
 [data-mode="dark"].dm-autocomplete-item.active {
     background-color: var(--dm-primary);
-    color: var(--dm-white);
+    color: var(--dm-text);
 }
 
 /* ============================================
@@ -8096,7 +8138,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;
@@ -8175,7 +8217,7 @@ code {
 
 .dm-pillbox-option.selected {
     background-color: var(--dm-primary-light);
-    color: var(--dm-white);
+    color: var(--dm-text);
 }
 
 .dm-pillbox-message {
@@ -8558,7 +8600,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);
@@ -8577,25 +8619,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 {
@@ -9187,7 +9217,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);
 }
 
@@ -9226,12 +9256,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);
@@ -9263,7 +9293,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;
 }
@@ -9401,7 +9431,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 {
@@ -9480,7 +9510,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;
@@ -9660,7 +9690,7 @@ code {
 }
 
 [data-mode="light"] .syntax-number {
-    color: #098658;
+    color: #076b46;
 }
 
 [data-mode="light"] .syntax-function {
@@ -9894,8 +9924,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 {
@@ -10074,7 +10104,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));
 }
 
@@ -10146,22 +10176,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 {
@@ -10171,7 +10201,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 {
@@ -10181,7 +10211,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) */
@@ -10225,23 +10255,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 {
@@ -10351,7 +10383,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;
@@ -10474,7 +10506,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);
 }
 
@@ -10490,7 +10522,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);
 }
 
@@ -10506,7 +10538,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);
 }
 
@@ -10549,7 +10581,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;
@@ -10760,7 +10792,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;
@@ -10789,7 +10821,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 {
@@ -10854,7 +10886,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;
@@ -11181,7 +11213,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) {
@@ -11314,7 +11346,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 */
@@ -11358,7 +11390,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 {
@@ -11684,7 +11716,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;
@@ -11779,16 +11811,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 {
@@ -11842,14 +11875,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) */
@@ -12118,17 +12152,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 */
@@ -12141,7 +12175,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);
@@ -12706,7 +12740,7 @@ code {
 
 .signature-mode-btn.active {
     background: var(--dm-primary);
-    color: #fff;
+    color: var(--dm-primary-text, #fff);
 }
 
 .signature-mode-btn:not(.active):hover {
@@ -12831,6 +12865,329 @@ code {
     }
 }
 
+/* ============================================================
+ * Chooser — visual option-picker (card/chip × single/multi)
+ * ============================================================ */
+.domma-chooser {
+    --picker-radius: var(--dm-radius);
+    display: block;
+}
+
+.domma-chooser .picker-label {
+    display: block;
+    margin-bottom: var(--dm-space-2);
+    font-weight: 600;
+    color: var(--dm-text);
+}
+
+.domma-chooser .picker-required {
+    color: var(--dm-danger);
+    margin-left: 0.25rem;
+}
+
+/* Variant: card */
+.domma-chooser[data-variant="card"] .picker-options {
+    display: grid;
+    grid-template-columns: repeat(var(--picker-cols, 3), 1fr);
+    gap: 0.6rem;
+}
+
+.domma-chooser[data-variant="card"] .picker-option {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding: 0.85rem 0.95rem;
+    border: 2px solid var(--dm-border);
+    border-radius: var(--picker-radius);
+    background: var(--dm-card-bg);
+    color: var(--dm-text);
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+}
+
+.domma-chooser[data-variant="card"] .picker-option:hover:not(.is-disabled) {
+    border-color: var(--picker-accent, var(--dm-primary));
+}
+
+.domma-chooser[data-variant="card"] .picker-option.is-selected {
+    border-color: var(--picker-accent, var(--dm-primary));
+    background: color-mix(in srgb, var(--picker-accent, var(--dm-primary)) 10%, var(--dm-card-bg));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--picker-accent, var(--dm-primary)) 22%, transparent);
+}
+
+.domma-chooser[data-variant="card"] .picker-option:focus-visible {
+    outline: 2px solid var(--picker-accent, var(--dm-primary));
+    outline-offset: 2px;
+}
+
+.domma-chooser .picker-option-icon {
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--dm-radius-sm);
+    background: color-mix(in srgb, var(--picker-accent, var(--dm-primary)) 12%, transparent);
+    color: var(--picker-accent, var(--dm-primary));
+    flex-shrink: 0;
+}
+
+.domma-chooser .picker-option-label {
+    font-weight: 600;
+    color: var(--dm-text);
+    font-size: 0.95rem;
+}
+
+.domma-chooser .picker-option-desc {
+    font-size: 0.8rem;
+    color: var(--dm-text-muted);
+    line-height: 1.4;
+}
+
+.domma-chooser[data-variant="card"] .picker-option-tick {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--picker-accent, var(--dm-primary));
+    color: #fff;
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.domma-chooser[data-variant="card"] .picker-option.is-selected .picker-option-tick {
+    display: inline-flex;
+}
+
+.domma-chooser .picker-option-badge {
+    position: absolute;
+    top: -10px;
+    right: 10px;
+}
+
+/* Density: compact */
+.domma-chooser[data-variant="card"][data-density="compact"] .picker-option {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.55rem 0.75rem;
+}
+
+.domma-chooser[data-variant="card"][data-density="compact"] .picker-option-icon {
+    width: 24px;
+    height: 24px;
+    background: transparent;
+}
+
+.domma-chooser[data-variant="card"][data-density="compact"] .picker-option-desc {
+    display: none;
+}
+
+.domma-chooser[data-variant="card"][data-density="compact"] .picker-option-tick {
+    position: static;
+}
+
+/* Variant: chip */
+.domma-chooser[data-variant="chip"] .picker-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.domma-chooser[data-variant="chip"] .picker-option {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.4rem 0.85rem;
+    border: 1.5px solid var(--dm-border);
+    border-radius: 999px;
+    background: var(--dm-card-bg);
+    color: var(--dm-text);
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s, color 0.15s;
+}
+
+.domma-chooser[data-variant="chip"] .picker-option:hover:not(.is-disabled) {
+    border-color: var(--picker-accent, var(--dm-primary));
+}
+
+.domma-chooser[data-variant="chip"] .picker-option.is-selected {
+    border-color: var(--picker-accent, var(--dm-primary));
+    background: var(--picker-accent, var(--dm-primary));
+    color: #fff;
+}
+
+.domma-chooser[data-variant="chip"] .picker-option:focus-visible {
+    outline: 2px solid var(--picker-accent, var(--dm-primary));
+    outline-offset: 2px;
+}
+
+.domma-chooser[data-variant="chip"] .picker-option-icon {
+    width: auto;
+    height: auto;
+    background: transparent;
+    padding: 0;
+    color: inherit;
+}
+
+.domma-chooser[data-variant="chip"] .picker-option-tick {
+    display: none !important;
+}
+
+/* Shared states */
+.domma-chooser .picker-option.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.domma-chooser .picker-option.is-recommended {
+    border-color: var(--picker-rec-accent, var(--dm-success));
+}
+
+/* Hidden native input for graceful submission */
+.domma-chooser .picker-native-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .domma-chooser .picker-option {
+        transition: none;
+    }
+}
+
+/* ============================================================
+ * Chooser — accent colour, accent style, glow, shadow extensions
+ * ============================================================ */
+
+/* Default the accent variables on every chooser */
+.domma-chooser {
+    --picker-accent: var(--dm-primary);
+    --picker-rec-accent: var(--dm-success);
+    --picker-glow-colour: var(--picker-accent);
+    --picker-shadow-colour: rgba(0, 0, 0, 0.1);
+}
+
+/* Semantic accent colours */
+.domma-chooser[data-accent="primary"] { --picker-accent: var(--dm-primary); }
+.domma-chooser[data-accent="success"] { --picker-accent: var(--dm-success); }
+.domma-chooser[data-accent="info"]    { --picker-accent: var(--dm-info); }
+.domma-chooser[data-accent="warning"] { --picker-accent: var(--dm-warning); }
+.domma-chooser[data-accent="danger"]  { --picker-accent: var(--dm-danger); }
+
+/* Semantic glow colours (overrides accent) */
+.domma-chooser[data-glow-colour="primary"] { --picker-glow-colour: var(--dm-primary); }
+.domma-chooser[data-glow-colour="success"] { --picker-glow-colour: var(--dm-success); }
+.domma-chooser[data-glow-colour="info"]    { --picker-glow-colour: var(--dm-info); }
+.domma-chooser[data-glow-colour="warning"] { --picker-glow-colour: var(--dm-warning); }
+.domma-chooser[data-glow-colour="danger"]  { --picker-glow-colour: var(--dm-danger); }
+
+/* Glow on selected option */
+.domma-chooser[data-glow="true"] .picker-option.is-selected {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--picker-accent) 22%, transparent),
+                0 0 18px color-mix(in srgb, var(--picker-glow-colour) 60%, transparent);
+}
+
+/* Shadow weights — applied to all options */
+.domma-chooser[data-shadow="sm"] .picker-option {
+    box-shadow: 0 1px 2px var(--picker-shadow-colour, rgba(0, 0, 0, 0.08));
+}
+.domma-chooser[data-shadow="md"] .picker-option {
+    box-shadow: 0 2px 6px var(--picker-shadow-colour, rgba(0, 0, 0, 0.10));
+}
+.domma-chooser[data-shadow="lg"] .picker-option {
+    box-shadow: 0 6px 16px var(--picker-shadow-colour, rgba(0, 0, 0, 0.12));
+}
+.domma-chooser[data-shadow="xl"] .picker-option {
+    box-shadow: 0 12px 28px var(--picker-shadow-colour, rgba(0, 0, 0, 0.14));
+}
+
+/* When both glow + shadow are set, the selected option keeps glow on top */
+.domma-chooser[data-glow="true"][data-shadow="sm"] .picker-option.is-selected,
+.domma-chooser[data-glow="true"][data-shadow="md"] .picker-option.is-selected,
+.domma-chooser[data-glow="true"][data-shadow="lg"] .picker-option.is-selected,
+.domma-chooser[data-glow="true"][data-shadow="xl"] .picker-option.is-selected {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--picker-accent) 22%, transparent),
+                0 0 18px color-mix(in srgb, var(--picker-glow-colour) 60%, transparent);
+}
+
+/* === Accent styles (default 'border' is the existing behaviour) === */
+
+/* Solid: filled tile in the accent colour, white text */
+.domma-chooser[data-accent-style="solid"][data-variant="card"] .picker-option.is-selected {
+    background: var(--picker-accent);
+    border-color: var(--picker-accent);
+    color: #fff;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--picker-accent) 22%, transparent);
+}
+.domma-chooser[data-accent-style="solid"][data-variant="card"] .picker-option.is-selected .picker-option-label,
+.domma-chooser[data-accent-style="solid"][data-variant="card"] .picker-option.is-selected .picker-option-desc,
+.domma-chooser[data-accent-style="solid"][data-variant="card"] .picker-option.is-selected .picker-option-icon {
+    color: #fff;
+}
+.domma-chooser[data-accent-style="solid"][data-variant="card"] .picker-option.is-selected .picker-option-icon {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* Glow style: clean transparent border, glowing accent ring */
+.domma-chooser[data-accent-style="glow"][data-variant="card"] .picker-option.is-selected {
+    background: var(--dm-card-bg);
+    border-color: transparent;
+    box-shadow: 0 0 0 2px var(--picker-accent),
+                0 0 22px color-mix(in srgb, var(--picker-glow-colour) 65%, transparent);
+}
+
+/* Overlay style: heavier translucent fill */
+.domma-chooser[data-accent-style="overlay"][data-variant="card"] .picker-option.is-selected {
+    background: color-mix(in srgb, var(--picker-accent) 28%, var(--dm-card-bg));
+    border-color: var(--picker-accent);
+    box-shadow: none;
+}
+
+/* Underline style: only a thick coloured bottom border */
+.domma-chooser[data-accent-style="underline"][data-variant="card"] .picker-option {
+    border-bottom-width: 4px;
+    border-bottom-color: transparent;
+}
+.domma-chooser[data-accent-style="underline"][data-variant="card"] .picker-option.is-selected {
+    background: var(--dm-card-bg);
+    border-color: var(--dm-border);
+    border-bottom-color: var(--picker-accent);
+    box-shadow: none;
+}
+
+/* Chip variant: solid + glow + overlay also work for chips */
+.domma-chooser[data-accent-style="solid"][data-variant="chip"] .picker-option.is-selected {
+    background: var(--picker-accent);
+    border-color: var(--picker-accent);
+    color: #fff;
+}
+.domma-chooser[data-accent-style="glow"][data-variant="chip"] .picker-option.is-selected {
+    background: var(--dm-card-bg);
+    color: var(--dm-text);
+    border-color: var(--picker-accent);
+    box-shadow: 0 0 0 1px var(--picker-accent),
+                0 0 16px color-mix(in srgb, var(--picker-glow-colour) 55%, transparent);
+}
+.domma-chooser[data-accent-style="overlay"][data-variant="chip"] .picker-option.is-selected {
+    background: color-mix(in srgb, var(--picker-accent) 30%, var(--dm-card-bg));
+    border-color: var(--picker-accent);
+    color: var(--dm-text);
+}
+
 
 /* ============================================
    THEME SYSTEM
@@ -12838,11 +13195,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.23.0
+ * Domma Themes v0.25.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-05-02T14:12:41.094Z
- * Commit: 99507eb
+ * Built: 2026-05-09T09:27:08.341Z
+ * Commit: 5de0709
  */
 
 /**
@@ -13210,7 +13567,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -13296,7 +13653,7 @@ code {
 
     /* Code */
     --dm-code-bg: #f8f9fa;
-    --dm-code-text: #e83e8c;
+    --dm-code-text: #bf1d68;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -13364,7 +13721,7 @@ code {
     /* Text - Light colors for readability on dark */
     --dm-text: #e2e8f0; /* slate-200 */
     --dm-text-secondary: #94a3b8; /* slate-400 */
-    --dm-text-muted: #64748b; /* slate-500 */
+    --dm-text-muted: #94a3b8; /* slate-500 */
     --dm-text-disabled: #475569; /* slate-600 */
     --dm-text-inverse: #0f172a; /* slate-900 */
 
@@ -13438,7 +13795,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -13611,8 +13968,8 @@ code {
     /* ================================================
        SECONDARY COLOURS - Earth Brown
        ================================================ */
-    --dm-secondary: #6b705c;
-    --dm-secondary-hover: #7d826d;
+    --dm-secondary: #525747;
+    --dm-secondary-hover: #65695a;
     --dm-secondary-active: #8f937e;
     --dm-secondary-light: #f0efe9;
     --dm-secondary-dark: #52554a;
@@ -13626,7 +13983,7 @@ code {
     --dm-success-light: #d8f3dc;
     --dm-success-dark: #2d6a4f;
 
-    --dm-info: #588157;
+    --dm-info: #3a6a3a;
     --dm-info-hover: #6b9669;
     --dm-info-active: #7eab7c;
     --dm-info-light: #e2f0e1;
@@ -13665,7 +14022,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -13751,7 +14108,7 @@ code {
 
     /* Code */
     --dm-code-bg: #f8f9fa;
-    --dm-code-text: #e83e8c;
+    --dm-code-text: #bf1d68;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -13809,7 +14166,7 @@ code {
     /* Text - Light colors for readability on dark */
     --dm-text: #e2e8f0; /* slate-200 */
     --dm-text-secondary: #94a3b8; /* slate-400 */
-    --dm-text-muted: #64748b; /* slate-500 */
+    --dm-text-muted: #94a3b8; /* slate-500 */
     --dm-text-disabled: #475569; /* slate-600 */
     --dm-text-inverse: #0f172a; /* slate-900 */
 
@@ -13843,7 +14200,7 @@ code {
 
     --dm-warning: #e9c38e;
     --dm-warning-light: rgba(233, 195, 142, 0.15);
-    --dm-warning-text: #e9c38e;
+    --dm-warning-text: #1a1a1a;
 
     /* Danger - Bright red (standard dark mode) */
     --dm-danger: #ef4444; /* red-500 */
@@ -13870,7 +14227,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -13982,7 +14339,9 @@ code {
     --dm-secondary-text: #1a1a1a;
     --dm-secondary-hover-text: #1a1a1a;
     --dm-danger-text: #1a1a1a;
-    --dm-danger-hover-text: #1a1a1a;
+    --dm-danger-hover-text: #1a1a1a;    --dm-success-text: #1a1a1a;    --dm-info-text: #1a1a1a;
+
+
 }
 
 /**
@@ -14038,7 +14397,7 @@ code {
 
     --dm-warning: #e2c484;
     --dm-warning-light: rgba(226, 196, 132, 0.15);
-    --dm-warning-text: #e2c484;
+    --dm-warning-text: #1a1a1a;
 
     --dm-danger: #da8282;
     --dm-danger-light: rgba(218, 130, 130, 0.15);
@@ -14050,7 +14409,7 @@ code {
     --dm-progress-bar: #da9d82;
 
     /* Danger - Bright red (standard dark mode) */
-    --dm-danger: #ef4444; /* red-500 */
+    --dm-danger: #dc2626; /* red-600 */
     --dm-danger-hover: #f87171; /* red-400 */
     --dm-danger-active: #fca5a5; /* red-300 */
     --dm-danger-light: rgba(248, 113, 113, 0.15);
@@ -14074,7 +14433,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -14160,7 +14519,7 @@ code {
 
     /* Code */
     --dm-code-bg: #f8f9fa;
-    --dm-code-text: #e83e8c;
+    --dm-code-text: #bf1d68;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -14187,8 +14546,10 @@ code {
     --dm-primary-hover-text: #1a1a1a;
     --dm-secondary-text: #1a1a1a;
     --dm-secondary-hover-text: #1a1a1a;
-    --dm-danger-text: #1a1a1a;
-    --dm-danger-hover-text: #1a1a1a;
+    --dm-danger-text: #ffffff;
+    --dm-danger-hover-text: #ffffff;    --dm-success-text: #1a1a1a;    --dm-info-text: #1a1a1a;
+
+
 }
 
 /**
@@ -14214,7 +14575,7 @@ code {
     /* Text - Light colors for readability on dark */
     --dm-text: #e2e8f0; /* slate-200 */
     --dm-text-secondary: #94a3b8; /* slate-400 */
-    --dm-text-muted: #64748b; /* slate-500 */
+    --dm-text-muted: #94a3b8; /* slate-500 */
     --dm-text-disabled: #475569; /* slate-600 */
     --dm-text-inverse: #0f172a; /* slate-900 */
 
@@ -14231,7 +14592,7 @@ code {
     --dm-primary: #c67b5c;
     --dm-primary-hover: #d08c6f;
     --dm-primary-active: #da9d82;
-    --dm-primary-light: #faf3f0;
+    --dm-primary-light: rgba(198, 123, 92, 0.15);
     --dm-primary-dark: #a66349;
 
     /* Focus ring with soft sunset colour */
@@ -14244,7 +14605,7 @@ code {
     --dm-secondary: #a8808a;
     --dm-secondary-hover: #b5919a;
     --dm-secondary-active: #c2a2aa;
-    --dm-secondary-light: #f8f3f4;
+    --dm-secondary-light: rgba(168, 128, 138, 0.15);
     --dm-secondary-dark: #8a6670;
 
     /* ================================================
@@ -14253,26 +14614,26 @@ code {
     --dm-success: #7a9e6d;
     --dm-success-hover: #8bae7f;
     --dm-success-active: #9cbe91;
-    --dm-success-light: #f2f6f0;
+    --dm-success-light: rgba(122, 158, 109, 0.15);
     --dm-success-dark: #628256;
 
     --dm-info: #8fa5b5;
     --dm-info-hover: #9fb3c1;
     --dm-info-active: #afc1cd;
-    --dm-info-light: #f3f6f8;
+    --dm-info-light: rgba(143, 165, 181, 0.15);
     --dm-info-dark: #708694;
 
     --dm-warning: #d4a85c;
     --dm-warning-hover: #dbb670;
     --dm-warning-active: #e2c484;
-    --dm-warning-light: #faf6ef;
+    --dm-warning-light: rgba(212, 168, 92, 0.15);
     --dm-warning-dark: #b58e45;
     --dm-warning-text: #8a6b30;
 
-    --dm-danger: #c45c5c;
+    --dm-danger: #a83838;
     --dm-danger-hover: #cf6f6f;
     --dm-danger-active: #da8282;
-    --dm-danger-light: #faf0f0;
+    --dm-danger-light: rgba(168, 56, 56, 0.15);
     --dm-danger-dark: #a54848;
 
     /* ================================================
@@ -14298,7 +14659,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -14466,7 +14827,7 @@ code {
     --dm-progress-bar: #6495ed;
 
     /* Danger - Bright red (standard dark mode) */
-    --dm-danger: #ef4444; /* red-500 */
+    --dm-danger: #dc2626; /* red-600 */
     --dm-danger-hover: #f87171; /* red-400 */
     --dm-danger-active: #fca5a5; /* red-300 */
     --dm-danger-light: rgba(248, 113, 113, 0.15);
@@ -14487,7 +14848,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -14569,7 +14930,7 @@ code {
 
     /* Code */
     --dm-code-bg: #f8f9fa;
-    --dm-code-text: #e83e8c;
+    --dm-code-text: #bf1d68;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -14596,8 +14957,10 @@ code {
     --dm-primary-hover-text: #1a1a1a;
     --dm-secondary-text: #1a1a1a;
     --dm-secondary-hover-text: #1a1a1a;
-    --dm-danger-text: #1a1a1a;
-    --dm-danger-hover-text: #1a1a1a;
+    --dm-danger-text: #ffffff;
+    --dm-danger-hover-text: #ffffff;
+    --dm-success-text: #1a1a1a;
+    --dm-info-text: #1a1a1a;
 }
 /**
  * Domma Royal Dark Theme
@@ -14622,7 +14985,7 @@ code {
     /* Text - Light colors for readability on dark */
     --dm-text: #e2e8f0; /* slate-200 */
     --dm-text-secondary: #94a3b8; /* slate-400 */
-    --dm-text-muted: #64748b; /* slate-500 */
+    --dm-text-muted: #94a3b8; /* slate-500 */
     --dm-text-disabled: #475569; /* slate-600 */
     --dm-text-inverse: #0f172a; /* slate-900 */
 
@@ -14638,7 +15001,7 @@ code {
     --dm-primary: #4169e1;
     --dm-primary-hover: #5a7de6;
     --dm-primary-active: #7391eb;
-    --dm-primary-light: #e8edfc;
+    --dm-primary-light: rgba(65, 105, 225, 0.15);
     --dm-primary-dark: #2c4a9e;
 
     /* Focus ring with royal colour */
@@ -14649,9 +15012,9 @@ code {
        SECONDARY COLOURS - Purple Blue
        ================================================ */
     --dm-secondary: #6a5acd;
-    --dm-secondary-hover: #7d6fd4;
+    --dm-secondary-hover: #665aab;
     --dm-secondary-active: #9084db;
-    --dm-secondary-light: #f0eefa;
+    --dm-secondary-light: rgba(106, 90, 205, 0.15);
     --dm-secondary-dark: #483d8b;
 
     /* ================================================
@@ -14660,13 +15023,13 @@ code {
     --dm-success: #32cd32;
     --dm-success-hover: #4ad34a;
     --dm-success-active: #62d962;
-    --dm-success-light: #e6f9e6;
+    --dm-success-light: rgba(50, 205, 50, 0.15);
     --dm-success-dark: #228b22;
 
     --dm-info: #6495ed;
     --dm-info-hover: #79a5f0;
     --dm-info-active: #8eb5f3;
-    --dm-info-light: #ebf1fd;
+    --dm-info-light: rgba(100, 149, 237, 0.15);
     --dm-info-dark: #4169e1;
 
     /* ================================================
@@ -14689,7 +15052,7 @@ code {
     --dm-danger: #dc3545;
     --dm-danger-hover: #bb2d3b;
     --dm-danger-active: #b02a37;
-    --dm-danger-light: #f8d7da;
+    --dm-danger-light: rgba(220, 53, 69, 0.15);
     --dm-danger-dark: #842029;
 
     /* ================================================
@@ -14707,7 +15070,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -14807,7 +15170,7 @@ code {
     --dm-primary-text: #ffffff;
     --dm-primary-hover-text: #1a1a1a;
     --dm-secondary-text: #ffffff;
-    --dm-secondary-hover-text: #1a1a1a;
+    --dm-secondary-hover-text: #ffffff;
     --dm-success-text: #1a1a1a;
     --dm-success-hover-text: #1a1a1a;
     --dm-danger-text: #ffffff;
@@ -14868,7 +15231,7 @@ code {
 
     --dm-warning: #e2c46d;
     --dm-warning-light: rgba(226, 196, 109, 0.15);
-    --dm-warning-text: #e2c46d;
+    --dm-warning-text: #1a1a1a;
 
     --dm-focus-ring: 0 0 0 3px rgba(212, 192, 106, 0.35);
     --dm-selected-bg: rgba(212, 192, 106, 0.2);
@@ -14877,7 +15240,7 @@ code {
     --dm-progress-bar: #d4c06a;
 
     /* Danger - Bright red (standard dark mode) */
-    --dm-danger: #ef4444; /* red-500 */
+    --dm-danger: #dc2626; /* red-600 */
     --dm-danger-hover: #f87171; /* red-400 */
     --dm-danger-active: #fca5a5; /* red-300 */
     --dm-danger-light: rgba(248, 113, 113, 0.15);
@@ -14898,7 +15261,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -14980,7 +15343,7 @@ code {
 
     /* Code */
     --dm-code-bg: #f8f9fa;
-    --dm-code-text: #e83e8c;
+    --dm-code-text: #bf1d68;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -15007,8 +15370,10 @@ code {
     --dm-primary-hover-text: #1a1a1a;
     --dm-secondary-text: #1a1a1a;
     --dm-secondary-hover-text: #1a1a1a;
-    --dm-danger-text: #1a1a1a;
-    --dm-danger-hover-text: #1a1a1a;
+    --dm-danger-text: #ffffff;
+    --dm-danger-hover-text: #ffffff;
+    --dm-success-text: #1a1a1a;
+    --dm-info-text: #1a1a1a;
 }
 /**
  * Domma Lemon Dark Theme
@@ -15033,7 +15398,7 @@ code {
     /* Text - Light colors for readability on dark */
     --dm-text: #e2e8f0; /* slate-200 */
     --dm-text-secondary: #94a3b8; /* slate-400 */
-    --dm-text-muted: #64748b; /* slate-500 */
+    --dm-text-muted: #94a3b8; /* slate-500 */
     --dm-text-disabled: #475569; /* slate-600 */
     --dm-text-inverse: #0f172a; /* slate-900 */
 
@@ -15125,7 +15490,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -15293,7 +15658,7 @@ code {
     --dm-progress-bar: #a0aec0;
 
     /* Danger - Bright red (standard dark mode) */
-    --dm-danger: #ef4444; /* red-500 */
+    --dm-danger: #dc2626; /* red-600 */
     --dm-danger-hover: #f87171; /* red-400 */
     --dm-danger-active: #fca5a5; /* red-300 */
     --dm-danger-light: rgba(248, 113, 113, 0.15);
@@ -15314,7 +15679,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -15396,7 +15761,7 @@ code {
 
     /* Code */
     --dm-code-bg: #f8f9fa;
-    --dm-code-text: #e83e8c;
+    --dm-code-text: #bf1d68;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -15423,8 +15788,10 @@ code {
     --dm-primary-hover-text: #1a1a1a;
     --dm-secondary-text: #1a1a1a;
     --dm-secondary-hover-text: #1a1a1a;
-    --dm-danger-text: #1a1a1a;
-    --dm-danger-hover-text: #1a1a1a;
+    --dm-danger-text: #ffffff;
+    --dm-danger-hover-text: #ffffff;
+    --dm-success-text: #1a1a1a;
+    --dm-info-text: #1a1a1a;
 }
 /**
  * Domma Silver Dark Theme
@@ -15449,7 +15816,7 @@ code {
     /* Text - Light colors for readability on dark */
     --dm-text: #e2e8f0; /* slate-200 */
     --dm-text-secondary: #94a3b8; /* slate-400 */
-    --dm-text-muted: #64748b; /* slate-500 */
+    --dm-text-muted: #94a3b8; /* slate-500 */
     --dm-text-disabled: #475569; /* slate-600 */
     --dm-text-inverse: #0f172a; /* slate-900 */
 
@@ -15462,7 +15829,7 @@ code {
     /* ================================================
        PRIMARY COLOURS - Silver Gray
        ================================================ */
-    --dm-primary: #708090;
+    --dm-primary: #8a99a8;
     --dm-primary-hover: #84929f;
     --dm-primary-active: #98a4ae;
     --dm-primary-light: rgba(112, 128, 144, 0.15);
@@ -15510,7 +15877,7 @@ code {
     --dm-selected-bg: rgba(112, 128, 144, 0.12);
     --dm-tab-active-border: #708090;
     --dm-tab-active-text: #a0aec0;
-    --dm-progress-bar: #708090;
+    --dm-progress-bar: #8a99a8;
 
     /* Danger - Standard red */
     --dm-danger: #dc3545;
@@ -15534,7 +15901,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -15700,7 +16067,7 @@ code {
     --dm-progress-bar: #78909c;
 
     /* Danger - Bright red (standard dark mode) */
-    --dm-danger: #ef4444; /* red-500 */
+    --dm-danger: #dc2626; /* red-600 */
     --dm-danger-hover: #f87171; /* red-400 */
     --dm-danger-active: #fca5a5; /* red-300 */
     --dm-danger-light: rgba(248, 113, 113, 0.15);
@@ -15721,7 +16088,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -15803,7 +16170,7 @@ code {
 
     /* Code */
     --dm-code-bg: #f8f9fa;
-    --dm-code-text: #e83e8c;
+    --dm-code-text: #bf1d68;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -15830,8 +16197,10 @@ code {
     --dm-primary-hover-text: #ffffff;
     --dm-secondary-text: #1a1a1a;
     --dm-secondary-hover-text: #1a1a1a;
-    --dm-danger-text: #1a1a1a;
-    --dm-danger-hover-text: #1a1a1a;
+    --dm-danger-text: #ffffff;
+    --dm-danger-hover-text: #ffffff;
+    --dm-success-text: #1a1a1a;
+    --dm-info-text: #1a1a1a;
 }
 /**
  * Domma Charcoal Dark Theme
@@ -15856,7 +16225,7 @@ code {
     /* Text - Light colors for readability on dark */
     --dm-text: #e2e8f0; /* slate-200 */
     --dm-text-secondary: #94a3b8; /* slate-400 */
-    --dm-text-muted: #64748b; /* slate-500 */
+    --dm-text-muted: #94a3b8; /* slate-500 */
     --dm-text-disabled: #475569; /* slate-600 */
     --dm-text-inverse: #0f172a; /* slate-900 */
 
@@ -15883,7 +16252,7 @@ code {
        SECONDARY COLOURS - Slate
        ================================================ */
     --dm-secondary: #5f6f7a;
-    --dm-secondary-hover: #738290;
+    --dm-secondary-hover: #5d6f7a;
     --dm-secondary-active: #8795a0;
     --dm-secondary-light: rgba(95, 111, 122, 0.15);
     --dm-secondary-dark: #3d4a52;
@@ -15895,7 +16264,7 @@ code {
     --dm-success-hover: #61b965;
     --dm-success-active: #76c37a;
     --dm-success-light: rgba(76, 175, 80, 0.15);
-    --dm-success-dark: #388e3c;
+    --dm-success-dark: #2a6e2e;
 
     --dm-info: #2196f3;
     --dm-info-hover: #42a5f5;
@@ -15941,7 +16310,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -16041,7 +16410,7 @@ code {
     --dm-primary-text: #1a1a1a;
     --dm-primary-hover-text: #ffffff;
     --dm-secondary-text: #ffffff;
-    --dm-secondary-hover-text: #1a1a1a;
+    --dm-secondary-hover-text: #ffffff;
     --dm-success-text: #1a1a1a;
     --dm-success-hover-text: #1a1a1a;
     --dm-danger-text: #ffffff;
@@ -16072,7 +16441,7 @@ code {
     /* Text - Deep pine green for festive character */
     --dm-text: #1A2A1E;
     --dm-text-secondary: #3D5444;
-    --dm-text-muted: #6B8074;
+    --dm-text-muted: #5a6f63;
     --dm-text-disabled: #A4B5AC;
     --dm-text-inverse: #FFFFFF;
 
@@ -16106,13 +16475,13 @@ code {
     /* ================================================
        STATUS COLOURS - Festive-harmonised
        ================================================ */
-    --dm-success: #228B22;
+    --dm-success: #1a6b1a;
     --dm-success-hover: #2EA02E;
     --dm-success-active: #3AB53A;
     --dm-success-light: rgba(34, 139, 34, 0.12);
     --dm-success-dark: #1A6B1A;
 
-    --dm-info: #3A7FB5;
+    --dm-info: #2a6da0;
     --dm-info-hover: #4A8FC5;
     --dm-info-active: #5A9FD5;
     --dm-info-light: rgba(58, 127, 181, 0.12);
@@ -16155,7 +16524,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -16313,9 +16682,9 @@ code {
     border-image-slice: 1;
 }
 
-/* Candy-stripe progress bars */
+/* Candy-stripe progress bars (default + plain variant only — variants keep their semantic colour) */
 .dm-theme-christmas-light .dm-progression-progress-bar,
-.dm-theme-christmas-light .progress-bar {
+.dm-theme-christmas-light .progress > .progress-bar:not([class*="progress-bar-"]) {
     background-image: repeating-linear-gradient(
         45deg,
         transparent,
@@ -16324,6 +16693,7 @@ code {
         rgba(255, 255, 255, 0.25) 12px
     );
     background-color: #2D6B3F;
+    color: #ffffff;
 }
 
 /* Festive syntax highlighting — green keywords, red strings, gold functions */
@@ -16338,7 +16708,7 @@ code {
 }
 
 .dm-theme-christmas-light .code-block .syntax-function {
-    color: #9A7A1A;
+    color: #6B5311;
 }
 
 /**
@@ -16364,7 +16734,7 @@ code {
     /* Text - Pure snow white; no green tint — moonlight on fresh snow */
     --dm-text: #FFFFFF;
     --dm-text-secondary: #D0D0D0;
-    --dm-text-muted: #8A8A8A;
+    --dm-text-muted: #a8a8a8;
     --dm-text-disabled: #505050;
     --dm-text-inverse: #0A1A10;
 
@@ -16447,7 +16817,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -16606,9 +16976,9 @@ code {
     border-image-slice: 1;
 }
 
-/* Candy-stripe progress bars using surface colour for stripes */
+/* Candy-stripe progress bars (default + plain variant only — variants keep their semantic colour) */
 .dm-theme-christmas-dark .dm-progression-progress-bar,
-.dm-theme-christmas-dark .progress-bar {
+.dm-theme-christmas-dark .progress > .progress-bar:not([class*="progress-bar-"]) {
     background-image: repeating-linear-gradient(
         45deg,
         transparent,
@@ -16617,6 +16987,7 @@ code {
         rgba(26, 48, 32, 0.4) 12px
     );
     background-color: #5CB875;
+    color: #1a1a1a;
 }
 
 /* Festive syntax highlighting — brighter versions for dark backgrounds */
@@ -16657,7 +17028,7 @@ code {
     /* Text - Dark colours for readability on light */
     --dm-text: #2d1b3d;
     --dm-text-secondary: #5d3a6e;
-    --dm-text-muted: #8e6b9e;
+    --dm-text-muted: #735580;
     --dm-text-disabled: #c4a8d0;
     --dm-text-inverse: #ffffff;
 
@@ -16682,7 +17053,7 @@ code {
     /* ================================================
        SECONDARY COLOURS - Hot Pink
        ================================================ */
-    --dm-secondary: #e91e90;
+    --dm-secondary: #c1187a;
     --dm-secondary-hover: #d81b7f;
     --dm-secondary-active: #c2176e;
     --dm-secondary-light: #fce4ec;
@@ -16695,7 +17066,7 @@ code {
     --dm-success-hover: #57a85b;
     --dm-success-active: #43a047;
     --dm-success-light: rgba(102, 187, 106, 0.15);
-    --dm-success-dark: #388e3c;
+    --dm-success-dark: #2a6e2e;
 
     --dm-info: #42a5f5;
     --dm-info-hover: #2196f3;
@@ -16710,8 +17081,8 @@ code {
     --dm-warning-dark: #e65100;
     --dm-warning-text: #e65100;
 
-    --dm-danger: #ef5350;
-    --dm-danger-hover: #e53935;
+    --dm-danger: #dc2626;
+    --dm-danger-hover: #c62828;
     --dm-danger-active: #c62828;
     --dm-danger-light: rgba(239, 83, 80, 0.15);
     --dm-danger-dark: #c62828;
@@ -16740,7 +17111,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -16826,7 +17197,7 @@ code {
 
     /* Code */
     --dm-code-bg: #faf5fc;
-    --dm-code-text: #e91e90;
+    --dm-code-text: #a8125f;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -16851,11 +17222,11 @@ code {
     /* Button text contrast overrides (auto-generated) */
     --dm-primary-text: #ffffff;
     --dm-primary-hover-text: #ffffff;
-    --dm-secondary-text: #1a1a1a;
+    --dm-secondary-text: #ffffff;
     --dm-secondary-hover-text: #ffffff;
     --dm-success-text: #1a1a1a;
     --dm-success-hover-text: #1a1a1a;
-    --dm-danger-text: #1a1a1a;
+    --dm-danger-text: #ffffff;
     --dm-danger-hover-text: #ffffff;
     --dm-info-text: #1a1a1a;
     --dm-info-hover-text: #1a1a1a;
@@ -16886,7 +17257,7 @@ code {
     /* Text - Light colours for readability on dark */
     --dm-text: #f3e5f5;
     --dm-text-secondary: #ce93d8;
-    --dm-text-muted: #ab47bc;
+    --dm-text-muted: #d4a3df;
     --dm-text-disabled: #6a3d7a;
     --dm-text-inverse: #1a0e24;
 
@@ -16901,7 +17272,7 @@ code {
     --dm-primary: #ce93d8;
     --dm-primary-hover: #ba68c8;
     --dm-primary-active: #ab47bc;
-    --dm-primary-light: #f3e5f5;
+    --dm-primary-light: rgba(206, 147, 216, 0.15);
     --dm-primary-dark: #ab47bc;
 
     /* Focus ring with soft purple colour */
@@ -16914,7 +17285,7 @@ code {
     --dm-secondary: #f48fb1;
     --dm-secondary-hover: #f06292;
     --dm-secondary-active: #ec407a;
-    --dm-secondary-light: #fce4ec;
+    --dm-secondary-light: rgba(244, 143, 177, 0.15);
     --dm-secondary-dark: #ec407a;
 
     /* ================================================
@@ -16969,7 +17340,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -17152,7 +17523,7 @@ code {
     --dm-success-hover: #66bb6a;
     --dm-success-active: #4caf50;
     --dm-success-light: rgba(129, 199, 132, 0.15);
-    --dm-success-dark: #388e3c;
+    --dm-success-dark: #2a6e2e;
 
     --dm-info: #64b5f6;
     --dm-info-hover: #42a5f5;
@@ -17167,7 +17538,7 @@ code {
     --dm-warning-dark: #e65100;
     --dm-warning-text: #bf360c;
 
-    --dm-danger: #e57373;
+    --dm-danger: #c62828;
     --dm-danger-hover: #ef5350;
     --dm-danger-active: #e53935;
     --dm-danger-light: rgba(229, 115, 115, 0.15);
@@ -17197,7 +17568,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -17283,7 +17654,7 @@ code {
 
     /* Code */
     --dm-code-bg: #f5f0eb;
-    --dm-code-text: #a1887f;
+    --dm-code-text: #5d4037;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -17312,8 +17683,8 @@ code {
     --dm-secondary-hover-text: #ffffff;
     --dm-success-text: #1a1a1a;
     --dm-success-hover-text: #1a1a1a;
-    --dm-danger-text: #1a1a1a;
-    --dm-danger-hover-text: #1a1a1a;
+    --dm-danger-text: #ffffff;
+    --dm-danger-hover-text: #ffffff;
     --dm-info-text: #1a1a1a;
     --dm-info-hover-text: #1a1a1a;
     --dm-warning-text: #1a1a1a;
@@ -17358,7 +17729,7 @@ code {
     --dm-primary: #bcaaa4;
     --dm-primary-hover: #d7ccc8;
     --dm-primary-active: #efebe9;
-    --dm-primary-light: #efebe9;
+    --dm-primary-light: rgba(188, 170, 164, 0.15);
     --dm-primary-dark: #a1887f;
 
     /* Focus ring with warm taupe colour */
@@ -17371,7 +17742,7 @@ code {
     --dm-secondary: #d7ccc8;
     --dm-secondary-hover: #efebe9;
     --dm-secondary-active: #ffffff;
-    --dm-secondary-light: #faf5f0;
+    --dm-secondary-light: rgba(215, 204, 200, 0.15);
     --dm-secondary-dark: #bcaaa4;
 
     /* ================================================
@@ -17426,7 +17797,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -17599,7 +17970,7 @@ code {
        SECONDARY COLOURS - Blue Grey
        ================================================ */
     --dm-secondary: #546e7a;
-    --dm-secondary-hover: #607d8b;
+    --dm-secondary-hover: #4f6470;
     --dm-secondary-active: #78909c;
     --dm-secondary-light: rgba(84, 110, 122, 0.15);
     --dm-secondary-dark: #455a64;
@@ -17608,7 +17979,7 @@ code {
        STATUS COLOURS
        ================================================ */
     --dm-success: #2e7d32;
-    --dm-success-hover: #388e3c;
+    --dm-success-hover: #2a6e2e;
     --dm-success-active: #1b5e20;
     --dm-success-light: rgba(46, 125, 50, 0.1);
     --dm-success-dark: #1b5e20;
@@ -17656,7 +18027,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -17753,7 +18124,7 @@ code {
 
     /* Code */
     --dm-code-bg: #f8f9fa;
-    --dm-code-text: #00838f;
+    --dm-code-text: #006670;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -17773,7 +18144,7 @@ code {
     --dm-secondary-text: #ffffff;
     --dm-secondary-hover-text: #ffffff;
     --dm-success-text: #ffffff;
-    --dm-success-hover-text: #1a1a1a;
+    --dm-success-hover-text: #ffffff;
     --dm-danger-text: #ffffff;
     --dm-danger-hover-text: #ffffff;
     --dm-info-text: #ffffff;
@@ -17784,7 +18155,7 @@ code {
 
 /* Syntax highlighting tokens for grayve-light */
 .dm-theme-grayve-light .code-block .syntax-keyword {
-    color: #7c4dff; /* Deep Purple */
+    color: #5a2dcc; /* Deep Purple — darkened for ≥4.5:1 on #f5f5f5 */
     font-weight: 500;
 }
 
@@ -17794,7 +18165,7 @@ code {
 }
 
 .dm-theme-grayve-light .code-block .syntax-function {
-    color: #00838f; /* Cyan */
+    color: #006873; /* Cyan — darkened for ≥4.5:1 on #f5f5f5 */
 }
 
 /**
@@ -17820,7 +18191,7 @@ code {
     /* Text - Light colours for readability on dark */
     --dm-text: #DEE2E6;           /* slate-200 */
     --dm-text-secondary: #ADB5BD; /* slate-400 */
-    --dm-text-muted: #6C757D;     /* slate-500 */
+    --dm-text-muted: #a8b1ba;     /* slate-500 */
     --dm-text-disabled: #495057;  /* slate-600 */
     --dm-text-inverse: #1a1e21;   /* slate-900 */
 
@@ -17837,7 +18208,7 @@ code {
     --dm-primary: #00bcd4;
     --dm-primary-hover: #00acc1;
     --dm-primary-active: #26c6da;
-    --dm-primary-light: #e0f7fa;
+    --dm-primary-light: rgba(0, 188, 212, 0.15);
     --dm-primary-dark: #0097a7;
 
     /* Focus ring with cyan colour */
@@ -17850,7 +18221,7 @@ code {
     --dm-secondary: #6C757D;
     --dm-secondary-hover: #ADB5BD;
     --dm-secondary-active: #CED4DA;
-    --dm-secondary-light: #E9ECEF;
+    --dm-secondary-light: rgba(108, 117, 125, 0.15);
     --dm-secondary-dark: #495057;
 
     /* ================================================
@@ -17905,7 +18276,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -18069,7 +18440,7 @@ code {
     /* Text - Dark colors for readability on light */
     --dm-text: #1a2e25;
     --dm-text-secondary: #3d5a4a;
-    --dm-text-muted: #6c8a7a;
+    --dm-text-muted: #557565;
     --dm-text-disabled: #adc4b8;
     --dm-text-inverse: #ffffff;
 
@@ -18084,7 +18455,7 @@ code {
 
     /* PRIMARY COLOURS - Mint Green */
     --dm-primary: #2e9e6e;
-    --dm-primary-hover: #279060;
+    --dm-primary-hover: #1a6b46;
     --dm-primary-active: #1f7a50;
     --dm-primary-light: #d4f5e4;
     --dm-primary-dark: #1b5e3a;
@@ -18096,7 +18467,7 @@ code {
     /* ================================================
        SECONDARY COLOURS - Seafoam
        ================================================ */
-    --dm-secondary: #5b8a7a;
+    --dm-secondary: #446b5d;
     --dm-secondary-hover: #6b9e8c;
     --dm-secondary-active: #7cb29e;
     --dm-secondary-light: #e8f5ef;
@@ -18124,7 +18495,7 @@ code {
     --dm-warning-dark: #c88a2a;
     --dm-warning-text: #c88a2a;
 
-    --dm-danger: #e53e3e;
+    --dm-danger: #c92929;
     --dm-danger-hover: #e85656;
     --dm-danger-active: #ed7676;
     --dm-danger-light: #fde8e8;
@@ -18154,7 +18525,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -18240,7 +18611,7 @@ code {
 
     /* Code */
     --dm-code-bg: #f0faf5;
-    --dm-code-text: #e83e8c;
+    --dm-code-text: #bf1d68;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -18264,12 +18635,12 @@ code {
 
     /* Button text contrast overrides (auto-generated) */
     --dm-primary-text: #1a1a1a;
-    --dm-primary-hover-text: #1a1a1a;
-    --dm-secondary-text: #1a1a1a;
+    --dm-primary-hover-text: #ffffff;
+    --dm-secondary-text: #ffffff;
     --dm-secondary-hover-text: #1a1a1a;
     --dm-success-text: #1a1a1a;
     --dm-success-hover-text: #1a1a1a;
-    --dm-danger-text: #1a1a1a;
+    --dm-danger-text: #ffffff;
     --dm-danger-hover-text: #1a1a1a;
     --dm-info-text: #1a1a1a;
     --dm-info-hover-text: #1a1a1a;
@@ -18300,7 +18671,7 @@ code {
     /* Text - Light colors for readability on dark */
     --dm-text: #d4f5e4; /* mint-tinted slate-200 */
     --dm-text-secondary: #93bfad; /* muted mint */
-    --dm-text-muted: #5e8a78; /* slate-500 with mint tint */
+    --dm-text-muted: #7ea895; /* slate-500 with mint tint */
     --dm-text-disabled: #3d5e50; /* slate-600 with mint tint */
     --dm-text-inverse: #0f172a; /* slate-900 */
 
@@ -18384,7 +18755,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -18530,7 +18901,7 @@ code {
     /* Text - Dark warm tones for readability on cream */
     --dm-text: #2C2416;
     --dm-text-secondary: #5C4E3C;
-    --dm-text-muted: #8B7355;
+    --dm-text-muted: #6e5942;
     --dm-text-disabled: #C4B49A;
     --dm-text-inverse: #FFFFFF;
 
@@ -18566,13 +18937,13 @@ code {
     /* ================================================
        STATUS COLOURS - Harmonised with warm palette
        ================================================ */
-    --dm-success: #4A8C5C;
+    --dm-success: #3a6e48;
     --dm-success-hover: #56A06A;
     --dm-success-active: #62B478;
     --dm-success-light: #E8F5EC;
     --dm-success-dark: #3A6E48;
 
-    --dm-info: #4A7FA8;
+    --dm-info: #3a6788;
     --dm-info-hover: #5490BC;
     --dm-info-active: #6AA1CC;
     --dm-info-light: #E6F0F8;
@@ -18615,7 +18986,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-md);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);
@@ -18701,7 +19072,7 @@ code {
 
     /* Code */
     --dm-code-bg: #FFF8E7;
-    --dm-code-text: #A8823F;
+    --dm-code-text: #735628;
     --dm-code-border: var(--dm-border);
 
     /* ================================================
@@ -18728,7 +19099,7 @@ code {
     --dm-primary-hover-text: #1a1a1a;
     --dm-secondary-text: #1a1a1a;
     --dm-secondary-hover-text: #1a1a1a;
-    --dm-success-text: #1a1a1a;
+    --dm-success-text: #ffffff;
     --dm-success-hover-text: #1a1a1a;
     --dm-danger-text: #ffffff;
     --dm-danger-hover-text: #ffffff;
@@ -18761,7 +19132,7 @@ code {
     /* Text - Warm cream for readability on dark */
     --dm-text: #F0E8D8;
     --dm-text-secondary: #D4C4A8;
-    --dm-text-muted: #8B7355;
+    --dm-text-muted: #b39977;
     --dm-text-disabled: #4A4060;
     --dm-text-inverse: #12121F;
 
@@ -18778,7 +19149,7 @@ code {
     --dm-primary: #C5A55A;
     --dm-primary-hover: #D4B66A;
     --dm-primary-active: #B8964D;
-    --dm-primary-light: #2A2520;
+    --dm-primary-light: rgba(197, 165, 90, 0.15);
     --dm-primary-dark: #8B7335;
 
     /* Focus ring with warm gold colour */
@@ -18845,7 +19216,7 @@ code {
     --dm-card-bg: var(--dm-surface);
     --dm-card-border: var(--dm-border);
     --dm-card-shadow: var(--dm-shadow-sm);
-    --dm-card-header-bg: var(--dm-primary-light);
+    --dm-card-header-bg: var(--dm-surface-alt, var(--dm-background-alt));
 
     /* Inputs */
     --dm-input-bg: var(--dm-surface);