/*!
 * Domma Themes v0.22.0
 * Dynamic Object Manipulation & Modeling API
 * (c) 2026 Darryl Waterhouse & DCBW-IT
 * Built: 2026-03-23T15:40:43.325Z
 * Commit: bbc80cb
 */

/**
 * Domma Theme Base
 * Shared design tokens: spacing, typography, radii, shadows, transitions
 */

:root {
    /* ================================================
       SPACING SCALE
       ================================================ */
    --dm-space-0: 0;
    --dm-space-1: 0.25rem; /* 4px */
    --dm-space-2: 0.5rem; /* 8px */
    --dm-space-3: 0.75rem; /* 12px */
    --dm-space-4: 1rem; /* 16px */
    --dm-space-5: 1.25rem; /* 20px */
    --dm-space-6: 1.5rem; /* 24px */
    --dm-space-8: 2rem; /* 32px */
    --dm-space-10: 2.5rem; /* 40px */
    --dm-space-12: 3rem; /* 48px */
    --dm-space-16: 4rem; /* 64px */
    --dm-space-20: 5rem; /* 80px */
    --dm-space-24: 6rem; /* 96px */

    /* ================================================
       TYPOGRAPHY
       ================================================ */
    --dm-font-sans: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --dm-font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
    --dm-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;

    /* Font Sizes */
    --dm-text-xs: 0.75rem; /* 12px */
    --dm-text-sm: 0.875rem; /* 14px */
    --dm-text-base: 1rem; /* 16px */
    --dm-text-lg: 1.125rem; /* 18px */
    --dm-text-xl: 1.25rem; /* 20px */
    --dm-text-2xl: 1.5rem; /* 24px */
    --dm-text-3xl: 1.875rem; /* 30px */
    --dm-text-4xl: 2.25rem; /* 36px */
    --dm-text-5xl: 3rem; /* 48px */

    /* Line Heights */
    --dm-leading-none: 1;
    --dm-leading-tight: 1.25;
    --dm-leading-snug: 1.375;
    --dm-leading-normal: 1.5;
    --dm-leading-relaxed: 1.625;
    --dm-leading-loose: 2;

    /* Font Weights */
    --dm-font-light: 300;
    --dm-font-normal: 400;
    --dm-font-medium: 500;
    --dm-font-semibold: 600;
    --dm-font-bold: 700;

    /* Letter Spacing */
    --dm-tracking-tighter: -0.05em;
    --dm-tracking-tight: -0.025em;
    --dm-tracking-normal: 0;
    --dm-tracking-wide: 0.025em;
    --dm-tracking-wider: 0.05em;
    --dm-tracking-widest: 0.1em;

    /* ================================================
       BORDER RADIUS
       ================================================ */
    --dm-radius-none: 0;
    --dm-radius-sm: 0.125rem; /* 2px */
    --dm-radius-md: 0.25rem; /* 4px */
    --dm-radius-lg: 0.5rem; /* 8px */
    --dm-radius-xl: 0.75rem; /* 12px */
    --dm-radius-2xl: 1rem; /* 16px */
    --dm-radius-full: 9999px;

    /* ================================================
       SHADOWS
       ================================================ */
    --dm-shadow-none: none;
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       TRANSITIONS
       ================================================ */
    --dm-transition-fast: 150ms ease;
    --dm-transition-normal: 200ms ease;
    --dm-transition-slow: 300ms ease;
    --dm-transition-slower: 500ms ease;

    /* Timing Functions */
    --dm-ease-linear: linear;
    --dm-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --dm-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --dm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dm-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ================================================
       Z-INDEX SCALE
       ================================================ */
    --dm-z-0: 0;
    --dm-z-10: 10;
    --dm-z-20: 20;
    --dm-z-30: 30;
    --dm-z-40: 40;
    --dm-z-50: 50;
    --dm-z-dropdown: 1000;
    --dm-z-sticky: 1020;
    --dm-z-fixed: 1030;
    --dm-z-modal-backdrop: 1040;
    --dm-z-modal: 1050;
    --dm-z-popover: 1060;
    --dm-z-tooltip: 1070;
    --dm-z-toast: 1080;

    /* ================================================
       BREAKPOINTS (for reference)
       ================================================ */
    --dm-breakpoint-sm: 640px;
    --dm-breakpoint-md: 768px;
    --dm-breakpoint-lg: 1024px;
    --dm-breakpoint-xl: 1280px;
    --dm-breakpoint-2xl: 1536px;

    /* ================================================
       CONTAINER WIDTHS
       ================================================ */
    --dm-container-sm: 640px;
    --dm-container-md: 768px;
    --dm-container-lg: 1024px;
    --dm-container-xl: 1280px;

    /* ================================================
       OPACITY
       ================================================ */
    --dm-opacity-0: 0;
    --dm-opacity-5: 0.05;
    --dm-opacity-10: 0.1;
    --dm-opacity-20: 0.2;
    --dm-opacity-25: 0.25;
    --dm-opacity-30: 0.3;
    --dm-opacity-40: 0.4;
    --dm-opacity-50: 0.5;
    --dm-opacity-60: 0.6;
    --dm-opacity-70: 0.7;
    --dm-opacity-75: 0.75;
    --dm-opacity-80: 0.8;
    --dm-opacity-90: 0.9;
    --dm-opacity-95: 0.95;
    --dm-opacity-100: 1;
}

/* ================================================
   ICON UTILITIES
   ================================================ */
.dm-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.dm-icon-xs {
    width: 12px;
    height: 12px;
}

.dm-icon-sm {
    width: 16px;
    height: 16px;
}

.dm-icon-md {
    width: 24px;
    height: 24px;
}

.dm-icon-lg {
    width: 32px;
    height: 32px;
}

.dm-icon-xl {
    width: 48px;
    height: 48px;
}

.dm-icon-2xl {
    width: 64px;
    height: 64px;
}

/* Icon colour utilities (use theme colours) */
.dm-icon-primary {
    color: var(--dm-primary);
}

.dm-icon-secondary {
    color: var(--dm-secondary);
}

.dm-icon-success {
    color: var(--dm-success);
}

.dm-icon-danger {
    color: var(--dm-danger);
}

.dm-icon-warning {
    color: var(--dm-warning);
}

.dm-icon-info {
    color: var(--dm-info);
}

.dm-icon-muted {
    color: var(--dm-text-muted);
}

/* Spinner animation */
@keyframes dm-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.dm-icon-spin {
    animation: dm-spin 1s linear infinite;
}

/* Pulse animation for notifications */
@keyframes dm-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.dm-icon-pulse {
    animation: dm-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Bounce animation */
@keyframes dm-bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.dm-icon-bounce {
    animation: dm-bounce 1s infinite;
}

/**
 * Domma Ocean Light Theme
 * Cool blue colour palette inspired by the sea
 * Light mode variant - light backgrounds with dark ocean accents
 */

.dm-theme-ocean-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Light/white backgrounds */
    --dm-background: #ffffff;
    --dm-background-alt: #f8f9fa;
    --dm-surface: #ffffff;
    --dm-surface-raised: #f1f3f5;
    --dm-surface-overlay: #f8f9fa;

    /* Text - Dark colors for readability on light */
    --dm-text: #212529;
    --dm-text-secondary: #495057;
    --dm-text-muted: #6c757d;
    --dm-text-disabled: #adb5bd;
    --dm-text-inverse: #ffffff;

    /* Borders - Subtle on light backgrounds */
    --dm-border: #dee2e6;
    --dm-border-light: #e9ecef;
    --dm-border-dark: #ced4da;

    /* ================================================
       OCEAN ACCENT COLORS - Dark/rich for light mode
       ================================================ */

    /* Primary - Rich ocean blue for contrast */
    --dm-primary: #0077b6;
    --dm-primary-hover: #0096c7;
    --dm-primary-active: #00b4d8;
    --dm-primary-light: #caf0f8;
    --dm-primary-dark: #023e8a;

    /* Secondary - Slate blue */
    --dm-secondary: #457b9d;
    --dm-secondary-hover: #5a8fad;
    --dm-secondary-active: #6ea3bd;
    --dm-secondary-light: #e8f4f8;
    --dm-secondary-dark: #1d3557;

    /* Success - Ocean-tinted teal */
    --dm-success: #06d6a0;
    --dm-success-hover: #1fe0ac;
    --dm-success-active: #39eab7;
    --dm-success-light: #d4f5ed;
    --dm-success-dark: #05a87d;

    /* Danger - Standard red */
    --dm-danger: #dc3545;
    --dm-danger-hover: #bb2d3b;
    --dm-danger-active: #b02a37;
    --dm-danger-light: #f8d7da;
    --dm-danger-dark: #842029;

    /* Warning - Standard amber */
    --dm-warning: #ffc107;
    --dm-warning-hover: #ffca2c;
    --dm-warning-active: #ffcd39;
    --dm-warning-light: #fff3cd;
    --dm-warning-dark: #664d03;
    --dm-warning-text: #664d03;

    /* Info - Light cyan */
    --dm-info: #48cae4;
    --dm-info-hover: #5cd2e8;
    --dm-info-active: #70daec;
    --dm-info-light: #daf4f9;
    --dm-info-dark: #00b4d8;

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-active-bg: rgba(0, 0, 0, 0.08);
    --dm-selected-bg: rgba(0, 119, 182, 0.15);
    --dm-focus-ring: 0 0 0 3px rgba(0, 119, 182, 0.3);
    --dm-border-focus: #0077b6;
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #e9ecef;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #212529;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #0077b6;
    --dm-tab-active-text: #0077b6;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #ffffff;

    /* Progress */
    --dm-progress-bg: #e9ecef;
    --dm-progress-bar: #0077b6;

    /* Scrollbar */
    --dm-scrollbar-track: #f1f1f1;
    --dm-scrollbar-thumb: #c1c1c1;
    --dm-scrollbar-thumb-hover: #a8a8a8;

    /* Code */
    --dm-code-bg: #f8f9fa;
    --dm-code-text: #e83e8c;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);

    /* ================================================
       ACCENT/SELECTION COLORS
       ================================================ */
    --dm-accent-1: #90e0ef; /* Light cyan */
    --dm-accent-2: #00b4d8; /* Bright cyan */
    --dm-accent-3: #0096c7; /* Medium blue */
    --dm-accent-4: #023e8a; /* Deep blue */
}

/**
 * Domma Ocean Dark Theme
 * Cool blue colour palette inspired by the sea
 * Dark mode variant - dark backgrounds with bright ocean accents
 */

.dm-theme-ocean-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Dark slate/charcoal backgrounds */
    --dm-background: #0f172a; /* slate-900 */
    --dm-background-alt: #1e293b; /* slate-800 */
    --dm-surface: #1e293b; /* slate-800 */
    --dm-surface-raised: #334155; /* slate-700 */
    --dm-surface-overlay: #334155; /* slate-700 */

    /* Text - Light colors for readability on dark */
    --dm-text: #e2e8f0; /* slate-200 */
    --dm-text-secondary: #94a3b8; /* slate-400 */
    --dm-text-muted: #64748b; /* slate-500 */
    --dm-text-disabled: #475569; /* slate-600 */
    --dm-text-inverse: #0f172a; /* slate-900 */

    /* Borders - Subtle on dark backgrounds */
    --dm-border: #334155; /* slate-700 */
    --dm-border-light: #1e293b; /* slate-800 */
    --dm-border-dark: #475569; /* slate-600 */

    /* ================================================
       OCEAN ACCENT COLORS - Bright for dark mode
       ================================================ */

    /* Primary - Bright cyan/blue for visibility */
    --dm-primary: #48cae4;
    --dm-primary-hover: #5cd2e8;
    --dm-primary-active: #70daec;
    --dm-primary-light: rgba(72, 202, 228, 0.15);
    --dm-primary-dark: #00b4d8;

    /* Secondary - Light slate blue */
    --dm-secondary: #90e0ef;
    --dm-secondary-hover: #a6e7f2;
    --dm-secondary-active: #bceef5;
    --dm-secondary-light: rgba(144, 224, 239, 0.15);
    --dm-secondary-dark: #48cae4;

    /* Success - Bright teal/green */
    --dm-success: #52e3b8;
    --dm-success-hover: #66e7c1;
    --dm-success-active: #7aebca;
    --dm-success-light: rgba(82, 227, 184, 0.15);
    --dm-success-dark: #06d6a0;

    /* Danger - Bright red (standard dark mode) */
    --dm-danger: #ef4444; /* red-500 */
    --dm-danger-hover: #f87171; /* red-400 */
    --dm-danger-active: #fca5a5; /* red-300 */
    --dm-danger-light: rgba(248, 113, 113, 0.15);
    --dm-danger-dark: #dc2626; /* red-600 */

    /* Warning - Bright amber (standard dark mode) */
    --dm-warning: #fbbf24; /* amber-400 */
    --dm-warning-hover: #fcd34d; /* amber-300 */
    --dm-warning-active: #fde68a; /* amber-200 */
    --dm-warning-text: #78350f; /* amber-950 */
    --dm-warning-light: rgba(251, 191, 36, 0.15);
    --dm-warning-dark: #f59e0b; /* amber-500 */

    /* Info - Bright ocean cyan */
    --dm-info: #90e0ef;
    --dm-info-hover: #a6e7f2;
    --dm-info-active: #bceef5;
    --dm-info-light: rgba(144, 224, 239, 0.15);
    --dm-info-dark: #48cae4;

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(255, 255, 255, 0.07);
    --dm-active-bg: rgba(255, 255, 255, 0.1);
    --dm-selected-bg: rgba(72, 202, 228, 0.2);
    --dm-focus-ring: 0 0 0 3px rgba(72, 202, 228, 0.35);
    --dm-border-focus: #48cae4;
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #1e293b; /* slate-800 */

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #0f172a; /* slate-900 */
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #48cae4;
    --dm-tab-active-text: #48cae4;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #0f172a;

    /* Progress */
    --dm-progress-bg: #334155; /* slate-700 */
    --dm-progress-bar: #48cae4;

    /* Scrollbar */
    --dm-scrollbar-track: #1e293b;
    --dm-scrollbar-thumb: #475569;
    --dm-scrollbar-thumb-hover: #64748b;

    /* Code */
    --dm-code-bg: #0f172a; /* slate-900 */
    --dm-code-text: #fca5a5; /* red-300 */
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ACCENT/SELECTION COLORS
       ================================================ */
    --dm-accent-1: #90e0ef; /* Light cyan */
    --dm-accent-2: #00b4d8; /* Bright cyan */
    --dm-accent-3: #0096c7; /* Medium blue */
    --dm-accent-4: #023e8a; /* Deep blue */
}

