domma-js 0.3.0-a → 0.3.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +41 -0
  2. package/package.json +2 -1
  3. package/public/dist/themes/domma-themes.css +3468 -0
package/public/dist/themes/domma-themes.css ADDED
@@ -0,0 +1,3468 @@
1
+ /*!
2
+ * Domma Themes v0.3.0a
3
+ * Dynamic Object Manipulation & Modeling API
4
+ * (c) 2025 Darryl Waterhouse & DCBW-IT
5
+ * Built: 2025-12-30T10:50:46.760Z
6
+ * Commit: 8a467f0
7
+ */
8
+
9
+ /**
10
+ * Domma Theme Base
11
+ * Shared design tokens: spacing, typography, radii, shadows, transitions
12
+ */
13
+
14
+ :root {
15
+ /* ================================================
16
+ SPACING SCALE
17
+ ================================================ */
18
+ --dm-space-0: 0;
19
+ --dm-space-1: 0.25rem; /* 4px */
20
+ --dm-space-2: 0.5rem; /* 8px */
21
+ --dm-space-3: 0.75rem; /* 12px */
22
+ --dm-space-4: 1rem; /* 16px */
23
+ --dm-space-5: 1.25rem; /* 20px */
24
+ --dm-space-6: 1.5rem; /* 24px */
25
+ --dm-space-8: 2rem; /* 32px */
26
+ --dm-space-10: 2.5rem; /* 40px */
27
+ --dm-space-12: 3rem; /* 48px */
28
+ --dm-space-16: 4rem; /* 64px */
29
+ --dm-space-20: 5rem; /* 80px */
30
+ --dm-space-24: 6rem; /* 96px */
31
+
32
+ /* ================================================
33
+ TYPOGRAPHY
34
+ ================================================ */
35
+ --dm-font-sans: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
36
+ --dm-font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
37
+ --dm-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;
38
+
39
+ /* Font Sizes */
40
+ --dm-text-xs: 0.75rem; /* 12px */
41
+ --dm-text-sm: 0.875rem; /* 14px */
42
+ --dm-text-base: 1rem; /* 16px */
43
+ --dm-text-lg: 1.125rem; /* 18px */
44
+ --dm-text-xl: 1.25rem; /* 20px */
45
+ --dm-text-2xl: 1.5rem; /* 24px */
46
+ --dm-text-3xl: 1.875rem; /* 30px */
47
+ --dm-text-4xl: 2.25rem; /* 36px */
48
+ --dm-text-5xl: 3rem; /* 48px */
49
+
50
+ /* Line Heights */
51
+ --dm-leading-none: 1;
52
+ --dm-leading-tight: 1.25;
53
+ --dm-leading-snug: 1.375;
54
+ --dm-leading-normal: 1.5;
55
+ --dm-leading-relaxed: 1.625;
56
+ --dm-leading-loose: 2;
57
+
58
+ /* Font Weights */
59
+ --dm-font-light: 300;
60
+ --dm-font-normal: 400;
61
+ --dm-font-medium: 500;
62
+ --dm-font-semibold: 600;
63
+ --dm-font-bold: 700;
64
+
65
+ /* Letter Spacing */
66
+ --dm-tracking-tighter: -0.05em;
67
+ --dm-tracking-tight: -0.025em;
68
+ --dm-tracking-normal: 0;
69
+ --dm-tracking-wide: 0.025em;
70
+ --dm-tracking-wider: 0.05em;
71
+ --dm-tracking-widest: 0.1em;
72
+
73
+ /* ================================================
74
+ BORDER RADIUS
75
+ ================================================ */
76
+ --dm-radius-none: 0;
77
+ --dm-radius-sm: 0.125rem; /* 2px */
78
+ --dm-radius-md: 0.25rem; /* 4px */
79
+ --dm-radius-lg: 0.5rem; /* 8px */
80
+ --dm-radius-xl: 0.75rem; /* 12px */
81
+ --dm-radius-2xl: 1rem; /* 16px */
82
+ --dm-radius-full: 9999px;
83
+
84
+ /* ================================================
85
+ SHADOWS
86
+ ================================================ */
87
+ --dm-shadow-none: none;
88
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
89
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
90
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
91
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
92
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
93
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
94
+
95
+ /* ================================================
96
+ TRANSITIONS
97
+ ================================================ */
98
+ --dm-transition-fast: 150ms ease;
99
+ --dm-transition-normal: 200ms ease;
100
+ --dm-transition-slow: 300ms ease;
101
+ --dm-transition-slower: 500ms ease;
102
+
103
+ /* Timing Functions */
104
+ --dm-ease-linear: linear;
105
+ --dm-ease-in: cubic-bezier(0.4, 0, 1, 1);
106
+ --dm-ease-out: cubic-bezier(0, 0, 0.2, 1);
107
+ --dm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
108
+ --dm-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
109
+
110
+ /* ================================================
111
+ Z-INDEX SCALE
112
+ ================================================ */
113
+ --dm-z-0: 0;
114
+ --dm-z-10: 10;
115
+ --dm-z-20: 20;
116
+ --dm-z-30: 30;
117
+ --dm-z-40: 40;
118
+ --dm-z-50: 50;
119
+ --dm-z-dropdown: 1000;
120
+ --dm-z-sticky: 1020;
121
+ --dm-z-fixed: 1030;
122
+ --dm-z-modal-backdrop: 1040;
123
+ --dm-z-modal: 1050;
124
+ --dm-z-popover: 1060;
125
+ --dm-z-tooltip: 1070;
126
+ --dm-z-toast: 1080;
127
+
128
+ /* ================================================
129
+ BREAKPOINTS (for reference)
130
+ ================================================ */
131
+ --dm-breakpoint-sm: 640px;
132
+ --dm-breakpoint-md: 768px;
133
+ --dm-breakpoint-lg: 1024px;
134
+ --dm-breakpoint-xl: 1280px;
135
+ --dm-breakpoint-2xl: 1536px;
136
+
137
+ /* ================================================
138
+ CONTAINER WIDTHS
139
+ ================================================ */
140
+ --dm-container-sm: 640px;
141
+ --dm-container-md: 768px;
142
+ --dm-container-lg: 1024px;
143
+ --dm-container-xl: 1280px;
144
+
145
+ /* ================================================
146
+ OPACITY
147
+ ================================================ */
148
+ --dm-opacity-0: 0;
149
+ --dm-opacity-5: 0.05;
150
+ --dm-opacity-10: 0.1;
151
+ --dm-opacity-20: 0.2;
152
+ --dm-opacity-25: 0.25;
153
+ --dm-opacity-30: 0.3;
154
+ --dm-opacity-40: 0.4;
155
+ --dm-opacity-50: 0.5;
156
+ --dm-opacity-60: 0.6;
157
+ --dm-opacity-70: 0.7;
158
+ --dm-opacity-75: 0.75;
159
+ --dm-opacity-80: 0.8;
160
+ --dm-opacity-90: 0.9;
161
+ --dm-opacity-95: 0.95;
162
+ --dm-opacity-100: 1;
163
+ }
164
+
165
+ /* ================================================
166
+ ICON UTILITIES
167
+ ================================================ */
168
+ .dm-icon {
169
+ display: inline-block;
170
+ vertical-align: middle;
171
+ flex-shrink: 0;
172
+ }
173
+
174
+ .dm-icon-xs {
175
+ width: 12px;
176
+ height: 12px;
177
+ }
178
+
179
+ .dm-icon-sm {
180
+ width: 16px;
181
+ height: 16px;
182
+ }
183
+
184
+ .dm-icon-md {
185
+ width: 24px;
186
+ height: 24px;
187
+ }
188
+
189
+ .dm-icon-lg {
190
+ width: 32px;
191
+ height: 32px;
192
+ }
193
+
194
+ .dm-icon-xl {
195
+ width: 48px;
196
+ height: 48px;
197
+ }
198
+
199
+ .dm-icon-2xl {
200
+ width: 64px;
201
+ height: 64px;
202
+ }
203
+
204
+ /* Icon colour utilities (use theme colours) */
205
+ .dm-icon-primary {
206
+ color: var(--dm-primary);
207
+ }
208
+
209
+ .dm-icon-secondary {
210
+ color: var(--dm-secondary);
211
+ }
212
+
213
+ .dm-icon-success {
214
+ color: var(--dm-success);
215
+ }
216
+
217
+ .dm-icon-danger {
218
+ color: var(--dm-danger);
219
+ }
220
+
221
+ .dm-icon-warning {
222
+ color: var(--dm-warning);
223
+ }
224
+
225
+ .dm-icon-info {
226
+ color: var(--dm-info);
227
+ }
228
+
229
+ .dm-icon-muted {
230
+ color: var(--dm-text-muted);
231
+ }
232
+
233
+ /* Spinner animation */
234
+ @keyframes dm-spin {
235
+ from {
236
+ transform: rotate(0deg);
237
+ }
238
+ to {
239
+ transform: rotate(360deg);
240
+ }
241
+ }
242
+
243
+ .dm-icon-spin {
244
+ animation: dm-spin 1s linear infinite;
245
+ }
246
+
247
+ /* Pulse animation for notifications */
248
+ @keyframes dm-pulse {
249
+ 0%, 100% {
250
+ opacity: 1;
251
+ }
252
+ 50% {
253
+ opacity: 0.5;
254
+ }
255
+ }
256
+
257
+ .dm-icon-pulse {
258
+ animation: dm-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
259
+ }
260
+
261
+ /* Bounce animation */
262
+ @keyframes dm-bounce {
263
+ 0%, 100% {
264
+ transform: translateY(-25%);
265
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
266
+ }
267
+ 50% {
268
+ transform: translateY(0);
269
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
270
+ }
271
+ }
272
+
273
+ .dm-icon-bounce {
274
+ animation: dm-bounce 1s infinite;
275
+ }
276
+
277
+ /**
278
+ * Domma Ocean Light Theme
279
+ * Cool blue colour palette inspired by the sea
280
+ * Light mode variant - light backgrounds with dark ocean accents
281
+ */
282
+
283
+ .dm-theme-ocean-light {
284
+ color-scheme: light;
285
+
286
+ /* ================================================
287
+ FOUNDATIONAL COLORS - Dark Mode Base
288
+ ================================================ */
289
+
290
+ /* Backgrounds - Dark slate/charcoal backgrounds */
291
+ --dm-background: #0f172a; /* slate-900 */
292
+ --dm-background-alt: #1e293b; /* slate-800 */
293
+ --dm-surface: #1e293b; /* slate-800 */
294
+ --dm-surface-raised: #334155; /* slate-700 */
295
+ --dm-surface-overlay: #334155; /* slate-700 */
296
+
297
+ /* Text - Light colors for readability on dark */
298
+ --dm-text: #e2e8f0; /* slate-200 */
299
+ --dm-text-secondary: #94a3b8; /* slate-400 */
300
+ --dm-text-muted: #64748b; /* slate-500 */
301
+ --dm-text-disabled: #475569; /* slate-600 */
302
+ --dm-text-inverse: #0f172a; /* slate-900 */
303
+
304
+ /* Borders - Subtle on dark backgrounds */
305
+ --dm-border: #334155; /* slate-700 */
306
+ --dm-border-light: #1e293b; /* slate-800 */
307
+ --dm-border-dark: #475569; /* slate-600 */
308
+
309
+ /* ================================================
310
+ OCEAN ACCENT COLORS - Bright for dark mode
311
+ ================================================ */
312
+
313
+ /* Primary - Bright cyan/blue for visibility */
314
+ --dm-primary: #48cae4;
315
+ --dm-primary-hover: #5cd2e8;
316
+ --dm-primary-active: #70daec;
317
+ --dm-primary-light: rgba(72, 202, 228, 0.15);
318
+ --dm-primary-dark: #00b4d8;
319
+
320
+ /* Secondary - Light slate blue */
321
+ --dm-secondary: #90e0ef;
322
+ --dm-secondary-hover: #a6e7f2;
323
+ --dm-secondary-active: #bceef5;
324
+ --dm-secondary-light: rgba(144, 224, 239, 0.15);
325
+ --dm-secondary-dark: #48cae4;
326
+
327
+ /* Success - Bright teal/green */
328
+ --dm-success: #52e3b8;
329
+ --dm-success-hover: #66e7c1;
330
+ --dm-success-active: #7aebca;
331
+ --dm-success-light: rgba(82, 227, 184, 0.15);
332
+ --dm-success-dark: #06d6a0;
333
+
334
+ /* Danger - Bright red (standard dark mode) */
335
+ --dm-danger: #ef4444; /* red-500 */
336
+ --dm-danger-hover: #f87171; /* red-400 */
337
+ --dm-danger-active: #fca5a5; /* red-300 */
338
+ --dm-danger-light: rgba(248, 113, 113, 0.15);
339
+ --dm-danger-dark: #dc2626; /* red-600 */
340
+
341
+ /* Warning - Bright amber (standard dark mode) */
342
+ --dm-warning: #fbbf24; /* amber-400 */
343
+ --dm-warning-hover: #fcd34d; /* amber-300 */
344
+ --dm-warning-active: #fde68a; /* amber-200 */
345
+ --dm-warning-text: #78350f; /* amber-950 */
346
+ --dm-warning-light: rgba(251, 191, 36, 0.15);
347
+ --dm-warning-dark: #f59e0b; /* amber-500 */
348
+
349
+ /* Info - Bright ocean cyan */
350
+ --dm-info: #90e0ef;
351
+ --dm-info-hover: #a6e7f2;
352
+ --dm-info-active: #bceef5;
353
+ --dm-info-light: rgba(144, 224, 239, 0.15);
354
+ --dm-info-dark: #48cae4;
355
+
356
+ /* ================================================
357
+ INTERACTIVE STATES
358
+ ================================================ */
359
+ --dm-hover-bg: rgba(0, 0, 0, 0.04);
360
+ --dm-active-bg: rgba(0, 0, 0, 0.08);
361
+ --dm-selected-bg: rgba(0, 119, 182, 0.15);
362
+ --dm-focus-ring: 0 0 0 3px rgba(0, 119, 182, 0.3);
363
+ --dm-border-focus: #0077b6;
364
+ --dm-disabled-opacity: 0.65;
365
+
366
+ /* ================================================
367
+ COMPONENT-SPECIFIC COLORS
368
+ ================================================ */
369
+
370
+ /* Cards */
371
+ --dm-card-bg: var(--dm-surface);
372
+ --dm-card-border: var(--dm-border);
373
+ --dm-card-shadow: var(--dm-shadow-sm);
374
+
375
+ /* Inputs */
376
+ --dm-input-bg: var(--dm-surface);
377
+ --dm-input-border: var(--dm-border-dark);
378
+ --dm-input-text: var(--dm-text);
379
+ --dm-input-placeholder: var(--dm-text-muted);
380
+ --dm-input-focus-border: var(--dm-primary);
381
+ --dm-input-focus-shadow: var(--dm-focus-ring);
382
+ --dm-input-disabled-bg: #e9ecef;
383
+
384
+ /* Buttons */
385
+ --dm-btn-text: var(--dm-text);
386
+ --dm-btn-bg: var(--dm-surface);
387
+ --dm-btn-border: var(--dm-border-dark);
388
+
389
+ /* Tables */
390
+ --dm-table-bg: transparent;
391
+ --dm-table-border: var(--dm-border);
392
+ --dm-table-header-bg: var(--dm-background-alt);
393
+ --dm-table-header-text: var(--dm-text);
394
+ --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
395
+ --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
396
+ --dm-table-selected-bg: var(--dm-selected-bg);
397
+
398
+ /* Modals */
399
+ --dm-modal-bg: var(--dm-surface);
400
+ --dm-modal-border: var(--dm-border);
401
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
402
+ --dm-modal-shadow: var(--dm-shadow-xl);
403
+
404
+ /* Dropdowns */
405
+ --dm-dropdown-bg: var(--dm-surface);
406
+ --dm-dropdown-border: var(--dm-border);
407
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
408
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
409
+ --dm-dropdown-item-active: var(--dm-selected-bg);
410
+
411
+ /* Tooltips */
412
+ --dm-tooltip-bg: #212529;
413
+ --dm-tooltip-text: #ffffff;
414
+
415
+ /* Toasts */
416
+ --dm-toast-bg: var(--dm-surface);
417
+ --dm-toast-border: var(--dm-border);
418
+ --dm-toast-shadow: var(--dm-shadow-lg);
419
+
420
+ /* Navbar */
421
+ --dm-navbar-bg: var(--dm-surface);
422
+ --dm-navbar-text: var(--dm-text);
423
+ --dm-navbar-border: var(--dm-border);
424
+
425
+ /* Sidebar */
426
+ --dm-sidebar-bg: var(--dm-surface);
427
+ --dm-sidebar-text: var(--dm-text);
428
+ --dm-sidebar-border: var(--dm-border);
429
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
430
+ --dm-sidebar-item-active: var(--dm-selected-bg);
431
+
432
+ /* Tabs */
433
+ --dm-tab-border: var(--dm-border);
434
+ --dm-tab-hover-bg: var(--dm-hover-bg);
435
+ --dm-tab-active-border: #0077b6;
436
+ --dm-tab-active-text: #0077b6;
437
+
438
+ /* Accordion */
439
+ --dm-accordion-bg: var(--dm-surface);
440
+ --dm-accordion-border: var(--dm-border);
441
+ --dm-accordion-header-bg: var(--dm-background-alt);
442
+ --dm-accordion-header-hover: var(--dm-hover-bg);
443
+
444
+ /* Badges */
445
+ --dm-badge-bg: var(--dm-secondary);
446
+ --dm-badge-text: #ffffff;
447
+
448
+ /* Progress */
449
+ --dm-progress-bg: #e9ecef;
450
+ --dm-progress-bar: #0077b6;
451
+
452
+ /* Scrollbar */
453
+ --dm-scrollbar-track: #f1f1f1;
454
+ --dm-scrollbar-thumb: #c1c1c1;
455
+ --dm-scrollbar-thumb-hover: #a8a8a8;
456
+
457
+ /* Code */
458
+ --dm-code-bg: #f8f9fa;
459
+ --dm-code-text: #e83e8c;
460
+ --dm-code-border: var(--dm-border);
461
+
462
+ /* ================================================
463
+ SHADOWS - Standard for light mode
464
+ ================================================ */
465
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
466
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
467
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
468
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
469
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
470
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
471
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
472
+
473
+ /* ================================================
474
+ ELEVATION / DEPTH
475
+ ================================================ */
476
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
477
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
478
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
479
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
480
+
481
+ /* ================================================
482
+ ACCENT/SELECTION COLORS
483
+ ================================================ */
484
+ --dm-accent-1: #90e0ef; /* Light cyan */
485
+ --dm-accent-2: #00b4d8; /* Bright cyan */
486
+ --dm-accent-3: #0096c7; /* Medium blue */
487
+ --dm-accent-4: #023e8a; /* Deep blue */
488
+ }
489
+
490
+ /**
491
+ * Domma Ocean Dark Theme
492
+ * Cool blue colour palette inspired by the sea
493
+ * Dark mode variant - dark backgrounds with bright ocean accents
494
+ */
495
+
496
+ .dm-theme-ocean-dark {
497
+ color-scheme: dark;
498
+
499
+ /* ================================================
500
+ FOUNDATIONAL COLORS - Light Mode Base
501
+ ================================================ */
502
+
503
+ /* Backgrounds - Light/white backgrounds */
504
+ --dm-background: #ffffff;
505
+ --dm-background-alt: #f8f9fa;
506
+ --dm-surface: #ffffff;
507
+ --dm-surface-raised: #f1f3f5;
508
+ --dm-surface-overlay: #f8f9fa;
509
+
510
+ /* Text - Dark colors for readability on light */
511
+ --dm-text: #212529;
512
+ --dm-text-secondary: #495057;
513
+ --dm-text-muted: #6c757d;
514
+ --dm-text-disabled: #adb5bd;
515
+ --dm-text-inverse: #ffffff;
516
+
517
+ /* Borders - Subtle on light backgrounds */
518
+ --dm-border: #dee2e6;
519
+ --dm-border-light: #e9ecef;
520
+ --dm-border-dark: #ced4da;
521
+
522
+ /* ================================================
523
+ OCEAN ACCENT COLORS - Dark/rich for light mode
524
+ ================================================ */
525
+
526
+ /* Primary - Rich ocean blue for contrast */
527
+ --dm-primary: #0077b6;
528
+ --dm-primary-hover: #0096c7;
529
+ --dm-primary-active: #00b4d8;
530
+ --dm-primary-light: #caf0f8;
531
+ --dm-primary-dark: #023e8a;
532
+
533
+ /* Secondary - Slate blue */
534
+ --dm-secondary: #457b9d;
535
+ --dm-secondary-hover: #5a8fad;
536
+ --dm-secondary-active: #6ea3bd;
537
+ --dm-secondary-light: #e8f4f8;
538
+ --dm-secondary-dark: #1d3557;
539
+
540
+ /* Success - Ocean-tinted teal */
541
+ --dm-success: #06d6a0;
542
+ --dm-success-hover: #1fe0ac;
543
+ --dm-success-active: #39eab7;
544
+ --dm-success-light: #d4f5ed;
545
+ --dm-success-dark: #05a87d;
546
+
547
+ /* Danger - Standard red */
548
+ --dm-danger: #dc3545;
549
+ --dm-danger-hover: #bb2d3b;
550
+ --dm-danger-active: #b02a37;
551
+ --dm-danger-light: #f8d7da;
552
+ --dm-danger-dark: #842029;
553
+
554
+ /* Warning - Standard amber */
555
+ --dm-warning: #ffc107;
556
+ --dm-warning-hover: #ffca2c;
557
+ --dm-warning-active: #ffcd39;
558
+ --dm-warning-light: #fff3cd;
559
+ --dm-warning-dark: #664d03;
560
+ --dm-warning-text: #664d03;
561
+
562
+ /* Info - Light cyan */
563
+ --dm-info: #48cae4;
564
+ --dm-info-hover: #5cd2e8;
565
+ --dm-info-active: #70daec;
566
+ --dm-info-light: #daf4f9;
567
+ --dm-info-dark: #00b4d8;
568
+
569
+ /* ================================================
570
+ INTERACTIVE STATES
571
+ ================================================ */
572
+ --dm-hover-bg: rgba(255, 255, 255, 0.07);
573
+ --dm-active-bg: rgba(255, 255, 255, 0.1);
574
+ --dm-selected-bg: rgba(72, 202, 228, 0.2);
575
+ --dm-focus-ring: 0 0 0 3px rgba(72, 202, 228, 0.35);
576
+ --dm-border-focus: #48cae4;
577
+ --dm-disabled-opacity: 0.4;
578
+
579
+ /* ================================================
580
+ COMPONENT-SPECIFIC COLORS
581
+ ================================================ */
582
+
583
+ /* Cards */
584
+ --dm-card-bg: var(--dm-surface);
585
+ --dm-card-border: var(--dm-border);
586
+ --dm-card-shadow: var(--dm-shadow-md);
587
+
588
+ /* Inputs */
589
+ --dm-input-bg: var(--dm-surface);
590
+ --dm-input-border: var(--dm-border-dark);
591
+ --dm-input-text: var(--dm-text);
592
+ --dm-input-placeholder: var(--dm-text-muted);
593
+ --dm-input-focus-border: var(--dm-primary);
594
+ --dm-input-focus-shadow: var(--dm-focus-ring);
595
+ --dm-input-disabled-bg: #1e293b; /* slate-800 */
596
+
597
+ /* Buttons */
598
+ --dm-btn-text: var(--dm-text);
599
+ --dm-btn-bg: var(--dm-surface);
600
+ --dm-btn-border: var(--dm-border-dark);
601
+
602
+ /* Tables */
603
+ --dm-table-bg: transparent;
604
+ --dm-table-border: var(--dm-border);
605
+ --dm-table-header-bg: var(--dm-background-alt);
606
+ --dm-table-header-text: var(--dm-text);
607
+ --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
608
+ --dm-table-hover-bg: var(--dm-hover-bg);
609
+ --dm-table-selected-bg: var(--dm-selected-bg);
610
+
611
+ /* Modals */
612
+ --dm-modal-bg: var(--dm-surface);
613
+ --dm-modal-border: var(--dm-border);
614
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
615
+ --dm-modal-shadow: var(--dm-shadow-xl);
616
+
617
+ /* Dropdowns */
618
+ --dm-dropdown-bg: var(--dm-surface-raised);
619
+ --dm-dropdown-border: var(--dm-border);
620
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
621
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
622
+ --dm-dropdown-item-active: var(--dm-selected-bg);
623
+
624
+ /* Tooltips */
625
+ --dm-tooltip-bg: #0f172a; /* slate-900 */
626
+ --dm-tooltip-text: #ffffff;
627
+
628
+ /* Toasts */
629
+ --dm-toast-bg: var(--dm-surface);
630
+ --dm-toast-border: var(--dm-border);
631
+ --dm-toast-shadow: var(--dm-shadow-lg);
632
+
633
+ /* Navbar */
634
+ --dm-navbar-bg: var(--dm-surface);
635
+ --dm-navbar-text: var(--dm-text);
636
+ --dm-navbar-border: var(--dm-border);
637
+
638
+ /* Sidebar */
639
+ --dm-sidebar-bg: var(--dm-surface);
640
+ --dm-sidebar-text: var(--dm-text);
641
+ --dm-sidebar-border: var(--dm-border);
642
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
643
+ --dm-sidebar-item-active: var(--dm-selected-bg);
644
+
645
+ /* Tabs */
646
+ --dm-tab-border: var(--dm-border);
647
+ --dm-tab-hover-bg: var(--dm-hover-bg);
648
+ --dm-tab-active-border: #48cae4;
649
+ --dm-tab-active-text: #48cae4;
650
+
651
+ /* Accordion */
652
+ --dm-accordion-bg: var(--dm-surface);
653
+ --dm-accordion-border: var(--dm-border);
654
+ --dm-accordion-header-bg: var(--dm-background-alt);
655
+ --dm-accordion-header-hover: var(--dm-hover-bg);
656
+
657
+ /* Badges */
658
+ --dm-badge-bg: var(--dm-secondary);
659
+ --dm-badge-text: #0f172a;
660
+
661
+ /* Progress */
662
+ --dm-progress-bg: #334155; /* slate-700 */
663
+ --dm-progress-bar: #48cae4;
664
+
665
+ /* Scrollbar */
666
+ --dm-scrollbar-track: #1e293b;
667
+ --dm-scrollbar-thumb: #475569;
668
+ --dm-scrollbar-thumb-hover: #64748b;
669
+
670
+ /* Code */
671
+ --dm-code-bg: #0f172a; /* slate-900 */
672
+ --dm-code-text: #fca5a5; /* red-300 */
673
+ --dm-code-border: var(--dm-border);
674
+
675
+ /* ================================================
676
+ SHADOWS - Subtle for dark mode
677
+ ================================================ */
678
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
679
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
680
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
681
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
682
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
683
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
684
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
685
+
686
+ /* ================================================
687
+ ACCENT/SELECTION COLORS
688
+ ================================================ */
689
+ --dm-accent-1: #90e0ef; /* Light cyan */
690
+ --dm-accent-2: #00b4d8; /* Bright cyan */
691
+ --dm-accent-3: #0096c7; /* Medium blue */
692
+ --dm-accent-4: #023e8a; /* Deep blue */
693
+ }
694
+
695
+ /**
696
+ * Domma Forest Light Theme
697
+ * Natural green colour palette inspired by nature
698
+ * Light mode variant - light backgrounds with rich forest greens
699
+ */
700
+
701
+ .dm-theme-forest-light {
702
+ color-scheme: light;
703
+
704
+ /* ================================================
705
+ FOUNDATIONAL COLORS - Dark Mode Base
706
+ ================================================ */
707
+
708
+ /* Backgrounds - Dark slate/charcoal backgrounds */
709
+ --dm-background: #0f172a; /* slate-900 */
710
+ --dm-background-alt: #1e293b; /* slate-800 */
711
+ --dm-surface: #1e293b; /* slate-800 */
712
+ --dm-surface-raised: #334155; /* slate-700 */
713
+ --dm-surface-overlay: #334155; /* slate-700 */
714
+
715
+ /* Text - Light colors for readability on dark */
716
+ --dm-text: #e2e8f0; /* slate-200 */
717
+ --dm-text-secondary: #94a3b8; /* slate-400 */
718
+ --dm-text-muted: #64748b; /* slate-500 */
719
+ --dm-text-disabled: #475569; /* slate-600 */
720
+ --dm-text-inverse: #0f172a; /* slate-900 */
721
+
722
+ /* Borders - Subtle on dark backgrounds */
723
+ --dm-border: #334155; /* slate-700 */
724
+ --dm-border-light: #1e293b; /* slate-800 */
725
+ --dm-border-dark: #475569; /* slate-600 */
726
+
727
+ /* ================================================
728
+ FOREST ACCENT COLORS - Bright greens for dark mode
729
+ ================================================ */
730
+
731
+ /* Primary - Bright forest green */
732
+ --dm-primary: #74c69d;
733
+ --dm-primary-hover: #88d0ac;
734
+ --dm-primary-active: #9cdabb;
735
+ --dm-primary-light: rgba(116, 198, 157, 0.15);
736
+ --dm-primary-dark: #52b788;
737
+
738
+ --dm-secondary: #a3b899;
739
+ --dm-secondary-hover: #b2c4a9;
740
+ --dm-secondary-active: #c1d0b9;
741
+ --dm-secondary-light: rgba(163, 184, 153, 0.15);
742
+ --dm-secondary-dark: #7d9273;
743
+
744
+ --dm-success: #95d5b2;
745
+ --dm-success-light: rgba(149, 213, 178, 0.15);
746
+
747
+ --dm-info: #95d5b2;
748
+ --dm-info-light: rgba(149, 213, 178, 0.15);
749
+
750
+ --dm-warning: #e9c38e;
751
+ --dm-warning-light: rgba(233, 195, 142, 0.15);
752
+ --dm-warning-text: #e9c38e;
753
+
754
+ /* Danger - Bright red (standard dark mode) */
755
+ --dm-danger: #ef4444; /* red-500 */
756
+ --dm-danger-hover: #f87171; /* red-400 */
757
+ --dm-danger-active: #fca5a5; /* red-300 */
758
+ --dm-danger-light: rgba(248, 113, 113, 0.15);
759
+ --dm-danger-dark: #dc2626; /* red-600 */
760
+
761
+ /* ================================================
762
+ INTERACTIVE STATES
763
+ ================================================ */
764
+ --dm-hover-bg: rgba(0, 0, 0, 0.04);
765
+ --dm-active-bg: rgba(0, 0, 0, 0.08);
766
+ --dm-selected-bg: rgba(45, 106, 79, 0.15);
767
+ --dm-focus-ring: 0 0 0 3px rgba(45, 106, 79, 0.3);
768
+ --dm-border-focus: #2d6a4f;
769
+ --dm-disabled-opacity: 0.65;
770
+
771
+ /* ================================================
772
+ COMPONENT-SPECIFIC COLORS
773
+ ================================================ */
774
+
775
+ /* Cards */
776
+ --dm-card-bg: var(--dm-surface);
777
+ --dm-card-border: var(--dm-border);
778
+ --dm-card-shadow: var(--dm-shadow-sm);
779
+
780
+ /* Inputs */
781
+ --dm-input-bg: var(--dm-surface);
782
+ --dm-input-border: var(--dm-border-dark);
783
+ --dm-input-text: var(--dm-text);
784
+ --dm-input-placeholder: var(--dm-text-muted);
785
+ --dm-input-focus-border: var(--dm-primary);
786
+ --dm-input-focus-shadow: var(--dm-focus-ring);
787
+ --dm-input-disabled-bg: #e9ecef;
788
+
789
+ /* Buttons */
790
+ --dm-btn-text: var(--dm-text);
791
+ --dm-btn-bg: var(--dm-surface);
792
+ --dm-btn-border: var(--dm-border-dark);
793
+
794
+ /* Tables */
795
+ --dm-table-bg: transparent;
796
+ --dm-table-border: var(--dm-border);
797
+ --dm-table-header-bg: var(--dm-background-alt);
798
+ --dm-table-header-text: var(--dm-text);
799
+ --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
800
+ --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
801
+ --dm-table-selected-bg: var(--dm-selected-bg);
802
+
803
+ /* Modals */
804
+ --dm-modal-bg: var(--dm-surface);
805
+ --dm-modal-border: var(--dm-border);
806
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
807
+ --dm-modal-shadow: var(--dm-shadow-xl);
808
+
809
+ /* Dropdowns */
810
+ --dm-dropdown-bg: var(--dm-surface);
811
+ --dm-dropdown-border: var(--dm-border);
812
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
813
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
814
+ --dm-dropdown-item-active: var(--dm-selected-bg);
815
+
816
+ /* Tooltips */
817
+ --dm-tooltip-bg: #212529;
818
+ --dm-tooltip-text: #ffffff;
819
+
820
+ /* Toasts */
821
+ --dm-toast-bg: var(--dm-surface);
822
+ --dm-toast-border: var(--dm-border);
823
+ --dm-toast-shadow: var(--dm-shadow-lg);
824
+
825
+ /* Navbar */
826
+ --dm-navbar-bg: var(--dm-surface);
827
+ --dm-navbar-text: var(--dm-text);
828
+ --dm-navbar-border: var(--dm-border);
829
+
830
+ /* Sidebar */
831
+ --dm-sidebar-bg: var(--dm-surface);
832
+ --dm-sidebar-text: var(--dm-text);
833
+ --dm-sidebar-border: var(--dm-border);
834
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
835
+ --dm-sidebar-item-active: var(--dm-selected-bg);
836
+
837
+ /* Tabs */
838
+ --dm-tab-border: var(--dm-border);
839
+ --dm-tab-hover-bg: var(--dm-hover-bg);
840
+ --dm-tab-active-border: #2d6a4f;
841
+ --dm-tab-active-text: #2d6a4f;
842
+
843
+ /* Accordion */
844
+ --dm-accordion-bg: var(--dm-surface);
845
+ --dm-accordion-border: var(--dm-border);
846
+ --dm-accordion-header-bg: var(--dm-background-alt);
847
+ --dm-accordion-header-hover: var(--dm-hover-bg);
848
+
849
+ /* Badges */
850
+ --dm-badge-bg: var(--dm-secondary);
851
+ --dm-badge-text: #ffffff;
852
+
853
+ /* Progress */
854
+ --dm-progress-bg: #e9ecef;
855
+ --dm-progress-bar: #2d6a4f;
856
+
857
+ /* Scrollbar */
858
+ --dm-scrollbar-track: #f1f1f1;
859
+ --dm-scrollbar-thumb: #c1c1c1;
860
+ --dm-scrollbar-thumb-hover: #a8a8a8;
861
+
862
+ /* Code */
863
+ --dm-code-bg: #f8f9fa;
864
+ --dm-code-text: #e83e8c;
865
+ --dm-code-border: var(--dm-border);
866
+
867
+ /* ================================================
868
+ SHADOWS - Standard for light mode
869
+ ================================================ */
870
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
871
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
872
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
873
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
874
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
875
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
876
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
877
+
878
+ /* ================================================
879
+ ELEVATION / DEPTH
880
+ ================================================ */
881
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
882
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
883
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
884
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
885
+ }
886
+
887
+ /**
888
+ * Domma Forest Dark Theme
889
+ * Natural green colour palette inspired by nature
890
+ * Dark mode variant - dark backgrounds with bright forest greens
891
+ */
892
+
893
+ .dm-theme-forest-dark {
894
+ color-scheme: dark;
895
+
896
+ /* ================================================
897
+ FOUNDATIONAL COLORS - Light Mode Base
898
+ ================================================ */
899
+
900
+ /* Backgrounds - Light/white backgrounds */
901
+ --dm-background: #ffffff;
902
+ --dm-background-alt: #f8f9fa;
903
+ --dm-surface: #ffffff;
904
+ --dm-surface-raised: #f1f3f5;
905
+ --dm-surface-overlay: #f8f9fa;
906
+
907
+ /* Text - Dark colors for readability on light */
908
+ --dm-text: #212529;
909
+ --dm-text-secondary: #495057;
910
+ --dm-text-muted: #6c757d;
911
+ --dm-text-disabled: #adb5bd;
912
+ --dm-text-inverse: #ffffff;
913
+
914
+ /* Borders - Subtle on light backgrounds */
915
+ --dm-border: #dee2e6;
916
+ --dm-border-light: #e9ecef;
917
+ --dm-border-dark: #ced4da;
918
+
919
+ /* ================================================
920
+ FOREST ACCENT COLORS - Rich greens for light mode
921
+ ================================================ */
922
+
923
+ /* PRIMARY COLOURS - Forest Green */
924
+ --dm-primary: #2d6a4f;
925
+ --dm-primary-hover: #40916c;
926
+ --dm-primary-active: #52b788;
927
+ --dm-primary-light: #d8f3dc;
928
+ --dm-primary-dark: #1b4332;
929
+
930
+ /* Focus ring with forest colour */
931
+ --dm-focus-ring: 0 0 0 3px rgba(45, 106, 79, 0.3);
932
+ --dm-border-focus: #2d6a4f;
933
+
934
+ /* ================================================
935
+ SECONDARY COLOURS - Earth Brown
936
+ ================================================ */
937
+ --dm-secondary: #6b705c;
938
+ --dm-secondary-hover: #7d826d;
939
+ --dm-secondary-active: #8f937e;
940
+ --dm-secondary-light: #f0efe9;
941
+ --dm-secondary-dark: #52554a;
942
+
943
+ /* ================================================
944
+ STATUS COLOURS - Nature-tinted
945
+ ================================================ */
946
+ --dm-success: #40916c;
947
+ --dm-success-hover: #52b788;
948
+ --dm-success-active: #74c69d;
949
+ --dm-success-light: #d8f3dc;
950
+ --dm-success-dark: #2d6a4f;
951
+
952
+ --dm-info: #588157;
953
+ --dm-info-hover: #6b9669;
954
+ --dm-info-active: #7eab7c;
955
+ --dm-info-light: #e2f0e1;
956
+ --dm-info-dark: #3a5a40;
957
+
958
+ --dm-warning: #dda15e;
959
+ --dm-warning-hover: #e3b276;
960
+ --dm-warning-active: #e9c38e;
961
+ --dm-warning-light: #faf3e7;
962
+ --dm-warning-dark: #bc6c25;
963
+ --dm-warning-text: #bc6c25;
964
+
965
+ /* ================================================
966
+ ACCENT COLOURS
967
+ ================================================ */
968
+ --dm-accent-1: #95d5b2; /* Mint */
969
+ --dm-accent-2: #74c69d; /* Sage */
970
+ --dm-accent-3: #52b788; /* Emerald */
971
+ --dm-accent-4: #1b4332; /* Pine */
972
+
973
+ /* ================================================
974
+ INTERACTIVE STATES
975
+ ================================================ */
976
+ --dm-hover-bg: rgba(255, 255, 255, 0.07);
977
+ --dm-active-bg: rgba(255, 255, 255, 0.1);
978
+ --dm-selected-bg: rgba(116, 198, 157, 0.2);
979
+ --dm-focus-ring: 0 0 0 3px rgba(116, 198, 157, 0.35);
980
+ --dm-border-focus: #74c69d;
981
+ --dm-disabled-opacity: 0.4;
982
+
983
+ /* ================================================
984
+ COMPONENT-SPECIFIC COLORS
985
+ ================================================ */
986
+
987
+ /* Cards */
988
+ --dm-card-bg: var(--dm-surface);
989
+ --dm-card-border: var(--dm-border);
990
+ --dm-card-shadow: var(--dm-shadow-md);
991
+
992
+ /* Inputs */
993
+ --dm-input-bg: var(--dm-surface);
994
+ --dm-input-border: var(--dm-border-dark);
995
+ --dm-input-text: var(--dm-text);
996
+ --dm-input-placeholder: var(--dm-text-muted);
997
+ --dm-input-focus-border: var(--dm-primary);
998
+ --dm-input-focus-shadow: var(--dm-focus-ring);
999
+ --dm-input-disabled-bg: #1e293b;
1000
+
1001
+ /* Buttons */
1002
+ --dm-btn-text: var(--dm-text);
1003
+ --dm-btn-bg: var(--dm-surface);
1004
+ --dm-btn-border: var(--dm-border-dark);
1005
+
1006
+ /* Tables */
1007
+ --dm-table-bg: transparent;
1008
+ --dm-table-border: var(--dm-border);
1009
+ --dm-table-header-bg: var(--dm-background-alt);
1010
+ --dm-table-header-text: var(--dm-text);
1011
+ --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
1012
+ --dm-table-hover-bg: var(--dm-hover-bg);
1013
+ --dm-table-selected-bg: var(--dm-selected-bg);
1014
+
1015
+ /* Modals */
1016
+ --dm-modal-bg: var(--dm-surface);
1017
+ --dm-modal-border: var(--dm-border);
1018
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
1019
+ --dm-modal-shadow: var(--dm-shadow-xl);
1020
+
1021
+ /* Dropdowns */
1022
+ --dm-dropdown-bg: var(--dm-surface-raised);
1023
+ --dm-dropdown-border: var(--dm-border);
1024
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
1025
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
1026
+ --dm-dropdown-item-active: var(--dm-selected-bg);
1027
+
1028
+ /* Tooltips */
1029
+ --dm-tooltip-bg: #0f172a;
1030
+ --dm-tooltip-text: #ffffff;
1031
+
1032
+ /* Toasts */
1033
+ --dm-toast-bg: var(--dm-surface);
1034
+ --dm-toast-border: var(--dm-border);
1035
+ --dm-toast-shadow: var(--dm-shadow-lg);
1036
+
1037
+ /* Navbar */
1038
+ --dm-navbar-bg: var(--dm-surface);
1039
+ --dm-navbar-text: var(--dm-text);
1040
+ --dm-navbar-border: var(--dm-border);
1041
+
1042
+ /* Sidebar */
1043
+ --dm-sidebar-bg: var(--dm-surface);
1044
+ --dm-sidebar-text: var(--dm-text);
1045
+ --dm-sidebar-border: var(--dm-border);
1046
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
1047
+ --dm-sidebar-item-active: var(--dm-selected-bg);
1048
+
1049
+ /* Tabs */
1050
+ --dm-tab-border: var(--dm-border);
1051
+ --dm-tab-hover-bg: var(--dm-hover-bg);
1052
+ --dm-tab-active-border: #74c69d;
1053
+ --dm-tab-active-text: #74c69d;
1054
+
1055
+ /* Accordion */
1056
+ --dm-accordion-bg: var(--dm-surface);
1057
+ --dm-accordion-border: var(--dm-border);
1058
+ --dm-accordion-header-bg: var(--dm-background-alt);
1059
+ --dm-accordion-header-hover: var(--dm-hover-bg);
1060
+
1061
+ /* Badges */
1062
+ --dm-badge-bg: var(--dm-secondary);
1063
+ --dm-badge-text: #0f172a;
1064
+
1065
+ /* Progress */
1066
+ --dm-progress-bg: #334155;
1067
+ --dm-progress-bar: #74c69d;
1068
+
1069
+ /* Scrollbar */
1070
+ --dm-scrollbar-track: #1e293b;
1071
+ --dm-scrollbar-thumb: #475569;
1072
+ --dm-scrollbar-thumb-hover: #64748b;
1073
+
1074
+ /* Code */
1075
+ --dm-code-bg: #0f172a;
1076
+ --dm-code-text: #fca5a5;
1077
+ --dm-code-border: var(--dm-border);
1078
+
1079
+ /* ================================================
1080
+ SHADOWS - Subtle for dark mode
1081
+ ================================================ */
1082
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1083
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1084
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1085
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1086
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1087
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1088
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1089
+
1090
+ /* Accents */
1091
+ --dm-accent-1: #95d5b2;
1092
+ --dm-accent-2: #74c69d;
1093
+ --dm-accent-3: #52b788;
1094
+ --dm-accent-4: #1b4332;
1095
+ }
1096
+
1097
+ /**
1098
+ * Domma Sunset Light Theme
1099
+ * Soft, warm terracotta and peach tones
1100
+ * Light mode variant - light backgrounds with warm sunset tones
1101
+ */
1102
+
1103
+ .dm-theme-sunset-light {
1104
+ color-scheme: light;
1105
+
1106
+ /* ================================================
1107
+ FOUNDATIONAL COLORS - Light Mode Base
1108
+ ================================================ */
1109
+
1110
+ /* Backgrounds - Light/white backgrounds */
1111
+ --dm-background: #ffffff;
1112
+ --dm-background-alt: #f8f9fa;
1113
+ --dm-surface: #ffffff;
1114
+ --dm-surface-raised: #f1f3f5;
1115
+ --dm-surface-overlay: #f8f9fa;
1116
+
1117
+ /* Text - Dark colors for readability on light */
1118
+ --dm-text: #212529;
1119
+ --dm-text-secondary: #495057;
1120
+ --dm-text-muted: #6c757d;
1121
+ --dm-text-disabled: #adb5bd;
1122
+ --dm-text-inverse: #ffffff;
1123
+
1124
+ /* Borders - Subtle on light backgrounds */
1125
+ --dm-border: #dee2e6;
1126
+ --dm-border-light: #e9ecef;
1127
+ --dm-border-dark: #ced4da;
1128
+
1129
+
1130
+ --dm-primary: #da9d82;
1131
+ --dm-primary-hover: #e0ac94;
1132
+ --dm-primary-active: #e6bba6;
1133
+ --dm-primary-light: rgba(218, 157, 130, 0.15);
1134
+ --dm-primary-dark: #d08c6f;
1135
+
1136
+ --dm-secondary: #c2a2aa;
1137
+ --dm-secondary-hover: #cdb0b7;
1138
+ --dm-secondary-active: #d8bec4;
1139
+ --dm-secondary-light: rgba(194, 162, 170, 0.15);
1140
+ --dm-secondary-dark: #b5919a;
1141
+
1142
+ --dm-success: #9cbe91;
1143
+ --dm-success-light: rgba(156, 190, 145, 0.15);
1144
+
1145
+ --dm-info: #afc1cd;
1146
+ --dm-info-light: rgba(175, 193, 205, 0.15);
1147
+
1148
+ --dm-warning: #e2c484;
1149
+ --dm-warning-light: rgba(226, 196, 132, 0.15);
1150
+ --dm-warning-text: #e2c484;
1151
+
1152
+ --dm-danger: #da8282;
1153
+ --dm-danger-light: rgba(218, 130, 130, 0.15);
1154
+
1155
+ --dm-focus-ring: 0 0 0 3px rgba(218, 157, 130, 0.35);
1156
+ --dm-selected-bg: rgba(218, 157, 130, 0.2);
1157
+ --dm-tab-active-border: #da9d82;
1158
+ --dm-tab-active-text: #da9d82;
1159
+ --dm-progress-bar: #da9d82;
1160
+
1161
+ /* Danger - Bright red (standard dark mode) */
1162
+ --dm-danger: #ef4444; /* red-500 */
1163
+ --dm-danger-hover: #f87171; /* red-400 */
1164
+ --dm-danger-active: #fca5a5; /* red-300 */
1165
+ --dm-danger-light: rgba(248, 113, 113, 0.15);
1166
+ --dm-danger-dark: #dc2626; /* red-600 */
1167
+
1168
+ /* ================================================
1169
+ INTERACTIVE STATES
1170
+ ================================================ */
1171
+ --dm-hover-bg: rgba(0, 0, 0, 0.04);
1172
+ --dm-active-bg: rgba(0, 0, 0, 0.08);
1173
+ --dm-selected-bg: rgba(198, 123, 92, 0.12);
1174
+ --dm-focus-ring: 0 0 0 3px rgba(198, 123, 92, 0.3);
1175
+ --dm-border-focus: #c67b5c;
1176
+ --dm-disabled-opacity: 0.65;
1177
+
1178
+ /* ================================================
1179
+ COMPONENT-SPECIFIC COLORS
1180
+ ================================================ */
1181
+
1182
+ /* Cards */
1183
+ --dm-card-bg: var(--dm-surface);
1184
+ --dm-card-border: var(--dm-border);
1185
+ --dm-card-shadow: var(--dm-shadow-sm);
1186
+
1187
+ /* Inputs */
1188
+ --dm-input-bg: var(--dm-surface);
1189
+ --dm-input-border: var(--dm-border-dark);
1190
+ --dm-input-text: var(--dm-text);
1191
+ --dm-input-placeholder: var(--dm-text-muted);
1192
+ --dm-input-focus-border: var(--dm-primary);
1193
+ --dm-input-focus-shadow: var(--dm-focus-ring);
1194
+ --dm-input-disabled-bg: #e9ecef;
1195
+
1196
+ /* Buttons */
1197
+ --dm-btn-text: var(--dm-text);
1198
+ --dm-btn-bg: var(--dm-surface);
1199
+ --dm-btn-border: var(--dm-border-dark);
1200
+
1201
+ /* Tables */
1202
+ --dm-table-bg: transparent;
1203
+ --dm-table-border: var(--dm-border);
1204
+ --dm-table-header-bg: var(--dm-background-alt);
1205
+ --dm-table-header-text: var(--dm-text);
1206
+ --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
1207
+ --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
1208
+ --dm-table-selected-bg: var(--dm-selected-bg);
1209
+
1210
+ /* Modals */
1211
+ --dm-modal-bg: var(--dm-surface);
1212
+ --dm-modal-border: var(--dm-border);
1213
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
1214
+ --dm-modal-shadow: var(--dm-shadow-xl);
1215
+
1216
+ /* Dropdowns */
1217
+ --dm-dropdown-bg: var(--dm-surface);
1218
+ --dm-dropdown-border: var(--dm-border);
1219
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
1220
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
1221
+ --dm-dropdown-item-active: var(--dm-selected-bg);
1222
+
1223
+ /* Tooltips */
1224
+ --dm-tooltip-bg: #212529;
1225
+ --dm-tooltip-text: #ffffff;
1226
+
1227
+ /* Toasts */
1228
+ --dm-toast-bg: var(--dm-surface);
1229
+ --dm-toast-border: var(--dm-border);
1230
+ --dm-toast-shadow: var(--dm-shadow-lg);
1231
+
1232
+ /* Navbar */
1233
+ --dm-navbar-bg: var(--dm-surface);
1234
+ --dm-navbar-text: var(--dm-text);
1235
+ --dm-navbar-border: var(--dm-border);
1236
+
1237
+ /* Sidebar */
1238
+ --dm-sidebar-bg: var(--dm-surface);
1239
+ --dm-sidebar-text: var(--dm-text);
1240
+ --dm-sidebar-border: var(--dm-border);
1241
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
1242
+ --dm-sidebar-item-active: var(--dm-selected-bg);
1243
+
1244
+ /* Tabs */
1245
+ --dm-tab-border: var(--dm-border);
1246
+ --dm-tab-hover-bg: var(--dm-hover-bg);
1247
+ --dm-tab-active-border: #c67b5c;
1248
+ --dm-tab-active-text: #a66349;
1249
+
1250
+ /* Accordion */
1251
+ --dm-accordion-bg: var(--dm-surface);
1252
+ --dm-accordion-border: var(--dm-border);
1253
+ --dm-accordion-header-bg: var(--dm-background-alt);
1254
+ --dm-accordion-header-hover: var(--dm-hover-bg);
1255
+
1256
+ /* Badges */
1257
+ --dm-badge-bg: var(--dm-secondary);
1258
+ --dm-badge-text: #ffffff;
1259
+
1260
+ /* Progress */
1261
+ --dm-progress-bg: #e9ecef;
1262
+ --dm-progress-bar: #c67b5c;
1263
+
1264
+ /* Scrollbar */
1265
+ --dm-scrollbar-track: #f1f1f1;
1266
+ --dm-scrollbar-thumb: #c1c1c1;
1267
+ --dm-scrollbar-thumb-hover: #a8a8a8;
1268
+
1269
+ /* Code */
1270
+ --dm-code-bg: #f8f9fa;
1271
+ --dm-code-text: #e83e8c;
1272
+ --dm-code-border: var(--dm-border);
1273
+
1274
+ /* ================================================
1275
+ SHADOWS - Standard for light mode
1276
+ ================================================ */
1277
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1278
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1279
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1280
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1281
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1282
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1283
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1284
+
1285
+ /* ================================================
1286
+ ELEVATION / DEPTH
1287
+ ================================================ */
1288
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
1289
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
1290
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
1291
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
1292
+ }
1293
+
1294
+ /**
1295
+ * Domma Sunset Dark Theme
1296
+ * Soft, warm terracotta and peach tones
1297
+ * Dark mode variant
1298
+ */
1299
+
1300
+ .dm-theme-sunset-dark {
1301
+ color-scheme: dark;
1302
+
1303
+ /* ================================================
1304
+ FOUNDATIONAL COLORS - Dark Mode Base
1305
+ ================================================ */
1306
+
1307
+ /* Backgrounds - Dark slate/charcoal backgrounds */
1308
+ --dm-background: #0f172a; /* slate-900 */
1309
+ --dm-background-alt: #1e293b; /* slate-800 */
1310
+ --dm-surface: #1e293b; /* slate-800 */
1311
+ --dm-surface-raised: #334155; /* slate-700 */
1312
+ --dm-surface-overlay: #334155; /* slate-700 */
1313
+
1314
+ /* Text - Light colors for readability on dark */
1315
+ --dm-text: #e2e8f0; /* slate-200 */
1316
+ --dm-text-secondary: #94a3b8; /* slate-400 */
1317
+ --dm-text-muted: #64748b; /* slate-500 */
1318
+ --dm-text-disabled: #475569; /* slate-600 */
1319
+ --dm-text-inverse: #0f172a; /* slate-900 */
1320
+
1321
+ /* Borders - Subtle on dark backgrounds */
1322
+ --dm-border: #334155; /* slate-700 */
1323
+ --dm-border-light: #1e293b; /* slate-800 */
1324
+ --dm-border-dark: #475569; /* slate-600 */
1325
+
1326
+ /* ================================================
1327
+ SUNSET ACCENT COLORS - Warm tones for light mode
1328
+ ================================================ */
1329
+
1330
+ /* PRIMARY COLOURS - Soft Terracotta */
1331
+ --dm-primary: #c67b5c;
1332
+ --dm-primary-hover: #d08c6f;
1333
+ --dm-primary-active: #da9d82;
1334
+ --dm-primary-light: #faf3f0;
1335
+ --dm-primary-dark: #a66349;
1336
+
1337
+ /* Focus ring with soft sunset colour */
1338
+ --dm-focus-ring: 0 0 0 3px rgba(198, 123, 92, 0.3);
1339
+ --dm-border-focus: #c67b5c;
1340
+
1341
+ /* ================================================
1342
+ SECONDARY COLOURS - Dusty Rose
1343
+ ================================================ */
1344
+ --dm-secondary: #a8808a;
1345
+ --dm-secondary-hover: #b5919a;
1346
+ --dm-secondary-active: #c2a2aa;
1347
+ --dm-secondary-light: #f8f3f4;
1348
+ --dm-secondary-dark: #8a6670;
1349
+
1350
+ /* ================================================
1351
+ STATUS COLOURS - Muted tones
1352
+ ================================================ */
1353
+ --dm-success: #7a9e6d;
1354
+ --dm-success-hover: #8bae7f;
1355
+ --dm-success-active: #9cbe91;
1356
+ --dm-success-light: #f2f6f0;
1357
+ --dm-success-dark: #628256;
1358
+
1359
+ --dm-info: #8fa5b5;
1360
+ --dm-info-hover: #9fb3c1;
1361
+ --dm-info-active: #afc1cd;
1362
+ --dm-info-light: #f3f6f8;
1363
+ --dm-info-dark: #708694;
1364
+
1365
+ --dm-warning: #d4a85c;
1366
+ --dm-warning-hover: #dbb670;
1367
+ --dm-warning-active: #e2c484;
1368
+ --dm-warning-light: #faf6ef;
1369
+ --dm-warning-dark: #b58e45;
1370
+ --dm-warning-text: #8a6b30;
1371
+
1372
+ --dm-danger: #c45c5c;
1373
+ --dm-danger-hover: #cf6f6f;
1374
+ --dm-danger-active: #da8282;
1375
+ --dm-danger-light: #faf0f0;
1376
+ --dm-danger-dark: #a54848;
1377
+
1378
+ /* ================================================
1379
+ ACCENT COLOURS
1380
+ ================================================ */
1381
+ --dm-accent-1: #e8c9a8; /* Soft peach */
1382
+ --dm-accent-2: #d4a88a; /* Warm sand */
1383
+ --dm-accent-3: #c67b5c; /* Terracotta */
1384
+ --dm-accent-4: #a66349; /* Clay */
1385
+
1386
+ /* ================================================
1387
+ INTERACTIVE STATES
1388
+ ================================================ */
1389
+ --dm-hover-bg: rgba(255, 255, 255, 0.07);
1390
+ --dm-active-bg: rgba(255, 255, 255, 0.1);
1391
+ --dm-disabled-opacity: 0.4;
1392
+
1393
+ /* ================================================
1394
+ COMPONENT-SPECIFIC COLORS
1395
+ ================================================ */
1396
+
1397
+ /* Cards */
1398
+ --dm-card-bg: var(--dm-surface);
1399
+ --dm-card-border: var(--dm-border);
1400
+ --dm-card-shadow: var(--dm-shadow-md);
1401
+
1402
+ /* Inputs */
1403
+ --dm-input-bg: var(--dm-surface);
1404
+ --dm-input-border: var(--dm-border-dark);
1405
+ --dm-input-text: var(--dm-text);
1406
+ --dm-input-placeholder: var(--dm-text-muted);
1407
+ --dm-input-focus-border: var(--dm-primary);
1408
+ --dm-input-disabled-bg: #1e293b;
1409
+
1410
+ /* Buttons */
1411
+ --dm-btn-text: var(--dm-text);
1412
+ --dm-btn-bg: var(--dm-surface);
1413
+ --dm-btn-border: var(--dm-border-dark);
1414
+
1415
+ /* Tables */
1416
+ --dm-table-bg: transparent;
1417
+ --dm-table-border: var(--dm-border);
1418
+ --dm-table-header-bg: var(--dm-background-alt);
1419
+ --dm-table-header-text: var(--dm-text);
1420
+ --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
1421
+ --dm-table-hover-bg: var(--dm-hover-bg);
1422
+ --dm-table-selected-bg: var(--dm-selected-bg);
1423
+
1424
+ /* Modals */
1425
+ --dm-modal-bg: var(--dm-surface);
1426
+ --dm-modal-border: var(--dm-border);
1427
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
1428
+ --dm-modal-shadow: var(--dm-shadow-xl);
1429
+
1430
+ /* Dropdowns */
1431
+ --dm-dropdown-bg: var(--dm-surface-raised);
1432
+ --dm-dropdown-border: var(--dm-border);
1433
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
1434
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
1435
+ --dm-dropdown-item-active: var(--dm-selected-bg);
1436
+
1437
+ /* Tooltips */
1438
+ --dm-tooltip-bg: #0f172a;
1439
+ --dm-tooltip-text: #ffffff;
1440
+
1441
+ /* Toasts */
1442
+ --dm-toast-bg: var(--dm-surface);
1443
+ --dm-toast-border: var(--dm-border);
1444
+ --dm-toast-shadow: var(--dm-shadow-lg);
1445
+
1446
+ /* Navbar */
1447
+ --dm-navbar-bg: var(--dm-surface);
1448
+ --dm-navbar-text: var(--dm-text);
1449
+ --dm-navbar-border: var(--dm-border);
1450
+
1451
+ /* Sidebar */
1452
+ --dm-sidebar-bg: var(--dm-surface);
1453
+ --dm-sidebar-text: var(--dm-text);
1454
+ --dm-sidebar-border: var(--dm-border);
1455
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
1456
+ --dm-sidebar-item-active: var(--dm-selected-bg);
1457
+
1458
+ /* Tabs */
1459
+ --dm-tab-border: var(--dm-border);
1460
+ --dm-tab-hover-bg: var(--dm-hover-bg);
1461
+
1462
+ /* Accordion */
1463
+ --dm-accordion-bg: var(--dm-surface);
1464
+ --dm-accordion-border: var(--dm-border);
1465
+ --dm-accordion-header-bg: var(--dm-background-alt);
1466
+ --dm-accordion-header-hover: var(--dm-hover-bg);
1467
+
1468
+ /* Badges */
1469
+ --dm-badge-bg: var(--dm-secondary);
1470
+ --dm-badge-text: #0f172a;
1471
+
1472
+ /* Progress */
1473
+ --dm-progress-bg: #334155;
1474
+
1475
+ /* Scrollbar */
1476
+ --dm-scrollbar-track: #1e293b;
1477
+ --dm-scrollbar-thumb: #475569;
1478
+ --dm-scrollbar-thumb-hover: #64748b;
1479
+
1480
+ /* Code */
1481
+ --dm-code-bg: #0f172a;
1482
+ --dm-code-text: #fca5a5;
1483
+ --dm-code-border: var(--dm-border);
1484
+
1485
+ /* ================================================
1486
+ SHADOWS - Subtle for dark mode
1487
+ ================================================ */
1488
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1489
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1490
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1491
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1492
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1493
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1494
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1495
+
1496
+ }
1497
+ /**
1498
+ * Domma Royal Light Theme
1499
+ * Rich royal blue colour palette
1500
+ * Light mode variant
1501
+ */
1502
+
1503
+ .dm-theme-royal-light {
1504
+ color-scheme: light;
1505
+
1506
+ /* ================================================
1507
+ FOUNDATIONAL COLORS - Light Mode Base
1508
+ ================================================ */
1509
+
1510
+ /* Backgrounds - Light/white backgrounds */
1511
+ --dm-background: #ffffff;
1512
+ --dm-background-alt: #f8f9fa;
1513
+ --dm-surface: #ffffff;
1514
+ --dm-surface-raised: #f1f3f5;
1515
+ --dm-surface-overlay: #f8f9fa;
1516
+
1517
+ /* Text - Dark colors for readability on light */
1518
+ --dm-text: #212529;
1519
+ --dm-text-secondary: #495057;
1520
+ --dm-text-muted: #6c757d;
1521
+ --dm-text-disabled: #adb5bd;
1522
+ --dm-text-inverse: #ffffff;
1523
+
1524
+ /* Borders - Subtle on light backgrounds */
1525
+ --dm-border: #dee2e6;
1526
+ --dm-border-light: #e9ecef;
1527
+ --dm-border-dark: #ced4da;
1528
+
1529
+
1530
+ --dm-primary: #6495ed;
1531
+ --dm-primary-hover: #79a5f0;
1532
+ --dm-primary-active: #8eb5f3;
1533
+ --dm-primary-light: rgba(100, 149, 237, 0.15);
1534
+ --dm-primary-dark: #4169e1;
1535
+
1536
+ --dm-secondary: #9370db;
1537
+ --dm-secondary-hover: #a384e0;
1538
+ --dm-secondary-active: #b398e5;
1539
+ --dm-secondary-light: rgba(147, 112, 219, 0.15);
1540
+ --dm-secondary-dark: #6a5acd;
1541
+
1542
+ --dm-success: #50fa7b;
1543
+ --dm-success-light: rgba(80, 250, 123, 0.15);
1544
+
1545
+ --dm-info: #87ceeb;
1546
+ --dm-info-light: rgba(135, 206, 235, 0.15);
1547
+
1548
+ --dm-focus-ring: 0 0 0 3px rgba(100, 149, 237, 0.35);
1549
+ --dm-selected-bg: rgba(100, 149, 237, 0.2);
1550
+ --dm-tab-active-border: #6495ed;
1551
+ --dm-tab-active-text: #6495ed;
1552
+ --dm-progress-bar: #6495ed;
1553
+
1554
+ /* Danger - Bright red (standard dark mode) */
1555
+ --dm-danger: #ef4444; /* red-500 */
1556
+ --dm-danger-hover: #f87171; /* red-400 */
1557
+ --dm-danger-active: #fca5a5; /* red-300 */
1558
+ --dm-danger-light: rgba(248, 113, 113, 0.15);
1559
+ --dm-danger-dark: #dc2626; /* red-600 */
1560
+
1561
+ /* ================================================
1562
+ INTERACTIVE STATES
1563
+ ================================================ */
1564
+ --dm-hover-bg: rgba(0, 0, 0, 0.04);
1565
+ --dm-active-bg: rgba(0, 0, 0, 0.08);
1566
+ --dm-disabled-opacity: 0.65;
1567
+
1568
+ /* ================================================
1569
+ COMPONENT-SPECIFIC COLORS
1570
+ ================================================ */
1571
+
1572
+ /* Cards */
1573
+ --dm-card-bg: var(--dm-surface);
1574
+ --dm-card-border: var(--dm-border);
1575
+ --dm-card-shadow: var(--dm-shadow-sm);
1576
+
1577
+ /* Inputs */
1578
+ --dm-input-bg: var(--dm-surface);
1579
+ --dm-input-border: var(--dm-border-dark);
1580
+ --dm-input-text: var(--dm-text);
1581
+ --dm-input-placeholder: var(--dm-text-muted);
1582
+ --dm-input-focus-border: var(--dm-primary);
1583
+ --dm-input-disabled-bg: #e9ecef;
1584
+
1585
+ /* Buttons */
1586
+ --dm-btn-text: var(--dm-text);
1587
+ --dm-btn-bg: var(--dm-surface);
1588
+ --dm-btn-border: var(--dm-border-dark);
1589
+
1590
+ /* Tables */
1591
+ --dm-table-bg: transparent;
1592
+ --dm-table-border: var(--dm-border);
1593
+ --dm-table-header-bg: var(--dm-background-alt);
1594
+ --dm-table-header-text: var(--dm-text);
1595
+ --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
1596
+ --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
1597
+ --dm-table-selected-bg: var(--dm-selected-bg);
1598
+
1599
+ /* Modals */
1600
+ --dm-modal-bg: var(--dm-surface);
1601
+ --dm-modal-border: var(--dm-border);
1602
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
1603
+ --dm-modal-shadow: var(--dm-shadow-xl);
1604
+
1605
+ /* Dropdowns */
1606
+ --dm-dropdown-bg: var(--dm-surface);
1607
+ --dm-dropdown-border: var(--dm-border);
1608
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
1609
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
1610
+ --dm-dropdown-item-active: var(--dm-selected-bg);
1611
+
1612
+ /* Tooltips */
1613
+ --dm-tooltip-bg: #212529;
1614
+ --dm-tooltip-text: #ffffff;
1615
+
1616
+ /* Toasts */
1617
+ --dm-toast-bg: var(--dm-surface);
1618
+ --dm-toast-border: var(--dm-border);
1619
+ --dm-toast-shadow: var(--dm-shadow-lg);
1620
+
1621
+ /* Navbar */
1622
+ --dm-navbar-bg: var(--dm-surface);
1623
+ --dm-navbar-text: var(--dm-text);
1624
+ --dm-navbar-border: var(--dm-border);
1625
+
1626
+ /* Sidebar */
1627
+ --dm-sidebar-bg: var(--dm-surface);
1628
+ --dm-sidebar-text: var(--dm-text);
1629
+ --dm-sidebar-border: var(--dm-border);
1630
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
1631
+ --dm-sidebar-item-active: var(--dm-selected-bg);
1632
+
1633
+ /* Tabs */
1634
+ --dm-tab-border: var(--dm-border);
1635
+ --dm-tab-hover-bg: var(--dm-hover-bg);
1636
+
1637
+ /* Accordion */
1638
+ --dm-accordion-bg: var(--dm-surface);
1639
+ --dm-accordion-border: var(--dm-border);
1640
+ --dm-accordion-header-bg: var(--dm-background-alt);
1641
+ --dm-accordion-header-hover: var(--dm-hover-bg);
1642
+
1643
+ /* Badges */
1644
+ --dm-badge-bg: var(--dm-secondary);
1645
+ --dm-badge-text: #ffffff;
1646
+
1647
+ /* Progress */
1648
+ --dm-progress-bg: #e9ecef;
1649
+
1650
+ /* Scrollbar */
1651
+ --dm-scrollbar-track: #f1f1f1;
1652
+ --dm-scrollbar-thumb: #c1c1c1;
1653
+ --dm-scrollbar-thumb-hover: #a8a8a8;
1654
+
1655
+ /* Code */
1656
+ --dm-code-bg: #f8f9fa;
1657
+ --dm-code-text: #e83e8c;
1658
+ --dm-code-border: var(--dm-border);
1659
+
1660
+ /* ================================================
1661
+ SHADOWS - Standard for light mode
1662
+ ================================================ */
1663
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1664
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1665
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1666
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1667
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1668
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1669
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1670
+
1671
+ /* ================================================
1672
+ ELEVATION / DEPTH
1673
+ ================================================ */
1674
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
1675
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
1676
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
1677
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
1678
+
1679
+ }
1680
+ /**
1681
+ * Domma Royal Dark Theme
1682
+ * Rich royal blue colour palette
1683
+ * Dark mode variant
1684
+ */
1685
+
1686
+ .dm-theme-royal-dark {
1687
+ color-scheme: dark;
1688
+
1689
+ /* ================================================
1690
+ FOUNDATIONAL COLORS - Dark Mode Base
1691
+ ================================================ */
1692
+
1693
+ /* Backgrounds - Dark slate/charcoal backgrounds */
1694
+ --dm-background: #0f172a; /* slate-900 */
1695
+ --dm-background-alt: #1e293b; /* slate-800 */
1696
+ --dm-surface: #1e293b; /* slate-800 */
1697
+ --dm-surface-raised: #334155; /* slate-700 */
1698
+ --dm-surface-overlay: #334155; /* slate-700 */
1699
+
1700
+ /* Text - Light colors for readability on dark */
1701
+ --dm-text: #e2e8f0; /* slate-200 */
1702
+ --dm-text-secondary: #94a3b8; /* slate-400 */
1703
+ --dm-text-muted: #64748b; /* slate-500 */
1704
+ --dm-text-disabled: #475569; /* slate-600 */
1705
+ --dm-text-inverse: #0f172a; /* slate-900 */
1706
+
1707
+ /* Borders - Subtle on dark backgrounds */
1708
+ --dm-border: #334155; /* slate-700 */
1709
+ --dm-border-light: #1e293b; /* slate-800 */
1710
+ --dm-border-dark: #475569; /* slate-600 */
1711
+
1712
+
1713
+ /* ================================================
1714
+ PRIMARY COLOURS - Royal Blue
1715
+ ================================================ */
1716
+ --dm-primary: #4169e1;
1717
+ --dm-primary-hover: #5a7de6;
1718
+ --dm-primary-active: #7391eb;
1719
+ --dm-primary-light: #e8edfc;
1720
+ --dm-primary-dark: #2c4a9e;
1721
+
1722
+ /* Focus ring with royal colour */
1723
+ --dm-focus-ring: 0 0 0 3px rgba(65, 105, 225, 0.3);
1724
+ --dm-border-focus: #4169e1;
1725
+
1726
+ /* ================================================
1727
+ SECONDARY COLOURS - Purple Blue
1728
+ ================================================ */
1729
+ --dm-secondary: #6a5acd;
1730
+ --dm-secondary-hover: #7d6fd4;
1731
+ --dm-secondary-active: #9084db;
1732
+ --dm-secondary-light: #f0eefa;
1733
+ --dm-secondary-dark: #483d8b;
1734
+
1735
+ /* ================================================
1736
+ STATUS COLOURS - Royal-tinted
1737
+ ================================================ */
1738
+ --dm-success: #32cd32;
1739
+ --dm-success-hover: #4ad34a;
1740
+ --dm-success-active: #62d962;
1741
+ --dm-success-light: #e6f9e6;
1742
+ --dm-success-dark: #228b22;
1743
+
1744
+ --dm-info: #6495ed;
1745
+ --dm-info-hover: #79a5f0;
1746
+ --dm-info-active: #8eb5f3;
1747
+ --dm-info-light: #ebf1fd;
1748
+ --dm-info-dark: #4169e1;
1749
+
1750
+ /* ================================================
1751
+ ACCENT COLOURS
1752
+ ================================================ */
1753
+ --dm-accent-1: #b0c4de; /* Light steel blue */
1754
+ --dm-accent-2: #6495ed; /* Cornflower blue */
1755
+ --dm-accent-3: #4169e1; /* Royal blue */
1756
+ --dm-accent-4: #191970; /* Midnight blue */
1757
+
1758
+ /* ================================================
1759
+ SELECTION
1760
+ ================================================ */
1761
+ --dm-selected-bg: rgba(65, 105, 225, 0.15);
1762
+ --dm-tab-active-border: #4169e1;
1763
+ --dm-tab-active-text: #4169e1;
1764
+ --dm-progress-bar: #4169e1;
1765
+
1766
+ /* Danger - Standard red */
1767
+ --dm-danger: #dc3545;
1768
+ --dm-danger-hover: #bb2d3b;
1769
+ --dm-danger-active: #b02a37;
1770
+ --dm-danger-light: #f8d7da;
1771
+ --dm-danger-dark: #842029;
1772
+
1773
+ /* ================================================
1774
+ INTERACTIVE STATES
1775
+ ================================================ */
1776
+ --dm-hover-bg: rgba(255, 255, 255, 0.07);
1777
+ --dm-active-bg: rgba(255, 255, 255, 0.1);
1778
+ --dm-disabled-opacity: 0.4;
1779
+
1780
+ /* ================================================
1781
+ COMPONENT-SPECIFIC COLORS
1782
+ ================================================ */
1783
+
1784
+ /* Cards */
1785
+ --dm-card-bg: var(--dm-surface);
1786
+ --dm-card-border: var(--dm-border);
1787
+ --dm-card-shadow: var(--dm-shadow-md);
1788
+
1789
+ /* Inputs */
1790
+ --dm-input-bg: var(--dm-surface);
1791
+ --dm-input-border: var(--dm-border-dark);
1792
+ --dm-input-text: var(--dm-text);
1793
+ --dm-input-placeholder: var(--dm-text-muted);
1794
+ --dm-input-focus-border: var(--dm-primary);
1795
+ --dm-input-disabled-bg: #1e293b;
1796
+
1797
+ /* Buttons */
1798
+ --dm-btn-text: var(--dm-text);
1799
+ --dm-btn-bg: var(--dm-surface);
1800
+ --dm-btn-border: var(--dm-border-dark);
1801
+
1802
+ /* Tables */
1803
+ --dm-table-bg: transparent;
1804
+ --dm-table-border: var(--dm-border);
1805
+ --dm-table-header-bg: var(--dm-background-alt);
1806
+ --dm-table-header-text: var(--dm-text);
1807
+ --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
1808
+ --dm-table-hover-bg: var(--dm-hover-bg);
1809
+ --dm-table-selected-bg: var(--dm-selected-bg);
1810
+
1811
+ /* Modals */
1812
+ --dm-modal-bg: var(--dm-surface);
1813
+ --dm-modal-border: var(--dm-border);
1814
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
1815
+ --dm-modal-shadow: var(--dm-shadow-xl);
1816
+
1817
+ /* Dropdowns */
1818
+ --dm-dropdown-bg: var(--dm-surface-raised);
1819
+ --dm-dropdown-border: var(--dm-border);
1820
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
1821
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
1822
+ --dm-dropdown-item-active: var(--dm-selected-bg);
1823
+
1824
+ /* Tooltips */
1825
+ --dm-tooltip-bg: #0f172a;
1826
+ --dm-tooltip-text: #ffffff;
1827
+
1828
+ /* Toasts */
1829
+ --dm-toast-bg: var(--dm-surface);
1830
+ --dm-toast-border: var(--dm-border);
1831
+ --dm-toast-shadow: var(--dm-shadow-lg);
1832
+
1833
+ /* Navbar */
1834
+ --dm-navbar-bg: var(--dm-surface);
1835
+ --dm-navbar-text: var(--dm-text);
1836
+ --dm-navbar-border: var(--dm-border);
1837
+
1838
+ /* Sidebar */
1839
+ --dm-sidebar-bg: var(--dm-surface);
1840
+ --dm-sidebar-text: var(--dm-text);
1841
+ --dm-sidebar-border: var(--dm-border);
1842
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
1843
+ --dm-sidebar-item-active: var(--dm-selected-bg);
1844
+
1845
+ /* Tabs */
1846
+ --dm-tab-border: var(--dm-border);
1847
+ --dm-tab-hover-bg: var(--dm-hover-bg);
1848
+
1849
+ /* Accordion */
1850
+ --dm-accordion-bg: var(--dm-surface);
1851
+ --dm-accordion-border: var(--dm-border);
1852
+ --dm-accordion-header-bg: var(--dm-background-alt);
1853
+ --dm-accordion-header-hover: var(--dm-hover-bg);
1854
+
1855
+ /* Badges */
1856
+ --dm-badge-bg: var(--dm-secondary);
1857
+ --dm-badge-text: #0f172a;
1858
+
1859
+ /* Progress */
1860
+ --dm-progress-bg: #334155;
1861
+
1862
+ /* Scrollbar */
1863
+ --dm-scrollbar-track: #1e293b;
1864
+ --dm-scrollbar-thumb: #475569;
1865
+ --dm-scrollbar-thumb-hover: #64748b;
1866
+
1867
+ /* Code */
1868
+ --dm-code-bg: #0f172a;
1869
+ --dm-code-text: #fca5a5;
1870
+ --dm-code-border: var(--dm-border);
1871
+
1872
+ /* ================================================
1873
+ SHADOWS - Subtle for dark mode
1874
+ ================================================ */
1875
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1876
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1877
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1878
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1879
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1880
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1881
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1882
+
1883
+ }
1884
+ /**
1885
+ * Domma Lemon Light Theme
1886
+ * Soft, subtle yellow colour palette
1887
+ * Light mode variant
1888
+ */
1889
+
1890
+ .dm-theme-lemon-light {
1891
+ color-scheme: light;
1892
+
1893
+ /* ================================================
1894
+ FOUNDATIONAL COLORS - Light Mode Base
1895
+ ================================================ */
1896
+
1897
+ /* Backgrounds - Light/white backgrounds */
1898
+ --dm-background: #ffffff;
1899
+ --dm-background-alt: #f8f9fa;
1900
+ --dm-surface: #ffffff;
1901
+ --dm-surface-raised: #f1f3f5;
1902
+ --dm-surface-overlay: #f8f9fa;
1903
+
1904
+ /* Text - Dark colors for readability on light */
1905
+ --dm-text: #212529;
1906
+ --dm-text-secondary: #495057;
1907
+ --dm-text-muted: #6c757d;
1908
+ --dm-text-disabled: #adb5bd;
1909
+ --dm-text-inverse: #ffffff;
1910
+
1911
+ /* Borders - Subtle on light backgrounds */
1912
+ --dm-border: #dee2e6;
1913
+ --dm-border-light: #e9ecef;
1914
+ --dm-border-dark: #ced4da;
1915
+
1916
+
1917
+ --dm-primary: #d4c06a;
1918
+ --dm-primary-hover: #dfcc7c;
1919
+ --dm-primary-active: #ead88e;
1920
+ --dm-primary-light: rgba(212, 192, 106, 0.15);
1921
+ --dm-primary-dark: #c9b458;
1922
+
1923
+ --dm-secondary: #b6b1a1;
1924
+ --dm-secondary-hover: #c4bfb0;
1925
+ --dm-secondary-active: #d2cdbf;
1926
+ --dm-secondary-light: rgba(182, 177, 161, 0.15);
1927
+ --dm-secondary-dark: #9a9583;
1928
+
1929
+ --dm-success: #a1c277;
1930
+ --dm-success-light: rgba(161, 194, 119, 0.15);
1931
+
1932
+ --dm-info: #90bbcd;
1933
+ --dm-info-light: rgba(144, 187, 205, 0.15);
1934
+
1935
+ --dm-warning: #e2c46d;
1936
+ --dm-warning-light: rgba(226, 196, 109, 0.15);
1937
+ --dm-warning-text: #e2c46d;
1938
+
1939
+ --dm-focus-ring: 0 0 0 3px rgba(212, 192, 106, 0.35);
1940
+ --dm-selected-bg: rgba(212, 192, 106, 0.2);
1941
+ --dm-tab-active-border: #d4c06a;
1942
+ --dm-tab-active-text: #d4c06a;
1943
+ --dm-progress-bar: #d4c06a;
1944
+
1945
+ /* Danger - Bright red (standard dark mode) */
1946
+ --dm-danger: #ef4444; /* red-500 */
1947
+ --dm-danger-hover: #f87171; /* red-400 */
1948
+ --dm-danger-active: #fca5a5; /* red-300 */
1949
+ --dm-danger-light: rgba(248, 113, 113, 0.15);
1950
+ --dm-danger-dark: #dc2626; /* red-600 */
1951
+
1952
+ /* ================================================
1953
+ INTERACTIVE STATES
1954
+ ================================================ */
1955
+ --dm-hover-bg: rgba(0, 0, 0, 0.04);
1956
+ --dm-active-bg: rgba(0, 0, 0, 0.08);
1957
+ --dm-disabled-opacity: 0.65;
1958
+
1959
+ /* ================================================
1960
+ COMPONENT-SPECIFIC COLORS
1961
+ ================================================ */
1962
+
1963
+ /* Cards */
1964
+ --dm-card-bg: var(--dm-surface);
1965
+ --dm-card-border: var(--dm-border);
1966
+ --dm-card-shadow: var(--dm-shadow-sm);
1967
+
1968
+ /* Inputs */
1969
+ --dm-input-bg: var(--dm-surface);
1970
+ --dm-input-border: var(--dm-border-dark);
1971
+ --dm-input-text: var(--dm-text);
1972
+ --dm-input-placeholder: var(--dm-text-muted);
1973
+ --dm-input-focus-border: var(--dm-primary);
1974
+ --dm-input-disabled-bg: #e9ecef;
1975
+
1976
+ /* Buttons */
1977
+ --dm-btn-text: var(--dm-text);
1978
+ --dm-btn-bg: var(--dm-surface);
1979
+ --dm-btn-border: var(--dm-border-dark);
1980
+
1981
+ /* Tables */
1982
+ --dm-table-bg: transparent;
1983
+ --dm-table-border: var(--dm-border);
1984
+ --dm-table-header-bg: var(--dm-background-alt);
1985
+ --dm-table-header-text: var(--dm-text);
1986
+ --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
1987
+ --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
1988
+ --dm-table-selected-bg: var(--dm-selected-bg);
1989
+
1990
+ /* Modals */
1991
+ --dm-modal-bg: var(--dm-surface);
1992
+ --dm-modal-border: var(--dm-border);
1993
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
1994
+ --dm-modal-shadow: var(--dm-shadow-xl);
1995
+
1996
+ /* Dropdowns */
1997
+ --dm-dropdown-bg: var(--dm-surface);
1998
+ --dm-dropdown-border: var(--dm-border);
1999
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
2000
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
2001
+ --dm-dropdown-item-active: var(--dm-selected-bg);
2002
+
2003
+ /* Tooltips */
2004
+ --dm-tooltip-bg: #212529;
2005
+ --dm-tooltip-text: #ffffff;
2006
+
2007
+ /* Toasts */
2008
+ --dm-toast-bg: var(--dm-surface);
2009
+ --dm-toast-border: var(--dm-border);
2010
+ --dm-toast-shadow: var(--dm-shadow-lg);
2011
+
2012
+ /* Navbar */
2013
+ --dm-navbar-bg: var(--dm-surface);
2014
+ --dm-navbar-text: var(--dm-text);
2015
+ --dm-navbar-border: var(--dm-border);
2016
+
2017
+ /* Sidebar */
2018
+ --dm-sidebar-bg: var(--dm-surface);
2019
+ --dm-sidebar-text: var(--dm-text);
2020
+ --dm-sidebar-border: var(--dm-border);
2021
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
2022
+ --dm-sidebar-item-active: var(--dm-selected-bg);
2023
+
2024
+ /* Tabs */
2025
+ --dm-tab-border: var(--dm-border);
2026
+ --dm-tab-hover-bg: var(--dm-hover-bg);
2027
+
2028
+ /* Accordion */
2029
+ --dm-accordion-bg: var(--dm-surface);
2030
+ --dm-accordion-border: var(--dm-border);
2031
+ --dm-accordion-header-bg: var(--dm-background-alt);
2032
+ --dm-accordion-header-hover: var(--dm-hover-bg);
2033
+
2034
+ /* Badges */
2035
+ --dm-badge-bg: var(--dm-secondary);
2036
+ --dm-badge-text: #ffffff;
2037
+
2038
+ /* Progress */
2039
+ --dm-progress-bg: #e9ecef;
2040
+
2041
+ /* Scrollbar */
2042
+ --dm-scrollbar-track: #f1f1f1;
2043
+ --dm-scrollbar-thumb: #c1c1c1;
2044
+ --dm-scrollbar-thumb-hover: #a8a8a8;
2045
+
2046
+ /* Code */
2047
+ --dm-code-bg: #f8f9fa;
2048
+ --dm-code-text: #e83e8c;
2049
+ --dm-code-border: var(--dm-border);
2050
+
2051
+ /* ================================================
2052
+ SHADOWS - Standard for light mode
2053
+ ================================================ */
2054
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2055
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2056
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2057
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2058
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
2059
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
2060
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
2061
+
2062
+ /* ================================================
2063
+ ELEVATION / DEPTH
2064
+ ================================================ */
2065
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
2066
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
2067
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
2068
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
2069
+
2070
+ }
2071
+ /**
2072
+ * Domma Lemon Dark Theme
2073
+ * Soft, subtle yellow colour palette
2074
+ * Dark mode variant
2075
+ */
2076
+
2077
+ .dm-theme-lemon-dark {
2078
+ color-scheme: dark;
2079
+
2080
+ /* ================================================
2081
+ FOUNDATIONAL COLORS - Dark Mode Base
2082
+ ================================================ */
2083
+
2084
+ /* Backgrounds - Dark slate/charcoal backgrounds */
2085
+ --dm-background: #0f172a; /* slate-900 */
2086
+ --dm-background-alt: #1e293b; /* slate-800 */
2087
+ --dm-surface: #1e293b; /* slate-800 */
2088
+ --dm-surface-raised: #334155; /* slate-700 */
2089
+ --dm-surface-overlay: #334155; /* slate-700 */
2090
+
2091
+ /* Text - Light colors for readability on dark */
2092
+ --dm-text: #e2e8f0; /* slate-200 */
2093
+ --dm-text-secondary: #94a3b8; /* slate-400 */
2094
+ --dm-text-muted: #64748b; /* slate-500 */
2095
+ --dm-text-disabled: #475569; /* slate-600 */
2096
+ --dm-text-inverse: #0f172a; /* slate-900 */
2097
+
2098
+ /* Borders - Subtle on dark backgrounds */
2099
+ --dm-border: #334155; /* slate-700 */
2100
+ --dm-border-light: #1e293b; /* slate-800 */
2101
+ --dm-border-dark: #475569; /* slate-600 */
2102
+
2103
+
2104
+ /* ================================================
2105
+ PRIMARY COLOURS - Muted Golden Yellow
2106
+ ================================================ */
2107
+ --dm-primary: #c9b458;
2108
+ --dm-primary-hover: #d4c06a;
2109
+ --dm-primary-active: #dfcc7c;
2110
+ --dm-primary-light: #faf8f0;
2111
+ --dm-primary-dark: #a89740;
2112
+
2113
+ /* Focus ring with subtle lemon colour */
2114
+ --dm-focus-ring: 0 0 0 3px rgba(201, 180, 88, 0.3);
2115
+ --dm-border-focus: #c9b458;
2116
+
2117
+ /* ================================================
2118
+ SECONDARY COLOURS - Warm Stone
2119
+ ================================================ */
2120
+ --dm-secondary: #9a9583;
2121
+ --dm-secondary-hover: #a8a392;
2122
+ --dm-secondary-active: #b6b1a1;
2123
+ --dm-secondary-light: #f5f4f1;
2124
+ --dm-secondary-dark: #7a766a;
2125
+
2126
+ /* ================================================
2127
+ STATUS COLOURS - Muted tones
2128
+ ================================================ */
2129
+ --dm-success: #7da453;
2130
+ --dm-success-hover: #8fb365;
2131
+ --dm-success-active: #a1c277;
2132
+ --dm-success-light: #f2f7ed;
2133
+ --dm-success-dark: #658840;
2134
+
2135
+ --dm-info: #6a9fb5;
2136
+ --dm-info-hover: #7dadc1;
2137
+ --dm-info-active: #90bbcd;
2138
+ --dm-info-light: #f0f6f8;
2139
+ --dm-info-dark: #527d91;
2140
+
2141
+ --dm-warning: #d4a843;
2142
+ --dm-warning-hover: #dbb658;
2143
+ --dm-warning-active: #e2c46d;
2144
+ --dm-warning-light: #faf6ec;
2145
+ --dm-warning-dark: #b08a30;
2146
+ --dm-warning-text: #8a6b20;
2147
+
2148
+ /* ================================================
2149
+ ACCENT COLOURS
2150
+ ================================================ */
2151
+ --dm-accent-1: #e8e2c8; /* Pale straw */
2152
+ --dm-accent-2: #d4cba8; /* Soft wheat */
2153
+ --dm-accent-3: #c9b458; /* Muted gold */
2154
+ --dm-accent-4: #a89740; /* Dark honey */
2155
+
2156
+ /* ================================================
2157
+ SELECTION
2158
+ ================================================ */
2159
+ --dm-selected-bg: rgba(201, 180, 88, 0.15);
2160
+ --dm-tab-active-border: #c9b458;
2161
+ --dm-tab-active-text: #8a7530;
2162
+ --dm-progress-bar: #c9b458;
2163
+
2164
+ /* Danger - Standard red */
2165
+ --dm-danger: #dc3545;
2166
+ --dm-danger-hover: #bb2d3b;
2167
+ --dm-danger-active: #b02a37;
2168
+ --dm-danger-light: #f8d7da;
2169
+ --dm-danger-dark: #842029;
2170
+
2171
+ /* ================================================
2172
+ INTERACTIVE STATES
2173
+ ================================================ */
2174
+ --dm-hover-bg: rgba(255, 255, 255, 0.07);
2175
+ --dm-active-bg: rgba(255, 255, 255, 0.1);
2176
+ --dm-disabled-opacity: 0.4;
2177
+
2178
+ /* ================================================
2179
+ COMPONENT-SPECIFIC COLORS
2180
+ ================================================ */
2181
+
2182
+ /* Cards */
2183
+ --dm-card-bg: var(--dm-surface);
2184
+ --dm-card-border: var(--dm-border);
2185
+ --dm-card-shadow: var(--dm-shadow-md);
2186
+
2187
+ /* Inputs */
2188
+ --dm-input-bg: var(--dm-surface);
2189
+ --dm-input-border: var(--dm-border-dark);
2190
+ --dm-input-text: var(--dm-text);
2191
+ --dm-input-placeholder: var(--dm-text-muted);
2192
+ --dm-input-focus-border: var(--dm-primary);
2193
+ --dm-input-disabled-bg: #1e293b;
2194
+
2195
+ /* Buttons */
2196
+ --dm-btn-text: var(--dm-text);
2197
+ --dm-btn-bg: var(--dm-surface);
2198
+ --dm-btn-border: var(--dm-border-dark);
2199
+
2200
+ /* Tables */
2201
+ --dm-table-bg: transparent;
2202
+ --dm-table-border: var(--dm-border);
2203
+ --dm-table-header-bg: var(--dm-background-alt);
2204
+ --dm-table-header-text: var(--dm-text);
2205
+ --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
2206
+ --dm-table-hover-bg: var(--dm-hover-bg);
2207
+ --dm-table-selected-bg: var(--dm-selected-bg);
2208
+
2209
+ /* Modals */
2210
+ --dm-modal-bg: var(--dm-surface);
2211
+ --dm-modal-border: var(--dm-border);
2212
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
2213
+ --dm-modal-shadow: var(--dm-shadow-xl);
2214
+
2215
+ /* Dropdowns */
2216
+ --dm-dropdown-bg: var(--dm-surface-raised);
2217
+ --dm-dropdown-border: var(--dm-border);
2218
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
2219
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
2220
+ --dm-dropdown-item-active: var(--dm-selected-bg);
2221
+
2222
+ /* Tooltips */
2223
+ --dm-tooltip-bg: #0f172a;
2224
+ --dm-tooltip-text: #ffffff;
2225
+
2226
+ /* Toasts */
2227
+ --dm-toast-bg: var(--dm-surface);
2228
+ --dm-toast-border: var(--dm-border);
2229
+ --dm-toast-shadow: var(--dm-shadow-lg);
2230
+
2231
+ /* Navbar */
2232
+ --dm-navbar-bg: var(--dm-surface);
2233
+ --dm-navbar-text: var(--dm-text);
2234
+ --dm-navbar-border: var(--dm-border);
2235
+
2236
+ /* Sidebar */
2237
+ --dm-sidebar-bg: var(--dm-surface);
2238
+ --dm-sidebar-text: var(--dm-text);
2239
+ --dm-sidebar-border: var(--dm-border);
2240
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
2241
+ --dm-sidebar-item-active: var(--dm-selected-bg);
2242
+
2243
+ /* Tabs */
2244
+ --dm-tab-border: var(--dm-border);
2245
+ --dm-tab-hover-bg: var(--dm-hover-bg);
2246
+
2247
+ /* Accordion */
2248
+ --dm-accordion-bg: var(--dm-surface);
2249
+ --dm-accordion-border: var(--dm-border);
2250
+ --dm-accordion-header-bg: var(--dm-background-alt);
2251
+ --dm-accordion-header-hover: var(--dm-hover-bg);
2252
+
2253
+ /* Badges */
2254
+ --dm-badge-bg: var(--dm-secondary);
2255
+ --dm-badge-text: #0f172a;
2256
+
2257
+ /* Progress */
2258
+ --dm-progress-bg: #334155;
2259
+
2260
+ /* Scrollbar */
2261
+ --dm-scrollbar-track: #1e293b;
2262
+ --dm-scrollbar-thumb: #475569;
2263
+ --dm-scrollbar-thumb-hover: #64748b;
2264
+
2265
+ /* Code */
2266
+ --dm-code-bg: #0f172a;
2267
+ --dm-code-text: #fca5a5;
2268
+ --dm-code-border: var(--dm-border);
2269
+
2270
+ /* ================================================
2271
+ SHADOWS - Subtle for dark mode
2272
+ ================================================ */
2273
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2274
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2275
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2276
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2277
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
2278
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
2279
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
2280
+
2281
+ }
2282
+ /**
2283
+ * Domma Silver Light Theme
2284
+ * Light gray/silver colour palette
2285
+ * Light mode variant
2286
+ */
2287
+
2288
+ .dm-theme-silver-light {
2289
+ color-scheme: light;
2290
+
2291
+ /* ================================================
2292
+ FOUNDATIONAL COLORS - Light Mode Base
2293
+ ================================================ */
2294
+
2295
+ /* Backgrounds - Light/white backgrounds */
2296
+ --dm-background: #ffffff;
2297
+ --dm-background-alt: #f8f9fa;
2298
+ --dm-surface: #ffffff;
2299
+ --dm-surface-raised: #f1f3f5;
2300
+ --dm-surface-overlay: #f8f9fa;
2301
+
2302
+ /* Text - Dark colors for readability on light */
2303
+ --dm-text: #212529;
2304
+ --dm-text-secondary: #495057;
2305
+ --dm-text-muted: #6c757d;
2306
+ --dm-text-disabled: #adb5bd;
2307
+ --dm-text-inverse: #ffffff;
2308
+
2309
+ /* Borders - Subtle on light backgrounds */
2310
+ --dm-border: #dee2e6;
2311
+ --dm-border-light: #e9ecef;
2312
+ --dm-border-dark: #ced4da;
2313
+
2314
+
2315
+ --dm-primary: #a0aec0;
2316
+ --dm-primary-hover: #b0bac9;
2317
+ --dm-primary-active: #c0c6d2;
2318
+ --dm-primary-light: rgba(160, 174, 192, 0.15);
2319
+ --dm-primary-dark: #718096;
2320
+
2321
+ --dm-secondary: #cbd5e0;
2322
+ --dm-secondary-hover: #d5dce6;
2323
+ --dm-secondary-active: #dfe3ec;
2324
+ --dm-secondary-light: rgba(203, 213, 224, 0.15);
2325
+ --dm-secondary-dark: #a0aec0;
2326
+
2327
+ --dm-success: #9ae6b4;
2328
+ --dm-success-light: rgba(154, 230, 180, 0.15);
2329
+
2330
+ --dm-info: #90cdf4;
2331
+ --dm-info-light: rgba(144, 205, 244, 0.15);
2332
+
2333
+ --dm-focus-ring: 0 0 0 3px rgba(160, 174, 192, 0.35);
2334
+ --dm-selected-bg: rgba(160, 174, 192, 0.2);
2335
+ --dm-tab-active-border: #a0aec0;
2336
+ --dm-tab-active-text: #a0aec0;
2337
+ --dm-progress-bar: #a0aec0;
2338
+
2339
+ /* Danger - Bright red (standard dark mode) */
2340
+ --dm-danger: #ef4444; /* red-500 */
2341
+ --dm-danger-hover: #f87171; /* red-400 */
2342
+ --dm-danger-active: #fca5a5; /* red-300 */
2343
+ --dm-danger-light: rgba(248, 113, 113, 0.15);
2344
+ --dm-danger-dark: #dc2626; /* red-600 */
2345
+
2346
+ /* ================================================
2347
+ INTERACTIVE STATES
2348
+ ================================================ */
2349
+ --dm-hover-bg: rgba(0, 0, 0, 0.04);
2350
+ --dm-active-bg: rgba(0, 0, 0, 0.08);
2351
+ --dm-disabled-opacity: 0.65;
2352
+
2353
+ /* ================================================
2354
+ COMPONENT-SPECIFIC COLORS
2355
+ ================================================ */
2356
+
2357
+ /* Cards */
2358
+ --dm-card-bg: var(--dm-surface);
2359
+ --dm-card-border: var(--dm-border);
2360
+ --dm-card-shadow: var(--dm-shadow-sm);
2361
+
2362
+ /* Inputs */
2363
+ --dm-input-bg: var(--dm-surface);
2364
+ --dm-input-border: var(--dm-border-dark);
2365
+ --dm-input-text: var(--dm-text);
2366
+ --dm-input-placeholder: var(--dm-text-muted);
2367
+ --dm-input-focus-border: var(--dm-primary);
2368
+ --dm-input-disabled-bg: #e9ecef;
2369
+
2370
+ /* Buttons */
2371
+ --dm-btn-text: var(--dm-text);
2372
+ --dm-btn-bg: var(--dm-surface);
2373
+ --dm-btn-border: var(--dm-border-dark);
2374
+
2375
+ /* Tables */
2376
+ --dm-table-bg: transparent;
2377
+ --dm-table-border: var(--dm-border);
2378
+ --dm-table-header-bg: var(--dm-background-alt);
2379
+ --dm-table-header-text: var(--dm-text);
2380
+ --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
2381
+ --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
2382
+ --dm-table-selected-bg: var(--dm-selected-bg);
2383
+
2384
+ /* Modals */
2385
+ --dm-modal-bg: var(--dm-surface);
2386
+ --dm-modal-border: var(--dm-border);
2387
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
2388
+ --dm-modal-shadow: var(--dm-shadow-xl);
2389
+
2390
+ /* Dropdowns */
2391
+ --dm-dropdown-bg: var(--dm-surface);
2392
+ --dm-dropdown-border: var(--dm-border);
2393
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
2394
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
2395
+ --dm-dropdown-item-active: var(--dm-selected-bg);
2396
+
2397
+ /* Tooltips */
2398
+ --dm-tooltip-bg: #212529;
2399
+ --dm-tooltip-text: #ffffff;
2400
+
2401
+ /* Toasts */
2402
+ --dm-toast-bg: var(--dm-surface);
2403
+ --dm-toast-border: var(--dm-border);
2404
+ --dm-toast-shadow: var(--dm-shadow-lg);
2405
+
2406
+ /* Navbar */
2407
+ --dm-navbar-bg: var(--dm-surface);
2408
+ --dm-navbar-text: var(--dm-text);
2409
+ --dm-navbar-border: var(--dm-border);
2410
+
2411
+ /* Sidebar */
2412
+ --dm-sidebar-bg: var(--dm-surface);
2413
+ --dm-sidebar-text: var(--dm-text);
2414
+ --dm-sidebar-border: var(--dm-border);
2415
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
2416
+ --dm-sidebar-item-active: var(--dm-selected-bg);
2417
+
2418
+ /* Tabs */
2419
+ --dm-tab-border: var(--dm-border);
2420
+ --dm-tab-hover-bg: var(--dm-hover-bg);
2421
+
2422
+ /* Accordion */
2423
+ --dm-accordion-bg: var(--dm-surface);
2424
+ --dm-accordion-border: var(--dm-border);
2425
+ --dm-accordion-header-bg: var(--dm-background-alt);
2426
+ --dm-accordion-header-hover: var(--dm-hover-bg);
2427
+
2428
+ /* Badges */
2429
+ --dm-badge-bg: var(--dm-secondary);
2430
+ --dm-badge-text: #ffffff;
2431
+
2432
+ /* Progress */
2433
+ --dm-progress-bg: #e9ecef;
2434
+
2435
+ /* Scrollbar */
2436
+ --dm-scrollbar-track: #f1f1f1;
2437
+ --dm-scrollbar-thumb: #c1c1c1;
2438
+ --dm-scrollbar-thumb-hover: #a8a8a8;
2439
+
2440
+ /* Code */
2441
+ --dm-code-bg: #f8f9fa;
2442
+ --dm-code-text: #e83e8c;
2443
+ --dm-code-border: var(--dm-border);
2444
+
2445
+ /* ================================================
2446
+ SHADOWS - Standard for light mode
2447
+ ================================================ */
2448
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2449
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2450
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2451
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2452
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
2453
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
2454
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
2455
+
2456
+ /* ================================================
2457
+ ELEVATION / DEPTH
2458
+ ================================================ */
2459
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
2460
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
2461
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
2462
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
2463
+
2464
+ }
2465
+ /**
2466
+ * Domma Silver Dark Theme
2467
+ * Light gray/silver colour palette
2468
+ * Dark mode variant
2469
+ */
2470
+
2471
+ .dm-theme-silver-dark {
2472
+ color-scheme: dark;
2473
+
2474
+ /* ================================================
2475
+ FOUNDATIONAL COLORS - Dark Mode Base
2476
+ ================================================ */
2477
+
2478
+ /* Backgrounds - Dark slate/charcoal backgrounds */
2479
+ --dm-background: #0f172a; /* slate-900 */
2480
+ --dm-background-alt: #1e293b; /* slate-800 */
2481
+ --dm-surface: #1e293b; /* slate-800 */
2482
+ --dm-surface-raised: #334155; /* slate-700 */
2483
+ --dm-surface-overlay: #334155; /* slate-700 */
2484
+
2485
+ /* Text - Light colors for readability on dark */
2486
+ --dm-text: #e2e8f0; /* slate-200 */
2487
+ --dm-text-secondary: #94a3b8; /* slate-400 */
2488
+ --dm-text-muted: #64748b; /* slate-500 */
2489
+ --dm-text-disabled: #475569; /* slate-600 */
2490
+ --dm-text-inverse: #0f172a; /* slate-900 */
2491
+
2492
+ /* Borders - Subtle on dark backgrounds */
2493
+ --dm-border: #334155; /* slate-700 */
2494
+ --dm-border-light: #1e293b; /* slate-800 */
2495
+ --dm-border-dark: #475569; /* slate-600 */
2496
+
2497
+
2498
+ /* ================================================
2499
+ PRIMARY COLOURS - Silver Gray
2500
+ ================================================ */
2501
+ --dm-primary: #708090;
2502
+ --dm-primary-hover: #84929f;
2503
+ --dm-primary-active: #98a4ae;
2504
+ --dm-primary-light: #f0f2f4;
2505
+ --dm-primary-dark: #4a5568;
2506
+
2507
+ /* Focus ring with silver colour */
2508
+ --dm-focus-ring: 0 0 0 3px rgba(112, 128, 144, 0.3);
2509
+ --dm-border-focus: #708090;
2510
+
2511
+ /* ================================================
2512
+ SECONDARY COLOURS - Cool Gray
2513
+ ================================================ */
2514
+ --dm-secondary: #a0aec0;
2515
+ --dm-secondary-hover: #b0bac9;
2516
+ --dm-secondary-active: #c0c6d2;
2517
+ --dm-secondary-light: #f7f8fa;
2518
+ --dm-secondary-dark: #718096;
2519
+
2520
+ /* ================================================
2521
+ STATUS COLOURS - Neutral-tinted
2522
+ ================================================ */
2523
+ --dm-success: #68d391;
2524
+ --dm-success-hover: #7cdaa0;
2525
+ --dm-success-active: #90e1af;
2526
+ --dm-success-light: #f0faf4;
2527
+ --dm-success-dark: #48bb78;
2528
+
2529
+ --dm-info: #63b3ed;
2530
+ --dm-info-hover: #79bff0;
2531
+ --dm-info-active: #8fcbf3;
2532
+ --dm-info-light: #ebf8ff;
2533
+ --dm-info-dark: #4299e1;
2534
+
2535
+ /* ================================================
2536
+ ACCENT COLOURS
2537
+ ================================================ */
2538
+ --dm-accent-1: #e2e8f0; /* Light slate */
2539
+ --dm-accent-2: #cbd5e0; /* Cool gray */
2540
+ --dm-accent-3: #a0aec0; /* Gray blue */
2541
+ --dm-accent-4: #4a5568; /* Dark slate */
2542
+
2543
+ /* ================================================
2544
+ SELECTION
2545
+ ================================================ */
2546
+ --dm-selected-bg: rgba(112, 128, 144, 0.12);
2547
+ --dm-tab-active-border: #708090;
2548
+ --dm-tab-active-text: #4a5568;
2549
+ --dm-progress-bar: #708090;
2550
+
2551
+ /* Danger - Standard red */
2552
+ --dm-danger: #dc3545;
2553
+ --dm-danger-hover: #bb2d3b;
2554
+ --dm-danger-active: #b02a37;
2555
+ --dm-danger-light: #f8d7da;
2556
+ --dm-danger-dark: #842029;
2557
+
2558
+ /* ================================================
2559
+ INTERACTIVE STATES
2560
+ ================================================ */
2561
+ --dm-hover-bg: rgba(255, 255, 255, 0.07);
2562
+ --dm-active-bg: rgba(255, 255, 255, 0.1);
2563
+ --dm-disabled-opacity: 0.4;
2564
+
2565
+ /* ================================================
2566
+ COMPONENT-SPECIFIC COLORS
2567
+ ================================================ */
2568
+
2569
+ /* Cards */
2570
+ --dm-card-bg: var(--dm-surface);
2571
+ --dm-card-border: var(--dm-border);
2572
+ --dm-card-shadow: var(--dm-shadow-md);
2573
+
2574
+ /* Inputs */
2575
+ --dm-input-bg: var(--dm-surface);
2576
+ --dm-input-border: var(--dm-border-dark);
2577
+ --dm-input-text: var(--dm-text);
2578
+ --dm-input-placeholder: var(--dm-text-muted);
2579
+ --dm-input-focus-border: var(--dm-primary);
2580
+ --dm-input-disabled-bg: #1e293b;
2581
+
2582
+ /* Buttons */
2583
+ --dm-btn-text: var(--dm-text);
2584
+ --dm-btn-bg: var(--dm-surface);
2585
+ --dm-btn-border: var(--dm-border-dark);
2586
+
2587
+ /* Tables */
2588
+ --dm-table-bg: transparent;
2589
+ --dm-table-border: var(--dm-border);
2590
+ --dm-table-header-bg: var(--dm-background-alt);
2591
+ --dm-table-header-text: var(--dm-text);
2592
+ --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
2593
+ --dm-table-hover-bg: var(--dm-hover-bg);
2594
+ --dm-table-selected-bg: var(--dm-selected-bg);
2595
+
2596
+ /* Modals */
2597
+ --dm-modal-bg: var(--dm-surface);
2598
+ --dm-modal-border: var(--dm-border);
2599
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
2600
+ --dm-modal-shadow: var(--dm-shadow-xl);
2601
+
2602
+ /* Dropdowns */
2603
+ --dm-dropdown-bg: var(--dm-surface-raised);
2604
+ --dm-dropdown-border: var(--dm-border);
2605
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
2606
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
2607
+ --dm-dropdown-item-active: var(--dm-selected-bg);
2608
+
2609
+ /* Tooltips */
2610
+ --dm-tooltip-bg: #0f172a;
2611
+ --dm-tooltip-text: #ffffff;
2612
+
2613
+ /* Toasts */
2614
+ --dm-toast-bg: var(--dm-surface);
2615
+ --dm-toast-border: var(--dm-border);
2616
+ --dm-toast-shadow: var(--dm-shadow-lg);
2617
+
2618
+ /* Navbar */
2619
+ --dm-navbar-bg: var(--dm-surface);
2620
+ --dm-navbar-text: var(--dm-text);
2621
+ --dm-navbar-border: var(--dm-border);
2622
+
2623
+ /* Sidebar */
2624
+ --dm-sidebar-bg: var(--dm-surface);
2625
+ --dm-sidebar-text: var(--dm-text);
2626
+ --dm-sidebar-border: var(--dm-border);
2627
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
2628
+ --dm-sidebar-item-active: var(--dm-selected-bg);
2629
+
2630
+ /* Tabs */
2631
+ --dm-tab-border: var(--dm-border);
2632
+ --dm-tab-hover-bg: var(--dm-hover-bg);
2633
+
2634
+ /* Accordion */
2635
+ --dm-accordion-bg: var(--dm-surface);
2636
+ --dm-accordion-border: var(--dm-border);
2637
+ --dm-accordion-header-bg: var(--dm-background-alt);
2638
+ --dm-accordion-header-hover: var(--dm-hover-bg);
2639
+
2640
+ /* Badges */
2641
+ --dm-badge-bg: var(--dm-secondary);
2642
+ --dm-badge-text: #0f172a;
2643
+
2644
+ /* Progress */
2645
+ --dm-progress-bg: #334155;
2646
+
2647
+ /* Scrollbar */
2648
+ --dm-scrollbar-track: #1e293b;
2649
+ --dm-scrollbar-thumb: #475569;
2650
+ --dm-scrollbar-thumb-hover: #64748b;
2651
+
2652
+ /* Code */
2653
+ --dm-code-bg: #0f172a;
2654
+ --dm-code-text: #fca5a5;
2655
+ --dm-code-border: var(--dm-border);
2656
+
2657
+ /* ================================================
2658
+ SHADOWS - Subtle for dark mode
2659
+ ================================================ */
2660
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2661
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2662
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2663
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2664
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
2665
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
2666
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
2667
+
2668
+ }
2669
+ /**
2670
+ * Domma Charcoal Light Theme
2671
+ * Dark gray/charcoal colour palette
2672
+ * Light mode variant
2673
+ */
2674
+
2675
+ .dm-theme-charcoal-light {
2676
+ color-scheme: light;
2677
+
2678
+ /* ================================================
2679
+ FOUNDATIONAL COLORS - Light Mode Base
2680
+ ================================================ */
2681
+
2682
+ /* Backgrounds - Light/white backgrounds */
2683
+ --dm-background: #ffffff;
2684
+ --dm-background-alt: #f8f9fa;
2685
+ --dm-surface: #ffffff;
2686
+ --dm-surface-raised: #f1f3f5;
2687
+ --dm-surface-overlay: #f8f9fa;
2688
+
2689
+ /* Text - Dark colors for readability on light */
2690
+ --dm-text: #212529;
2691
+ --dm-text-secondary: #495057;
2692
+ --dm-text-muted: #6c757d;
2693
+ --dm-text-disabled: #adb5bd;
2694
+ --dm-text-inverse: #ffffff;
2695
+
2696
+ /* Borders - Subtle on light backgrounds */
2697
+ --dm-border: #dee2e6;
2698
+ --dm-border-light: #e9ecef;
2699
+ --dm-border-dark: #ced4da;
2700
+
2701
+
2702
+ --dm-primary: #78909c;
2703
+ --dm-primary-hover: #8a9fa9;
2704
+ --dm-primary-active: #9caeb6;
2705
+ --dm-primary-light: rgba(120, 144, 156, 0.15);
2706
+ --dm-primary-dark: #607d8b;
2707
+
2708
+ --dm-secondary: #90a4ae;
2709
+ --dm-secondary-hover: #a1b3bb;
2710
+ --dm-secondary-active: #b2c2c8;
2711
+ --dm-secondary-light: rgba(144, 164, 174, 0.15);
2712
+ --dm-secondary-dark: #78909c;
2713
+
2714
+ --dm-success: #81c784;
2715
+ --dm-success-light: rgba(129, 199, 132, 0.15);
2716
+
2717
+ --dm-info: #64b5f6;
2718
+ --dm-info-light: rgba(100, 181, 246, 0.15);
2719
+
2720
+ --dm-focus-ring: 0 0 0 3px rgba(120, 144, 156, 0.35);
2721
+ --dm-selected-bg: rgba(120, 144, 156, 0.2);
2722
+ --dm-tab-active-border: #78909c;
2723
+ --dm-tab-active-text: #78909c;
2724
+ --dm-progress-bar: #78909c;
2725
+
2726
+ /* Danger - Bright red (standard dark mode) */
2727
+ --dm-danger: #ef4444; /* red-500 */
2728
+ --dm-danger-hover: #f87171; /* red-400 */
2729
+ --dm-danger-active: #fca5a5; /* red-300 */
2730
+ --dm-danger-light: rgba(248, 113, 113, 0.15);
2731
+ --dm-danger-dark: #dc2626; /* red-600 */
2732
+
2733
+ /* ================================================
2734
+ INTERACTIVE STATES
2735
+ ================================================ */
2736
+ --dm-hover-bg: rgba(0, 0, 0, 0.04);
2737
+ --dm-active-bg: rgba(0, 0, 0, 0.08);
2738
+ --dm-disabled-opacity: 0.65;
2739
+
2740
+ /* ================================================
2741
+ COMPONENT-SPECIFIC COLORS
2742
+ ================================================ */
2743
+
2744
+ /* Cards */
2745
+ --dm-card-bg: var(--dm-surface);
2746
+ --dm-card-border: var(--dm-border);
2747
+ --dm-card-shadow: var(--dm-shadow-sm);
2748
+
2749
+ /* Inputs */
2750
+ --dm-input-bg: var(--dm-surface);
2751
+ --dm-input-border: var(--dm-border-dark);
2752
+ --dm-input-text: var(--dm-text);
2753
+ --dm-input-placeholder: var(--dm-text-muted);
2754
+ --dm-input-focus-border: var(--dm-primary);
2755
+ --dm-input-disabled-bg: #e9ecef;
2756
+
2757
+ /* Buttons */
2758
+ --dm-btn-text: var(--dm-text);
2759
+ --dm-btn-bg: var(--dm-surface);
2760
+ --dm-btn-border: var(--dm-border-dark);
2761
+
2762
+ /* Tables */
2763
+ --dm-table-bg: transparent;
2764
+ --dm-table-border: var(--dm-border);
2765
+ --dm-table-header-bg: var(--dm-background-alt);
2766
+ --dm-table-header-text: var(--dm-text);
2767
+ --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
2768
+ --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
2769
+ --dm-table-selected-bg: var(--dm-selected-bg);
2770
+
2771
+ /* Modals */
2772
+ --dm-modal-bg: var(--dm-surface);
2773
+ --dm-modal-border: var(--dm-border);
2774
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
2775
+ --dm-modal-shadow: var(--dm-shadow-xl);
2776
+
2777
+ /* Dropdowns */
2778
+ --dm-dropdown-bg: var(--dm-surface);
2779
+ --dm-dropdown-border: var(--dm-border);
2780
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
2781
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
2782
+ --dm-dropdown-item-active: var(--dm-selected-bg);
2783
+
2784
+ /* Tooltips */
2785
+ --dm-tooltip-bg: #212529;
2786
+ --dm-tooltip-text: #ffffff;
2787
+
2788
+ /* Toasts */
2789
+ --dm-toast-bg: var(--dm-surface);
2790
+ --dm-toast-border: var(--dm-border);
2791
+ --dm-toast-shadow: var(--dm-shadow-lg);
2792
+
2793
+ /* Navbar */
2794
+ --dm-navbar-bg: var(--dm-surface);
2795
+ --dm-navbar-text: var(--dm-text);
2796
+ --dm-navbar-border: var(--dm-border);
2797
+
2798
+ /* Sidebar */
2799
+ --dm-sidebar-bg: var(--dm-surface);
2800
+ --dm-sidebar-text: var(--dm-text);
2801
+ --dm-sidebar-border: var(--dm-border);
2802
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
2803
+ --dm-sidebar-item-active: var(--dm-selected-bg);
2804
+
2805
+ /* Tabs */
2806
+ --dm-tab-border: var(--dm-border);
2807
+ --dm-tab-hover-bg: var(--dm-hover-bg);
2808
+
2809
+ /* Accordion */
2810
+ --dm-accordion-bg: var(--dm-surface);
2811
+ --dm-accordion-border: var(--dm-border);
2812
+ --dm-accordion-header-bg: var(--dm-background-alt);
2813
+ --dm-accordion-header-hover: var(--dm-hover-bg);
2814
+
2815
+ /* Badges */
2816
+ --dm-badge-bg: var(--dm-secondary);
2817
+ --dm-badge-text: #ffffff;
2818
+
2819
+ /* Progress */
2820
+ --dm-progress-bg: #e9ecef;
2821
+
2822
+ /* Scrollbar */
2823
+ --dm-scrollbar-track: #f1f1f1;
2824
+ --dm-scrollbar-thumb: #c1c1c1;
2825
+ --dm-scrollbar-thumb-hover: #a8a8a8;
2826
+
2827
+ /* Code */
2828
+ --dm-code-bg: #f8f9fa;
2829
+ --dm-code-text: #e83e8c;
2830
+ --dm-code-border: var(--dm-border);
2831
+
2832
+ /* ================================================
2833
+ SHADOWS - Standard for light mode
2834
+ ================================================ */
2835
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2836
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2837
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2838
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2839
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
2840
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
2841
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
2842
+
2843
+ /* ================================================
2844
+ ELEVATION / DEPTH
2845
+ ================================================ */
2846
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
2847
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
2848
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
2849
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
2850
+
2851
+ }
2852
+ /**
2853
+ * Domma Charcoal Dark Theme
2854
+ * Dark gray/charcoal colour palette
2855
+ * Dark mode variant - Default theme for Domma v0.5.0a
2856
+ */
2857
+
2858
+ .dm-theme-charcoal-dark {
2859
+ color-scheme: dark;
2860
+
2861
+ /* ================================================
2862
+ FOUNDATIONAL COLORS - Dark Mode Base
2863
+ ================================================ */
2864
+
2865
+ /* Backgrounds - Dark slate/charcoal backgrounds */
2866
+ --dm-background: #0f172a; /* slate-900 */
2867
+ --dm-background-alt: #1e293b; /* slate-800 */
2868
+ --dm-surface: #1e293b; /* slate-800 */
2869
+ --dm-surface-raised: #334155; /* slate-700 */
2870
+ --dm-surface-overlay: #334155; /* slate-700 */
2871
+
2872
+ /* Text - Light colors for readability on dark */
2873
+ --dm-text: #e2e8f0; /* slate-200 */
2874
+ --dm-text-secondary: #94a3b8; /* slate-400 */
2875
+ --dm-text-muted: #64748b; /* slate-500 */
2876
+ --dm-text-disabled: #475569; /* slate-600 */
2877
+ --dm-text-inverse: #0f172a; /* slate-900 */
2878
+
2879
+ /* Borders - Subtle on dark backgrounds */
2880
+ --dm-border: #334155; /* slate-700 */
2881
+ --dm-border-light: #1e293b; /* slate-800 */
2882
+ --dm-border-dark: #475569; /* slate-600 */
2883
+
2884
+
2885
+ /* ================================================
2886
+ PRIMARY COLOURS - Charcoal Gray
2887
+ ================================================ */
2888
+ --dm-primary: #36454f;
2889
+ --dm-primary-hover: #4a5d69;
2890
+ --dm-primary-active: #5e7583;
2891
+ --dm-primary-light: #e8ebed;
2892
+ --dm-primary-dark: #1c2428;
2893
+
2894
+ /* Focus ring with charcoal colour */
2895
+ --dm-focus-ring: 0 0 0 3px rgba(54, 69, 79, 0.3);
2896
+ --dm-border-focus: #36454f;
2897
+
2898
+ /* ================================================
2899
+ SECONDARY COLOURS - Slate
2900
+ ================================================ */
2901
+ --dm-secondary: #5f6f7a;
2902
+ --dm-secondary-hover: #738290;
2903
+ --dm-secondary-active: #8795a0;
2904
+ --dm-secondary-light: #f0f2f3;
2905
+ --dm-secondary-dark: #3d4a52;
2906
+
2907
+ /* ================================================
2908
+ STATUS COLOURS - Neutral-tinted
2909
+ ================================================ */
2910
+ --dm-success: #4caf50;
2911
+ --dm-success-hover: #61b965;
2912
+ --dm-success-active: #76c37a;
2913
+ --dm-success-light: #e8f5e9;
2914
+ --dm-success-dark: #388e3c;
2915
+
2916
+ --dm-info: #2196f3;
2917
+ --dm-info-hover: #42a5f5;
2918
+ --dm-info-active: #64b5f6;
2919
+ --dm-info-light: #e3f2fd;
2920
+ --dm-info-dark: #1976d2;
2921
+
2922
+ /* ================================================
2923
+ ACCENT COLOURS
2924
+ ================================================ */
2925
+ --dm-accent-1: #78909c; /* Blue gray */
2926
+ --dm-accent-2: #607d8b; /* Gray blue */
2927
+ --dm-accent-3: #455a64; /* Dark blue gray */
2928
+ --dm-accent-4: #263238; /* Charcoal */
2929
+
2930
+ /* ================================================
2931
+ SELECTION
2932
+ ================================================ */
2933
+ --dm-selected-bg: rgba(54, 69, 79, 0.12);
2934
+ --dm-tab-active-border: #36454f;
2935
+ --dm-tab-active-text: #1c2428;
2936
+ --dm-progress-bar: #36454f;
2937
+
2938
+ /* Danger - Standard red */
2939
+ --dm-danger: #dc3545;
2940
+ --dm-danger-hover: #bb2d3b;
2941
+ --dm-danger-active: #b02a37;
2942
+ --dm-danger-light: #f8d7da;
2943
+ --dm-danger-dark: #842029;
2944
+
2945
+ /* ================================================
2946
+ INTERACTIVE STATES
2947
+ ================================================ */
2948
+ --dm-hover-bg: rgba(255, 255, 255, 0.07);
2949
+ --dm-active-bg: rgba(255, 255, 255, 0.1);
2950
+ --dm-disabled-opacity: 0.4;
2951
+
2952
+ /* ================================================
2953
+ COMPONENT-SPECIFIC COLORS
2954
+ ================================================ */
2955
+
2956
+ /* Cards */
2957
+ --dm-card-bg: var(--dm-surface);
2958
+ --dm-card-border: var(--dm-border);
2959
+ --dm-card-shadow: var(--dm-shadow-md);
2960
+
2961
+ /* Inputs */
2962
+ --dm-input-bg: var(--dm-surface);
2963
+ --dm-input-border: var(--dm-border-dark);
2964
+ --dm-input-text: var(--dm-text);
2965
+ --dm-input-placeholder: var(--dm-text-muted);
2966
+ --dm-input-focus-border: var(--dm-primary);
2967
+ --dm-input-disabled-bg: #1e293b;
2968
+
2969
+ /* Buttons */
2970
+ --dm-btn-text: var(--dm-text);
2971
+ --dm-btn-bg: var(--dm-surface);
2972
+ --dm-btn-border: var(--dm-border-dark);
2973
+
2974
+ /* Tables */
2975
+ --dm-table-bg: transparent;
2976
+ --dm-table-border: var(--dm-border);
2977
+ --dm-table-header-bg: var(--dm-background-alt);
2978
+ --dm-table-header-text: var(--dm-text);
2979
+ --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
2980
+ --dm-table-hover-bg: var(--dm-hover-bg);
2981
+ --dm-table-selected-bg: var(--dm-selected-bg);
2982
+
2983
+ /* Modals */
2984
+ --dm-modal-bg: var(--dm-surface);
2985
+ --dm-modal-border: var(--dm-border);
2986
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
2987
+ --dm-modal-shadow: var(--dm-shadow-xl);
2988
+
2989
+ /* Dropdowns */
2990
+ --dm-dropdown-bg: var(--dm-surface-raised);
2991
+ --dm-dropdown-border: var(--dm-border);
2992
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
2993
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
2994
+ --dm-dropdown-item-active: var(--dm-selected-bg);
2995
+
2996
+ /* Tooltips */
2997
+ --dm-tooltip-bg: #0f172a;
2998
+ --dm-tooltip-text: #ffffff;
2999
+
3000
+ /* Toasts */
3001
+ --dm-toast-bg: var(--dm-surface);
3002
+ --dm-toast-border: var(--dm-border);
3003
+ --dm-toast-shadow: var(--dm-shadow-lg);
3004
+
3005
+ /* Navbar */
3006
+ --dm-navbar-bg: var(--dm-surface);
3007
+ --dm-navbar-text: var(--dm-text);
3008
+ --dm-navbar-border: var(--dm-border);
3009
+
3010
+ /* Sidebar */
3011
+ --dm-sidebar-bg: var(--dm-surface);
3012
+ --dm-sidebar-text: var(--dm-text);
3013
+ --dm-sidebar-border: var(--dm-border);
3014
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
3015
+ --dm-sidebar-item-active: var(--dm-selected-bg);
3016
+
3017
+ /* Tabs */
3018
+ --dm-tab-border: var(--dm-border);
3019
+ --dm-tab-hover-bg: var(--dm-hover-bg);
3020
+
3021
+ /* Accordion */
3022
+ --dm-accordion-bg: var(--dm-surface);
3023
+ --dm-accordion-border: var(--dm-border);
3024
+ --dm-accordion-header-bg: var(--dm-background-alt);
3025
+ --dm-accordion-header-hover: var(--dm-hover-bg);
3026
+
3027
+ /* Badges */
3028
+ --dm-badge-bg: var(--dm-secondary);
3029
+ --dm-badge-text: #0f172a;
3030
+
3031
+ /* Progress */
3032
+ --dm-progress-bg: #334155;
3033
+
3034
+ /* Scrollbar */
3035
+ --dm-scrollbar-track: #1e293b;
3036
+ --dm-scrollbar-thumb: #475569;
3037
+ --dm-scrollbar-thumb-hover: #64748b;
3038
+
3039
+ /* Code */
3040
+ --dm-code-bg: #0f172a;
3041
+ --dm-code-text: #fca5a5;
3042
+ --dm-code-border: var(--dm-border);
3043
+
3044
+ /* ================================================
3045
+ SHADOWS - Subtle for dark mode
3046
+ ================================================ */
3047
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
3048
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
3049
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
3050
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
3051
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
3052
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
3053
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
3054
+
3055
+ }
3056
+ /**
3057
+ * Domma Christmas Light Theme
3058
+ * Traditional festive colour palette: red, green, gold
3059
+ * Light mode variant
3060
+ */
3061
+
3062
+ .dm-theme-christmas-light {
3063
+ color-scheme: light;
3064
+
3065
+ /* ================================================
3066
+ FOUNDATIONAL COLORS - Light Mode Base
3067
+ ================================================ */
3068
+
3069
+ /* Backgrounds - Light/white backgrounds */
3070
+ --dm-background: #ffffff;
3071
+ --dm-background-alt: #f8f9fa;
3072
+ --dm-surface: #ffffff;
3073
+ --dm-surface-raised: #f1f3f5;
3074
+ --dm-surface-overlay: #f8f9fa;
3075
+
3076
+ /* Text - Dark colors for readability on light */
3077
+ --dm-text: #212529;
3078
+ --dm-text-secondary: #495057;
3079
+ --dm-text-muted: #6c757d;
3080
+ --dm-text-disabled: #adb5bd;
3081
+ --dm-text-inverse: #ffffff;
3082
+
3083
+ /* Borders - Subtle on light backgrounds */
3084
+ --dm-border: #dee2e6;
3085
+ --dm-border-light: #e9ecef;
3086
+ --dm-border-dark: #ced4da;
3087
+
3088
+
3089
+ --dm-primary: #ef5566;
3090
+ --dm-primary-hover: #f16d7a;
3091
+ --dm-primary-active: #f3858e;
3092
+ --dm-primary-light: rgba(239, 85, 102, 0.15);
3093
+ --dm-primary-dark: #e43a56;
3094
+
3095
+ --dm-secondary: #5cb85c;
3096
+ --dm-secondary-hover: #6dc46d;
3097
+ --dm-secondary-active: #7ed07e;
3098
+ --dm-secondary-light: rgba(92, 184, 92, 0.15);
3099
+ --dm-secondary-dark: #4cae4c;
3100
+
3101
+ --dm-success: #6dd66d;
3102
+ --dm-success-light: rgba(109, 214, 109, 0.15);
3103
+
3104
+ --dm-info: #a8d5e5;
3105
+ --dm-info-light: rgba(168, 213, 229, 0.15);
3106
+
3107
+ --dm-warning: #f0d264;
3108
+ --dm-warning-light: rgba(240, 210, 100, 0.15);
3109
+ --dm-warning-text: #f0d264;
3110
+
3111
+ --dm-danger: #ef6b6b;
3112
+ --dm-danger-light: rgba(239, 107, 107, 0.15);
3113
+
3114
+ /* Gold accents pop nicely on dark */
3115
+ --dm-accent-1: #f0d264;
3116
+ --dm-accent-2: #ef6b6b;
3117
+ --dm-accent-3: #6dd66d;
3118
+ --dm-accent-4: #e0e0e0;
3119
+
3120
+ --dm-focus-ring: 0 0 0 3px rgba(239, 85, 102, 0.35);
3121
+ --dm-selected-bg: rgba(239, 85, 102, 0.2);
3122
+ --dm-tab-active-border: #ef5566;
3123
+ --dm-tab-active-text: #ef5566;
3124
+ --dm-progress-bar: #ef5566;
3125
+
3126
+ /* Danger - Bright red (standard dark mode) */
3127
+ --dm-danger: #ef4444; /* red-500 */
3128
+ --dm-danger-hover: #f87171; /* red-400 */
3129
+ --dm-danger-active: #fca5a5; /* red-300 */
3130
+ --dm-danger-light: rgba(248, 113, 113, 0.15);
3131
+ --dm-danger-dark: #dc2626; /* red-600 */
3132
+
3133
+ /* ================================================
3134
+ INTERACTIVE STATES
3135
+ ================================================ */
3136
+ --dm-hover-bg: rgba(0, 0, 0, 0.04);
3137
+ --dm-active-bg: rgba(0, 0, 0, 0.08);
3138
+ --dm-disabled-opacity: 0.65;
3139
+
3140
+ /* ================================================
3141
+ COMPONENT-SPECIFIC COLORS
3142
+ ================================================ */
3143
+
3144
+ /* Cards */
3145
+ --dm-card-bg: var(--dm-surface);
3146
+ --dm-card-border: var(--dm-border);
3147
+ --dm-card-shadow: var(--dm-shadow-sm);
3148
+
3149
+ /* Inputs */
3150
+ --dm-input-bg: var(--dm-surface);
3151
+ --dm-input-border: var(--dm-border-dark);
3152
+ --dm-input-text: var(--dm-text);
3153
+ --dm-input-placeholder: var(--dm-text-muted);
3154
+ --dm-input-focus-border: var(--dm-primary);
3155
+ --dm-input-disabled-bg: #e9ecef;
3156
+
3157
+ /* Buttons */
3158
+ --dm-btn-text: var(--dm-text);
3159
+ --dm-btn-bg: var(--dm-surface);
3160
+ --dm-btn-border: var(--dm-border-dark);
3161
+
3162
+ /* Tables */
3163
+ --dm-table-bg: transparent;
3164
+ --dm-table-border: var(--dm-border);
3165
+ --dm-table-header-bg: var(--dm-background-alt);
3166
+ --dm-table-header-text: var(--dm-text);
3167
+ --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
3168
+ --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
3169
+ --dm-table-selected-bg: var(--dm-selected-bg);
3170
+
3171
+ /* Modals */
3172
+ --dm-modal-bg: var(--dm-surface);
3173
+ --dm-modal-border: var(--dm-border);
3174
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
3175
+ --dm-modal-shadow: var(--dm-shadow-xl);
3176
+
3177
+ /* Dropdowns */
3178
+ --dm-dropdown-bg: var(--dm-surface);
3179
+ --dm-dropdown-border: var(--dm-border);
3180
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
3181
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
3182
+ --dm-dropdown-item-active: var(--dm-selected-bg);
3183
+
3184
+ /* Tooltips */
3185
+ --dm-tooltip-bg: #212529;
3186
+ --dm-tooltip-text: #ffffff;
3187
+
3188
+ /* Toasts */
3189
+ --dm-toast-bg: var(--dm-surface);
3190
+ --dm-toast-border: var(--dm-border);
3191
+ --dm-toast-shadow: var(--dm-shadow-lg);
3192
+
3193
+ /* Navbar */
3194
+ --dm-navbar-bg: var(--dm-surface);
3195
+ --dm-navbar-text: var(--dm-text);
3196
+ --dm-navbar-border: var(--dm-border);
3197
+
3198
+ /* Sidebar */
3199
+ --dm-sidebar-bg: var(--dm-surface);
3200
+ --dm-sidebar-text: var(--dm-text);
3201
+ --dm-sidebar-border: var(--dm-border);
3202
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
3203
+ --dm-sidebar-item-active: var(--dm-selected-bg);
3204
+
3205
+ /* Tabs */
3206
+ --dm-tab-border: var(--dm-border);
3207
+ --dm-tab-hover-bg: var(--dm-hover-bg);
3208
+
3209
+ /* Accordion */
3210
+ --dm-accordion-bg: var(--dm-surface);
3211
+ --dm-accordion-border: var(--dm-border);
3212
+ --dm-accordion-header-bg: var(--dm-background-alt);
3213
+ --dm-accordion-header-hover: var(--dm-hover-bg);
3214
+
3215
+ /* Badges */
3216
+ --dm-badge-bg: var(--dm-secondary);
3217
+ --dm-badge-text: #ffffff;
3218
+
3219
+ /* Progress */
3220
+ --dm-progress-bg: #e9ecef;
3221
+
3222
+ /* Scrollbar */
3223
+ --dm-scrollbar-track: #f1f1f1;
3224
+ --dm-scrollbar-thumb: #c1c1c1;
3225
+ --dm-scrollbar-thumb-hover: #a8a8a8;
3226
+
3227
+ /* Code */
3228
+ --dm-code-bg: #f8f9fa;
3229
+ --dm-code-text: #e83e8c;
3230
+ --dm-code-border: var(--dm-border);
3231
+
3232
+ /* ================================================
3233
+ SHADOWS - Standard for light mode
3234
+ ================================================ */
3235
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
3236
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
3237
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
3238
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
3239
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
3240
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
3241
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
3242
+
3243
+ /* ================================================
3244
+ ELEVATION / DEPTH
3245
+ ================================================ */
3246
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
3247
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
3248
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
3249
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
3250
+
3251
+ }
3252
+ /**
3253
+ * Domma Christmas Dark Theme
3254
+ * Traditional festive colour palette: red, green, gold
3255
+ * Dark mode variant
3256
+ */
3257
+
3258
+ .dm-theme-christmas-dark {
3259
+ color-scheme: dark;
3260
+
3261
+ /* ================================================
3262
+ FOUNDATIONAL COLORS - Dark Mode Base
3263
+ ================================================ */
3264
+
3265
+ /* Backgrounds - Dark slate/charcoal backgrounds */
3266
+ --dm-background: #0f172a; /* slate-900 */
3267
+ --dm-background-alt: #1e293b; /* slate-800 */
3268
+ --dm-surface: #1e293b; /* slate-800 */
3269
+ --dm-surface-raised: #334155; /* slate-700 */
3270
+ --dm-surface-overlay: #334155; /* slate-700 */
3271
+
3272
+ /* Text - Light colors for readability on dark */
3273
+ --dm-text: #e2e8f0; /* slate-200 */
3274
+ --dm-text-secondary: #94a3b8; /* slate-400 */
3275
+ --dm-text-muted: #64748b; /* slate-500 */
3276
+ --dm-text-disabled: #475569; /* slate-600 */
3277
+ --dm-text-inverse: #0f172a; /* slate-900 */
3278
+
3279
+ /* Borders - Subtle on dark backgrounds */
3280
+ --dm-border: #334155; /* slate-700 */
3281
+ --dm-border-light: #1e293b; /* slate-800 */
3282
+ --dm-border-dark: #475569; /* slate-600 */
3283
+
3284
+
3285
+ /* ================================================
3286
+ PRIMARY COLOURS - Christmas Red
3287
+ ================================================ */
3288
+ --dm-primary: #c41e3a;
3289
+ --dm-primary-hover: #d42c48;
3290
+ --dm-primary-active: #e43a56;
3291
+ --dm-primary-light: #fce4e8;
3292
+ --dm-primary-dark: #9a1830;
3293
+
3294
+ /* Focus ring with festive red */
3295
+ --dm-focus-ring: 0 0 0 3px rgba(196, 30, 58, 0.3);
3296
+ --dm-border-focus: #c41e3a;
3297
+
3298
+ /* ================================================
3299
+ SECONDARY COLOURS - Christmas Green
3300
+ ================================================ */
3301
+ --dm-secondary: #165b33;
3302
+ --dm-secondary-hover: #1e7a45;
3303
+ --dm-secondary-active: #269957;
3304
+ --dm-secondary-light: #e3f2e9;
3305
+ --dm-secondary-dark: #0f3d23;
3306
+
3307
+ /* ================================================
3308
+ STATUS COLOURS - Festive tinted
3309
+ ================================================ */
3310
+ --dm-success: #228b22;
3311
+ --dm-success-hover: #2ea02e;
3312
+ --dm-success-active: #3ab53a;
3313
+ --dm-success-light: #e6f4e6;
3314
+ --dm-success-dark: #1a6b1a;
3315
+
3316
+ --dm-info: #a8d5e5;
3317
+ --dm-info-hover: #b8dde9;
3318
+ --dm-info-active: #c8e5ed;
3319
+ --dm-info-light: #f0f9fc;
3320
+ --dm-info-dark: #6bb8d1;
3321
+
3322
+ --dm-warning: #d4af37;
3323
+ --dm-warning-hover: #dabb4f;
3324
+ --dm-warning-active: #e0c767;
3325
+ --dm-warning-light: #faf6e7;
3326
+ --dm-warning-dark: #b8962d;
3327
+ --dm-warning-text: #8b7021;
3328
+
3329
+ --dm-danger: #bb2528;
3330
+ --dm-danger-hover: #cc3336;
3331
+ --dm-danger-active: #dd4144;
3332
+ --dm-danger-light: #fce8e8;
3333
+ --dm-danger-dark: #991e20;
3334
+
3335
+ /* ================================================
3336
+ ACCENT COLOURS
3337
+ ================================================ */
3338
+ --dm-accent-1: #d4af37; /* Gold */
3339
+ --dm-accent-2: #bb2528; /* Holly Berry */
3340
+ --dm-accent-3: #228b22; /* Pine Green */
3341
+ --dm-accent-4: #f5f5f5; /* Snow White */
3342
+
3343
+ /* ================================================
3344
+ SELECTION
3345
+ ================================================ */
3346
+ --dm-selected-bg: rgba(196, 30, 58, 0.12);
3347
+ --dm-tab-active-border: #c41e3a;
3348
+ --dm-tab-active-text: #c41e3a;
3349
+ --dm-progress-bar: #c41e3a;
3350
+
3351
+ /* Danger - Standard red */
3352
+ --dm-danger: #dc3545;
3353
+ --dm-danger-hover: #bb2d3b;
3354
+ --dm-danger-active: #b02a37;
3355
+ --dm-danger-light: #f8d7da;
3356
+ --dm-danger-dark: #842029;
3357
+
3358
+ /* ================================================
3359
+ INTERACTIVE STATES
3360
+ ================================================ */
3361
+ --dm-hover-bg: rgba(255, 255, 255, 0.07);
3362
+ --dm-active-bg: rgba(255, 255, 255, 0.1);
3363
+ --dm-disabled-opacity: 0.4;
3364
+
3365
+ /* ================================================
3366
+ COMPONENT-SPECIFIC COLORS
3367
+ ================================================ */
3368
+
3369
+ /* Cards */
3370
+ --dm-card-bg: var(--dm-surface);
3371
+ --dm-card-border: var(--dm-border);
3372
+ --dm-card-shadow: var(--dm-shadow-md);
3373
+
3374
+ /* Inputs */
3375
+ --dm-input-bg: var(--dm-surface);
3376
+ --dm-input-border: var(--dm-border-dark);
3377
+ --dm-input-text: var(--dm-text);
3378
+ --dm-input-placeholder: var(--dm-text-muted);
3379
+ --dm-input-focus-border: var(--dm-primary);
3380
+ --dm-input-disabled-bg: #1e293b;
3381
+
3382
+ /* Buttons */
3383
+ --dm-btn-text: var(--dm-text);
3384
+ --dm-btn-bg: var(--dm-surface);
3385
+ --dm-btn-border: var(--dm-border-dark);
3386
+
3387
+ /* Tables */
3388
+ --dm-table-bg: transparent;
3389
+ --dm-table-border: var(--dm-border);
3390
+ --dm-table-header-bg: var(--dm-background-alt);
3391
+ --dm-table-header-text: var(--dm-text);
3392
+ --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
3393
+ --dm-table-hover-bg: var(--dm-hover-bg);
3394
+ --dm-table-selected-bg: var(--dm-selected-bg);
3395
+
3396
+ /* Modals */
3397
+ --dm-modal-bg: var(--dm-surface);
3398
+ --dm-modal-border: var(--dm-border);
3399
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
3400
+ --dm-modal-shadow: var(--dm-shadow-xl);
3401
+
3402
+ /* Dropdowns */
3403
+ --dm-dropdown-bg: var(--dm-surface-raised);
3404
+ --dm-dropdown-border: var(--dm-border);
3405
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
3406
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
3407
+ --dm-dropdown-item-active: var(--dm-selected-bg);
3408
+
3409
+ /* Tooltips */
3410
+ --dm-tooltip-bg: #0f172a;
3411
+ --dm-tooltip-text: #ffffff;
3412
+
3413
+ /* Toasts */
3414
+ --dm-toast-bg: var(--dm-surface);
3415
+ --dm-toast-border: var(--dm-border);
3416
+ --dm-toast-shadow: var(--dm-shadow-lg);
3417
+
3418
+ /* Navbar */
3419
+ --dm-navbar-bg: var(--dm-surface);
3420
+ --dm-navbar-text: var(--dm-text);
3421
+ --dm-navbar-border: var(--dm-border);
3422
+
3423
+ /* Sidebar */
3424
+ --dm-sidebar-bg: var(--dm-surface);
3425
+ --dm-sidebar-text: var(--dm-text);
3426
+ --dm-sidebar-border: var(--dm-border);
3427
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
3428
+ --dm-sidebar-item-active: var(--dm-selected-bg);
3429
+
3430
+ /* Tabs */
3431
+ --dm-tab-border: var(--dm-border);
3432
+ --dm-tab-hover-bg: var(--dm-hover-bg);
3433
+
3434
+ /* Accordion */
3435
+ --dm-accordion-bg: var(--dm-surface);
3436
+ --dm-accordion-border: var(--dm-border);
3437
+ --dm-accordion-header-bg: var(--dm-background-alt);
3438
+ --dm-accordion-header-hover: var(--dm-hover-bg);
3439
+
3440
+ /* Badges */
3441
+ --dm-badge-bg: var(--dm-secondary);
3442
+ --dm-badge-text: #0f172a;
3443
+
3444
+ /* Progress */
3445
+ --dm-progress-bg: #334155;
3446
+
3447
+ /* Scrollbar */
3448
+ --dm-scrollbar-track: #1e293b;
3449
+ --dm-scrollbar-thumb: #475569;
3450
+ --dm-scrollbar-thumb-hover: #64748b;
3451
+
3452
+ /* Code */
3453
+ --dm-code-bg: #0f172a;
3454
+ --dm-code-text: #fca5a5;
3455
+ --dm-code-border: var(--dm-border);
3456
+
3457
+ /* ================================================
3458
+ SHADOWS - Subtle for dark mode
3459
+ ================================================ */
3460
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
3461
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
3462
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
3463
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
3464
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
3465
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
3466
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
3467
+
3468
+ }