domma-js 0.18.2 → 0.19.1

package/public/dist/themes/domma-themes.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Themes v0.18.1
+ * Domma Themes v0.19.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-25T21:51:19.692Z
- * Commit: 2eb305a
+ * Built: 2026-03-04T12:58:08.642Z
+ * Commit: 1068c4c
  */
 
 /**
@@ -3466,216 +3466,1325 @@
     --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 
 }
-.dm-theme-grayve {
-    color-scheme: dark; /* Slate is typically a dark theme */
-
-    /* Tailwind-based color palette - adapting for grayve */
-    /* Slate (using bootswatch values) */
-    --dm-slate-50: #F8F9FA; /* Off-white */
-    --dm-slate-100: #E9ECEF;
-    --dm-slate-200: #DEE2E6;
-    --dm-slate-300: #CED4DA;
-    --dm-slate-400: #ADB5BD;
-    --dm-slate-500: #6C757D; /* Medium Gray */
-    --dm-slate-600: #495057;
-    --dm-slate-700: #343A40;
-    --dm-slate-800: #212529;
-    --dm-slate-900: #1a1e21; /* Dark Gray */
-    --dm-slate-950: #141619; /* Very Dark Gray */
-
-    /* Blues (for primary/info, etc.) */
-    --dm-blue-50: #e0f7fa;
-    --dm-blue-100: #b2ebf2;
-    --dm-blue-200: #80deea;
-    --dm-blue-300: #4dd0e1;
-    --dm-blue-400: #26c6da;
-    --dm-blue-500: #00bcd4; /* Bootswatch primary might be close to this or lighter */
-    --dm-blue-600: #00acc1;
-    --dm-blue-700: #0097a7;
-    --dm-blue-800: #00838f;
-    --dm-blue-900: #006064;
-    --dm-blue-950: #004d40;
-
-    /* Green (Success) */
-    --dm-green-500: #28a745;
-    --dm-green-400: #49cc61;
-    --dm-green-300: #6fd180;
-    --dm-green-600: #218838;
-
-    /* Red (Danger) */
-    --dm-red-500: #dc3545;
-    --dm-red-400: #e35a67;
-    --dm-red-300: #eb808a;
-    --dm-red-600: #c82333;
-
-    /* Amber (Warning) */
-    --dm-amber-500: #ffc107;
-    --dm-amber-400: #ffcd38;
-    --dm-amber-300: #ffd865;
-    --dm-amber-600: #e0a800;
-
-    /* Sky (Info - often similar to primary but distinct) */
-    --dm-sky-500: #17a2b8;
-    --dm-sky-400: #26d2e9;
-    --dm-sky-300: #51daec;
-    --dm-sky-600: #138496;
-
-    /* Semantic colors */
-    --dm-background: var(--dm-slate-900);
-    --dm-background-alt: var(--dm-slate-800);
-    --dm-surface: var(--dm-slate-800);
-    --dm-surface-raised: var(--dm-slate-700);
-    --dm-surface-overlay: rgba(0, 0, 0, 0.7);
-
-    /* Text */
-    --dm-text: var(--dm-slate-200);
-    --dm-text-secondary: var(--dm-slate-400);
-    --dm-text-muted: var(--dm-slate-500);
-    --dm-text-disabled: var(--dm-slate-600);
-    --dm-text-inverse: var(--dm-slate-900);
-
-    /* Borders */
-    --dm-border: var(--dm-slate-700);
-    --dm-border-light: var(--dm-slate-800);
-    --dm-border-dark: var(--dm-slate-600);
-    --dm-border-focus: var(--dm-blue-500); /* Use a vibrant blue for focus */
-    --dm-focus-ring: rgba(0, 188, 212, 0.3); /* Based on dm-blue-500 */
-    --dm-focus-ring-danger: rgba(220, 53, 69, 0.3); /* Based on dm-red-500 */
-
-    /* Interactive States */
-    --dm-hover-bg: rgba(255, 255, 255, 0.07);
-    --dm-active-bg: rgba(255, 255, 255, 0.1);
-    --dm-selected-bg: var(--dm-blue-600);
+/**
+ * Domma Unicorn Light Theme
+ * Predominantly pink and purple tones
+ * Light mode variant - light backgrounds with vibrant unicorn palette
+ */
+
+.dm-theme-unicorn-light {
+    color-scheme: light;
+
+    /* ================================================
+       FOUNDATIONAL COLORS - Light Mode Base
+       ================================================ */
+
+    /* Backgrounds - Light/white backgrounds */
+    --dm-background: #ffffff;
+    --dm-background-alt: #faf5fc;
+    --dm-surface: #ffffff;
+    --dm-surface-raised: #f3e5f5;
+    --dm-surface-overlay: #faf5fc;
+
+    /* Text - Dark colours for readability on light */
+    --dm-text: #2d1b3d;
+    --dm-text-secondary: #5d3a6e;
+    --dm-text-muted: #8e6b9e;
+    --dm-text-disabled: #c4a8d0;
+    --dm-text-inverse: #ffffff;
+
+    /* Borders - Subtle purple tint on light backgrounds */
+    --dm-border: #e1bee7;
+    --dm-border-light: #f3e5f5;
+    --dm-border-dark: #ce93d8;
+
+    /* ================================================
+       UNICORN PRIMARY COLOURS - Amethyst Purple
+       ================================================ */
+    --dm-primary: #9b59b6;
+    --dm-primary-hover: #8e44ad;
+    --dm-primary-active: #7d3c98;
+    --dm-primary-light: #f3e5f5;
+    --dm-primary-dark: #7d3c98;
+
+    /* Focus ring with soft purple colour */
+    --dm-focus-ring: 0 0 0 3px rgba(155, 89, 182, 0.35);
+    --dm-border-focus: #9b59b6;
+
+    /* ================================================
+       SECONDARY COLOURS - Hot Pink
+       ================================================ */
+    --dm-secondary: #e91e90;
+    --dm-secondary-hover: #d81b7f;
+    --dm-secondary-active: #c2176e;
+    --dm-secondary-light: #fce4ec;
+    --dm-secondary-dark: #c2176e;
+
+    /* ================================================
+       STATUS COLOURS
+       ================================================ */
+    --dm-success: #66bb6a;
+    --dm-success-hover: #57a85b;
+    --dm-success-active: #43a047;
+    --dm-success-light: rgba(102, 187, 106, 0.15);
+    --dm-success-dark: #388e3c;
+
+    --dm-info: #42a5f5;
+    --dm-info-hover: #2196f3;
+    --dm-info-active: #1e88e5;
+    --dm-info-light: rgba(66, 165, 245, 0.15);
+    --dm-info-dark: #1976d2;
+
+    --dm-warning: #ffa726;
+    --dm-warning-hover: #fb8c00;
+    --dm-warning-active: #f57c00;
+    --dm-warning-light: rgba(255, 167, 38, 0.15);
+    --dm-warning-dark: #e65100;
+    --dm-warning-text: #e65100;
+
+    --dm-danger: #ef5350;
+    --dm-danger-hover: #e53935;
+    --dm-danger-active: #c62828;
+    --dm-danger-light: rgba(239, 83, 80, 0.15);
+    --dm-danger-dark: #c62828;
+
+    /* ================================================
+       ACCENT COLOURS
+       ================================================ */
+    --dm-accent-1: #f48fb1; /* Soft pink */
+    --dm-accent-2: #ce93d8; /* Light purple */
+    --dm-accent-3: #ab47bc; /* Medium purple */
+    --dm-accent-4: #9b59b6; /* Amethyst */
+
+    /* ================================================
+       INTERACTIVE STATES
+       ================================================ */
+    --dm-hover-bg: rgba(155, 89, 182, 0.06);
+    --dm-active-bg: rgba(155, 89, 182, 0.12);
+    --dm-selected-bg: rgba(155, 89, 182, 0.12);
+    --dm-disabled-opacity: 0.65;
+
+    /* ================================================
+       COMPONENT-SPECIFIC COLORS
+       ================================================ */
+
+    /* Cards */
+    --dm-card-bg: var(--dm-surface);
+    --dm-card-border: var(--dm-border);
+    --dm-card-shadow: var(--dm-shadow-sm);
+
+    /* Inputs */
+    --dm-input-bg: var(--dm-surface);
+    --dm-input-border: var(--dm-border-dark);
+    --dm-input-text: var(--dm-text);
+    --dm-input-placeholder: var(--dm-text-muted);
+    --dm-input-focus-border: var(--dm-primary);
+    --dm-input-focus-shadow: var(--dm-focus-ring);
+    --dm-input-disabled-bg: #f3e5f5;
+
+    /* Buttons */
+    --dm-btn-text: var(--dm-text);
+    --dm-btn-bg: var(--dm-surface);
+    --dm-btn-border: var(--dm-border-dark);
+
+    /* Tables */
+    --dm-table-bg: transparent;
+    --dm-table-border: var(--dm-border);
+    --dm-table-header-bg: var(--dm-background-alt);
+    --dm-table-header-text: var(--dm-text);
+    --dm-table-stripe-bg: rgba(155, 89, 182, 0.03);
+    --dm-table-hover-bg: rgba(155, 89, 182, 0.06);
+    --dm-table-selected-bg: var(--dm-selected-bg);
+
+    /* Modals */
+    --dm-modal-bg: var(--dm-surface);
+    --dm-modal-border: var(--dm-border);
+    --dm-modal-backdrop: rgba(45, 27, 61, 0.5);
+    --dm-modal-shadow: var(--dm-shadow-xl);
+
+    /* Dropdowns */
+    --dm-dropdown-bg: var(--dm-surface);
+    --dm-dropdown-border: var(--dm-border);
+    --dm-dropdown-shadow: var(--dm-shadow-lg);
+    --dm-dropdown-item-hover: var(--dm-hover-bg);
+    --dm-dropdown-item-active: var(--dm-selected-bg);
+
+    /* Tooltips */
+    --dm-tooltip-bg: #2d1b3d;
+    --dm-tooltip-text: #ffffff;
+
+    /* Toasts */
+    --dm-toast-bg: var(--dm-surface);
+    --dm-toast-border: var(--dm-border);
+    --dm-toast-shadow: var(--dm-shadow-lg);
+
+    /* Navbar */
+    --dm-navbar-bg: var(--dm-surface);
+    --dm-navbar-text: var(--dm-text);
+    --dm-navbar-border: var(--dm-border);
+
+    /* Sidebar */
+    --dm-sidebar-bg: var(--dm-surface);
+    --dm-sidebar-text: var(--dm-text);
+    --dm-sidebar-border: var(--dm-border);
+    --dm-sidebar-item-hover: var(--dm-hover-bg);
+    --dm-sidebar-item-active: var(--dm-selected-bg);
+
+    /* Tabs */
+    --dm-tab-border: var(--dm-border);
+    --dm-tab-hover-bg: var(--dm-hover-bg);
+    --dm-tab-active-border: #9b59b6;
+    --dm-tab-active-text: #7d3c98;
+
+    /* Accordion */
+    --dm-accordion-bg: var(--dm-surface);
+    --dm-accordion-border: var(--dm-border);
+    --dm-accordion-header-bg: var(--dm-background-alt);
+    --dm-accordion-header-hover: var(--dm-hover-bg);
+
+    /* Badges */
+    --dm-badge-bg: var(--dm-primary);
+    --dm-badge-text: #ffffff;
+
+    /* Progress */
+    --dm-progress-bg: #f3e5f5;
+    --dm-progress-bar: #9b59b6;
+
+    /* Scrollbar */
+    --dm-scrollbar-track: #f3e5f5;
+    --dm-scrollbar-thumb: #ce93d8;
+    --dm-scrollbar-thumb-hover: #ab47bc;
+
+    /* Code */
+    --dm-code-bg: #faf5fc;
+    --dm-code-text: #e91e90;
+    --dm-code-border: var(--dm-border);
+
+    /* ================================================
+       SHADOWS - Standard for light mode
+       ================================================ */
+    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+    /* ================================================
+       ELEVATION / DEPTH
+       ================================================ */
+    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
+}
+
+/**
+ * Domma Unicorn Dark Theme
+ * Predominantly pink and purple tones
+ * Dark mode variant - deep purple-black backgrounds with luminous accents
+ */
+
+.dm-theme-unicorn-dark {
+    color-scheme: dark;
+
+    /* ================================================
+       FOUNDATIONAL COLORS - Dark Mode Base
+       ================================================ */
+
+    /* Backgrounds - Deep purple-black backgrounds */
+    --dm-background: #1a0e24;
+    --dm-background-alt: #241432;
+    --dm-surface: #241432;
+    --dm-surface-raised: #341a45;
+    --dm-surface-overlay: #341a45;
+
+    /* Text - Light colours for readability on dark */
+    --dm-text: #f3e5f5;
+    --dm-text-secondary: #ce93d8;
+    --dm-text-muted: #ab47bc;
+    --dm-text-disabled: #6a3d7a;
+    --dm-text-inverse: #1a0e24;
+
+    /* Borders - Muted purple on dark backgrounds */
+    --dm-border: #4a2660;
+    --dm-border-light: #341a45;
+    --dm-border-dark: #6a3d7a;
+
+    /* ================================================
+       UNICORN PRIMARY COLOURS - Lighter purple for contrast
+       ================================================ */
+    --dm-primary: #ce93d8;
+    --dm-primary-hover: #ba68c8;
+    --dm-primary-active: #ab47bc;
+    --dm-primary-light: #f3e5f5;
+    --dm-primary-dark: #ab47bc;
+
+    /* Focus ring with soft purple colour */
+    --dm-focus-ring: 0 0 0 3px rgba(206, 147, 216, 0.35);
+    --dm-border-focus: #ce93d8;
+
+    /* ================================================
+       SECONDARY COLOURS - Lighter pink for contrast
+       ================================================ */
+    --dm-secondary: #f48fb1;
+    --dm-secondary-hover: #f06292;
+    --dm-secondary-active: #ec407a;
+    --dm-secondary-light: #fce4ec;
+    --dm-secondary-dark: #ec407a;
+
+    /* ================================================
+       STATUS COLOURS
+       ================================================ */
+    --dm-success: #66bb6a;
+    --dm-success-hover: #81c784;
+    --dm-success-active: #a5d6a7;
+    --dm-success-light: rgba(102, 187, 106, 0.2);
+    --dm-success-dark: #43a047;
+
+    --dm-info: #42a5f5;
+    --dm-info-hover: #64b5f6;
+    --dm-info-active: #90caf9;
+    --dm-info-light: rgba(66, 165, 245, 0.2);
+    --dm-info-dark: #1976d2;
+
+    --dm-warning: #ffa726;
+    --dm-warning-hover: #ffb74d;
+    --dm-warning-active: #ffcc80;
+    --dm-warning-light: rgba(255, 167, 38, 0.2);
+    --dm-warning-dark: #f57c00;
+    --dm-warning-text: #ffb74d;
+
+    --dm-danger: #ef5350;
+    --dm-danger-hover: #e57373;
+    --dm-danger-active: #ef9a9a;
+    --dm-danger-light: rgba(239, 83, 80, 0.2);
+    --dm-danger-dark: #c62828;
+
+    /* ================================================
+       ACCENT COLOURS
+       ================================================ */
+    --dm-accent-1: #ce93d8; /* Light purple */
+    --dm-accent-2: #f48fb1; /* Soft pink */
+    --dm-accent-3: #ba68c8; /* Medium purple */
+    --dm-accent-4: #9b59b6; /* Amethyst */
+
+    /* ================================================
+       INTERACTIVE STATES
+       ================================================ */
+    --dm-hover-bg: rgba(206, 147, 216, 0.1);
+    --dm-active-bg: rgba(206, 147, 216, 0.15);
+    --dm-selected-bg: rgba(206, 147, 216, 0.15);
+    --dm-disabled-opacity: 0.4;
+
+    /* ================================================
+       COMPONENT-SPECIFIC COLORS
+       ================================================ */
+
+    /* Cards */
+    --dm-card-bg: var(--dm-surface);
+    --dm-card-border: var(--dm-border);
+    --dm-card-shadow: var(--dm-shadow-md);
+
+    /* Inputs */
+    --dm-input-bg: var(--dm-surface);
+    --dm-input-border: var(--dm-border-dark);
+    --dm-input-text: var(--dm-text);
+    --dm-input-placeholder: var(--dm-text-muted);
+    --dm-input-focus-border: var(--dm-primary);
+    --dm-input-disabled-bg: #241432;
+
+    /* Buttons */
+    --dm-btn-text: var(--dm-text);
+    --dm-btn-bg: var(--dm-surface);
+    --dm-btn-border: var(--dm-border-dark);
+
+    /* Tables */
+    --dm-table-bg: transparent;
+    --dm-table-border: var(--dm-border);
+    --dm-table-header-bg: var(--dm-background-alt);
+    --dm-table-header-text: var(--dm-text);
+    --dm-table-stripe-bg: rgba(206, 147, 216, 0.04);
+    --dm-table-hover-bg: var(--dm-hover-bg);
+    --dm-table-selected-bg: var(--dm-selected-bg);
+
+    /* Modals */
+    --dm-modal-bg: var(--dm-surface);
+    --dm-modal-border: var(--dm-border);
+    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
+    --dm-modal-shadow: var(--dm-shadow-xl);
+
+    /* Dropdowns */
+    --dm-dropdown-bg: var(--dm-surface-raised);
+    --dm-dropdown-border: var(--dm-border);
+    --dm-dropdown-shadow: var(--dm-shadow-lg);
+    --dm-dropdown-item-hover: var(--dm-hover-bg);
+    --dm-dropdown-item-active: var(--dm-selected-bg);
+
+    /* Tooltips */
+    --dm-tooltip-bg: #1a0e24;
+    --dm-tooltip-text: #f3e5f5;
+
+    /* Toasts */
+    --dm-toast-bg: var(--dm-surface);
+    --dm-toast-border: var(--dm-border);
+    --dm-toast-shadow: var(--dm-shadow-lg);
+
+    /* Navbar */
+    --dm-navbar-bg: var(--dm-surface);
+    --dm-navbar-text: var(--dm-text);
+    --dm-navbar-border: var(--dm-border);
+
+    /* Sidebar */
+    --dm-sidebar-bg: var(--dm-surface);
+    --dm-sidebar-text: var(--dm-text);
+    --dm-sidebar-border: var(--dm-border);
+    --dm-sidebar-item-hover: var(--dm-hover-bg);
+    --dm-sidebar-item-active: var(--dm-selected-bg);
+
+    /* Tabs */
+    --dm-tab-border: var(--dm-border);
+    --dm-tab-hover-bg: var(--dm-hover-bg);
+    --dm-tab-active-border: #ce93d8;
+    --dm-tab-active-text: #ce93d8;
+
+    /* Accordion */
+    --dm-accordion-bg: var(--dm-surface);
+    --dm-accordion-border: var(--dm-border);
+    --dm-accordion-header-bg: var(--dm-background-alt);
+    --dm-accordion-header-hover: var(--dm-hover-bg);
+
+    /* Badges */
+    --dm-badge-bg: var(--dm-primary);
+    --dm-badge-text: #1a0e24;
+
+    /* Progress */
+    --dm-progress-bg: #341a45;
+    --dm-progress-bar: #ce93d8;
+
+    /* Scrollbar */
+    --dm-scrollbar-track: #241432;
+    --dm-scrollbar-thumb: #4a2660;
+    --dm-scrollbar-thumb-hover: #6a3d7a;
+
+    /* Code */
+    --dm-code-bg: #1e1228;
+    --dm-code-text: #f48fb1;
+    --dm-code-border: var(--dm-border);
+
+    /* ================================================
+       SHADOWS - Subtle for dark mode
+       ================================================ */
+    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+    /* ================================================
+       ELEVATION / DEPTH
+       ================================================ */
+    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
+}
+
+/**
+ * Domma Dreamy Light Theme
+ * Predominantly beige and biscuit tones
+ * Light mode variant - warm cream backgrounds with earthy accents
+ */
+
+.dm-theme-dreamy-light {
+    color-scheme: light;
+
+    /* ================================================
+       FOUNDATIONAL COLORS - Light Mode Base
+       ================================================ */
+
+    /* Backgrounds - Warm white and biscuit surfaces */
+    --dm-background: #fffdf9;
+    --dm-background-alt: #f5f0eb;
+    --dm-surface: #fffdf9;
+    --dm-surface-raised: #f0ebe4;
+    --dm-surface-overlay: #f5f0eb;
+
+    /* Text - Dark chocolate for readability on light */
+    --dm-text: #3e2723;
+    --dm-text-secondary: #5d4037;
+    --dm-text-muted: #8d6e63;
+    --dm-text-disabled: #bcaaa4;
+    --dm-text-inverse: #ffffff;
+
+    /* Borders - Light biscuit on warm backgrounds */
+    --dm-border: #d7ccc8;
+    --dm-border-light: #efebe9;
+    --dm-border-dark: #bcaaa4;
+
+    /* ================================================
+       DREAMY PRIMARY COLOURS - Warm Brown
+       ================================================ */
+    --dm-primary: #8d6e63;
+    --dm-primary-hover: #6d4c41;
+    --dm-primary-active: #5d4037;
+    --dm-primary-light: #efebe9;
+    --dm-primary-dark: #6d4c41;
+
+    /* Focus ring with warm brown colour */
+    --dm-focus-ring: 0 0 0 3px rgba(141, 110, 99, 0.35);
+    --dm-border-focus: #8d6e63;
+
+    /* ================================================
+       SECONDARY COLOURS - Dusty Rose-Brown
+       ================================================ */
+    --dm-secondary: #a1887f;
+    --dm-secondary-hover: #8d6e63;
+    --dm-secondary-active: #795548;
+    --dm-secondary-light: #faf5f0;
+    --dm-secondary-dark: #795548;
+
+    /* ================================================
+       STATUS COLOURS
+       ================================================ */
+    --dm-success: #81c784;
+    --dm-success-hover: #66bb6a;
+    --dm-success-active: #4caf50;
+    --dm-success-light: rgba(129, 199, 132, 0.15);
+    --dm-success-dark: #388e3c;
+
+    --dm-info: #64b5f6;
+    --dm-info-hover: #42a5f5;
+    --dm-info-active: #2196f3;
+    --dm-info-light: rgba(100, 181, 246, 0.15);
+    --dm-info-dark: #1976d2;
+
+    --dm-warning: #ffb74d;
+    --dm-warning-hover: #ffa726;
+    --dm-warning-active: #ff9800;
+    --dm-warning-light: rgba(255, 183, 77, 0.15);
+    --dm-warning-dark: #e65100;
+    --dm-warning-text: #bf360c;
+
+    --dm-danger: #e57373;
+    --dm-danger-hover: #ef5350;
+    --dm-danger-active: #e53935;
+    --dm-danger-light: rgba(229, 115, 115, 0.15);
+    --dm-danger-dark: #c62828;
+
+    /* ================================================
+       ACCENT COLOURS
+       ================================================ */
+    --dm-accent-1: #d7ccc8; /* Light biscuit */
+    --dm-accent-2: #bcaaa4; /* Muted taupe */
+    --dm-accent-3: #a1887f; /* Dusty rose-brown */
+    --dm-accent-4: #8d6e63; /* Warm brown */
+
+    /* ================================================
+       INTERACTIVE STATES
+       ================================================ */
+    --dm-hover-bg: rgba(141, 110, 99, 0.06);
+    --dm-active-bg: rgba(141, 110, 99, 0.12);
+    --dm-selected-bg: rgba(141, 110, 99, 0.12);
+    --dm-disabled-opacity: 0.65;
+
+    /* ================================================
+       COMPONENT-SPECIFIC COLORS
+       ================================================ */
+
+    /* Cards */
+    --dm-card-bg: var(--dm-surface);
+    --dm-card-border: var(--dm-border);
+    --dm-card-shadow: var(--dm-shadow-sm);
+
+    /* Inputs */
+    --dm-input-bg: var(--dm-surface);
+    --dm-input-border: var(--dm-border-dark);
+    --dm-input-text: var(--dm-text);
+    --dm-input-placeholder: var(--dm-text-muted);
+    --dm-input-focus-border: var(--dm-primary);
+    --dm-input-focus-shadow: var(--dm-focus-ring);
+    --dm-input-disabled-bg: #efebe9;
+
+    /* Buttons */
+    --dm-btn-text: var(--dm-text);
+    --dm-btn-bg: var(--dm-surface);
+    --dm-btn-border: var(--dm-border-dark);
+
+    /* Tables */
+    --dm-table-bg: transparent;
+    --dm-table-border: var(--dm-border);
+    --dm-table-header-bg: var(--dm-background-alt);
+    --dm-table-header-text: var(--dm-text);
+    --dm-table-stripe-bg: rgba(141, 110, 99, 0.03);
+    --dm-table-hover-bg: rgba(141, 110, 99, 0.06);
+    --dm-table-selected-bg: var(--dm-selected-bg);
+
+    /* Modals */
+    --dm-modal-bg: var(--dm-surface);
+    --dm-modal-border: var(--dm-border);
+    --dm-modal-backdrop: rgba(62, 39, 35, 0.5);
+    --dm-modal-shadow: var(--dm-shadow-xl);
+
+    /* Dropdowns */
+    --dm-dropdown-bg: var(--dm-surface);
+    --dm-dropdown-border: var(--dm-border);
+    --dm-dropdown-shadow: var(--dm-shadow-lg);
+    --dm-dropdown-item-hover: var(--dm-hover-bg);
+    --dm-dropdown-item-active: var(--dm-selected-bg);
+
+    /* Tooltips */
+    --dm-tooltip-bg: #3e2723;
+    --dm-tooltip-text: #ffffff;
+
+    /* Toasts */
+    --dm-toast-bg: var(--dm-surface);
+    --dm-toast-border: var(--dm-border);
+    --dm-toast-shadow: var(--dm-shadow-lg);
+
+    /* Navbar */
+    --dm-navbar-bg: var(--dm-surface);
+    --dm-navbar-text: var(--dm-text);
+    --dm-navbar-border: var(--dm-border);
+
+    /* Sidebar */
+    --dm-sidebar-bg: var(--dm-surface);
+    --dm-sidebar-text: var(--dm-text);
+    --dm-sidebar-border: var(--dm-border);
+    --dm-sidebar-item-hover: var(--dm-hover-bg);
+    --dm-sidebar-item-active: var(--dm-selected-bg);
+
+    /* Tabs */
+    --dm-tab-border: var(--dm-border);
+    --dm-tab-hover-bg: var(--dm-hover-bg);
+    --dm-tab-active-border: #8d6e63;
+    --dm-tab-active-text: #6d4c41;
+
+    /* Accordion */
+    --dm-accordion-bg: var(--dm-surface);
+    --dm-accordion-border: var(--dm-border);
+    --dm-accordion-header-bg: var(--dm-background-alt);
+    --dm-accordion-header-hover: var(--dm-hover-bg);
+
+    /* Badges */
+    --dm-badge-bg: var(--dm-primary);
+    --dm-badge-text: #ffffff;
+
+    /* Progress */
+    --dm-progress-bg: #efebe9;
+    --dm-progress-bar: #8d6e63;
+
+    /* Scrollbar */
+    --dm-scrollbar-track: #efebe9;
+    --dm-scrollbar-thumb: #d7ccc8;
+    --dm-scrollbar-thumb-hover: #bcaaa4;
+
+    /* Code */
+    --dm-code-bg: #f5f0eb;
+    --dm-code-text: #a1887f;
+    --dm-code-border: var(--dm-border);
+
+    /* ================================================
+       SHADOWS - Standard for light mode
+       ================================================ */
+    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+    /* ================================================
+       ELEVATION / DEPTH
+       ================================================ */
+    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
+}
+
+/**
+ * Domma Dreamy Dark Theme
+ * Predominantly beige and biscuit tones
+ * Dark mode variant - dark espresso backgrounds with warm taupe accents
+ */
+
+.dm-theme-dreamy-dark {
+    color-scheme: dark;
+
+    /* ================================================
+       FOUNDATIONAL COLORS - Dark Mode Base
+       ================================================ */
+
+    /* Backgrounds - Dark espresso and coffee grounds */
+    --dm-background: #1c1410;
+    --dm-background-alt: #2a1f1a;
+    --dm-surface: #2a1f1a;
+    --dm-surface-raised: #3a2c26;
+    --dm-surface-overlay: #3a2c26;
+
+    /* Text - Warm off-white for readability on dark */
+    --dm-text: #efebe9;
+    --dm-text-secondary: #d7ccc8;
+    --dm-text-muted: #bcaaa4;
+    --dm-text-disabled: #6d4c41;
+    --dm-text-inverse: #1c1410;
+
+    /* Borders - Dark brown on dark backgrounds */
+    --dm-border: #4e342e;
+    --dm-border-light: #3a2c26;
+    --dm-border-dark: #6d4c41;
+
+    /* ================================================
+       DREAMY PRIMARY COLOURS - Lighter taupe for contrast
+       ================================================ */
+    --dm-primary: #bcaaa4;
+    --dm-primary-hover: #d7ccc8;
+    --dm-primary-active: #efebe9;
+    --dm-primary-light: #efebe9;
+    --dm-primary-dark: #a1887f;
+
+    /* Focus ring with warm taupe colour */
+    --dm-focus-ring: 0 0 0 3px rgba(188, 170, 164, 0.35);
+    --dm-border-focus: #bcaaa4;
+
+    /* ================================================
+       SECONDARY COLOURS - Lighter biscuit for contrast
+       ================================================ */
+    --dm-secondary: #d7ccc8;
+    --dm-secondary-hover: #efebe9;
+    --dm-secondary-active: #ffffff;
+    --dm-secondary-light: #faf5f0;
+    --dm-secondary-dark: #bcaaa4;
+
+    /* ================================================
+       STATUS COLOURS
+       ================================================ */
+    --dm-success: #81c784;
+    --dm-success-hover: #a5d6a7;
+    --dm-success-active: #c8e6c9;
+    --dm-success-light: rgba(129, 199, 132, 0.2);
+    --dm-success-dark: #4caf50;
+
+    --dm-info: #64b5f6;
+    --dm-info-hover: #90caf9;
+    --dm-info-active: #bbdefb;
+    --dm-info-light: rgba(100, 181, 246, 0.2);
+    --dm-info-dark: #2196f3;
+
+    --dm-warning: #ffb74d;
+    --dm-warning-hover: #ffcc80;
+    --dm-warning-active: #ffe0b2;
+    --dm-warning-light: rgba(255, 183, 77, 0.2);
+    --dm-warning-dark: #ff9800;
+    --dm-warning-text: #ffcc80;
+
+    --dm-danger: #e57373;
+    --dm-danger-hover: #ef9a9a;
+    --dm-danger-active: #ffcdd2;
+    --dm-danger-light: rgba(229, 115, 115, 0.2);
+    --dm-danger-dark: #f44336;
+
+    /* ================================================
+       ACCENT COLOURS
+       ================================================ */
+    --dm-accent-1: #efebe9; /* Warm off-white */
+    --dm-accent-2: #d7ccc8; /* Light biscuit */
+    --dm-accent-3: #bcaaa4; /* Muted taupe */
+    --dm-accent-4: #a1887f; /* Dusty rose-brown */
+
+    /* ================================================
+       INTERACTIVE STATES
+       ================================================ */
+    --dm-hover-bg: rgba(188, 170, 164, 0.1);
+    --dm-active-bg: rgba(188, 170, 164, 0.15);
+    --dm-selected-bg: rgba(188, 170, 164, 0.15);
     --dm-disabled-opacity: 0.4;
 
-    /* Brand Colors */
-    --dm-primary: var(--dm-blue-500);
-    --dm-primary-dark: var(--dm-blue-700);
-    --dm-primary-light: var(--dm-blue-300);
-    --dm-primary-hover: var(--dm-blue-400);
-    --dm-primary-active: var(--dm-blue-600);
-
-    --dm-secondary: var(--dm-slate-500);
-    --dm-secondary-hover: var(--dm-slate-400);
-    --dm-secondary-active: var(--dm-slate-300);
-
-    /* Status Colors */
-    --dm-success: var(--dm-green-500);
-    --dm-success-hover: var(--dm-green-400);
-    --dm-success-active: var(--dm-green-600);
-    --dm-success-light: rgba(40, 167, 69, 0.2);
-    --dm-success-dark: var(--dm-green-600);
+    /* ================================================
+       COMPONENT-SPECIFIC COLORS
+       ================================================ */
+
+    /* Cards */
+    --dm-card-bg: var(--dm-surface);
+    --dm-card-border: var(--dm-border);
+    --dm-card-shadow: var(--dm-shadow-md);
+
+    /* Inputs */
+    --dm-input-bg: var(--dm-surface);
+    --dm-input-border: var(--dm-border-dark);
+    --dm-input-text: var(--dm-text);
+    --dm-input-placeholder: var(--dm-text-muted);
+    --dm-input-focus-border: var(--dm-primary);
+    --dm-input-disabled-bg: #2a1f1a;
+
+    /* Buttons */
+    --dm-btn-text: var(--dm-text);
+    --dm-btn-bg: var(--dm-surface);
+    --dm-btn-border: var(--dm-border-dark);
+
+    /* Tables */
+    --dm-table-bg: transparent;
+    --dm-table-border: var(--dm-border);
+    --dm-table-header-bg: var(--dm-background-alt);
+    --dm-table-header-text: var(--dm-text);
+    --dm-table-stripe-bg: rgba(188, 170, 164, 0.04);
+    --dm-table-hover-bg: var(--dm-hover-bg);
+    --dm-table-selected-bg: var(--dm-selected-bg);
+
+    /* Modals */
+    --dm-modal-bg: var(--dm-surface);
+    --dm-modal-border: var(--dm-border);
+    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
+    --dm-modal-shadow: var(--dm-shadow-xl);
+
+    /* Dropdowns */
+    --dm-dropdown-bg: var(--dm-surface-raised);
+    --dm-dropdown-border: var(--dm-border);
+    --dm-dropdown-shadow: var(--dm-shadow-lg);
+    --dm-dropdown-item-hover: var(--dm-hover-bg);
+    --dm-dropdown-item-active: var(--dm-selected-bg);
+
+    /* Tooltips */
+    --dm-tooltip-bg: #1c1410;
+    --dm-tooltip-text: #efebe9;
+
+    /* Toasts */
+    --dm-toast-bg: var(--dm-surface);
+    --dm-toast-border: var(--dm-border);
+    --dm-toast-shadow: var(--dm-shadow-lg);
+
+    /* Navbar */
+    --dm-navbar-bg: var(--dm-surface);
+    --dm-navbar-text: var(--dm-text);
+    --dm-navbar-border: var(--dm-border);
+
+    /* Sidebar */
+    --dm-sidebar-bg: var(--dm-surface);
+    --dm-sidebar-text: var(--dm-text);
+    --dm-sidebar-border: var(--dm-border);
+    --dm-sidebar-item-hover: var(--dm-hover-bg);
+    --dm-sidebar-item-active: var(--dm-selected-bg);
+
+    /* Tabs */
+    --dm-tab-border: var(--dm-border);
+    --dm-tab-hover-bg: var(--dm-hover-bg);
+    --dm-tab-active-border: #bcaaa4;
+    --dm-tab-active-text: #bcaaa4;
+
+    /* Accordion */
+    --dm-accordion-bg: var(--dm-surface);
+    --dm-accordion-border: var(--dm-border);
+    --dm-accordion-header-bg: var(--dm-background-alt);
+    --dm-accordion-header-hover: var(--dm-hover-bg);
+
+    /* Badges */
+    --dm-badge-bg: var(--dm-primary);
+    --dm-badge-text: #1c1410;
+
+    /* Progress */
+    --dm-progress-bg: #3a2c26;
+    --dm-progress-bar: #bcaaa4;
+
+    /* Scrollbar */
+    --dm-scrollbar-track: #2a1f1a;
+    --dm-scrollbar-thumb: #4e342e;
+    --dm-scrollbar-thumb-hover: #6d4c41;
+
+    /* Code */
+    --dm-code-bg: #1a1210;
+    --dm-code-text: #d7ccc8;
+    --dm-code-border: var(--dm-border);
+
+    /* ================================================
+       SHADOWS - Subtle for dark mode
+       ================================================ */
+    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+    /* ================================================
+       ELEVATION / DEPTH
+       ================================================ */
+    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
+}
+
+/**
+ * Domma Grayve Light Theme
+ * Slate/cyan monochrome palette — complementary light variant
+ * Light mode variant
+ */
+
+.dm-theme-grayve-light {
+    color-scheme: light;
+
+    /* ================================================
+       FOUNDATIONAL COLORS - Light Mode Base
+       ================================================ */
+
+    /* Backgrounds - Light/white backgrounds */
+    --dm-background: #ffffff;
+    --dm-background-alt: #f8f9fa;
+    --dm-surface: #ffffff;
+    --dm-surface-raised: #f1f3f5;
+    --dm-surface-overlay: #f8f9fa;
+
+    /* Text - Dark colours for readability on light */
+    --dm-text: #212529;
+    --dm-text-secondary: #495057;
+    --dm-text-muted: #6c757d;
+    --dm-text-disabled: #adb5bd;
+    --dm-text-inverse: #ffffff;
+
+    /* Borders - Subtle on light backgrounds */
+    --dm-border: #dee2e6;
+    --dm-border-light: #e9ecef;
+    --dm-border-dark: #ced4da;
+
+    /* ================================================
+       GRAYVE ACCENT COLORS - Darker cyan for light-mode contrast
+       ================================================ */
+
+    /* PRIMARY COLOURS - Dark Cyan for contrast */
+    --dm-primary: #00838f;
+    --dm-primary-hover: #006064;
+    --dm-primary-active: #00acc1;
+    --dm-primary-light: #e0f7fa;
+    --dm-primary-dark: #006064;
+
+    /* Focus ring with cyan colour */
+    --dm-focus-ring: 0 0 0 3px rgba(0, 131, 143, 0.3);
+    --dm-border-focus: #00838f;
+
+    /* ================================================
+       SECONDARY COLOURS - Blue Grey
+       ================================================ */
+    --dm-secondary: #546e7a;
+    --dm-secondary-hover: #607d8b;
+    --dm-secondary-active: #78909c;
+    --dm-secondary-light: rgba(84, 110, 122, 0.15);
+    --dm-secondary-dark: #455a64;
 
-    --dm-danger: var(--dm-red-500);
-    --dm-danger-hover: var(--dm-red-400);
-    --dm-danger-active: var(--dm-red-600);
-    --dm-danger-light: rgba(220, 53, 69, 0.2);
-    --dm-danger-dark: var(--dm-red-600);
+    /* ================================================
+       STATUS COLOURS
+       ================================================ */
+    --dm-success: #2e7d32;
+    --dm-success-hover: #388e3c;
+    --dm-success-active: #1b5e20;
+    --dm-success-light: rgba(46, 125, 50, 0.1);
+    --dm-success-dark: #1b5e20;
+
+    --dm-info: #0277bd;
+    --dm-info-hover: #0288d1;
+    --dm-info-active: #01579b;
+    --dm-info-light: rgba(2, 119, 189, 0.1);
+    --dm-info-dark: #01579b;
+
+    --dm-warning: #f57c00;
+    --dm-warning-hover: #fb8c00;
+    --dm-warning-active: #e65100;
+    --dm-warning-text: #e65100;
+    --dm-warning-light: rgba(245, 124, 0, 0.1);
+    --dm-warning-dark: #e65100;
+
+    --dm-danger: #c62828;
+    --dm-danger-hover: #d32f2f;
+    --dm-danger-active: #b71c1c;
+    --dm-danger-light: rgba(198, 40, 40, 0.1);
+    --dm-danger-dark: #b71c1c;
 
-    --dm-warning: var(--dm-amber-400);
-    --dm-warning-hover: var(--dm-amber-300);
-    --dm-warning-active: var(--dm-amber-500);
-    --dm-warning-text: var(--dm-amber-900);
-    --dm-warning-light: rgba(255, 193, 7, 0.2);
-    --dm-warning-dark: var(--dm-amber-600);
+    /* ================================================
+       ACCENT COLOURS
+       ================================================ */
+    --dm-accent-1: #b2ebf2; /* Cyan 100 */
+    --dm-accent-2: #80deea; /* Cyan 200 */
+    --dm-accent-3: #00838f; /* Cyan 800 */
+    --dm-accent-4: #006064; /* Cyan 900 */
 
-    --dm-info: var(--dm-sky-500);
-    --dm-info-hover: var(--dm-sky-400);
-    --dm-info-active: var(--dm-sky-600);
-    --dm-info-light: rgba(23, 162, 184, 0.2);
-    --dm-info-dark: var(--dm-sky-600);
-
-    /* Background Tints */
-    --dm-primary-bg: rgba(0, 188, 212, 0.15);
-    --dm-secondary-bg: rgba(108, 117, 125, 0.15);
-    --dm-success-bg: rgba(40, 167, 69, 0.15);
-    --dm-danger-bg: rgba(220, 53, 69, 0.15);
-    --dm-warning-bg: rgba(255, 193, 7, 0.15);
-    --dm-info-bg: rgba(23, 162, 184, 0.15);
-
-    /* Semantic Surface Colors */
-    --dm-surface-secondary: var(--dm-slate-900);
-    --dm-card-bg: var(--dm-slate-800);
-    --dm-card-border: var(--dm-slate-700);
-
-    /* Legacy color names (kept for backwards compatibility) */
-    --dm-light: var(--dm-slate-200);
-    --dm-dark: var(--dm-slate-800);
-    --dm-white: #ffffff;
-    --dm-black: #000000;
-
-    /* Grays (mapped to Slate) */
-    --dm-gray-50: var(--dm-slate-50);
-    --dm-gray-100: var(--dm-slate-100);
-    --dm-gray-200: var(--dm-slate-200);
-    --dm-gray-300: var(--dm-slate-300);
-    --dm-gray-400: var(--dm-slate-400);
-    --dm-gray-500: var(--dm-slate-500);
-    --dm-gray-600: var(--dm-slate-600);
-    --dm-gray-700: var(--dm-slate-700);
-    --dm-gray-800: var(--dm-slate-800);
-    --dm-gray-900: var(--dm-slate-900);
-    --dm-gray-950: var(--dm-slate-950);
-
-    /* Component-specific variables */
+    /* ================================================
+       INTERACTIVE STATES
+       ================================================ */
+    --dm-hover-bg: rgba(0, 131, 143, 0.06);
+    --dm-active-bg: rgba(0, 131, 143, 0.1);
+    --dm-selected-bg: #e0f7fa;
+    --dm-disabled-opacity: 0.4;
+
+    /* ================================================
+       COMPONENT-SPECIFIC COLORS
+       ================================================ */
+
+    /* Cards */
+    --dm-card-bg: var(--dm-surface);
+    --dm-card-border: var(--dm-border);
+    --dm-card-shadow: var(--dm-shadow-md);
+
+    /* Inputs */
     --dm-input-bg: var(--dm-surface);
     --dm-input-border: var(--dm-border-dark);
     --dm-input-text: var(--dm-text);
     --dm-input-placeholder: var(--dm-text-muted);
     --dm-input-focus-border: var(--dm-primary);
-    --dm-input-disabled-bg: var(--dm-slate-800);
+    --dm-input-disabled-bg: #f8f9fa;
+
+    /* Buttons */
+    --dm-btn-text: var(--dm-text);
+    --dm-btn-bg: var(--dm-surface);
+    --dm-btn-border: var(--dm-border-dark);
 
+    /* Tables */
+    --dm-table-bg: transparent;
     --dm-table-border: var(--dm-border);
+    --dm-table-header-bg: var(--dm-background-alt);
+    --dm-table-header-text: var(--dm-text);
+    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
     --dm-table-hover-bg: var(--dm-hover-bg);
-    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
+    --dm-table-selected-bg: var(--dm-selected-bg);
 
-    --dm-navbar-bg: var(--dm-surface);
-    --dm-navbar-text: var(--dm-text);
-    --dm-navbar-border: var(--dm-border);
+    /* Modals */
+    --dm-modal-bg: var(--dm-surface);
+    --dm-modal-border: var(--dm-border);
+    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
+    --dm-modal-shadow: var(--dm-shadow-xl);
 
-    --dm-dropdown-bg: var(--dm-surface-raised);
+    /* Dropdowns */
+    --dm-dropdown-bg: var(--dm-surface);
     --dm-dropdown-border: var(--dm-border);
+    --dm-dropdown-shadow: var(--dm-shadow-lg);
     --dm-dropdown-item-hover: var(--dm-hover-bg);
     --dm-dropdown-item-active: var(--dm-selected-bg);
 
+    /* Tooltips */
+    --dm-tooltip-bg: #212529;
+    --dm-tooltip-text: #ffffff;
+
+    /* Toasts */
+    --dm-toast-bg: var(--dm-surface);
+    --dm-toast-border: var(--dm-border);
+    --dm-toast-shadow: var(--dm-shadow-lg);
+
+    /* Navbar */
+    --dm-navbar-bg: var(--dm-surface);
+    --dm-navbar-text: var(--dm-text);
+    --dm-navbar-border: var(--dm-border);
+
+    /* Sidebar */
     --dm-sidebar-bg: var(--dm-surface);
+    --dm-sidebar-text: var(--dm-text);
     --dm-sidebar-border: var(--dm-border);
     --dm-sidebar-item-hover: var(--dm-hover-bg);
     --dm-sidebar-item-active: var(--dm-selected-bg);
 
+    /* Tabs */
+    --dm-tab-border: var(--dm-border);
+    --dm-tab-hover-bg: var(--dm-hover-bg);
+
+    /* Accordion */
+    --dm-accordion-bg: var(--dm-surface);
+    --dm-accordion-border: var(--dm-border);
+    --dm-accordion-header-bg: var(--dm-background-alt);
+    --dm-accordion-header-hover: var(--dm-hover-bg);
+
+    /* Badges */
+    --dm-badge-bg: var(--dm-secondary);
+    --dm-badge-text: #ffffff;
+
+    /* Pills */
+    --dm-pill-bg: #e0f7fa;
+    --dm-pill-color: #006064;
+    --dm-pill-hover-bg: #b2ebf2;
+
+    /* Autocomplete / Pillbox */
     --dm-autocomplete-bg: var(--dm-surface);
     --dm-autocomplete-border: var(--dm-border);
     --dm-autocomplete-shadow: var(--dm-shadow-md);
     --dm-autocomplete-item-hover: var(--dm-hover-bg);
     --dm-autocomplete-item-active: var(--dm-selected-bg);
     --dm-autocomplete-highlight: var(--dm-primary-light);
-
     --dm-pillbox-bg: var(--dm-surface);
     --dm-pillbox-border: var(--dm-border);
-    --dm-pill-bg: var(--dm-gray-700); /* Darker pill background for dark theme */
-    --dm-pill-color: var(--dm-text);
-    --dm-pill-hover-bg: var(--dm-gray-600);
 
+    /* Progress */
+    --dm-progress-bg: #e9ecef;
+
+    /* Scrollbar */
+    --dm-scrollbar-track: #f8f9fa;
+    --dm-scrollbar-thumb: #ced4da;
+    --dm-scrollbar-thumb-hover: #adb5bd;
+
+    /* Code */
+    --dm-code-bg: #f8f9fa;
+    --dm-code-text: #00838f;
+    --dm-code-border: var(--dm-border);
+
+    /* ================================================
+       SHADOWS - Standard for light mode
+       ================================================ */
+    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+
+/* Syntax highlighting tokens for grayve-light */
+.dm-theme-grayve-light .code-block .syntax-keyword {
+    color: #7c4dff; /* Deep Purple */
+    font-weight: 500;
+}
+
+.dm-theme-grayve-light .code-block .syntax-string,
+.dm-theme-grayve-light .code-block .syntax-template-string {
+    color: #2e7d32; /* Green */
+}
+
+.dm-theme-grayve-light .code-block .syntax-function {
+    color: #00838f; /* Cyan */
+}
+
+/**
+ * Domma Grayve Dark Theme
+ * Slate/cyan monochrome palette — adapted from Bootswatch Slate
+ * Dark mode variant
+ */
+
+.dm-theme-grayve-dark {
+    color-scheme: dark;
+
+    /* ================================================
+       FOUNDATIONAL COLORS - Dark Mode Base
+       ================================================ */
+
+    /* Backgrounds - Slate dark backgrounds */
+    --dm-background: #1a1e21;     /* slate-900 */
+    --dm-background-alt: #212529; /* slate-800 */
+    --dm-surface: #212529;        /* slate-800 */
+    --dm-surface-raised: #343A40; /* slate-700 */
+    --dm-surface-overlay: #343A40;/* slate-700 */
+
+    /* 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-disabled: #495057;  /* slate-600 */
+    --dm-text-inverse: #1a1e21;   /* slate-900 */
+
+    /* Borders - Subtle on dark backgrounds */
+    --dm-border: #343A40;         /* slate-700 */
+    --dm-border-light: #212529;   /* slate-800 */
+    --dm-border-dark: #495057;    /* slate-600 */
+
+    /* ================================================
+       GRAYVE ACCENT COLORS - Cyan/teal tones
+       ================================================ */
+
+    /* PRIMARY COLOURS - Cyan Teal */
+    --dm-primary: #00bcd4;
+    --dm-primary-hover: #00acc1;
+    --dm-primary-active: #26c6da;
+    --dm-primary-light: #e0f7fa;
+    --dm-primary-dark: #0097a7;
+
+    /* Focus ring with cyan colour */
+    --dm-focus-ring: 0 0 0 3px rgba(0, 188, 212, 0.3);
+    --dm-border-focus: #00bcd4;
+
+    /* ================================================
+       SECONDARY COLOURS - Blue Grey
+       ================================================ */
+    --dm-secondary: #6C757D;
+    --dm-secondary-hover: #ADB5BD;
+    --dm-secondary-active: #CED4DA;
+    --dm-secondary-light: #E9ECEF;
+    --dm-secondary-dark: #495057;
+
+    /* ================================================
+       STATUS COLOURS
+       ================================================ */
+    --dm-success: #28a745;
+    --dm-success-hover: #49cc61;
+    --dm-success-active: #218838;
+    --dm-success-light: rgba(40, 167, 69, 0.2);
+    --dm-success-dark: #1e7e34;
+
+    --dm-info: #17a2b8;
+    --dm-info-hover: #26d2e9;
+    --dm-info-active: #138496;
+    --dm-info-light: rgba(23, 162, 184, 0.2);
+    --dm-info-dark: #117a8b;
+
+    --dm-warning: #ffc107;
+    --dm-warning-hover: #ffcd38;
+    --dm-warning-active: #e0a800;
+    --dm-warning-text: #856404;
+    --dm-warning-light: rgba(255, 193, 7, 0.2);
+    --dm-warning-dark: #d39e00;
+
+    --dm-danger: #dc3545;
+    --dm-danger-hover: #e35a67;
+    --dm-danger-active: #c82333;
+    --dm-danger-light: rgba(220, 53, 69, 0.2);
+    --dm-danger-dark: #bd2130;
+
+    /* ================================================
+       ACCENT COLOURS
+       ================================================ */
+    --dm-accent-1: #80deea; /* Cyan 200 */
+    --dm-accent-2: #4dd0e1; /* Cyan 300 */
+    --dm-accent-3: #00bcd4; /* Cyan 500 */
+    --dm-accent-4: #0097a7; /* Cyan 700 */
+
+    /* ================================================
+       INTERACTIVE STATES
+       ================================================ */
+    --dm-hover-bg: rgba(255, 255, 255, 0.07);
+    --dm-active-bg: rgba(255, 255, 255, 0.1);
+    --dm-selected-bg: #00838f;
+    --dm-disabled-opacity: 0.4;
+
+    /* ================================================
+       COMPONENT-SPECIFIC COLORS
+       ================================================ */
+
+    /* Cards */
+    --dm-card-bg: var(--dm-surface);
+    --dm-card-border: var(--dm-border);
+    --dm-card-shadow: var(--dm-shadow-md);
+
+    /* Inputs */
+    --dm-input-bg: var(--dm-surface);
+    --dm-input-border: var(--dm-border-dark);
+    --dm-input-text: var(--dm-text);
+    --dm-input-placeholder: var(--dm-text-muted);
+    --dm-input-focus-border: var(--dm-primary);
+    --dm-input-disabled-bg: #212529;
+
+    /* Buttons */
+    --dm-btn-text: var(--dm-text);
+    --dm-btn-bg: var(--dm-surface);
+    --dm-btn-border: var(--dm-border-dark);
+
+    /* Tables */
+    --dm-table-bg: transparent;
+    --dm-table-border: var(--dm-border);
+    --dm-table-header-bg: var(--dm-background-alt);
+    --dm-table-header-text: var(--dm-text);
+    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
+    --dm-table-hover-bg: var(--dm-hover-bg);
+    --dm-table-selected-bg: var(--dm-selected-bg);
+
+    /* Modals */
+    --dm-modal-bg: var(--dm-surface);
+    --dm-modal-border: var(--dm-border);
+    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
+    --dm-modal-shadow: var(--dm-shadow-xl);
+
+    /* Dropdowns */
+    --dm-dropdown-bg: var(--dm-surface-raised);
+    --dm-dropdown-border: var(--dm-border);
+    --dm-dropdown-shadow: var(--dm-shadow-lg);
+    --dm-dropdown-item-hover: var(--dm-hover-bg);
+    --dm-dropdown-item-active: var(--dm-selected-bg);
+
+    /* Tooltips */
+    --dm-tooltip-bg: #1a1e21;
+    --dm-tooltip-text: #ffffff;
+
+    /* Toasts */
+    --dm-toast-bg: var(--dm-surface);
+    --dm-toast-border: var(--dm-border);
+    --dm-toast-shadow: var(--dm-shadow-lg);
+
+    /* Navbar */
+    --dm-navbar-bg: var(--dm-surface);
+    --dm-navbar-text: var(--dm-text);
+    --dm-navbar-border: var(--dm-border);
+
+    /* Sidebar */
+    --dm-sidebar-bg: var(--dm-surface);
+    --dm-sidebar-text: var(--dm-text);
+    --dm-sidebar-border: var(--dm-border);
+    --dm-sidebar-item-hover: var(--dm-hover-bg);
+    --dm-sidebar-item-active: var(--dm-selected-bg);
+
+    /* Tabs */
     --dm-tab-border: var(--dm-border);
     --dm-tab-hover-bg: var(--dm-hover-bg);
-    --dm-tab-active-border: var(--dm-primary);
-    --dm-tab-active-text: var(--dm-primary);
 
+    /* Accordion */
+    --dm-accordion-bg: var(--dm-surface);
     --dm-accordion-border: var(--dm-border);
+    --dm-accordion-header-bg: var(--dm-background-alt);
     --dm-accordion-header-hover: var(--dm-hover-bg);
+
+    /* Badges */
+    --dm-badge-bg: var(--dm-secondary);
+    --dm-badge-text: #1a1e21;
+
+    /* Pills */
+    --dm-pill-bg: #343A40;
+    --dm-pill-color: var(--dm-text);
+    --dm-pill-hover-bg: #495057;
+
+    /* Autocomplete / Pillbox */
+    --dm-autocomplete-bg: var(--dm-surface);
+    --dm-autocomplete-border: var(--dm-border);
+    --dm-autocomplete-shadow: var(--dm-shadow-md);
+    --dm-autocomplete-item-hover: var(--dm-hover-bg);
+    --dm-autocomplete-item-active: var(--dm-selected-bg);
+    --dm-autocomplete-highlight: var(--dm-primary-light);
+    --dm-pillbox-bg: var(--dm-surface);
+    --dm-pillbox-border: var(--dm-border);
+
+    /* Progress */
+    --dm-progress-bg: #343A40;
+
+    /* Scrollbar */
+    --dm-scrollbar-track: #212529;
+    --dm-scrollbar-thumb: #495057;
+    --dm-scrollbar-thumb-hover: #6C757D;
+
+    /* Code */
+    --dm-code-bg: #1a1e21;
+    --dm-code-text: #80deea;
+    --dm-code-border: var(--dm-border);
+
+    /* ================================================
+       SHADOWS - Subtle for dark mode
+       ================================================ */
+    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 }
 
-/* Syntax highlighting tokens for grayve (assuming similar to dark theme) */
-.dm-theme-grayve .code-block .syntax-keyword {
+/* Syntax highlighting tokens for grayve-dark */
+.dm-theme-grayve-dark .code-block .syntax-keyword {
     color: #c792ea; /* Purple */
     font-weight: 500;
 }
 
-.dm-theme-grayve .code-block .syntax-string,
-.dm-theme-grayve .code-block .syntax-template-string {
+.dm-theme-grayve-dark .code-block .syntax-string,
+.dm-theme-grayve-dark .code-block .syntax-template-string {
     color: #c3e88d; /* Green */
 }
 
-.dm-theme-grayve .code-block .syntax-function {
+.dm-theme-grayve-dark .code-block .syntax-function {
     color: #82aaff; /* Light Blue */
 }
+