/**
 * Domma Forest Light Theme
 * Natural green colour palette inspired by nature
 * Light mode variant - light backgrounds with rich forest greens
 */

.dm-theme-forest-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Light/white backgrounds */
    --dm-background: #ffffff;
    --dm-background-alt: #f8f9fa;
    --dm-surface: #ffffff;
    --dm-surface-raised: #f1f3f5;
    --dm-surface-overlay: #f8f9fa;

    /* Text - Dark colors for readability on light */
    --dm-text: #212529;
    --dm-text-secondary: #495057;
    --dm-text-muted: #6c757d;
    --dm-text-disabled: #adb5bd;
    --dm-text-inverse: #ffffff;

    /* Borders - Subtle on light backgrounds */
    --dm-border: #dee2e6;
    --dm-border-light: #e9ecef;
    --dm-border-dark: #ced4da;

    /* ================================================
       FOREST ACCENT COLORS - Rich greens for light mode
       ================================================ */

    /* PRIMARY COLOURS - Forest Green */
    --dm-primary: #2d6a4f;
    --dm-primary-hover: #40916c;
    --dm-primary-active: #52b788;
    --dm-primary-light: #d8f3dc;
    --dm-primary-dark: #1b4332;

    /* Focus ring with forest colour */
    --dm-focus-ring: 0 0 0 3px rgba(45, 106, 79, 0.3);
    --dm-border-focus: #2d6a4f;

    /* ================================================
       SECONDARY COLOURS - Earth Brown
       ================================================ */
    --dm-secondary: #6b705c;
    --dm-secondary-hover: #7d826d;
    --dm-secondary-active: #8f937e;
    --dm-secondary-light: #f0efe9;
    --dm-secondary-dark: #52554a;

    /* ================================================
       STATUS COLOURS - Nature-tinted
       ================================================ */
    --dm-success: #40916c;
    --dm-success-hover: #52b788;
    --dm-success-active: #74c69d;
    --dm-success-light: #d8f3dc;
    --dm-success-dark: #2d6a4f;

    --dm-info: #588157;
    --dm-info-hover: #6b9669;
    --dm-info-active: #7eab7c;
    --dm-info-light: #e2f0e1;
    --dm-info-dark: #3a5a40;

    --dm-warning: #dda15e;
    --dm-warning-hover: #e3b276;
    --dm-warning-active: #e9c38e;
    --dm-warning-light: #faf3e7;
    --dm-warning-dark: #bc6c25;
    --dm-warning-text: #bc6c25;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #95d5b2; /* Mint */
    --dm-accent-2: #74c69d; /* Sage */
    --dm-accent-3: #52b788; /* Emerald */
    --dm-accent-4: #1b4332; /* Pine */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-active-bg: rgba(0, 0, 0, 0.08);
    --dm-selected-bg: rgba(45, 106, 79, 0.15);
    --dm-focus-ring: 0 0 0 3px rgba(45, 106, 79, 0.3);
    --dm-border-focus: #2d6a4f;
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #e9ecef;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #212529;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #2d6a4f;
    --dm-tab-active-text: #2d6a4f;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #ffffff;

    /* Progress */
    --dm-progress-bg: #e9ecef;
    --dm-progress-bar: #2d6a4f;

    /* Scrollbar */
    --dm-scrollbar-track: #f1f1f1;
    --dm-scrollbar-thumb: #c1c1c1;
    --dm-scrollbar-thumb-hover: #a8a8a8;

    /* Code */
    --dm-code-bg: #f8f9fa;
    --dm-code-text: #e83e8c;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/**
 * Domma Forest Dark Theme
 * Natural green colour palette inspired by nature
 * Dark mode variant - dark backgrounds with bright forest greens
 */

.dm-theme-forest-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Dark slate/charcoal backgrounds */
    --dm-background: #0f172a; /* slate-900 */
    --dm-background-alt: #1e293b; /* slate-800 */
    --dm-surface: #1e293b; /* slate-800 */
    --dm-surface-raised: #334155; /* slate-700 */
    --dm-surface-overlay: #334155; /* slate-700 */

    /* Text - Light colors for readability on dark */
    --dm-text: #e2e8f0; /* slate-200 */
    --dm-text-secondary: #94a3b8; /* slate-400 */
    --dm-text-muted: #64748b; /* slate-500 */
    --dm-text-disabled: #475569; /* slate-600 */
    --dm-text-inverse: #0f172a; /* slate-900 */

    /* Borders - Subtle on dark backgrounds */
    --dm-border: #334155; /* slate-700 */
    --dm-border-light: #1e293b; /* slate-800 */
    --dm-border-dark: #475569; /* slate-600 */

    /* ================================================
       FOREST ACCENT COLORS - Bright greens for dark mode
       ================================================ */

    /* Primary - Bright forest green */
    --dm-primary: #74c69d;
    --dm-primary-hover: #88d0ac;
    --dm-primary-active: #9cdabb;
    --dm-primary-light: rgba(116, 198, 157, 0.15);
    --dm-primary-dark: #52b788;

    --dm-secondary: #a3b899;
    --dm-secondary-hover: #b2c4a9;
    --dm-secondary-active: #c1d0b9;
    --dm-secondary-light: rgba(163, 184, 153, 0.15);
    --dm-secondary-dark: #7d9273;

    --dm-success: #95d5b2;
    --dm-success-light: rgba(149, 213, 178, 0.15);

    --dm-info: #95d5b2;
    --dm-info-light: rgba(149, 213, 178, 0.15);

    --dm-warning: #e9c38e;
    --dm-warning-light: rgba(233, 195, 142, 0.15);
    --dm-warning-text: #e9c38e;

    /* Danger - Bright red (standard dark mode) */
    --dm-danger: #ef4444; /* red-500 */
    --dm-danger-hover: #f87171; /* red-400 */
    --dm-danger-active: #fca5a5; /* red-300 */
    --dm-danger-light: rgba(248, 113, 113, 0.15);
    --dm-danger-dark: #dc2626; /* red-600 */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(255, 255, 255, 0.07);
    --dm-active-bg: rgba(255, 255, 255, 0.1);
    --dm-selected-bg: rgba(116, 198, 157, 0.2);
    --dm-focus-ring: 0 0 0 3px rgba(116, 198, 157, 0.35);
    --dm-border-focus: #74c69d;
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #1e293b;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #0f172a;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #74c69d;
    --dm-tab-active-text: #74c69d;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #0f172a;

    /* Progress */
    --dm-progress-bg: #334155;
    --dm-progress-bar: #74c69d;

    /* Scrollbar */
    --dm-scrollbar-track: #1e293b;
    --dm-scrollbar-thumb: #475569;
    --dm-scrollbar-thumb-hover: #64748b;

    /* Code */
    --dm-code-bg: #0f172a;
    --dm-code-text: #fca5a5;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* Accents */
    --dm-accent-1: #95d5b2;
    --dm-accent-2: #74c69d;
    --dm-accent-3: #52b788;
    --dm-accent-4: #1b4332;
}

/**
 * Domma Sunset Light Theme
 * Soft, warm terracotta and peach tones
 * Light mode variant - light backgrounds with warm sunset tones
 */

.dm-theme-sunset-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Light/white backgrounds */
    --dm-background: #ffffff;
    --dm-background-alt: #f8f9fa;
    --dm-surface: #ffffff;
    --dm-surface-raised: #f1f3f5;
    --dm-surface-overlay: #f8f9fa;

    /* Text - Dark colors for readability on light */
    --dm-text: #212529;
    --dm-text-secondary: #495057;
    --dm-text-muted: #6c757d;
    --dm-text-disabled: #adb5bd;
    --dm-text-inverse: #ffffff;

    /* Borders - Subtle on light backgrounds */
    --dm-border: #dee2e6;
    --dm-border-light: #e9ecef;
    --dm-border-dark: #ced4da;


    --dm-primary: #da9d82;
    --dm-primary-hover: #e0ac94;
    --dm-primary-active: #e6bba6;
    --dm-primary-light: rgba(218, 157, 130, 0.15);
    --dm-primary-dark: #d08c6f;

    --dm-secondary: #c2a2aa;
    --dm-secondary-hover: #cdb0b7;
    --dm-secondary-active: #d8bec4;
    --dm-secondary-light: rgba(194, 162, 170, 0.15);
    --dm-secondary-dark: #b5919a;

    --dm-success: #9cbe91;
    --dm-success-light: rgba(156, 190, 145, 0.15);

    --dm-info: #afc1cd;
    --dm-info-light: rgba(175, 193, 205, 0.15);

    --dm-warning: #e2c484;
    --dm-warning-light: rgba(226, 196, 132, 0.15);
    --dm-warning-text: #e2c484;

    --dm-danger: #da8282;
    --dm-danger-light: rgba(218, 130, 130, 0.15);

    --dm-focus-ring: 0 0 0 3px rgba(218, 157, 130, 0.35);
    --dm-selected-bg: rgba(218, 157, 130, 0.2);
    --dm-tab-active-border: #da9d82;
    --dm-tab-active-text: #da9d82;
    --dm-progress-bar: #da9d82;

    /* Danger - Bright red (standard dark mode) */
    --dm-danger: #ef4444; /* red-500 */
    --dm-danger-hover: #f87171; /* red-400 */
    --dm-danger-active: #fca5a5; /* red-300 */
    --dm-danger-light: rgba(248, 113, 113, 0.15);
    --dm-danger-dark: #dc2626; /* red-600 */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-active-bg: rgba(0, 0, 0, 0.08);
    --dm-selected-bg: rgba(198, 123, 92, 0.12);
    --dm-focus-ring: 0 0 0 3px rgba(198, 123, 92, 0.3);
    --dm-border-focus: #c67b5c;
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #e9ecef;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #212529;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #c67b5c;
    --dm-tab-active-text: #a66349;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #ffffff;

    /* Progress */
    --dm-progress-bg: #e9ecef;
    --dm-progress-bar: #c67b5c;

    /* Scrollbar */
    --dm-scrollbar-track: #f1f1f1;
    --dm-scrollbar-thumb: #c1c1c1;
    --dm-scrollbar-thumb-hover: #a8a8a8;

    /* Code */
    --dm-code-bg: #f8f9fa;
    --dm-code-text: #e83e8c;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/**
 * Domma Sunset Dark Theme
 * Soft, warm terracotta and peach tones
 * Dark mode variant
 */

.dm-theme-sunset-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Dark slate/charcoal backgrounds */
    --dm-background: #0f172a; /* slate-900 */
    --dm-background-alt: #1e293b; /* slate-800 */
    --dm-surface: #1e293b; /* slate-800 */
    --dm-surface-raised: #334155; /* slate-700 */
    --dm-surface-overlay: #334155; /* slate-700 */

    /* Text - Light colors for readability on dark */
    --dm-text: #e2e8f0; /* slate-200 */
    --dm-text-secondary: #94a3b8; /* slate-400 */
    --dm-text-muted: #64748b; /* slate-500 */
    --dm-text-disabled: #475569; /* slate-600 */
    --dm-text-inverse: #0f172a; /* slate-900 */

    /* Borders - Subtle on dark backgrounds */
    --dm-border: #334155; /* slate-700 */
    --dm-border-light: #1e293b; /* slate-800 */
    --dm-border-dark: #475569; /* slate-600 */

    /* ================================================
       SUNSET ACCENT COLORS - Warm tones for light mode
       ================================================ */

    /* PRIMARY COLOURS - Soft Terracotta */
    --dm-primary: #c67b5c;
    --dm-primary-hover: #d08c6f;
    --dm-primary-active: #da9d82;
    --dm-primary-light: #faf3f0;
    --dm-primary-dark: #a66349;

    /* Focus ring with soft sunset colour */
    --dm-focus-ring: 0 0 0 3px rgba(198, 123, 92, 0.3);
    --dm-border-focus: #c67b5c;

    /* ================================================
       SECONDARY COLOURS - Dusty Rose
       ================================================ */
    --dm-secondary: #a8808a;
    --dm-secondary-hover: #b5919a;
    --dm-secondary-active: #c2a2aa;
    --dm-secondary-light: #f8f3f4;
    --dm-secondary-dark: #8a6670;

    /* ================================================
       STATUS COLOURS - Muted tones
       ================================================ */
    --dm-success: #7a9e6d;
    --dm-success-hover: #8bae7f;
    --dm-success-active: #9cbe91;
    --dm-success-light: #f2f6f0;
    --dm-success-dark: #628256;

    --dm-info: #8fa5b5;
    --dm-info-hover: #9fb3c1;
    --dm-info-active: #afc1cd;
    --dm-info-light: #f3f6f8;
    --dm-info-dark: #708694;

    --dm-warning: #d4a85c;
    --dm-warning-hover: #dbb670;
    --dm-warning-active: #e2c484;
    --dm-warning-light: #faf6ef;
    --dm-warning-dark: #b58e45;
    --dm-warning-text: #8a6b30;

    --dm-danger: #c45c5c;
    --dm-danger-hover: #cf6f6f;
    --dm-danger-active: #da8282;
    --dm-danger-light: #faf0f0;
    --dm-danger-dark: #a54848;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #e8c9a8; /* Soft peach */
    --dm-accent-2: #d4a88a; /* Warm sand */
    --dm-accent-3: #c67b5c; /* Terracotta */
    --dm-accent-4: #a66349; /* Clay */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(255, 255, 255, 0.07);
    --dm-active-bg: rgba(255, 255, 255, 0.1);
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #1e293b;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #0f172a;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #0f172a;

    /* Progress */
    --dm-progress-bg: #334155;

    /* Scrollbar */
    --dm-scrollbar-track: #1e293b;
    --dm-scrollbar-thumb: #475569;
    --dm-scrollbar-thumb-hover: #64748b;

    /* Code */
    --dm-code-bg: #0f172a;
    --dm-code-text: #fca5a5;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

}
/**
 * Domma Royal Light Theme
 * Rich royal blue colour palette
 * Light mode variant
 */

