domma-js 0.18.2 → 0.19.0

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:17:54.419Z
+ * Commit: ff798af
  */
 
 /**
@@ -3466,6 +3466,860 @@
     --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 
 }
+/**
+ * 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;
+
+    /* ================================================
+       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);
+}
+
 .dm-theme-grayve {
     color-scheme: dark; /* Slate is typically a dark theme */