.dm-theme-royal-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Light/white backgrounds */
    --dm-background: #ffffff;
    --dm-background-alt: #f8f9fa;
    --dm-surface: #ffffff;
    --dm-surface-raised: #f1f3f5;
    --dm-surface-overlay: #f8f9fa;

    /* Text - Dark colors for readability on light */
    --dm-text: #212529;
    --dm-text-secondary: #495057;
    --dm-text-muted: #6c757d;
    --dm-text-disabled: #adb5bd;
    --dm-text-inverse: #ffffff;

    /* Borders - Subtle on light backgrounds */
    --dm-border: #dee2e6;
    --dm-border-light: #e9ecef;
    --dm-border-dark: #ced4da;


    --dm-primary: #6495ed;
    --dm-primary-hover: #79a5f0;
    --dm-primary-active: #8eb5f3;
    --dm-primary-light: rgba(100, 149, 237, 0.15);
    --dm-primary-dark: #4169e1;

    --dm-secondary: #9370db;
    --dm-secondary-hover: #a384e0;
    --dm-secondary-active: #b398e5;
    --dm-secondary-light: rgba(147, 112, 219, 0.15);
    --dm-secondary-dark: #6a5acd;

    --dm-success: #50fa7b;
    --dm-success-light: rgba(80, 250, 123, 0.15);

    --dm-info: #87ceeb;
    --dm-info-light: rgba(135, 206, 235, 0.15);

    --dm-focus-ring: 0 0 0 3px rgba(100, 149, 237, 0.35);
    --dm-selected-bg: rgba(100, 149, 237, 0.2);
    --dm-tab-active-border: #6495ed;
    --dm-tab-active-text: #6495ed;
    --dm-progress-bar: #6495ed;

    /* Danger - Bright red (standard dark mode) */
    --dm-danger: #ef4444; /* red-500 */
    --dm-danger-hover: #f87171; /* red-400 */
    --dm-danger-active: #fca5a5; /* red-300 */
    --dm-danger-light: rgba(248, 113, 113, 0.15);
    --dm-danger-dark: #dc2626; /* red-600 */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-active-bg: rgba(0, 0, 0, 0.08);
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #e9ecef;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #212529;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #ffffff;

    /* Progress */
    --dm-progress-bg: #e9ecef;

    /* Scrollbar */
    --dm-scrollbar-track: #f1f1f1;
    --dm-scrollbar-thumb: #c1c1c1;
    --dm-scrollbar-thumb-hover: #a8a8a8;

    /* Code */
    --dm-code-bg: #f8f9fa;
    --dm-code-text: #e83e8c;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);

}
/**
 * Domma Royal Dark Theme
 * Rich royal blue colour palette
 * Dark mode variant
 */

.dm-theme-royal-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Dark slate/charcoal backgrounds */
    --dm-background: #0f172a; /* slate-900 */
    --dm-background-alt: #1e293b; /* slate-800 */
    --dm-surface: #1e293b; /* slate-800 */
    --dm-surface-raised: #334155; /* slate-700 */
    --dm-surface-overlay: #334155; /* slate-700 */

    /* Text - Light colors for readability on dark */
    --dm-text: #e2e8f0; /* slate-200 */
    --dm-text-secondary: #94a3b8; /* slate-400 */
    --dm-text-muted: #64748b; /* slate-500 */
    --dm-text-disabled: #475569; /* slate-600 */
    --dm-text-inverse: #0f172a; /* slate-900 */

    /* Borders - Subtle on dark backgrounds */
    --dm-border: #334155; /* slate-700 */
    --dm-border-light: #1e293b; /* slate-800 */
    --dm-border-dark: #475569; /* slate-600 */


    /* ================================================
       PRIMARY COLOURS - Royal Blue
       ================================================ */
    --dm-primary: #4169e1;
    --dm-primary-hover: #5a7de6;
    --dm-primary-active: #7391eb;
    --dm-primary-light: #e8edfc;
    --dm-primary-dark: #2c4a9e;

    /* Focus ring with royal colour */
    --dm-focus-ring: 0 0 0 3px rgba(65, 105, 225, 0.3);
    --dm-border-focus: #4169e1;

    /* ================================================
       SECONDARY COLOURS - Purple Blue
       ================================================ */
    --dm-secondary: #6a5acd;
    --dm-secondary-hover: #7d6fd4;
    --dm-secondary-active: #9084db;
    --dm-secondary-light: #f0eefa;
    --dm-secondary-dark: #483d8b;

    /* ================================================
       STATUS COLOURS - Royal-tinted
       ================================================ */
    --dm-success: #32cd32;
    --dm-success-hover: #4ad34a;
    --dm-success-active: #62d962;
    --dm-success-light: #e6f9e6;
    --dm-success-dark: #228b22;

    --dm-info: #6495ed;
    --dm-info-hover: #79a5f0;
    --dm-info-active: #8eb5f3;
    --dm-info-light: #ebf1fd;
    --dm-info-dark: #4169e1;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #b0c4de; /* Light steel blue */
    --dm-accent-2: #6495ed; /* Cornflower blue */
    --dm-accent-3: #4169e1; /* Royal blue */
    --dm-accent-4: #191970; /* Midnight blue */

    /* ================================================
       SELECTION
       ================================================ */
    --dm-selected-bg: rgba(65, 105, 225, 0.15);
    --dm-tab-active-border: #4169e1;
    --dm-tab-active-text: #4169e1;
    --dm-progress-bar: #4169e1;

    /* Danger - Standard red */
    --dm-danger: #dc3545;
    --dm-danger-hover: #bb2d3b;
    --dm-danger-active: #b02a37;
    --dm-danger-light: #f8d7da;
    --dm-danger-dark: #842029;

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(255, 255, 255, 0.07);
    --dm-active-bg: rgba(255, 255, 255, 0.1);
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #1e293b;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #0f172a;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #0f172a;

    /* Progress */
    --dm-progress-bg: #334155;

    /* Scrollbar */
    --dm-scrollbar-track: #1e293b;
    --dm-scrollbar-thumb: #475569;
    --dm-scrollbar-thumb-hover: #64748b;

    /* Code */
    --dm-code-bg: #0f172a;
    --dm-code-text: #fca5a5;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

}
/**
 * Domma Lemon Light Theme
 * Soft, subtle yellow colour palette
 * Light mode variant
 */

.dm-theme-lemon-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Light/white backgrounds */
    --dm-background: #ffffff;
    --dm-background-alt: #f8f9fa;
    --dm-surface: #ffffff;
    --dm-surface-raised: #f1f3f5;
    --dm-surface-overlay: #f8f9fa;

    /* Text - Dark colors for readability on light */
    --dm-text: #212529;
    --dm-text-secondary: #495057;
    --dm-text-muted: #6c757d;
    --dm-text-disabled: #adb5bd;
    --dm-text-inverse: #ffffff;

    /* Borders - Subtle on light backgrounds */
    --dm-border: #dee2e6;
    --dm-border-light: #e9ecef;
    --dm-border-dark: #ced4da;


    --dm-primary: #d4c06a;
    --dm-primary-hover: #dfcc7c;
    --dm-primary-active: #ead88e;
    --dm-primary-light: rgba(212, 192, 106, 0.15);
    --dm-primary-dark: #c9b458;

    --dm-secondary: #b6b1a1;
    --dm-secondary-hover: #c4bfb0;
    --dm-secondary-active: #d2cdbf;
    --dm-secondary-light: rgba(182, 177, 161, 0.15);
    --dm-secondary-dark: #9a9583;

    --dm-success: #a1c277;
    --dm-success-light: rgba(161, 194, 119, 0.15);

    --dm-info: #90bbcd;
    --dm-info-light: rgba(144, 187, 205, 0.15);

    --dm-warning: #e2c46d;
    --dm-warning-light: rgba(226, 196, 109, 0.15);
    --dm-warning-text: #e2c46d;

    --dm-focus-ring: 0 0 0 3px rgba(212, 192, 106, 0.35);
    --dm-selected-bg: rgba(212, 192, 106, 0.2);
    --dm-tab-active-border: #d4c06a;
    --dm-tab-active-text: #d4c06a;
    --dm-progress-bar: #d4c06a;

    /* Danger - Bright red (standard dark mode) */
    --dm-danger: #ef4444; /* red-500 */
    --dm-danger-hover: #f87171; /* red-400 */
    --dm-danger-active: #fca5a5; /* red-300 */
    --dm-danger-light: rgba(248, 113, 113, 0.15);
    --dm-danger-dark: #dc2626; /* red-600 */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-active-bg: rgba(0, 0, 0, 0.08);
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #e9ecef;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #212529;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #ffffff;

    /* Progress */
    --dm-progress-bg: #e9ecef;

    /* Scrollbar */
    --dm-scrollbar-track: #f1f1f1;
    --dm-scrollbar-thumb: #c1c1c1;
    --dm-scrollbar-thumb-hover: #a8a8a8;

    /* Code */
    --dm-code-bg: #f8f9fa;
    --dm-code-text: #e83e8c;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);

}
/**
 * Domma Lemon Dark Theme
 * Soft, subtle yellow colour palette
 * Dark mode variant
 */

.dm-theme-lemon-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Dark slate/charcoal backgrounds */
    --dm-background: #0f172a; /* slate-900 */
    --dm-background-alt: #1e293b; /* slate-800 */
    --dm-surface: #1e293b; /* slate-800 */
    --dm-surface-raised: #334155; /* slate-700 */
    --dm-surface-overlay: #334155; /* slate-700 */

    /* Text - Light colors for readability on dark */
    --dm-text: #e2e8f0; /* slate-200 */
    --dm-text-secondary: #94a3b8; /* slate-400 */
    --dm-text-muted: #64748b; /* slate-500 */
    --dm-text-disabled: #475569; /* slate-600 */
    --dm-text-inverse: #0f172a; /* slate-900 */

    /* Borders - Subtle on dark backgrounds */
    --dm-border: #334155; /* slate-700 */
    --dm-border-light: #1e293b; /* slate-800 */
    --dm-border-dark: #475569; /* slate-600 */


    /* ================================================
       PRIMARY COLOURS - Muted Golden Yellow
       ================================================ */
    --dm-primary: #c9b458;
    --dm-primary-hover: #d4c06a;
    --dm-primary-active: #dfcc7c;
    --dm-primary-light: rgba(201, 180, 88, 0.15);
    --dm-primary-dark: #a89740;

    /* Focus ring with subtle lemon colour */
    --dm-focus-ring: 0 0 0 3px rgba(201, 180, 88, 0.3);
    --dm-border-focus: #c9b458;

    /* ================================================
       SECONDARY COLOURS - Warm Stone
       ================================================ */
    --dm-secondary: #9a9583;
    --dm-secondary-hover: #a8a392;
    --dm-secondary-active: #b6b1a1;
    --dm-secondary-light: rgba(154, 149, 131, 0.15);
    --dm-secondary-dark: #7a766a;

    /* ================================================
       STATUS COLOURS - Muted tones
       ================================================ */
    --dm-success: #7da453;
    --dm-success-hover: #8fb365;
    --dm-success-active: #a1c277;
    --dm-success-light: rgba(125, 164, 83, 0.15);
    --dm-success-dark: #658840;

    --dm-info: #6a9fb5;
    --dm-info-hover: #7dadc1;
    --dm-info-active: #90bbcd;
    --dm-info-light: rgba(106, 159, 181, 0.15);
    --dm-info-dark: #527d91;

    --dm-warning: #d4a843;
    --dm-warning-hover: #dbb658;
    --dm-warning-active: #e2c46d;
    --dm-warning-light: rgba(212, 168, 67, 0.15);
    --dm-warning-dark: #b08a30;
    --dm-warning-text: #d4c070;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #e8e2c8; /* Pale straw */
    --dm-accent-2: #d4cba8; /* Soft wheat */
    --dm-accent-3: #c9b458; /* Muted gold */
    --dm-accent-4: #a89740; /* Dark honey */

    /* ================================================
       SELECTION
       ================================================ */
    --dm-selected-bg: rgba(201, 180, 88, 0.15);
    --dm-tab-active-border: #c9b458;
    --dm-tab-active-text: #d4b858;
    --dm-progress-bar: #c9b458;

    /* Danger - Standard red */
    --dm-danger: #dc3545;
    --dm-danger-hover: #bb2d3b;
    --dm-danger-active: #b02a37;
    --dm-danger-light: rgba(220, 53, 69, 0.15);
    --dm-danger-dark: #842029;

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(255, 255, 255, 0.07);
    --dm-active-bg: rgba(255, 255, 255, 0.1);
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #1e293b;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #0f172a;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #0f172a;

    /* Progress */
    --dm-progress-bg: #334155;

    /* Scrollbar */
    --dm-scrollbar-track: #1e293b;
    --dm-scrollbar-thumb: #475569;
    --dm-scrollbar-thumb-hover: #64748b;

    /* Code */
    --dm-code-bg: #0f172a;
    --dm-code-text: #fca5a5;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

}
/**
 * Domma Silver Light Theme
 * Light gray/silver colour palette
 * Light mode variant
 */

.dm-theme-silver-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Light/white backgrounds */
    --dm-background: #ffffff;
    --dm-background-alt: #f8f9fa;
    --dm-surface: #ffffff;
    --dm-surface-raised: #f1f3f5;
    --dm-surface-overlay: #f8f9fa;

    /* Text - Dark colors for readability on light */
    --dm-text: #212529;
    --dm-text-secondary: #495057;
    --dm-text-muted: #6c757d;
    --dm-text-disabled: #adb5bd;
    --dm-text-inverse: #ffffff;

    /* Borders - Subtle on light backgrounds */
    --dm-border: #dee2e6;
    --dm-border-light: #e9ecef;
    --dm-border-dark: #ced4da;


    --dm-primary: #a0aec0;
    --dm-primary-hover: #b0bac9;
    --dm-primary-active: #c0c6d2;
    --dm-primary-light: rgba(160, 174, 192, 0.15);
    --dm-primary-dark: #718096;

    --dm-secondary: #cbd5e0;
    --dm-secondary-hover: #d5dce6;
    --dm-secondary-active: #dfe3ec;
    --dm-secondary-light: rgba(203, 213, 224, 0.15);
    --dm-secondary-dark: #a0aec0;

    --dm-success: #9ae6b4;
    --dm-success-light: rgba(154, 230, 180, 0.15);

    --dm-info: #90cdf4;
    --dm-info-light: rgba(144, 205, 244, 0.15);

    --dm-focus-ring: 0 0 0 3px rgba(160, 174, 192, 0.35);
    --dm-selected-bg: rgba(160, 174, 192, 0.2);
    --dm-tab-active-border: #a0aec0;
    --dm-tab-active-text: #a0aec0;
    --dm-progress-bar: #a0aec0;

    /* Danger - Bright red (standard dark mode) */
    --dm-danger: #ef4444; /* red-500 */
    --dm-danger-hover: #f87171; /* red-400 */
    --dm-danger-active: #fca5a5; /* red-300 */
    --dm-danger-light: rgba(248, 113, 113, 0.15);
    --dm-danger-dark: #dc2626; /* red-600 */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-active-bg: rgba(0, 0, 0, 0.08);
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #e9ecef;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #212529;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #ffffff;

    /* Progress */
    --dm-progress-bg: #e9ecef;

    /* Scrollbar */
    --dm-scrollbar-track: #f1f1f1;
    --dm-scrollbar-thumb: #c1c1c1;
    --dm-scrollbar-thumb-hover: #a8a8a8;

    /* Code */
    --dm-code-bg: #f8f9fa;
    --dm-code-text: #e83e8c;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);

}
/**
 * Domma Silver Dark Theme
 * Light gray/silver colour palette
 * Dark mode variant
 */

.dm-theme-silver-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Dark slate/charcoal backgrounds */
    --dm-background: #0f172a; /* slate-900 */
    --dm-background-alt: #1e293b; /* slate-800 */
    --dm-surface: #1e293b; /* slate-800 */
    --dm-surface-raised: #334155; /* slate-700 */
    --dm-surface-overlay: #334155; /* slate-700 */

    /* Text - Light colors for readability on dark */
    --dm-text: #e2e8f0; /* slate-200 */
    --dm-text-secondary: #94a3b8; /* slate-400 */
    --dm-text-muted: #64748b; /* slate-500 */
    --dm-text-disabled: #475569; /* slate-600 */
    --dm-text-inverse: #0f172a; /* slate-900 */

    /* Borders - Subtle on dark backgrounds */
    --dm-border: #334155; /* slate-700 */
    --dm-border-light: #1e293b; /* slate-800 */
    --dm-border-dark: #475569; /* slate-600 */


    /* ================================================
       PRIMARY COLOURS - Silver Gray
       ================================================ */
    --dm-primary: #708090;
    --dm-primary-hover: #84929f;
    --dm-primary-active: #98a4ae;
    --dm-primary-light: rgba(112, 128, 144, 0.15);
    --dm-primary-dark: #4a5568;

    /* Focus ring with silver colour */
    --dm-focus-ring: 0 0 0 3px rgba(112, 128, 144, 0.3);
    --dm-border-focus: #708090;

    /* ================================================
       SECONDARY COLOURS - Cool Gray
       ================================================ */
    --dm-secondary: #a0aec0;
    --dm-secondary-hover: #b0bac9;
    --dm-secondary-active: #c0c6d2;
    --dm-secondary-light: rgba(160, 174, 192, 0.15);
    --dm-secondary-dark: #718096;

    /* ================================================
       STATUS COLOURS - Neutral-tinted
       ================================================ */
    --dm-success: #68d391;
    --dm-success-hover: #7cdaa0;
    --dm-success-active: #90e1af;
    --dm-success-light: rgba(104, 211, 145, 0.15);
    --dm-success-dark: #48bb78;

    --dm-info: #63b3ed;
    --dm-info-hover: #79bff0;
    --dm-info-active: #8fcbf3;
    --dm-info-light: rgba(99, 179, 237, 0.15);
    --dm-info-dark: #4299e1;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #e2e8f0; /* Light slate */
    --dm-accent-2: #cbd5e0; /* Cool gray */
    --dm-accent-3: #a0aec0; /* Gray blue */
    --dm-accent-4: #4a5568; /* Dark slate */

    /* ================================================
       SELECTION
       ================================================ */
    --dm-selected-bg: rgba(112, 128, 144, 0.12);
    --dm-tab-active-border: #708090;
    --dm-tab-active-text: #a0aec0;
    --dm-progress-bar: #708090;

    /* Danger - Standard red */
    --dm-danger: #dc3545;
    --dm-danger-hover: #bb2d3b;
    --dm-danger-active: #b02a37;
    --dm-danger-light: rgba(220, 53, 69, 0.15);
    --dm-danger-dark: #842029;

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(255, 255, 255, 0.07);
    --dm-active-bg: rgba(255, 255, 255, 0.1);
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #1e293b;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #0f172a;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #0f172a;

    /* Progress */
    --dm-progress-bg: #334155;

    /* Scrollbar */
    --dm-scrollbar-track: #1e293b;
    --dm-scrollbar-thumb: #475569;
    --dm-scrollbar-thumb-hover: #64748b;

    /* Code */
    --dm-code-bg: #0f172a;
    --dm-code-text: #fca5a5;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

}
/**
 * Domma Charcoal Light Theme
 * Dark gray/charcoal colour palette
 * Light mode variant
 */

.dm-theme-charcoal-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Light/white backgrounds */
    --dm-background: #ffffff;
    --dm-background-alt: #f8f9fa;
    --dm-surface: #ffffff;
    --dm-surface-raised: #f1f3f5;
    --dm-surface-overlay: #f8f9fa;

    /* Text - Dark colors for readability on light */
    --dm-text: #1a1a1a; /* Even darker for better contrast */
    --dm-text-secondary: #495057;
    --dm-text-muted: #6c757d;
    --dm-text-disabled: #adb5bd;
    --dm-text-inverse: #ffffff;

    /* Borders - Subtle on light backgrounds */
    --dm-border: #dee2e6;
    --dm-border-light: #e9ecef;
    --dm-border-dark: #ced4da;


    --dm-primary: #78909c;
    --dm-primary-hover: #546e7a;
    --dm-primary-active: #455a64;
    --dm-primary-light: rgba(120, 144, 156, 0.15);
    --dm-primary-dark: #607d8b;

    --dm-secondary: #90a4ae;
    --dm-secondary-hover: #a1b3bb;
    --dm-secondary-active: #b2c2c8;
    --dm-secondary-light: rgba(144, 164, 174, 0.15);
    --dm-secondary-dark: #78909c;

    --dm-success: #81c784;
    --dm-success-light: rgba(129, 199, 132, 0.15);

    --dm-info: #64b5f6;
    --dm-info-light: rgba(100, 181, 246, 0.15);

    --dm-focus-ring: 0 0 0 3px rgba(120, 144, 156, 0.35);
    --dm-selected-bg: rgba(120, 144, 156, 0.2);
    --dm-tab-active-border: #78909c;
    --dm-tab-active-text: #78909c;
    --dm-progress-bar: #78909c;

    /* Danger - Bright red (standard dark mode) */
    --dm-danger: #ef4444; /* red-500 */
    --dm-danger-hover: #f87171; /* red-400 */
    --dm-danger-active: #fca5a5; /* red-300 */
    --dm-danger-light: rgba(248, 113, 113, 0.15);
    --dm-danger-dark: #dc2626; /* red-600 */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-active-bg: rgba(0, 0, 0, 0.08);
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #e9ecef;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #212529;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #ffffff;

    /* Progress */
    --dm-progress-bg: #e9ecef;

    /* Scrollbar */
    --dm-scrollbar-track: #f1f1f1;
    --dm-scrollbar-thumb: #c1c1c1;
    --dm-scrollbar-thumb-hover: #a8a8a8;

    /* Code */
    --dm-code-bg: #f8f9fa;
    --dm-code-text: #e83e8c;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);

}
/**
 * Domma Charcoal Dark Theme
 * Dark gray/charcoal colour palette
 * Dark mode variant - Default theme for Domma v0.5.0a
 */

.dm-theme-charcoal-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Dark slate/charcoal backgrounds */
    --dm-background: #0f172a; /* slate-900 */
    --dm-background-alt: #1e293b; /* slate-800 */
    --dm-surface: #1e293b; /* slate-800 */
    --dm-surface-raised: #334155; /* slate-700 */
    --dm-surface-overlay: #334155; /* slate-700 */

    /* Text - Light colors for readability on dark */
    --dm-text: #e2e8f0; /* slate-200 */
    --dm-text-secondary: #94a3b8; /* slate-400 */
    --dm-text-muted: #64748b; /* slate-500 */
    --dm-text-disabled: #475569; /* slate-600 */
    --dm-text-inverse: #0f172a; /* slate-900 */

    /* Borders - Subtle on dark backgrounds */
    --dm-border: #334155; /* slate-700 */
    --dm-border-light: #1e293b; /* slate-800 */
    --dm-border-dark: #475569; /* slate-600 */


    /* ================================================
       PRIMARY COLOURS - Charcoal Gray
       ================================================ */
    --dm-primary: #8a9bab;
    --dm-primary-hover: #4a5d69;
    --dm-primary-active: #5e7583;
    --dm-primary-light: rgba(138, 155, 171, 0.15);
    --dm-primary-dark: #1c2428;

    /* Focus ring with charcoal colour */
    --dm-focus-ring: 0 0 0 3px rgba(54, 69, 79, 0.3);
    --dm-border-focus: #36454f;

    /* ================================================
       SECONDARY COLOURS - Slate
       ================================================ */
    --dm-secondary: #5f6f7a;
    --dm-secondary-hover: #738290;
    --dm-secondary-active: #8795a0;
    --dm-secondary-light: rgba(95, 111, 122, 0.15);
    --dm-secondary-dark: #3d4a52;

    /* ================================================
       STATUS COLOURS - Neutral-tinted
       ================================================ */
    --dm-success: #4caf50;
    --dm-success-hover: #61b965;
    --dm-success-active: #76c37a;
    --dm-success-light: rgba(76, 175, 80, 0.15);
    --dm-success-dark: #388e3c;

    --dm-info: #2196f3;
    --dm-info-hover: #42a5f5;
    --dm-info-active: #64b5f6;
    --dm-info-light: rgba(33, 150, 243, 0.15);
    --dm-info-dark: #1976d2;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #78909c; /* Blue gray */
    --dm-accent-2: #607d8b; /* Gray blue */
    --dm-accent-3: #455a64; /* Dark blue gray */
    --dm-accent-4: #263238; /* Charcoal */

    /* ================================================
       SELECTION
       ================================================ */
    --dm-selected-bg: rgba(54, 69, 79, 0.12);
    --dm-tab-active-border: #8a9bab;
    --dm-tab-active-text: #b0bec5;
    --dm-progress-bar: #8a9bab;

    /* Danger - Standard red */
    --dm-danger: #dc3545;
    --dm-danger-hover: #bb2d3b;
    --dm-danger-active: #b02a37;
    --dm-danger-light: rgba(220, 53, 69, 0.15);
    --dm-danger-dark: #842029;

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(255, 255, 255, 0.07);
    --dm-active-bg: rgba(255, 255, 255, 0.1);
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #1e293b;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #0f172a;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #0f172a;

    /* Progress */
    --dm-progress-bg: #334155;

    /* Scrollbar */
    --dm-scrollbar-track: #1e293b;
    --dm-scrollbar-thumb: #475569;
    --dm-scrollbar-thumb-hover: #64748b;

    /* Code */
    --dm-code-bg: #0f172a;
    --dm-code-text: #fca5a5;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

}
/**
 * Domma Christmas Light Theme — "Frosty Morning"
 * Ice-blue tinted backgrounds evoking frost on windows, deep pine-green text
 * Classic Christmas Red primary, rich Holly Green secondary
 */

.dm-theme-christmas-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Frosty Morning Base
       ================================================ */

    /* Backgrounds - Ice-blue tinted frost */
    --dm-background: #F5F8FC;
    --dm-background-alt: #EDF2F8;
    --dm-surface: #FFFFFF;
    --dm-surface-raised: #F0F4FA;
    --dm-surface-overlay: #EDF2F8;

    /* Text - Deep pine green for festive character */
    --dm-text: #1A2A1E;
    --dm-text-secondary: #3D5444;
    --dm-text-muted: #6B8074;
    --dm-text-disabled: #A4B5AC;
    --dm-text-inverse: #FFFFFF;

    /* Borders - Ice blue-grey */
    --dm-border: #D0DCE8;
    --dm-border-light: #E2EBF2;
    --dm-border-dark: #B8C8D8;

    /* ================================================
       PRIMARY COLOURS - Rich Holly Green
       ================================================ */
    --dm-primary: #2D6B3F;
    --dm-primary-hover: #367D4A;
    --dm-primary-active: #248F35;
    --dm-primary-light: rgba(45, 107, 63, 0.12);
    --dm-primary-dark: #1E5230;

    /* Focus ring with holly green glow */
    --dm-focus-ring: 0 0 0 3px rgba(45, 107, 63, 0.3);
    --dm-border-focus: #2D6B3F;

    /* ================================================
       SECONDARY COLOURS - Classic Christmas Red
       ================================================ */
    --dm-secondary: #C41E3A;
    --dm-secondary-hover: #D42C48;
    --dm-secondary-active: #A8182E;
    --dm-secondary-light: rgba(196, 30, 58, 0.12);
    --dm-secondary-dark: #9A1830;

    /* ================================================
       STATUS COLOURS - Festive-harmonised
       ================================================ */
    --dm-success: #228B22;
    --dm-success-hover: #2EA02E;
    --dm-success-active: #3AB53A;
    --dm-success-light: rgba(34, 139, 34, 0.12);
    --dm-success-dark: #1A6B1A;

    --dm-info: #3A7FB5;
    --dm-info-hover: #4A8FC5;
    --dm-info-active: #5A9FD5;
    --dm-info-light: rgba(58, 127, 181, 0.12);
    --dm-info-dark: #2A6090;

    --dm-warning: #D4AF37;
    --dm-warning-hover: #E0BB4A;
    --dm-warning-active: #EAC85A;
    --dm-warning-light: rgba(212, 175, 55, 0.12);
    --dm-warning-dark: #B8962D;
    --dm-warning-text: #9A7A1A;

    --dm-danger: #BB2528;
    --dm-danger-hover: #CC3336;
    --dm-danger-active: #DD4144;
    --dm-danger-light: rgba(187, 37, 40, 0.12);
    --dm-danger-dark: #991E20;

    /* ================================================
       ACCENT COLOURS - Full festive palette
       ================================================ */
    --dm-accent-1: #D4AF37; /* Gold */
    --dm-accent-2: #BB2528; /* Holly Berry */
    --dm-accent-3: #228B22; /* Pine Green */
    --dm-accent-4: #A8D5E5; /* Ice Blue */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(26, 42, 30, 0.04);
    --dm-active-bg: rgba(26, 42, 30, 0.08);
    --dm-selected-bg: rgba(45, 107, 63, 0.12);
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #EDF2F8;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(30, 80, 130, 0.03);
    --dm-table-hover-bg: rgba(30, 80, 130, 0.05);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(26, 42, 30, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #1A2A1E;
    --dm-tooltip-text: #F5F8FC;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #2D6B3F;
    --dm-tab-active-text: #2D6B3F;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-primary);
    --dm-badge-text: #FFFFFF;

    /* Pills */
    --dm-pill-bg: #EDF2F8;
    --dm-pill-color: #1A2A1E;
    --dm-pill-hover-bg: #D0DCE8;

    /* Autocomplete / Pillbox */
    --dm-autocomplete-bg: var(--dm-surface);
    --dm-autocomplete-border: var(--dm-border);
    --dm-autocomplete-shadow: var(--dm-shadow-md);
    --dm-autocomplete-item-hover: var(--dm-hover-bg);
    --dm-autocomplete-item-active: var(--dm-selected-bg);
    --dm-autocomplete-highlight: var(--dm-primary-light);
    --dm-pillbox-bg: var(--dm-surface);
    --dm-pillbox-border: var(--dm-border);

    /* Progress */
    --dm-progress-bg: #D0DCE8;
    --dm-progress-bar: #2D6B3F;

    /* Scrollbar */
    --dm-scrollbar-track: #EDF2F8;
    --dm-scrollbar-thumb: #B8C8D8;
    --dm-scrollbar-thumb-hover: #C41E3A;

    /* Code */
    --dm-code-bg: #EDF2F8;
    --dm-code-text: #2D6B3F;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Frosty blue-tinted (like Wedding's gold)
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(30 80 130 / 0.06);
    --dm-shadow: 0 1px 3px 0 rgb(30 80 130 / 0.1), 0 1px 2px -1px rgb(30 80 130 / 0.08);
    --dm-shadow-md: 0 4px 6px -1px rgb(30 80 130 / 0.1), 0 2px 4px -2px rgb(30 80 130 / 0.08);
    --dm-shadow-lg: 0 10px 15px -3px rgb(30 80 130 / 0.1), 0 4px 6px -4px rgb(30 80 130 / 0.07);
    --dm-shadow-xl: 0 20px 25px -5px rgb(30 80 130 / 0.1), 0 8px 10px -6px rgb(30 80 130 / 0.07);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(30 80 130 / 0.2);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(30 80 130 / 0.06);

    /* ================================================
       ELEVATION / DEPTH - Frosty blue undertone
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(30, 80, 130, 0.1), 0 1px 2px rgba(30, 80, 130, 0.07);
    --dm-elevation-2: 0 4px 6px rgba(30, 80, 130, 0.09), 0 2px 4px rgba(30, 80, 130, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(30, 80, 130, 0.09), 0 4px 6px rgba(30, 80, 130, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(30, 80, 130, 0.12), 0 10px 10px rgba(30, 80, 130, 0.04);
}

/* ============================================================
   DECORATIVE CSS — "Frosty Morning" festive embellishments
   ============================================================ */

/* Snow-dust background — subtle radial dots on the page root */
.dm-theme-christmas-light {
    background-image:
        radial-gradient(circle, rgba(168, 213, 229, 0.35) 1px, transparent 1px),
        radial-gradient(circle, rgba(45, 107, 63, 0.15) 1px, transparent 1px);
    background-size: 40px 40px, 60px 60px;
    background-position: 0 0, 20px 20px;
}

/* Green-Gold-Red gradient stripe on card tops */
.dm-theme-christmas-light .card {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #228B22 0%, #D4AF37 50%, #C41E3A 100%) 1;
    border-image-slice: 1;
}

/* Candy-stripe progress bars */
.dm-theme-christmas-light .dm-progression-progress-bar,
.dm-theme-christmas-light .progress-bar {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(255, 255, 255, 0.25) 6px,
        rgba(255, 255, 255, 0.25) 12px
    );
    background-color: #2D6B3F;
}

/* Festive syntax highlighting — green keywords, red strings, gold functions */
.dm-theme-christmas-light .code-block .syntax-keyword {
    color: #2D6B3F;
    font-weight: 600;
}

.dm-theme-christmas-light .code-block .syntax-string,
.dm-theme-christmas-light .code-block .syntax-template-string {
    color: #C41E3A;
}

.dm-theme-christmas-light .code-block .syntax-function {
    color: #9A7A1A;
}

/**
 * Domma Christmas Dark Theme — "Christmas Eve"
 * Deep forest green backgrounds, pure moonlit-white text, green/red undertones in interaction
 * Bright Holly Green primary, Christmas Red secondary; firelight-ember shadows
 */

.dm-theme-christmas-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Christmas Eve Base
       ================================================ */

    /* Backgrounds - Deep forest green (single biggest change from generic slate) */
    --dm-background: #0A1A10;
    --dm-background-alt: #122416;
    --dm-surface: #1A3020;
    --dm-surface-raised: #243A2C;
    --dm-surface-overlay: #243A2C;

    /* Text - Pure snow white; no green tint — moonlight on fresh snow */
    --dm-text: #FFFFFF;
    --dm-text-secondary: #D0D0D0;
    --dm-text-muted: #8A8A8A;
    --dm-text-disabled: #505050;
    --dm-text-inverse: #0A1A10;

    /* Borders - Dark forest tones */
    --dm-border: #1E3828;
    --dm-border-light: #162E1E;
    --dm-border-dark: #2A4A34;

    /* ================================================
       PRIMARY COLOURS - Bright Holly Green (dark-mode readability)
       ================================================ */
    --dm-primary: #5CB875;
    --dm-primary-hover: #70C487;
    --dm-primary-active: #84D09A;
    --dm-primary-light: rgba(92, 184, 117, 0.15);
    --dm-primary-dark: #3A9455;

    /* Focus ring with holly green glow */
    --dm-focus-ring: 0 0 0 3px rgba(92, 184, 117, 0.35);
    --dm-border-focus: #5CB875;

    /* ================================================
       SECONDARY COLOURS - Bright Christmas Red (dark-mode convention)
       ================================================ */
    --dm-secondary: #E85565;
    --dm-secondary-hover: #F06B78;
    --dm-secondary-active: #D44050;
    --dm-secondary-light: rgba(232, 85, 101, 0.15);
    --dm-secondary-dark: #C41E3A;

    /* ================================================
       STATUS COLOURS - Festive-tinted for dark backgrounds
       ================================================ */
    --dm-success: #4DB86A;
    --dm-success-hover: #60C47A;
    --dm-success-active: #74D08A;
    --dm-success-light: rgba(77, 184, 106, 0.15);
    --dm-success-dark: #2E9A4E;

    --dm-info: #7EC8E3;
    --dm-info-hover: #96D4EC;
    --dm-info-active: #AEE0F5;
    --dm-info-light: rgba(126, 200, 227, 0.15);
    --dm-info-dark: #5AACCF;

    --dm-warning: #F0D264;
    --dm-warning-hover: #F5DC7A;
    --dm-warning-active: #F8E491;
    --dm-warning-light: rgba(240, 210, 100, 0.15);
    --dm-warning-dark: #D4B040;
    --dm-warning-text: #F0D264;

    --dm-danger: #F07070;
    --dm-danger-hover: #F58888;
    --dm-danger-active: #FA9E9E;
    --dm-danger-light: rgba(240, 112, 112, 0.15);
    --dm-danger-dark: #D44444;

    /* ================================================
       ACCENT COLOURS - Bright festive palette for dark backgrounds
       ================================================ */
    --dm-accent-1: #F0D264; /* Bright Gold */
    --dm-accent-2: #E85565; /* Bright Berry */
    --dm-accent-3: #5CB875; /* Bright Pine */
    --dm-accent-4: #F5F5F5; /* Snow White */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(92, 184, 117, 0.09);   /* pine-tree ambient glow */
    --dm-active-bg: rgba(232, 85, 101, 0.11);  /* Christmas-light warmth */
    --dm-selected-bg: rgba(92, 184, 117, 0.15);
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #122416;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(92, 184, 117, 0.05); /* faint pine-shadow stripe */
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(4, 18, 8, 0.84); /* dark forest night, not flat black */
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #0A1A10;
    --dm-tooltip-text: #FFFFFF;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #5CB875;
    --dm-tab-active-text: #5CB875;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-primary);
    --dm-badge-text: #0A1A10;

    /* Pills */
    --dm-pill-bg: #243A2C;
    --dm-pill-color: var(--dm-text);
    --dm-pill-hover-bg: #2A4A34;

    /* Autocomplete / Pillbox */
    --dm-autocomplete-bg: var(--dm-surface);
    --dm-autocomplete-border: var(--dm-border);
    --dm-autocomplete-shadow: var(--dm-shadow-md);
    --dm-autocomplete-item-hover: var(--dm-hover-bg);
    --dm-autocomplete-item-active: var(--dm-selected-bg);
    --dm-autocomplete-highlight: var(--dm-primary-light);
    --dm-pillbox-bg: var(--dm-surface);
    --dm-pillbox-border: var(--dm-border);

    /* Progress */
    --dm-progress-bg: #1E3828;
    --dm-progress-bar: #5CB875;

    /* Scrollbar */
    --dm-scrollbar-track: #122416;
    --dm-scrollbar-thumb: #2A4A34;
    --dm-scrollbar-thumb-hover: #E85565;

    /* Code */
    --dm-code-bg: #0A1A10;
    --dm-code-text: #F0D264;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Warm firelight tint (black base + red ember glow)
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(180 60 40 / 0.05);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(180 60 40 / 0.07);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(180 60 40 / 0.08);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.65);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.25);

    /* ================================================
       ELEVATION / DEPTH - Warm firelight undertone
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(180, 60, 40, 0.05);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(180, 60, 40, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.45), 0 4px 6px rgba(180, 60, 40, 0.07);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(180, 60, 40, 0.08);
}

/* ============================================================
   DECORATIVE CSS — "Christmas Eve" festive embellishments
   ============================================================ */

/* Snow-dust background — three festive dot layers: white snow, green pine, red Christmas lights */
.dm-theme-christmas-dark {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
        radial-gradient(circle, rgba(92, 184, 117, 0.09) 1px, transparent 1px),
        radial-gradient(circle, rgba(232, 85, 101, 0.06) 1px, transparent 1px);
    background-size: 40px 40px, 65px 65px, 95px 95px;
    background-position: 0 0, 20px 20px, 47px 11px;
}

/* Green-Gold-Red gradient stripe on card tops (darker, richer tones) */
.dm-theme-christmas-dark .card {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #5CB875 0%, #F0D264 50%, #E85565 100%) 1;
    border-image-slice: 1;
}

/* Candy-stripe progress bars using surface colour for stripes */
.dm-theme-christmas-dark .dm-progression-progress-bar,
.dm-theme-christmas-dark .progress-bar {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(26, 48, 32, 0.4) 6px,
        rgba(26, 48, 32, 0.4) 12px
    );
    background-color: #5CB875;
}

/* Festive syntax highlighting — brighter versions for dark backgrounds */
.dm-theme-christmas-dark .code-block .syntax-keyword {
    color: #5CB875;
    font-weight: 600;
}

.dm-theme-christmas-dark .code-block .syntax-string,
.dm-theme-christmas-dark .code-block .syntax-template-string {
    color: #E85565;
}

.dm-theme-christmas-dark .code-block .syntax-function {
    color: #F0D264;
}

/**
 * Domma Unicorn Light Theme
 * Predominantly pink and purple tones
 * Light mode variant - light backgrounds with vibrant unicorn palette
 */

.dm-theme-unicorn-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Light/white backgrounds */
    --dm-background: #ffffff;
    --dm-background-alt: #faf5fc;
    --dm-surface: #ffffff;
    --dm-surface-raised: #f3e5f5;
    --dm-surface-overlay: #faf5fc;

    /* Text - Dark colours for readability on light */
    --dm-text: #2d1b3d;
    --dm-text-secondary: #5d3a6e;
    --dm-text-muted: #8e6b9e;
    --dm-text-disabled: #c4a8d0;
    --dm-text-inverse: #ffffff;

    /* Borders - Subtle purple tint on light backgrounds */
    --dm-border: #e1bee7;
    --dm-border-light: #f3e5f5;
    --dm-border-dark: #ce93d8;

    /* ================================================
       UNICORN PRIMARY COLOURS - Amethyst Purple
       ================================================ */
    --dm-primary: #9b59b6;
    --dm-primary-hover: #8e44ad;
    --dm-primary-active: #7d3c98;
    --dm-primary-light: #f3e5f5;
    --dm-primary-dark: #7d3c98;

    /* Focus ring with soft purple colour */
    --dm-focus-ring: 0 0 0 3px rgba(155, 89, 182, 0.35);
    --dm-border-focus: #9b59b6;

    /* ================================================
       SECONDARY COLOURS - Hot Pink
       ================================================ */
    --dm-secondary: #e91e90;
    --dm-secondary-hover: #d81b7f;
    --dm-secondary-active: #c2176e;
    --dm-secondary-light: #fce4ec;
    --dm-secondary-dark: #c2176e;

    /* ================================================
       STATUS COLOURS
       ================================================ */
    --dm-success: #66bb6a;
    --dm-success-hover: #57a85b;
    --dm-success-active: #43a047;
    --dm-success-light: rgba(102, 187, 106, 0.15);
    --dm-success-dark: #388e3c;

    --dm-info: #42a5f5;
    --dm-info-hover: #2196f3;
    --dm-info-active: #1e88e5;
    --dm-info-light: rgba(66, 165, 245, 0.15);
    --dm-info-dark: #1976d2;

    --dm-warning: #ffa726;
    --dm-warning-hover: #fb8c00;
    --dm-warning-active: #f57c00;
    --dm-warning-light: rgba(255, 167, 38, 0.15);
    --dm-warning-dark: #e65100;
    --dm-warning-text: #e65100;

    --dm-danger: #ef5350;
    --dm-danger-hover: #e53935;
    --dm-danger-active: #c62828;
    --dm-danger-light: rgba(239, 83, 80, 0.15);
    --dm-danger-dark: #c62828;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #f48fb1; /* Soft pink */
    --dm-accent-2: #ce93d8; /* Light purple */
    --dm-accent-3: #ab47bc; /* Medium purple */
    --dm-accent-4: #9b59b6; /* Amethyst */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(155, 89, 182, 0.06);
    --dm-active-bg: rgba(155, 89, 182, 0.12);
    --dm-selected-bg: rgba(155, 89, 182, 0.12);
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #f3e5f5;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(155, 89, 182, 0.03);
    --dm-table-hover-bg: rgba(155, 89, 182, 0.06);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(45, 27, 61, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #2d1b3d;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #9b59b6;
    --dm-tab-active-text: #7d3c98;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-primary);
    --dm-badge-text: #ffffff;

    /* Progress */
    --dm-progress-bg: #f3e5f5;
    --dm-progress-bar: #9b59b6;

    /* Scrollbar */
    --dm-scrollbar-track: #f3e5f5;
    --dm-scrollbar-thumb: #ce93d8;
    --dm-scrollbar-thumb-hover: #ab47bc;

    /* Code */
    --dm-code-bg: #faf5fc;
    --dm-code-text: #e91e90;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/**
 * Domma Unicorn Dark Theme
 * Predominantly pink and purple tones
 * Dark mode variant - deep purple-black backgrounds with luminous accents
 */

.dm-theme-unicorn-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Deep purple-black backgrounds */
    --dm-background: #1a0e24;
    --dm-background-alt: #241432;
    --dm-surface: #241432;
    --dm-surface-raised: #341a45;
    --dm-surface-overlay: #341a45;

    /* Text - Light colours for readability on dark */
    --dm-text: #f3e5f5;
    --dm-text-secondary: #ce93d8;
    --dm-text-muted: #ab47bc;
    --dm-text-disabled: #6a3d7a;
    --dm-text-inverse: #1a0e24;

    /* Borders - Muted purple on dark backgrounds */
    --dm-border: #4a2660;
    --dm-border-light: #341a45;
    --dm-border-dark: #6a3d7a;

    /* ================================================
       UNICORN PRIMARY COLOURS - Lighter purple for contrast
       ================================================ */
    --dm-primary: #ce93d8;
    --dm-primary-hover: #ba68c8;
    --dm-primary-active: #ab47bc;
    --dm-primary-light: #f3e5f5;
    --dm-primary-dark: #ab47bc;

    /* Focus ring with soft purple colour */
    --dm-focus-ring: 0 0 0 3px rgba(206, 147, 216, 0.35);
    --dm-border-focus: #ce93d8;

    /* ================================================
       SECONDARY COLOURS - Lighter pink for contrast
       ================================================ */
    --dm-secondary: #f48fb1;
    --dm-secondary-hover: #f06292;
    --dm-secondary-active: #ec407a;
    --dm-secondary-light: #fce4ec;
    --dm-secondary-dark: #ec407a;

    /* ================================================
       STATUS COLOURS
       ================================================ */
    --dm-success: #66bb6a;
    --dm-success-hover: #81c784;
    --dm-success-active: #a5d6a7;
    --dm-success-light: rgba(102, 187, 106, 0.2);
    --dm-success-dark: #43a047;

    --dm-info: #42a5f5;
    --dm-info-hover: #64b5f6;
    --dm-info-active: #90caf9;
    --dm-info-light: rgba(66, 165, 245, 0.2);
    --dm-info-dark: #1976d2;

    --dm-warning: #ffa726;
    --dm-warning-hover: #ffb74d;
    --dm-warning-active: #ffcc80;
    --dm-warning-light: rgba(255, 167, 38, 0.2);
    --dm-warning-dark: #f57c00;
    --dm-warning-text: #ffb74d;

    --dm-danger: #ef5350;
    --dm-danger-hover: #e57373;
    --dm-danger-active: #ef9a9a;
    --dm-danger-light: rgba(239, 83, 80, 0.2);
    --dm-danger-dark: #c62828;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #ce93d8; /* Light purple */
    --dm-accent-2: #f48fb1; /* Soft pink */
    --dm-accent-3: #ba68c8; /* Medium purple */
    --dm-accent-4: #9b59b6; /* Amethyst */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(206, 147, 216, 0.1);
    --dm-active-bg: rgba(206, 147, 216, 0.15);
    --dm-selected-bg: rgba(206, 147, 216, 0.15);
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #241432;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(206, 147, 216, 0.04);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #1a0e24;
    --dm-tooltip-text: #f3e5f5;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #ce93d8;
    --dm-tab-active-text: #ce93d8;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-primary);
    --dm-badge-text: #1a0e24;

    /* Progress */
    --dm-progress-bg: #341a45;
    --dm-progress-bar: #ce93d8;

    /* Scrollbar */
    --dm-scrollbar-track: #241432;
    --dm-scrollbar-thumb: #4a2660;
    --dm-scrollbar-thumb-hover: #6a3d7a;

    /* Code */
    --dm-code-bg: #1e1228;
    --dm-code-text: #f48fb1;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/**
 * Domma Dreamy Light Theme
 * Predominantly beige and biscuit tones
 * Light mode variant - warm cream backgrounds with earthy accents
 */

.dm-theme-dreamy-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Warm white and biscuit surfaces */
    --dm-background: #fffdf9;
    --dm-background-alt: #f5f0eb;
    --dm-surface: #fffdf9;
    --dm-surface-raised: #f0ebe4;
    --dm-surface-overlay: #f5f0eb;

    /* Text - Dark chocolate for readability on light */
    --dm-text: #3e2723;
    --dm-text-secondary: #5d4037;
    --dm-text-muted: #8d6e63;
    --dm-text-disabled: #bcaaa4;
    --dm-text-inverse: #ffffff;

    /* Borders - Light biscuit on warm backgrounds */
    --dm-border: #d7ccc8;
    --dm-border-light: #efebe9;
    --dm-border-dark: #bcaaa4;

    /* ================================================
       DREAMY PRIMARY COLOURS - Warm Brown
       ================================================ */
    --dm-primary: #8d6e63;
    --dm-primary-hover: #6d4c41;
    --dm-primary-active: #5d4037;
    --dm-primary-light: #efebe9;
    --dm-primary-dark: #6d4c41;

    /* Focus ring with warm brown colour */
    --dm-focus-ring: 0 0 0 3px rgba(141, 110, 99, 0.35);
    --dm-border-focus: #8d6e63;

    /* ================================================
       SECONDARY COLOURS - Dusty Rose-Brown
       ================================================ */
    --dm-secondary: #a1887f;
    --dm-secondary-hover: #8d6e63;
    --dm-secondary-active: #795548;
    --dm-secondary-light: #faf5f0;
    --dm-secondary-dark: #795548;

    /* ================================================
       STATUS COLOURS
       ================================================ */
    --dm-success: #81c784;
    --dm-success-hover: #66bb6a;
    --dm-success-active: #4caf50;
    --dm-success-light: rgba(129, 199, 132, 0.15);
    --dm-success-dark: #388e3c;

    --dm-info: #64b5f6;
    --dm-info-hover: #42a5f5;
    --dm-info-active: #2196f3;
    --dm-info-light: rgba(100, 181, 246, 0.15);
    --dm-info-dark: #1976d2;

    --dm-warning: #ffb74d;
    --dm-warning-hover: #ffa726;
    --dm-warning-active: #ff9800;
    --dm-warning-light: rgba(255, 183, 77, 0.15);
    --dm-warning-dark: #e65100;
    --dm-warning-text: #bf360c;

    --dm-danger: #e57373;
    --dm-danger-hover: #ef5350;
    --dm-danger-active: #e53935;
    --dm-danger-light: rgba(229, 115, 115, 0.15);
    --dm-danger-dark: #c62828;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #d7ccc8; /* Light biscuit */
    --dm-accent-2: #bcaaa4; /* Muted taupe */
    --dm-accent-3: #a1887f; /* Dusty rose-brown */
    --dm-accent-4: #8d6e63; /* Warm brown */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(141, 110, 99, 0.06);
    --dm-active-bg: rgba(141, 110, 99, 0.12);
    --dm-selected-bg: rgba(141, 110, 99, 0.12);
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #efebe9;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(141, 110, 99, 0.03);
    --dm-table-hover-bg: rgba(141, 110, 99, 0.06);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(62, 39, 35, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #3e2723;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #8d6e63;
    --dm-tab-active-text: #6d4c41;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-primary);
    --dm-badge-text: #ffffff;

    /* Progress */
    --dm-progress-bg: #efebe9;
    --dm-progress-bar: #8d6e63;

    /* Scrollbar */
    --dm-scrollbar-track: #efebe9;
    --dm-scrollbar-thumb: #d7ccc8;
    --dm-scrollbar-thumb-hover: #bcaaa4;

    /* Code */
    --dm-code-bg: #f5f0eb;
    --dm-code-text: #a1887f;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/**
 * Domma Dreamy Dark Theme
 * Predominantly beige and biscuit tones
 * Dark mode variant - dark espresso backgrounds with warm taupe accents
 */

.dm-theme-dreamy-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Dark espresso and coffee grounds */
    --dm-background: #1c1410;
    --dm-background-alt: #2a1f1a;
    --dm-surface: #2a1f1a;
    --dm-surface-raised: #3a2c26;
    --dm-surface-overlay: #3a2c26;

    /* Text - Warm off-white for readability on dark */
    --dm-text: #efebe9;
    --dm-text-secondary: #d7ccc8;
    --dm-text-muted: #bcaaa4;
    --dm-text-disabled: #6d4c41;
    --dm-text-inverse: #1c1410;

    /* Borders - Dark brown on dark backgrounds */
    --dm-border: #4e342e;
    --dm-border-light: #3a2c26;
    --dm-border-dark: #6d4c41;

    /* ================================================
       DREAMY PRIMARY COLOURS - Lighter taupe for contrast
       ================================================ */
    --dm-primary: #bcaaa4;
    --dm-primary-hover: #d7ccc8;
    --dm-primary-active: #efebe9;
    --dm-primary-light: #efebe9;
    --dm-primary-dark: #a1887f;

    /* Focus ring with warm taupe colour */
    --dm-focus-ring: 0 0 0 3px rgba(188, 170, 164, 0.35);
    --dm-border-focus: #bcaaa4;

    /* ================================================
       SECONDARY COLOURS - Lighter biscuit for contrast
       ================================================ */
    --dm-secondary: #d7ccc8;
    --dm-secondary-hover: #efebe9;
    --dm-secondary-active: #ffffff;
    --dm-secondary-light: #faf5f0;
    --dm-secondary-dark: #bcaaa4;

    /* ================================================
       STATUS COLOURS
       ================================================ */
    --dm-success: #81c784;
    --dm-success-hover: #a5d6a7;
    --dm-success-active: #c8e6c9;
    --dm-success-light: rgba(129, 199, 132, 0.2);
    --dm-success-dark: #4caf50;

    --dm-info: #64b5f6;
    --dm-info-hover: #90caf9;
    --dm-info-active: #bbdefb;
    --dm-info-light: rgba(100, 181, 246, 0.2);
    --dm-info-dark: #2196f3;

    --dm-warning: #ffb74d;
    --dm-warning-hover: #ffcc80;
    --dm-warning-active: #ffe0b2;
    --dm-warning-light: rgba(255, 183, 77, 0.2);
    --dm-warning-dark: #ff9800;
    --dm-warning-text: #ffcc80;

    --dm-danger: #e57373;
    --dm-danger-hover: #ef9a9a;
    --dm-danger-active: #ffcdd2;
    --dm-danger-light: rgba(229, 115, 115, 0.2);
    --dm-danger-dark: #f44336;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #efebe9; /* Warm off-white */
    --dm-accent-2: #d7ccc8; /* Light biscuit */
    --dm-accent-3: #bcaaa4; /* Muted taupe */
    --dm-accent-4: #a1887f; /* Dusty rose-brown */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(188, 170, 164, 0.1);
    --dm-active-bg: rgba(188, 170, 164, 0.15);
    --dm-selected-bg: rgba(188, 170, 164, 0.15);
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #2a1f1a;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(188, 170, 164, 0.04);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #1c1410;
    --dm-tooltip-text: #efebe9;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #bcaaa4;
    --dm-tab-active-text: #bcaaa4;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-primary);
    --dm-badge-text: #1c1410;

    /* Progress */
    --dm-progress-bg: #3a2c26;
    --dm-progress-bar: #bcaaa4;

    /* Scrollbar */
    --dm-scrollbar-track: #2a1f1a;
    --dm-scrollbar-thumb: #4e342e;
    --dm-scrollbar-thumb-hover: #6d4c41;

    /* Code */
    --dm-code-bg: #1a1210;
    --dm-code-text: #d7ccc8;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/**
 * Domma Grayve Light Theme
 * Slate/cyan monochrome palette — complementary light variant
 * Light mode variant
 */

.dm-theme-grayve-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Light/white backgrounds */
    --dm-background: #ffffff;
    --dm-background-alt: #f8f9fa;
    --dm-surface: #ffffff;
    --dm-surface-raised: #f1f3f5;
    --dm-surface-overlay: #f8f9fa;

    /* Text - Dark colours for readability on light */
    --dm-text: #212529;
    --dm-text-secondary: #495057;
    --dm-text-muted: #6c757d;
    --dm-text-disabled: #adb5bd;
    --dm-text-inverse: #ffffff;

    /* Borders - Subtle on light backgrounds */
    --dm-border: #dee2e6;
    --dm-border-light: #e9ecef;
    --dm-border-dark: #ced4da;

    /* ================================================
       GRAYVE ACCENT COLORS - Darker cyan for light-mode contrast
       ================================================ */

    /* PRIMARY COLOURS - Dark Cyan for contrast */
    --dm-primary: #00838f;
    --dm-primary-hover: #006064;
    --dm-primary-active: #00acc1;
    --dm-primary-light: #e0f7fa;
    --dm-primary-dark: #006064;

    /* Focus ring with cyan colour */
    --dm-focus-ring: 0 0 0 3px rgba(0, 131, 143, 0.3);
    --dm-border-focus: #00838f;

    /* ================================================
       SECONDARY COLOURS - Blue Grey
       ================================================ */
    --dm-secondary: #546e7a;
    --dm-secondary-hover: #607d8b;
    --dm-secondary-active: #78909c;
    --dm-secondary-light: rgba(84, 110, 122, 0.15);
    --dm-secondary-dark: #455a64;

    /* ================================================
       STATUS COLOURS
       ================================================ */
    --dm-success: #2e7d32;
    --dm-success-hover: #388e3c;
    --dm-success-active: #1b5e20;
    --dm-success-light: rgba(46, 125, 50, 0.1);
    --dm-success-dark: #1b5e20;

    --dm-info: #0277bd;
    --dm-info-hover: #0288d1;
    --dm-info-active: #01579b;
    --dm-info-light: rgba(2, 119, 189, 0.1);
    --dm-info-dark: #01579b;

    --dm-warning: #f57c00;
    --dm-warning-hover: #fb8c00;
    --dm-warning-active: #e65100;
    --dm-warning-text: #e65100;
    --dm-warning-light: rgba(245, 124, 0, 0.1);
    --dm-warning-dark: #e65100;

    --dm-danger: #c62828;
    --dm-danger-hover: #d32f2f;
    --dm-danger-active: #b71c1c;
    --dm-danger-light: rgba(198, 40, 40, 0.1);
    --dm-danger-dark: #b71c1c;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #b2ebf2; /* Cyan 100 */
    --dm-accent-2: #80deea; /* Cyan 200 */
    --dm-accent-3: #00838f; /* Cyan 800 */
    --dm-accent-4: #006064; /* Cyan 900 */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(0, 131, 143, 0.06);
    --dm-active-bg: rgba(0, 131, 143, 0.1);
    --dm-selected-bg: #e0f7fa;
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #f8f9fa;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #212529;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #ffffff;

    /* Pills */
    --dm-pill-bg: #e0f7fa;
    --dm-pill-color: #006064;
    --dm-pill-hover-bg: #b2ebf2;

    /* Autocomplete / Pillbox */
    --dm-autocomplete-bg: var(--dm-surface);
    --dm-autocomplete-border: var(--dm-border);
    --dm-autocomplete-shadow: var(--dm-shadow-md);
    --dm-autocomplete-item-hover: var(--dm-hover-bg);
    --dm-autocomplete-item-active: var(--dm-selected-bg);
    --dm-autocomplete-highlight: var(--dm-primary-light);
    --dm-pillbox-bg: var(--dm-surface);
    --dm-pillbox-border: var(--dm-border);

    /* Progress */
    --dm-progress-bg: #e9ecef;

    /* Scrollbar */
    --dm-scrollbar-track: #f8f9fa;
    --dm-scrollbar-thumb: #ced4da;
    --dm-scrollbar-thumb-hover: #adb5bd;

    /* Code */
    --dm-code-bg: #f8f9fa;
    --dm-code-text: #00838f;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

/* Syntax highlighting tokens for grayve-light */
.dm-theme-grayve-light .code-block .syntax-keyword {
    color: #7c4dff; /* Deep Purple */
    font-weight: 500;
}

.dm-theme-grayve-light .code-block .syntax-string,
.dm-theme-grayve-light .code-block .syntax-template-string {
    color: #2e7d32; /* Green */
}

.dm-theme-grayve-light .code-block .syntax-function {
    color: #00838f; /* Cyan */
}

/**
 * Domma Grayve Dark Theme
 * Slate/cyan monochrome palette — adapted from Bootswatch Slate
 * Dark mode variant
 */

.dm-theme-grayve-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Slate dark backgrounds */
    --dm-background: #1a1e21;     /* slate-900 */
    --dm-background-alt: #212529; /* slate-800 */
    --dm-surface: #212529;        /* slate-800 */
    --dm-surface-raised: #343A40; /* slate-700 */
    --dm-surface-overlay: #343A40;/* slate-700 */

    /* Text - Light colours for readability on dark */
    --dm-text: #DEE2E6;           /* slate-200 */
    --dm-text-secondary: #ADB5BD; /* slate-400 */
    --dm-text-muted: #6C757D;     /* slate-500 */
    --dm-text-disabled: #495057;  /* slate-600 */
    --dm-text-inverse: #1a1e21;   /* slate-900 */

    /* Borders - Subtle on dark backgrounds */
    --dm-border: #343A40;         /* slate-700 */
    --dm-border-light: #212529;   /* slate-800 */
    --dm-border-dark: #495057;    /* slate-600 */

    /* ================================================
       GRAYVE ACCENT COLORS - Cyan/teal tones
       ================================================ */

    /* PRIMARY COLOURS - Cyan Teal */
    --dm-primary: #00bcd4;
    --dm-primary-hover: #00acc1;
    --dm-primary-active: #26c6da;
    --dm-primary-light: #e0f7fa;
    --dm-primary-dark: #0097a7;

    /* Focus ring with cyan colour */
    --dm-focus-ring: 0 0 0 3px rgba(0, 188, 212, 0.3);
    --dm-border-focus: #00bcd4;

    /* ================================================
       SECONDARY COLOURS - Blue Grey
       ================================================ */
    --dm-secondary: #6C757D;
    --dm-secondary-hover: #ADB5BD;
    --dm-secondary-active: #CED4DA;
    --dm-secondary-light: #E9ECEF;
    --dm-secondary-dark: #495057;

    /* ================================================
       STATUS COLOURS
       ================================================ */
    --dm-success: #28a745;
    --dm-success-hover: #49cc61;
    --dm-success-active: #218838;
    --dm-success-light: rgba(40, 167, 69, 0.2);
    --dm-success-dark: #1e7e34;

    --dm-info: #17a2b8;
    --dm-info-hover: #26d2e9;
    --dm-info-active: #138496;
    --dm-info-light: rgba(23, 162, 184, 0.2);
    --dm-info-dark: #117a8b;

    --dm-warning: #ffc107;
    --dm-warning-hover: #ffcd38;
    --dm-warning-active: #e0a800;
    --dm-warning-text: #856404;
    --dm-warning-light: rgba(255, 193, 7, 0.2);
    --dm-warning-dark: #d39e00;

    --dm-danger: #dc3545;
    --dm-danger-hover: #e35a67;
    --dm-danger-active: #c82333;
    --dm-danger-light: rgba(220, 53, 69, 0.2);
    --dm-danger-dark: #bd2130;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #80deea; /* Cyan 200 */
    --dm-accent-2: #4dd0e1; /* Cyan 300 */
    --dm-accent-3: #00bcd4; /* Cyan 500 */
    --dm-accent-4: #0097a7; /* Cyan 700 */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(255, 255, 255, 0.07);
    --dm-active-bg: rgba(255, 255, 255, 0.1);
    --dm-selected-bg: #00838f;
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-disabled-bg: #212529;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #1a1e21;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #1a1e21;

    /* Pills */
    --dm-pill-bg: #343A40;
    --dm-pill-color: var(--dm-text);
    --dm-pill-hover-bg: #495057;

    /* Autocomplete / Pillbox */
    --dm-autocomplete-bg: var(--dm-surface);
    --dm-autocomplete-border: var(--dm-border);
    --dm-autocomplete-shadow: var(--dm-shadow-md);
    --dm-autocomplete-item-hover: var(--dm-hover-bg);
    --dm-autocomplete-item-active: var(--dm-selected-bg);
    --dm-autocomplete-highlight: var(--dm-primary-light);
    --dm-pillbox-bg: var(--dm-surface);
    --dm-pillbox-border: var(--dm-border);

    /* Progress */
    --dm-progress-bg: #343A40;

    /* Scrollbar */
    --dm-scrollbar-track: #212529;
    --dm-scrollbar-thumb: #495057;
    --dm-scrollbar-thumb-hover: #6C757D;

    /* Code */
    --dm-code-bg: #1a1e21;
    --dm-code-text: #80deea;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

/* Syntax highlighting tokens for grayve-dark */
.dm-theme-grayve-dark .code-block .syntax-keyword {
    color: #c792ea; /* Purple */
    font-weight: 500;
}

.dm-theme-grayve-dark .code-block .syntax-string,
.dm-theme-grayve-dark .code-block .syntax-template-string {
    color: #c3e88d; /* Green */
}

.dm-theme-grayve-dark .code-block .syntax-function {
    color: #82aaff; /* Light Blue */
}

/**
 * Domma Mint Light Theme
 * Fresh spearmint colour palette inspired by cool green-blue tones
 * Light mode variant - light backgrounds with rich mint greens
 */

.dm-theme-mint-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Light Mode Base
       ================================================ */

    /* Backgrounds - Light/white backgrounds */
    --dm-background: #ffffff;
    --dm-background-alt: #f0faf5;
    --dm-surface: #ffffff;
    --dm-surface-raised: #e8f5ef;
    --dm-surface-overlay: #f0faf5;

    /* Text - Dark colors for readability on light */
    --dm-text: #1a2e25;
    --dm-text-secondary: #3d5a4a;
    --dm-text-muted: #6c8a7a;
    --dm-text-disabled: #adc4b8;
    --dm-text-inverse: #ffffff;

    /* Borders - Subtle on light backgrounds */
    --dm-border: #c8e6d8;
    --dm-border-light: #ddf0e8;
    --dm-border-dark: #a8d4c0;

    /* ================================================
       MINT ACCENT COLORS - Rich greens for light mode
       ================================================ */

    /* PRIMARY COLOURS - Mint Green */
    --dm-primary: #2e9e6e;
    --dm-primary-hover: #279060;
    --dm-primary-active: #1f7a50;
    --dm-primary-light: #d4f5e4;
    --dm-primary-dark: #1b5e3a;

    /* Focus ring with mint colour */
    --dm-focus-ring: 0 0 0 3px rgba(46, 158, 110, 0.3);
    --dm-border-focus: #2e9e6e;

    /* ================================================
       SECONDARY COLOURS - Seafoam
       ================================================ */
    --dm-secondary: #5b8a7a;
    --dm-secondary-hover: #6b9e8c;
    --dm-secondary-active: #7cb29e;
    --dm-secondary-light: #e8f5ef;
    --dm-secondary-dark: #446858;

    /* ================================================
       STATUS COLOURS - Mint-tinted
       ================================================ */
    --dm-success: #27ae60;
    --dm-success-hover: #2ebd6b;
    --dm-success-active: #52cc82;
    --dm-success-light: #d4f5e4;
    --dm-success-dark: #1e8a4a;

    --dm-info: #48b896;
    --dm-info-hover: #56c8a5;
    --dm-info-active: #70d4b5;
    --dm-info-light: #d8f3eb;
    --dm-info-dark: #35907a;

    --dm-warning: #f0ad4e;
    --dm-warning-hover: #f3bc6a;
    --dm-warning-active: #f5c97e;
    --dm-warning-light: #fef6e7;
    --dm-warning-dark: #c88a2a;
    --dm-warning-text: #c88a2a;

    --dm-danger: #e53e3e;
    --dm-danger-hover: #e85656;
    --dm-danger-active: #ed7676;
    --dm-danger-light: #fde8e8;
    --dm-danger-dark: #c53030;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #82d8b5; /* Seafoam */
    --dm-accent-2: #48b896; /* Jade */
    --dm-accent-3: #2e9e6e; /* Eucalyptus */
    --dm-accent-4: #1b5e3a; /* Pine */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-active-bg: rgba(0, 0, 0, 0.08);
    --dm-selected-bg: rgba(46, 158, 110, 0.15);
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #e8f5ef;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #1a2e25;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #2e9e6e;
    --dm-tab-active-text: #2e9e6e;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #ffffff;

    /* Progress */
    --dm-progress-bg: #c8e6d8;
    --dm-progress-bar: #2e9e6e;

    /* Scrollbar */
    --dm-scrollbar-track: #f0faf5;
    --dm-scrollbar-thumb: #a8d4c0;
    --dm-scrollbar-thumb-hover: #82b89e;

    /* Code */
    --dm-code-bg: #f0faf5;
    --dm-code-text: #e83e8c;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Standard for light mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/**
 * Domma Mint Dark Theme
 * Fresh spearmint colour palette inspired by cool green-blue tones
 * Dark mode variant - dark backgrounds with bright mint greens
 */

.dm-theme-mint-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Dark Mode Base
       ================================================ */

    /* Backgrounds - Dark slate/charcoal backgrounds */
    --dm-background: #0f172a; /* slate-900 */
    --dm-background-alt: #1e293b; /* slate-800 */
    --dm-surface: #1e293b; /* slate-800 */
    --dm-surface-raised: #1e3a2f; /* dark mint-tinted slate */
    --dm-surface-overlay: #243d32; /* slightly lighter mint-tinted */

    /* Text - Light colors for readability on dark */
    --dm-text: #d4f5e4; /* mint-tinted slate-200 */
    --dm-text-secondary: #93bfad; /* muted mint */
    --dm-text-muted: #5e8a78; /* slate-500 with mint tint */
    --dm-text-disabled: #3d5e50; /* slate-600 with mint tint */
    --dm-text-inverse: #0f172a; /* slate-900 */

    /* Borders - Subtle on dark backgrounds */
    --dm-border: #2a4a3a; /* dark mint border */
    --dm-border-light: #1e3a2f; /* darker mint border */
    --dm-border-dark: #3d6650; /* lighter mint border */

    /* ================================================
       MINT ACCENT COLORS - Bright greens for dark mode
       ================================================ */

    /* Primary - Bright mint green */
    --dm-primary: #6dd5a8;
    --dm-primary-hover: #82ddb5;
    --dm-primary-active: #96e4c2;
    --dm-primary-light: rgba(109, 213, 168, 0.15);
    --dm-primary-dark: #48b896;

    /* Focus ring with mint colour */
    --dm-focus-ring: 0 0 0 3px rgba(109, 213, 168, 0.35);
    --dm-border-focus: #6dd5a8;

    /* ================================================
       SECONDARY COLOURS - Muted seafoam
       ================================================ */
    --dm-secondary: #93bfad;
    --dm-secondary-hover: #a6ccbc;
    --dm-secondary-active: #b8d9cc;
    --dm-secondary-light: rgba(147, 191, 173, 0.15);
    --dm-secondary-dark: #6e9888;

    /* ================================================
       STATUS COLOURS
       ================================================ */
    --dm-success: #7dcea0;
    --dm-success-hover: #92d8b0;
    --dm-success-active: #a6e1c0;
    --dm-success-light: rgba(125, 206, 160, 0.15);
    --dm-success-dark: #5aae80;

    --dm-info: #82d8b5;
    --dm-info-hover: #96dfbf;
    --dm-info-active: #aae6ca;
    --dm-info-light: rgba(130, 216, 181, 0.15);
    --dm-info-dark: #60b898;

    --dm-warning: #f5c97e;
    --dm-warning-hover: #f7d396;
    --dm-warning-active: #f9ddb0;
    --dm-warning-light: rgba(245, 201, 126, 0.15);
    --dm-warning-text: #f5c97e;

    --dm-danger: #ef4444;
    --dm-danger-hover: #f87171;
    --dm-danger-active: #fca5a5;
    --dm-danger-light: rgba(248, 113, 113, 0.15);
    --dm-danger-dark: #dc2626;

    /* ================================================
       ACCENT COLOURS
       ================================================ */
    --dm-accent-1: #96e4c2; /* Bright seafoam */
    --dm-accent-2: #6dd5a8; /* Mint */
    --dm-accent-3: #48b896; /* Jade */
    --dm-accent-4: #2e6e52; /* Deep pine */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(255, 255, 255, 0.07);
    --dm-active-bg: rgba(255, 255, 255, 0.1);
    --dm-selected-bg: rgba(109, 213, 168, 0.2);
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #1e293b;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #0f172a;
    --dm-tooltip-text: #ffffff;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #6dd5a8;
    --dm-tab-active-text: #6dd5a8;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #0f172a;

    /* Progress */
    --dm-progress-bg: #2a4a3a;
    --dm-progress-bar: #6dd5a8;

    /* Scrollbar */
    --dm-scrollbar-track: #1e293b;
    --dm-scrollbar-thumb: #2a4a3a;
    --dm-scrollbar-thumb-hover: #3d6650;

    /* Code */
    --dm-code-bg: #0f172a;
    --dm-code-text: #fca5a5;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle for dark mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/**
 * Domma Wedding Light Theme
 * Classic antique gold palette — warm, muted, timeless
 * Day variant - cream/ivory backgrounds with antique gold highlights
 */

.dm-theme-wedding-light {
    color-scheme: light;

    /* ================================================
       FOUNDATIONAL COLORS - Day Mode Base
       ================================================ */

    /* Backgrounds - Warm cream/ivory */
    --dm-background: #FFFDF7;
    --dm-background-alt: #FFF8E7;
    --dm-surface: #FFFFFF;
    --dm-surface-raised: #FFFCF2;
    --dm-surface-overlay: #FFF8E7;

    /* Text - Dark warm tones for readability on cream */
    --dm-text: #2C2416;
    --dm-text-secondary: #5C4E3C;
    --dm-text-muted: #8B7355;
    --dm-text-disabled: #C4B49A;
    --dm-text-inverse: #FFFFFF;

    /* Borders - Warm tan */
    --dm-border: #E8DCC8;
    --dm-border-light: #F0E8D8;
    --dm-border-dark: #D4C4A0;

    /* ================================================
       GOLD ACCENT COLORS - Antique gold for day mode
       ================================================ */

    /* PRIMARY COLOURS - Antique Gold */
    --dm-primary: #C5A55A;
    --dm-primary-hover: #B8964D;
    --dm-primary-active: #A8823F;
    --dm-primary-light: #FDF5E0;
    --dm-primary-dark: #8B7335;

    /* Focus ring with warm gold colour */
    --dm-focus-ring: 0 0 0 3px rgba(197, 165, 90, 0.3);
    --dm-border-focus: #C5A55A;

    /* ================================================
       SECONDARY COLOURS - Antique Silver
       ================================================ */
    --dm-secondary: #A8A9AD;
    --dm-secondary-hover: #97989C;
    --dm-secondary-active: #87888C;
    --dm-secondary-light: #F0F0F1;
    --dm-secondary-dark: #6B6C6F;

    /* ================================================
       STATUS COLOURS - Harmonised with warm palette
       ================================================ */
    --dm-success: #4A8C5C;
    --dm-success-hover: #56A06A;
    --dm-success-active: #62B478;
    --dm-success-light: #E8F5EC;
    --dm-success-dark: #3A6E48;

    --dm-info: #4A7FA8;
    --dm-info-hover: #5490BC;
    --dm-info-active: #6AA1CC;
    --dm-info-light: #E6F0F8;
    --dm-info-dark: #3A6484;

    --dm-warning: #C8882A;
    --dm-warning-hover: #DC9A36;
    --dm-warning-active: #EAA842;
    --dm-warning-light: #FEF3E0;
    --dm-warning-dark: #A06C20;
    --dm-warning-text: #A06C20;

    --dm-danger: #C0392B;
    --dm-danger-hover: #D44333;
    --dm-danger-active: #E05040;
    --dm-danger-light: #FDECEA;
    --dm-danger-dark: #992D22;

    /* ================================================
       ACCENT COLOURS - Wedding palette
       ================================================ */
    --dm-accent-1: #E8DCC8; /* Champagne */
    --dm-accent-2: #C5A55A; /* Gold */
    --dm-accent-3: #A8A9AD; /* Silver */
    --dm-accent-4: #8B7335; /* Bronze */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-active-bg: rgba(0, 0, 0, 0.08);
    --dm-selected-bg: rgba(197, 165, 90, 0.15);
    --dm-disabled-opacity: 0.65;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-md);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #FFF8E7;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
    --dm-table-hover-bg: rgba(0, 0, 0, 0.04);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(44, 36, 22, 0.5);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #2C2416;
    --dm-tooltip-text: #FFFDF7;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #C5A55A;
    --dm-tab-active-text: #C5A55A;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #FFFFFF;

    /* Progress */
    --dm-progress-bg: #E8DCC8;
    --dm-progress-bar: #C5A55A;

    /* Scrollbar */
    --dm-scrollbar-track: #FFF8E7;
    --dm-scrollbar-thumb: #D4C4A0;
    --dm-scrollbar-thumb-hover: #C5A55A;

    /* Code */
    --dm-code-bg: #FFF8E7;
    --dm-code-text: #A8823F;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Warm gold-tinted for day mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(139 115 53 / 0.06);
    --dm-shadow: 0 1px 3px 0 rgb(139 115 53 / 0.1), 0 1px 2px -1px rgb(139 115 53 / 0.08);
    --dm-shadow-md: 0 4px 6px -1px rgb(139 115 53 / 0.1), 0 2px 4px -2px rgb(139 115 53 / 0.08);
    --dm-shadow-lg: 0 10px 15px -3px rgb(139 115 53 / 0.1), 0 4px 6px -4px rgb(139 115 53 / 0.07);
    --dm-shadow-xl: 0 20px 25px -5px rgb(139 115 53 / 0.1), 0 8px 10px -6px rgb(139 115 53 / 0.07);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(139 115 53 / 0.2);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(139 115 53 / 0.06);

    /* ================================================
       ELEVATION / DEPTH - Warm undertone
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(139, 115, 53, 0.1), 0 1px 2px rgba(139, 115, 53, 0.07);
    --dm-elevation-2: 0 4px 6px rgba(139, 115, 53, 0.09), 0 2px 4px rgba(139, 115, 53, 0.06);
    --dm-elevation-3: 0 10px 15px rgba(139, 115, 53, 0.09), 0 4px 6px rgba(139, 115, 53, 0.05);
    --dm-elevation-4: 0 20px 25px rgba(139, 115, 53, 0.12), 0 10px 10px rgba(139, 115, 53, 0.04);
}

/**
 * Domma Wedding Dark Theme
 * Classic antique gold palette — warm, muted, timeless
 * Evening variant - deep midnight navy with antique gold highlights
 */

.dm-theme-wedding-dark {
    color-scheme: dark;

    /* ================================================
       FOUNDATIONAL COLORS - Evening Mode Base
       ================================================ */

    /* Backgrounds - Deep midnight navy */
    --dm-background: #12121F;
    --dm-background-alt: #1A1A2E;
    --dm-surface: #22223A;
    --dm-surface-raised: #2A2A45;
    --dm-surface-overlay: #2E2E4A;

    /* Text - Warm cream for readability on dark */
    --dm-text: #F0E8D8;
    --dm-text-secondary: #D4C4A8;
    --dm-text-muted: #8B7355;
    --dm-text-disabled: #4A4060;
    --dm-text-inverse: #12121F;

    /* Borders - Indigo/midnight */
    --dm-border: #2A2A40;
    --dm-border-light: #22223A;
    --dm-border-dark: #3A3A55;

    /* ================================================
       GOLD ACCENT COLORS - Antique gold for evening mode
       ================================================ */

    /* PRIMARY COLOURS - Antique Gold (lighter hover for dark mode) */
    --dm-primary: #C5A55A;
    --dm-primary-hover: #D4B66A;
    --dm-primary-active: #B8964D;
    --dm-primary-light: #2A2520;
    --dm-primary-dark: #8B7335;

    /* Focus ring with warm gold colour */
    --dm-focus-ring: 0 0 0 3px rgba(197, 165, 90, 0.35);
    --dm-border-focus: #C5A55A;

    /* ================================================
       SECONDARY COLOURS - Brighter silver for evening
       ================================================ */
    --dm-secondary: #C0C0C0;
    --dm-secondary-hover: #D0D0D0;
    --dm-secondary-active: #E0E0E0;
    --dm-secondary-light: rgba(192, 192, 192, 0.15);
    --dm-secondary-dark: #909090;

    /* ================================================
       STATUS COLOURS - Harmonised with warm dark palette
       ================================================ */
    --dm-success: #5DB875;
    --dm-success-hover: #70C487;
    --dm-success-active: #85CF9A;
    --dm-success-light: rgba(93, 184, 117, 0.15);
    --dm-success-dark: #4A9460;

    --dm-info: #5A9BC4;
    --dm-info-hover: #6CACD4;
    --dm-info-active: #82BCE0;
    --dm-info-light: rgba(90, 155, 196, 0.15);
    --dm-info-dark: #447AA0;

    --dm-warning: #E0A040;
    --dm-warning-hover: #ECAF52;
    --dm-warning-active: #F5C060;
    --dm-warning-light: rgba(224, 160, 64, 0.15);
    --dm-warning-text: #E0A040;

    --dm-danger: #E05555;
    --dm-danger-hover: #ED6B6B;
    --dm-danger-active: #F58080;
    --dm-danger-light: rgba(224, 85, 85, 0.15);
    --dm-danger-dark: #C03030;

    /* ================================================
       ACCENT COLOURS - Evening wedding palette
       ================================================ */
    --dm-accent-1: #D4C4A8; /* Muted champagne */
    --dm-accent-2: #C5A55A; /* Gold */
    --dm-accent-3: #C0C0C0; /* Bright silver */
    --dm-accent-4: #5C4E3C; /* Dark bronze */

    /* ================================================
       INTERACTIVE STATES
       ================================================ */
    --dm-hover-bg: rgba(255, 255, 255, 0.07);
    --dm-active-bg: rgba(255, 255, 255, 0.1);
    --dm-selected-bg: rgba(197, 165, 90, 0.2);
    --dm-disabled-opacity: 0.4;

    /* ================================================
       COMPONENT-SPECIFIC COLORS
       ================================================ */

    /* Cards */
    --dm-card-bg: var(--dm-surface);
    --dm-card-border: var(--dm-border);
    --dm-card-shadow: var(--dm-shadow-sm);
    --dm-card-header-bg: var(--dm-primary-light);

    /* Inputs */
    --dm-input-bg: var(--dm-surface);
    --dm-input-border: var(--dm-border-dark);
    --dm-input-text: var(--dm-text);
    --dm-input-placeholder: var(--dm-text-muted);
    --dm-input-focus-border: var(--dm-primary);
    --dm-input-focus-shadow: var(--dm-focus-ring);
    --dm-input-disabled-bg: #1A1A2E;

    /* Buttons */
    --dm-btn-text: var(--dm-text);
    --dm-btn-bg: var(--dm-surface);
    --dm-btn-border: var(--dm-border-dark);

    /* Tables */
    --dm-table-bg: transparent;
    --dm-table-border: var(--dm-border);
    --dm-table-header-bg: var(--dm-background-alt);
    --dm-table-header-text: var(--dm-text);
    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
    --dm-table-hover-bg: var(--dm-hover-bg);
    --dm-table-selected-bg: var(--dm-selected-bg);

    /* Modals */
    --dm-modal-bg: var(--dm-surface);
    --dm-modal-border: var(--dm-border);
    --dm-modal-backdrop: rgba(0, 0, 0, 0.75);
    --dm-modal-shadow: var(--dm-shadow-xl);

    /* Dropdowns */
    --dm-dropdown-bg: var(--dm-surface-raised);
    --dm-dropdown-border: var(--dm-border);
    --dm-dropdown-shadow: var(--dm-shadow-lg);
    --dm-dropdown-item-hover: var(--dm-hover-bg);
    --dm-dropdown-item-active: var(--dm-selected-bg);

    /* Tooltips */
    --dm-tooltip-bg: #12121F;
    --dm-tooltip-text: #F0E8D8;

    /* Toasts */
    --dm-toast-bg: var(--dm-surface);
    --dm-toast-border: var(--dm-border);
    --dm-toast-shadow: var(--dm-shadow-lg);

    /* Navbar */
    --dm-navbar-bg: var(--dm-surface);
    --dm-navbar-text: var(--dm-text);
    --dm-navbar-border: var(--dm-border);

    /* Sidebar */
    --dm-sidebar-bg: var(--dm-surface);
    --dm-sidebar-text: var(--dm-text);
    --dm-sidebar-border: var(--dm-border);
    --dm-sidebar-item-hover: var(--dm-hover-bg);
    --dm-sidebar-item-active: var(--dm-selected-bg);

    /* Tabs */
    --dm-tab-border: var(--dm-border);
    --dm-tab-hover-bg: var(--dm-hover-bg);
    --dm-tab-active-border: #C5A55A;
    --dm-tab-active-text: #C5A55A;

    /* Accordion */
    --dm-accordion-bg: var(--dm-surface);
    --dm-accordion-border: var(--dm-border);
    --dm-accordion-header-bg: var(--dm-background-alt);
    --dm-accordion-header-hover: var(--dm-hover-bg);

    /* Badges */
    --dm-badge-bg: var(--dm-secondary);
    --dm-badge-text: #12121F;

    /* Progress */
    --dm-progress-bg: #2A2A40;
    --dm-progress-bar: #C5A55A;

    /* Scrollbar */
    --dm-scrollbar-track: #1A1A2E;
    --dm-scrollbar-thumb: #2A2A40;
    --dm-scrollbar-thumb-hover: #C5A55A;

    /* Code */
    --dm-code-bg: #12121F;
    --dm-code-text: #D4B66A;
    --dm-code-border: var(--dm-border);

    /* ================================================
       SHADOWS - Subtle gold glow for evening mode
       ================================================ */
    --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(197 165 90 / 0.05);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(197 165 90 / 0.05);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(197 165 90 / 0.05);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(197 165 90 / 0.05);
    --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
    --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.2);

    /* ================================================
       ELEVATION / DEPTH
       ================================================ */
    --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
    --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.2);
    --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);
}