/*
 * aurora character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-aurora {
    /* Use a transparent overlay so each component keeps its own semantic background and text pair. */
    --dui-character-gradient-start: transparent;
    --dui-character-gradient-strength: 18%;
    --dui-character-gradient-end: color-mix(in srgb, transparent calc(100% - var(--dui-character-gradient-strength)), var(--dui-accent) var(--dui-character-gradient-strength));
    --dui-character-gradient-surface: linear-gradient(135deg, var(--dui-character-gradient-start), var(--dui-character-gradient-end));
}

/* Apply the character treatment to broad surfaces without replacing contextual backgrounds. */
:where(.dui.dui-theme-aurora) :is(.dui-card, .dui-dialog, .dui-menu, .dui-tree) {
    background-image: var(--dui-character-gradient-surface);
}
/*
 * blueprint character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-blueprint {
    --dui-surface-border-color: var(--dui-character-boundary-color, var(--dui-color));
    --dui-surface-border: 1px solid var(--dui-surface-border-color);
}

.dui.dui-theme-blueprint {
    /* Keep the accent visible while retaining the identity color as the contrast anchor. */
    --dui-character-boundary-color: color-mix(in srgb, var(--dui-color) 70%, var(--dui-accent) 30%);
    --dui-focus-indicator-color: var(--dui-character-boundary-color);
}

/* Blueprint visual treatment: precise outlines and technical dividers. */
.dui.dui-theme-blueprint {
    --dui-card-box-shadow: var(--dui-box-shadow-none);
    --dui-section-box-shadow: var(--dui-box-shadow-none);
    --dui-layout-drawer-box-shadow: var(--dui-box-shadow-sm);
    --dui-thumbnail-box-shadow: var(--dui-box-shadow-none);
    --dui-infobox-box-shadow: var(--dui-box-shadow-none);
    --dui-dialog-box-shadow: var(--dui-box-shadow-none);
    --dui-menu-elevation: none;
    --dui-btn-box-shadow: var(--dui-box-shadow-none);
    --dui-btn-border: 1px solid var(--dui-accent);
    --dui-card-header-border-style: dashed;
}

:where(.dui.dui-theme-blueprint) .dui-card-header,
:where(.dui.dui-theme-blueprint) .dui-menu > .dui-nav-bar,
:where(.dui.dui-theme-blueprint) .dui-tree-header {
    border-bottom-style: dashed;
}
/*
 * carbon character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-carbon {
    --dui-surface-border-color: var(--dui-character-boundary-color, var(--dui-color));
    --dui-surface-border: 1px solid var(--dui-surface-border-color);
}

.dui.dui-theme-carbon {
    --dui-font-family: var(--dui-font-family-mono);
    --dui-card-box-shadow: var(--dui-box-shadow-none);
    --dui-section-box-shadow: var(--dui-box-shadow-none);
    --dui-layout-drawer-box-shadow: var(--dui-box-shadow-sm);
    --dui-thumbnail-box-shadow: var(--dui-box-shadow-none);
    --dui-infobox-box-shadow: var(--dui-box-shadow-none);
    --dui-dialog-box-shadow: var(--dui-box-shadow-none);
    --dui-menu-elevation: none;
    --dui-btn-focus-box-shadow: var(--dui-box-shadow-none);
    --dui-clickable-shadow-spread: 2px;
    --dui-surface-border-color: color-mix(in srgb, var(--dui-color) 24%, transparent);
}

/*
 * editorial character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-editorial {
    --dui-surface-border-color: var(--dui-character-boundary-color, var(--dui-color));
    --dui-surface-border: 1px solid var(--dui-surface-border-color);
}

.dui.dui-theme-editorial {
    /* Keep the accent visible while retaining the identity color as the contrast anchor. */
    --dui-character-boundary-color: color-mix(in srgb, var(--dui-color) 70%, var(--dui-accent) 30%);
    --dui-focus-indicator-color: var(--dui-character-boundary-color);
}

/* Editorial visual treatment: reading-oriented type hierarchy and quiet surfaces. */
.dui.dui-theme-editorial {
    --dui-font-family-heading: Georgia, "Times New Roman", serif;
    --dui-card-box-shadow: var(--dui-box-shadow-none);
    --dui-section-box-shadow: var(--dui-box-shadow-none);
    --dui-layout-drawer-box-shadow: var(--dui-box-shadow-sm);
    --dui-thumbnail-box-shadow: var(--dui-box-shadow-none);
    --dui-infobox-box-shadow: var(--dui-box-shadow-none);
    --dui-dialog-box-shadow: var(--dui-box-shadow-none);
    --dui-menu-elevation: none;
    --dui-card-header-gap: var(--dui-spc-4);
    --dui-card-description-line-height: var(--dui-spc-5);
    --dui-card-body-padding: var(--dui-spc-px-24);
}

/*
 * glass character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-glass {
    --dui-surface-border-color: var(--dui-character-boundary-color, var(--dui-color));
    --dui-surface-border: 1px solid var(--dui-surface-border-color);
}

.dui.dui-theme-glass {
    /* Keep the accent visible while retaining the identity color as the contrast anchor. */
    --dui-character-boundary-color: color-mix(in srgb, var(--dui-color) 70%, var(--dui-accent) 30%);
    --dui-focus-indicator-color: var(--dui-character-boundary-color);
}

/* Glass visual treatment: translucent layered surfaces with a solid fallback. */
.dui.dui-theme-glass {
    /* Keep the glass layer translucent without allowing the content background to wash it out. */
    --dui-character-glass-surface: color-mix(in srgb, var(--dui-card-background) 88%, transparent);
    --dui-character-glass-nested-surface: color-mix(in srgb, var(--dui-card-nested-background) 88%, transparent);
    --dui-character-glass-nested-2-surface: color-mix(in srgb, var(--dui-card-nested-2-background) 88%, transparent);
    --dui-character-glass-nested-3-surface: color-mix(in srgb, var(--dui-card-nested-3-background) 88%, transparent);
    --dui-card-box-shadow: 0 4px 16px color-mix(in srgb, var(--dui-color) 12%, transparent);
    --dui-section-box-shadow: 0 4px 16px color-mix(in srgb, var(--dui-color) 10%, transparent);
    --dui-layout-drawer-box-shadow: var(--dui-section-box-shadow);
    --dui-thumbnail-box-shadow: 0 3px 12px color-mix(in srgb, var(--dui-color) 10%, transparent);
    --dui-dialog-box-shadow: 0 8px 24px color-mix(in srgb, var(--dui-color) 18%, transparent);
    --dui-menu-elevation: var(--dui-elevation-1);
}

:where(.dui.dui-theme-glass) .dui-card,
:where(.dui.dui-theme-glass) .dui-dialog,
:where(.dui.dui-theme-glass) .dui-menu,
:where(.dui.dui-theme-glass) .dui-tree {
    background: var(--dui-character-glass-surface);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Keep the nested-card tokens layered without making this surface rule outrank explicit color utilities. */
:where(.dui.dui-theme-glass) .dui-card {
    --dui-card-nested-background: var(--dui-character-glass-nested-surface);
    --dui-card-nested-2-background: var(--dui-character-glass-nested-2-surface);
    --dui-card-nested-3-background: var(--dui-character-glass-nested-3-surface);
}

@supports not ((backdrop-filter: blur(1px))) {
    :where(.dui.dui-theme-glass) .dui-card,
    :where(.dui.dui-theme-glass) .dui-dialog,
    :where(.dui.dui-theme-glass) .dui-menu,
    :where(.dui.dui-theme-glass) .dui-tree {
        background: var(--dui-card-background);
    }
}
/*
 * high contrast character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-high-contrast {
    --dui-surface-border-color: var(--dui-character-boundary-color, var(--dui-color));
    --dui-surface-border: 1px solid var(--dui-surface-border-color);
}

.dui.dui-theme-high-contrast {
    /* Keep the accent visible while retaining the identity color as the contrast anchor. */
    --dui-character-boundary-color: color-mix(in srgb, var(--dui-color) 70%, var(--dui-accent) 30%);
    --dui-focus-indicator-color: var(--dui-character-boundary-color);
}

/* High Contrast visual treatment: stronger boundaries and unmistakable keyboard focus. */
.dui.dui-theme-high-contrast {
    --dui-surface-border-color: var(--dui-color);
    --dui-surface-border: 2px solid var(--dui-surface-border-color);
    --dui-focus-indicator-color: var(--dui-color);
    --dui-form-field-border: 2px solid var(--dui-color);
    --dui-form-field-focused-border: 2px solid var(--dui-accent);
    --dui-btn-focus-outline-width: 3px;
    --dui-btn-focus-outline-style: solid;
    --dui-btn-focus-outline-offset: 2px;
}

:where(.dui.dui-theme-high-contrast) :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--dui-accent);
    outline-offset: 2px;
}

/*
 * neon night character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-neon-night {
    --dui-surface-border-color: var(--dui-character-boundary-color, var(--dui-color));
    --dui-surface-border: 1px solid var(--dui-surface-border-color);
}

.dui.dui-theme-neon-night {
    /* Keep the accent visible while retaining the identity color as the contrast anchor. */
    --dui-character-boundary-color: color-mix(in srgb, var(--dui-color) 70%, var(--dui-accent) 30%);
    --dui-focus-indicator-color: var(--dui-character-boundary-color);
}

/* Neon Night visual treatment: controlled accent glow, strongest in dark mode. */
.dui.dui-theme-neon-night.dui-colors-light {
    --dui-btn-box-shadow: 0 1px 4px color-mix(in srgb, var(--dui-accent) 20%, transparent);
    --dui-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--dui-accent) 20%, transparent);
}

.dui.dui-theme-neon-night.dui-colors-dark {
    --dui-card-box-shadow: 0 0 18px color-mix(in srgb, var(--dui-accent) 12%, transparent);
    --dui-section-box-shadow: 0 0 18px color-mix(in srgb, var(--dui-accent) 10%, transparent);
    --dui-layout-drawer-box-shadow: var(--dui-section-box-shadow);
    --dui-thumbnail-box-shadow: 0 0 12px color-mix(in srgb, var(--dui-accent) 10%, transparent);
    --dui-dialog-box-shadow: 0 0 26px color-mix(in srgb, var(--dui-accent) 18%, transparent);
    --dui-btn-box-shadow: 0 0 0 1px var(--dui-accent), 0 0 12px color-mix(in srgb, var(--dui-accent) 28%, transparent);
    --dui-btn-focus-box-shadow: 0 0 0 2px var(--dui-accent), 0 0 16px color-mix(in srgb, var(--dui-accent) 36%, transparent);
}

.dui.dui-theme-neon-night {
}

/*
 * paper character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-paper {
    --dui-surface-border-color: var(--dui-character-boundary-color, var(--dui-color));
    --dui-surface-border: 1px solid var(--dui-surface-border-color);
}

.dui.dui-theme-paper {
    --dui-font-family-heading: Georgia, "Times New Roman", serif;
    --dui-card-box-shadow: var(--dui-box-shadow-none);
    --dui-section-box-shadow: var(--dui-box-shadow-none);
    --dui-layout-drawer-box-shadow: var(--dui-box-shadow-sm);
    --dui-thumbnail-box-shadow: var(--dui-box-shadow-none);
    --dui-infobox-box-shadow: var(--dui-box-shadow-none);
    --dui-dialog-box-shadow: var(--dui-box-shadow-none);
    --dui-menu-elevation: none;
    --dui-surface-border-color: color-mix(in srgb, var(--dui-color) 18%, transparent);
    --dui-character-paper-surface: color-mix(in srgb, var(--dui-card-background) 94%, #f1e3cb 6%);
}

:where(.dui.dui-theme-paper) .dui-card,
:where(.dui.dui-theme-paper) .dui-menu,
:where(.dui.dui-theme-paper) .dui-tree {
    background: var(--dui-character-paper-surface);
}

:where(.dui.dui-theme-paper) .dui-card-header,
:where(.dui.dui-theme-paper) .dui-menu > .dui-nav-bar,
:where(.dui.dui-theme-paper) .dui-tree-header {
    border-bottom-color: var(--dui-surface-border-color);
}
/*
 * retro console character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-retro-console {
    --dui-surface-border-color: var(--dui-character-boundary-color, var(--dui-color));
    --dui-surface-border: 1px solid var(--dui-surface-border-color);
}

.dui.dui-theme-retro-console {
    /* Keep the accent visible while retaining the identity color as the contrast anchor. */
    --dui-character-boundary-color: color-mix(in srgb, var(--dui-color) 70%, var(--dui-accent) 30%);
    --dui-focus-indicator-color: var(--dui-character-boundary-color);
}

/* Retro Console visual treatment: hard-edged monospace controls with no animated polish. */
.dui.dui-theme-retro-console {
    --dui-font-family: var(--dui-font-family-mono);
    --dui-btn-border: 1px solid var(--dui-accent);
    --dui-btn-transition: none;
    --dui-menu-border: none;
}

:where(.dui.dui-theme-retro-console) .dui-menu-separator {
    border-bottom: 1px solid var(--dui-accent);
}

.dui.dui-theme-retro-console:not(.dui-theme-rounded) {
    --dui-radius-xs: 0;
    --dui-radius-sm: 0;
    --dui-radius-md: 0;
    --dui-radius-lg: 0;
    --dui-radius-xl: 0;
}

.dui.dui-theme-retro-console:not(.dui-theme-elevated) {
    --dui-card-box-shadow: var(--dui-box-shadow-none);
    --dui-section-box-shadow: var(--dui-box-shadow-none);
    --dui-layout-drawer-box-shadow: var(--dui-box-shadow-sm);
    --dui-thumbnail-box-shadow: var(--dui-box-shadow-none);
    --dui-infobox-box-shadow: var(--dui-box-shadow-none);
    --dui-dialog-box-shadow: var(--dui-box-shadow-none);
    --dui-menu-elevation: none;
}
/*
 * soft ui character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-soft-ui {
    --dui-surface-border-color: var(--dui-character-boundary-color, var(--dui-color));
    --dui-surface-border: 1px solid var(--dui-surface-border-color);
}

.dui.dui-theme-soft-ui {
    /* Keep the accent visible while retaining the identity color as the contrast anchor. */
    --dui-character-boundary-color: color-mix(in srgb, var(--dui-color) 70%, var(--dui-accent) 30%);
    --dui-focus-indicator-color: var(--dui-character-boundary-color);
}

/* Soft UI visual treatment: gentle tonal layering with restrained depth. */
.dui.dui-theme-soft-ui {
    /* Tint toward the identity highlight, not body text, so contrast is stable in both modes. */
    --dui-character-soft-surface: color-mix(in srgb, var(--dui-card-background) 92%, var(--dui-clr-dominant-l-5) 8%);
    --dui-character-soft-nested-surface: color-mix(in srgb, var(--dui-card-nested-background) 92%, var(--dui-clr-dominant-l-5) 8%);
    --dui-character-soft-nested-2-surface: color-mix(in srgb, var(--dui-card-nested-2-background) 92%, var(--dui-clr-dominant-l-5) 8%);
    --dui-character-soft-nested-3-surface: color-mix(in srgb, var(--dui-card-nested-3-background) 92%, var(--dui-clr-dominant-l-5) 8%);
    --dui-character-soft-shadow: 0 4px 14px color-mix(in srgb, var(--dui-color) 12%, transparent);
    --dui-card-box-shadow: var(--dui-character-soft-shadow);
    --dui-section-box-shadow: var(--dui-character-soft-shadow);
    --dui-layout-drawer-box-shadow: var(--dui-section-box-shadow);
    --dui-thumbnail-box-shadow: 0 3px 10px color-mix(in srgb, var(--dui-color) 10%, transparent);
    --dui-infobox-box-shadow: 0 2px 8px color-mix(in srgb, var(--dui-color) 8%, transparent);
    --dui-dialog-box-shadow: 0 8px 22px color-mix(in srgb, var(--dui-color) 16%, transparent);
}

:where(.dui.dui-theme-soft-ui) .dui-card,
:where(.dui.dui-theme-soft-ui) .dui-dialog,
:where(.dui.dui-theme-soft-ui) .dui-menu,
:where(.dui.dui-theme-soft-ui) .dui-tree {
    background: var(--dui-character-soft-surface);
}

/* Keep the nested-card tokens layered without making this surface rule outrank explicit color utilities. */
:where(.dui.dui-theme-soft-ui) .dui-card {
    --dui-card-nested-background: var(--dui-character-soft-nested-surface);
    --dui-card-nested-2-background: var(--dui-character-soft-nested-2-surface);
    --dui-card-nested-3-background: var(--dui-character-soft-nested-3-surface);
}
/*
 * terminal character theme.
 *
 * Character themes change material, typography, and component treatment while
 * preserving the selected identity and runtime accent palette.
 */
.dui.dui-theme-terminal {
    --dui-surface-border-color: var(--dui-character-boundary-color, var(--dui-color));
    --dui-surface-border: 1px solid var(--dui-surface-border-color);
}

.dui.dui-theme-terminal {
    --dui-font-family: var(--dui-font-family-mono);
    --dui-card-box-shadow: var(--dui-box-shadow-none);
    --dui-section-box-shadow: var(--dui-box-shadow-none);
    --dui-layout-drawer-box-shadow: var(--dui-box-shadow-sm);
    --dui-thumbnail-box-shadow: var(--dui-box-shadow-none);
    --dui-infobox-box-shadow: var(--dui-box-shadow-none);
    --dui-dialog-box-shadow: var(--dui-box-shadow-none);
    --dui-menu-elevation: none;
    --dui-btn-box-shadow: var(--dui-box-shadow-none);
    --dui-btn-focus-box-shadow: var(--dui-box-shadow-none);
    --dui-btn-border: 1px solid var(--dui-accent);
    --dui-menu-border: none;
    --dui-surface-border-color: color-mix(in srgb, var(--dui-accent) 42%, transparent);
}

:where(.dui.dui-theme-terminal) .dui-menu-separator {
    border-bottom: 1px dashed var(--dui-accent-l-2);
}

:where(.dui.dui-theme-terminal) .dui-card-header,
:where(.dui.dui-theme-terminal) .dui-menu > .dui-nav-bar,
:where(.dui.dui-theme-terminal) .dui-tree-header {
    border-bottom-style: dashed;
}
/*
 * Compact density theme.
 *
 * This optional theme is scoped to a Domino UI root and can be composed with
 * any identity, character, color-mode, accent, and surface theme.
 */
.dui.dui-theme-compact {
    /* Static containers use borders and surface contrast instead of elevation. */
    --dui-card-box-shadow: var(--dui-box-shadow-none);
    --dui-section-box-shadow: var(--dui-box-shadow-none);
    --dui-thumbnail-box-shadow: var(--dui-box-shadow-none);
    --dui-infobox-box-shadow: var(--dui-box-shadow-none);
    --dui-btn-focus-box-shadow: var(--dui-box-shadow-none);

    /* Use a slightly softer radius scale while retaining compact proportions. */
    --dui-radius-xs: 4px;
    --dui-radius-sm: 6px;
    --dui-radius-md: 6px;
    --dui-radius-lg: 8px;
    --dui-radius-xl: 10px;
    --dui-btn-border-radius: var(--dui-radius-xs);
    --dui-btn-group-border-radius: var(--dui-radius-xs);
    --dui-dialog-border-radius: var(--dui-radius-xs);

    /* Keep ordinary navigation and addon icons visually subordinate in the compact theme. */
    --dui-default-icon-size: var(--dui-spc-px-20);
    --dui-menu-item-icon-min-height: var(--dui-spc-px-28);
    --dui-clickable-shadow-spread: 3px;
    --dui-heading-font-weight: 500;
    --dui-datatable-header-font-weight: 500;
    --dui-block-header-title-font-weight: 500;
    --dui-media-heading-font-weight: 500;
    --dui-nav-bar-title-font-weight: 500;
    --dui-thumbnail-title-font-weight: 500;

    /* Reduce chip height and keep addon/remove icons proportionate to the compact label. */
    --dui-chip-height: var(--dui-spc-7);
    --dui-chip-line-height: var(--dui-spc-7);
    --dui-chip-addon-font-size: var(--dui-spc-4);
    --dui-chip-addon-span-font-size: var(--dui-spc-px-14);
    --dui-chip-addon-width: var(--dui-spc-7);
    --dui-chip-addon-height: var(--dui-spc-7);
    --dui-chip-remove-icon-size: var(--dui-chip-addon-font-size);
    --dui-chip-close-mrgin: -1px 0 0 var(--dui-spc-px-8);

    /* Use a slim, rounded scrollbar treatment throughout the compact demo. */
    --dui-scrollbar-width: thin;
    --dui-scrollbar-color: var(--dui-accent-l-2) transparent;
    --dui-scrollbar-size: 8px;
    --dui-scrollbar-track-background: transparent;
    --dui-scrollbar-thumb-background: var(--dui-accent-l-2);
    --dui-scrollbar-thumb-border: 2px solid transparent;
    --dui-scrollbar-thumb-radius: var(--dui-radius-pill);
    --dui-scrollbar-thumb-background-clip: padding-box;
    --dui-scrollbar-thumb-hover-background: var(--dui-accent);

    /* Make buttons thinner by reducing only vertical padding; preserve text line heights. */
    --dui-btn-padding: var(--dui-spc-px-2) var(--dui-spc-px-11);
    --dui-btn-lg-padding: var(--dui-spc-px-6) var(--dui-spc-px-16);
    --dui-btn-md-padding: var(--dui-spc-px-3) var(--dui-spc-px-12);
    --dui-btn-sm-padding: var(--dui-spc-px-2) var(--dui-spc-px-10);
    --dui-btn-xs-padding: 0 var(--dui-spc-px-5);

    /* Keep form-field prefix/postfix buttons thinner while preserving size variants. */
    --dui-form-field-addon-button-padding: 0 var(--dui-spc-px-10);
    --dui-form-field-addon-button-height: var(--dui-spc-px-24);
    --dui-form-field-addon-button-lg-padding: 0 var(--dui-spc-px-14);
    --dui-form-field-addon-button-md-padding: 0 var(--dui-spc-px-11);
    --dui-form-field-addon-button-sm-padding: 0 var(--dui-spc-px-9);
    --dui-form-field-addon-button-xs-padding: 0 var(--dui-spc-px-5);
    --dui-form-field-addon-button-line-height: var(--dui-spc-px-24);
    --dui-form-field-addon-button-text-height: var(--dui-spc-px-24);
    --dui-form-field-addon-button-lg-text-height: var(--dui-spc-px-24);
    --dui-form-field-addon-button-md-text-height: var(--dui-spc-px-24);
    --dui-form-field-addon-button-sm-text-height: var(--dui-spc-px-24);
    --dui-form-field-addon-button-xs-text-height: var(--dui-spc-px-24);

    /* Keep button icons visually subordinate to the button label. */
    --dui-btn-icon-size: 0.875em;

    /* Keep floating action buttons compact with the density theme. */
    --dui-fab-size: 48px;
    --dui-fab-action-size: 36px;
    --dui-fab-actions-gap: var(--dui-spc-2);

    /* Reduce common vertical footprint without changing control hit areas. */
    --dui-alert-padding: var(--dui-spc-3);
    --dui-alert-box-shadow: var(--dui-box-shadow-none);
    --dui-alert-margin: 0 0 0 0;
    --dui-card-header-padding: var(--dui-spc-2);
    --dui-card-description-margin: 0;
    --dui-card-body-padding: var(--dui-spc-px-12);
    --dui-card-margin: 0 0 var(--dui-spc-2) 0;
    --dui-nav-bar-description-margin: 0;
    --dui-progress-hight: var(--dui-spc-3);
    --dui-progress-bar-line-hight: var(--dui-spc-3);
    --dui-progress-bar-display: flex;
    --dui-progress-bar-align-items: center;
    --dui-progress-bar-line-height: normal;
    --dui-tab-anchor-padding: var(--dui-spc-px-6) var(--dui-spc-px-15);
    --dui-form-field-wrapper-padding: 0 var(--dui-spc-px-5);
    --dui-form-field-wrapper-padding-block: 0px;
    --dui-form-field-wrapper-gap: var(--dui-spc-px-3);
    --dui-form-field-chip-height: var(--dui-spc-6);
    --dui-form-field-chip-line-height: var(--dui-spc-6);
    --dui-form-field-chip-addon-width: var(--dui-spc-6);
    --dui-form-field-chip-addon-height: var(--dui-spc-6);
    --dui-form-field-checkbox-square-length: var(--dui-spc-px-14);
    --dui-form-field-checkbox-check-width: var(--dui-spc-px-4);
    --dui-form-field-checkbox-check-height: var(--dui-spc-px-8);
    --dui-form-field-switch-track-width: var(--dui-spc-px-40);
    --dui-form-field-switch-track-height: var(--dui-spc-px-20);
    --dui-form-field-switch-thumb-width: var(--dui-spc-px-16);
    --dui-form-field-switch-thumb-height: var(--dui-spc-px-16);
    --dui-form-field-switch-thumb-left: var(--dui-spc-px-2);
    --dui-form-field-switch-thumb-bottom: var(--dui-spc-px-2);
    --dui-form-field-switch-thumb-checked-transform: translateX(var(--dui-spc-px-20));
    --duiel-padding: var(--dui-spc-px-2) var(--dui-spc-2);
    --dui-bc-padding: var(--dui-spc-px-4) var(--dui-spc-px-10);
    --dui-bc-arrow-padding: 0 var(--dui-spc-px-3);
    --dui-bc-icon-margin: 0 var(--dui-spc-px-3) 0 0;
    --dui-menu-subheader-badge-padding: 0 var(--dui-spc-px-7);
    --dui-datatable-cell-badge-padding: 0 var(--dui-spc-px-7);
    --dui-collapse-panel-content-header-padding: var(--dui-spc-2);
    --dui-collapse-panel-body-padding: var(--dui-spc-2);
    --dui-collapse-panel-footer-padding: var(--dui-spc-2);
    --dui-file-upload-padding: var(--dui-spc-3);
    --dui-form-field-margin: 0 0 var(--dui-spc-3) 0;
    --dui-layout-content-padding-top: var(--dui-spc-px-16);
    --dui-layout-content-padding-right: var(--dui-spc-px-16);
    --dui-layout-content-padding-bottom: var(--dui-spc-px-16);
    --dui-layout-content-padding-left: var(--dui-spc-px-16);
    --dui-row-default-gap: var(--dui-spc-1);
    --dui-row-default-margin: 0 0 var(--dui-spc-1) 0;
    --dui-stepper-active-content-padding: var(--dui-spc-3);
    --dui-stepper-gap: var(--dui-spc-3);
    --dui-step-tracker-line-thinkness: var(--dui-spc-px-4);
    --dui-stepper-track-tail-node-placement: var(--dui-spc-px-5);
    --dui-step-tracker-node-border-width: var(--dui-step-tracker-line-thinkness);
    --dui-step-tracker-node-icon-inset: 50% auto auto 50%;
    --dui-step-tracker-node-icon-transform: translate(-50%, -50%);
    --dui-step-tracker-node-icon-font-size: var(--dui-spc-px-14);
    --dui-datatable-cell-padding: var(--dui-spc-1);
    --dui-form-field-checkbox-indeterminate-check-left: var(--dui-spc-px-3);
    --dui-form-field-checkbox-indeterminate-check-top: var(--dui-spc-px-7);
    --dui-tree-item-anchor-padding: var(--dui-spc-px-2) var(--dui-spc-px-10);
    --dui-form-field-addon-gap: var(--dui-spc-2);
}
/*
 * Amber visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-amber.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #643616;
    --dui-color-1: #824f28;
    --dui-color-2: #a26c45;
    --dui-color-3: #ba8d68;
    --dui-color-4: #d3b08e;
    --dui-color-5: #eddac5;
    --dui-color-alternate: #643616;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #fffcf9;
    --dui-clr-dominant-l-3: #fff4ea;
    --dui-clr-dominant-l-2: #ffe8d4;
    --dui-clr-dominant-l-1: #f8d7bc;
    --dui-clr-dominant: #fff3e7;
    --dui-clr-dominant-d-1: #fae2ca;
    --dui-clr-dominant-d-2: #efccad;
    --dui-clr-dominant-d-3: #d8a980;
    --dui-clr-dominant-d-4: #bd845b;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-amber.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #ffeedc;
    --dui-color-1: #f0c7a0;
    --dui-color-2: #d99f6c;
    --dui-color-3: #bb7b43;
    --dui-color-4: #9b5c2d;
    --dui-color-5: #79431b;
    --dui-color-alternate: #381c08;
    --dui-highlight-color: #180a02;
    --dui-color-invert: #180a02;
    --dui-clr-dominant-l-5: #79461d;
    --dui-clr-dominant-l-4: #6e3d18;
    --dui-clr-dominant-l-3: #633414;
    --dui-clr-dominant-l-2: #572d10;
    --dui-clr-dominant-l-1: #4c250c;
    --dui-clr-dominant: #411f09;
    --dui-clr-dominant-d-1: #351806;
    --dui-clr-dominant-d-2: #2a1204;
    --dui-clr-dominant-d-3: #1f0c02;
    --dui-clr-dominant-d-4: #130801;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Amethyst visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-amethyst.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #4a216b;
    --dui-color-1: #673987;
    --dui-color-2: #8654a3;
    --dui-color-3: #a675bb;
    --dui-color-4: #c6a1d1;
    --dui-color-5: #e7d5eb;
    --dui-color-alternate: #4a216b;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #fdf9ff;
    --dui-clr-dominant-l-3: #f8effc;
    --dui-clr-dominant-l-2: #f0e0f8;
    --dui-clr-dominant-l-1: #e5c9ef;
    --dui-clr-dominant: #f7eafa;
    --dui-clr-dominant-d-1: #eedcf5;
    --dui-clr-dominant-d-2: #dfc1eb;
    --dui-clr-dominant-d-3: #c59bd7;
    --dui-clr-dominant-d-4: #a970bf;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-amethyst.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #f7eefe;
    --dui-color-1: #e4c4f0;
    --dui-color-2: #c68ddc;
    --dui-color-3: #a55bc3;
    --dui-color-4: #7e369f;
    --dui-color-5: #5d1f7b;
    --dui-color-alternate: #2d0c3d;
    --dui-highlight-color: #10051a;
    --dui-color-invert: #10051a;
    --dui-clr-dominant-l-5: #7e2f95;
    --dui-clr-dominant-l-4: #6e2783;
    --dui-clr-dominant-l-3: #5f2071;
    --dui-clr-dominant-l-2: #501960;
    --dui-clr-dominant-l-1: #43134f;
    --dui-clr-dominant: #3a0e46;
    --dui-clr-dominant-d-1: #2e0a39;
    --dui-clr-dominant-d-2: #23072b;
    --dui-clr-dominant-d-3: #18051d;
    --dui-clr-dominant-d-4: #0e0311;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Arctic visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-arctic.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #0f4659;
    --dui-color-1: #2f6579;
    --dui-color-2: #5c8999;
    --dui-color-3: #82aebb;
    --dui-color-4: #abd0d8;
    --dui-color-5: #d2e8eb;
    --dui-color-alternate: #0f4659;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #f8feff;
    --dui-clr-dominant-l-3: #effbfd;
    --dui-clr-dominant-l-2: #e2f5f7;
    --dui-clr-dominant-l-1: #d2ecef;
    --dui-clr-dominant: #effaff;
    --dui-clr-dominant-d-1: #e1f2f4;
    --dui-clr-dominant-d-2: #c9e5e9;
    --dui-clr-dominant-d-3: #a5d0d7;
    --dui-clr-dominant-d-4: #7fb6c1;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-arctic.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #e8fbff;
    --dui-color-1: #bfe6ee;
    --dui-color-2: #8fc8d3;
    --dui-color-3: #64a5b4;
    --dui-color-4: #397f92;
    --dui-color-5: #1f5d70;
    --dui-color-alternate: #072631;
    --dui-highlight-color: #031116;
    --dui-color-invert: #031116;
    --dui-clr-dominant-l-5: #2b6b7d;
    --dui-clr-dominant-l-4: #246174;
    --dui-clr-dominant-l-3: #1e566a;
    --dui-clr-dominant-l-2: #184b5f;
    --dui-clr-dominant-l-1: #154858;
    --dui-clr-dominant: #104052;
    --dui-clr-dominant-d-1: #0c3747;
    --dui-clr-dominant-d-2: #092e3b;
    --dui-clr-dominant-d-3: #06222d;
    --dui-clr-dominant-d-4: #04171e;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Azure visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-azure.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #16378c;
    --dui-color-1: #2d54b0;
    --dui-color-2: #577dcb;
    --dui-color-3: #809fdd;
    --dui-color-4: #adc4eb;
    --dui-color-5: #d8e3f6;
    --dui-color-alternate: #16378c;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #f8fbff;
    --dui-clr-dominant-l-3: #f0f6ff;
    --dui-clr-dominant-l-2: #eaf3ff;
    --dui-clr-dominant-l-1: #d8e6fb;
    --dui-clr-dominant: #e1ecff;
    --dui-clr-dominant-d-1: #d4e1f6;
    --dui-clr-dominant-d-2: #bfd2ef;
    --dui-clr-dominant-d-3: #9ab5e5;
    --dui-clr-dominant-d-4: #7497d8;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-azure.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #eaf1ff;
    --dui-color-1: #bdd0f6;
    --dui-color-2: #8ba8ea;
    --dui-color-3: #5d80ce;
    --dui-color-4: #355dad;
    --dui-color-5: #1f418c;
    --dui-color-alternate: #081b4e;
    --dui-highlight-color: #060d1f;
    --dui-color-invert: #060d1f;
    --dui-clr-dominant-l-5: #244898;
    --dui-clr-dominant-l-4: #20428d;
    --dui-clr-dominant-l-3: #1b3a81;
    --dui-clr-dominant-l-2: #163276;
    --dui-clr-dominant-l-1: #112b6a;
    --dui-clr-dominant: #0d235d;
    --dui-clr-dominant-d-1: #091c4f;
    --dui-clr-dominant-d-2: #06153f;
    --dui-clr-dominant-d-3: #04102e;
    --dui-clr-dominant-d-4: #020b1f;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Crimson visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
/* Crimson visual identity: a confident red family for action-oriented applications. */
.dui.dui-theme-crimson.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #5a1f2b;
    --dui-color-1: #7a3041;
    --dui-color-2: #995066;
    --dui-color-3: #b97889;
    --dui-color-4: #d29fab;
    --dui-color-5: #edd5dc;
    --dui-color-alternate: #5a1f2b;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #fffafb;
    --dui-clr-dominant-l-3: #fff3f5;
    --dui-clr-dominant-l-2: #fde9ed;
    --dui-clr-dominant-l-1: #f6d9df;
    --dui-clr-dominant: #fdf1f4;
    --dui-clr-dominant-d-1: #f5e1e6;
    --dui-clr-dominant-d-2: #e9cbd3;
    --dui-clr-dominant-d-3: #d2a7b3;
    --dui-clr-dominant-d-4: #b97d8d;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-crimson.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #fff0f3;
    --dui-color-1: #f3cad3;
    --dui-color-2: #dc9eac;
    --dui-color-3: #bf7184;
    --dui-color-4: #9c465d;
    --dui-color-5: #77263c;
    --dui-color-alternate: #35101b;
    --dui-highlight-color: #17070c;
    --dui-color-invert: #17070c;
    --dui-clr-dominant-l-5: #703247;
    --dui-clr-dominant-l-4: #642b3e;
    --dui-clr-dominant-l-3: #582439;
    --dui-clr-dominant-l-2: #4b1e31;
    --dui-clr-dominant-l-1: #401929;
    --dui-clr-dominant: #361421;
    --dui-clr-dominant-d-1: #2b0f1a;
    --dui-clr-dominant-d-2: #210a13;
    --dui-clr-dominant-d-3: #16060d;
    --dui-clr-dominant-d-4: #0d0307;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Forest visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-forest.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #183a25;
    --dui-color-1: #31583a;
    --dui-color-2: #5f8064;
    --dui-color-3: #85a38b;
    --dui-color-4: #adc3b0;
    --dui-color-5: #d8e5d9;
    --dui-color-alternate: #183a25;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #fbfefb;
    --dui-clr-dominant-l-3: #f1f8f1;
    --dui-clr-dominant-l-2: #e5f1e5;
    --dui-clr-dominant-l-1: #d4e7d5;
    --dui-clr-dominant: #edf7ee;
    --dui-clr-dominant-d-1: #dceedd;
    --dui-clr-dominant-d-2: #c8dfc9;
    --dui-clr-dominant-d-3: #a7c7a9;
    --dui-clr-dominant-d-4: #84ad88;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-forest.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #edf8ed;
    --dui-color-1: #cbe5cb;
    --dui-color-2: #9fc4a1;
    --dui-color-3: #78a27c;
    --dui-color-4: #527858;
    --dui-color-5: #315a36;
    --dui-color-alternate: #0d2412;
    --dui-highlight-color: #08150b;
    --dui-color-invert: #08150b;
    --dui-clr-dominant-l-5: #2c5a34;
    --dui-clr-dominant-l-4: #264f2f;
    --dui-clr-dominant-l-3: #22482a;
    --dui-clr-dominant-l-2: #1c3f24;
    --dui-clr-dominant-l-1: #18371c;
    --dui-clr-dominant: #142f19;
    --dui-clr-dominant-d-1: #102815;
    --dui-clr-dominant-d-2: #0c2111;
    --dui-clr-dominant-d-3: #081a0d;
    --dui-clr-dominant-d-4: #051208;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Graphite visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-graphite.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #202733;
    --dui-color-1: #3a4554;
    --dui-color-2: #617080;
    --dui-color-3: #8795a3;
    --dui-color-4: #aab5c0;
    --dui-color-5: #cbd3da;
    --dui-color-alternate: #202733;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #fbfcfd;
    --dui-clr-dominant-l-3: #f5f7f9;
    --dui-clr-dominant-l-2: #edf1f4;
    --dui-clr-dominant-l-1: #e3e8ed;
    --dui-clr-dominant: #f4f6f8;
    --dui-clr-dominant-d-1: #e9eef2;
    --dui-clr-dominant-d-2: #dce3e9;
    --dui-clr-dominant-d-3: #c3cdd6;
    --dui-clr-dominant-d-4: #a5b1bd;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-graphite.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #f2f5f8;
    --dui-color-1: #d4dce5;
    --dui-color-2: #aab7c5;
    --dui-color-3: #8292a3;
    --dui-color-4: #607184;
    --dui-color-5: #435365;
    --dui-color-alternate: #111820;
    --dui-highlight-color: #080c11;
    --dui-color-invert: #080c11;
    --dui-clr-dominant-l-5: #364352;
    --dui-clr-dominant-l-4: #303c4a;
    --dui-clr-dominant-l-3: #2a3542;
    --dui-clr-dominant-l-2: #24303c;
    --dui-clr-dominant-l-1: #1e2a35;
    --dui-clr-dominant: #18232e;
    --dui-clr-dominant-d-1: #131d26;
    --dui-clr-dominant-d-2: #0e171e;
    --dui-clr-dominant-d-3: #091117;
    --dui-clr-dominant-d-4: #050a0f;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Indigo visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-indigo.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #25336f;
    --dui-color-1: #3f4d8c;
    --dui-color-2: #5c67a8;
    --dui-color-3: #8089bf;
    --dui-color-4: #a9b1d4;
    --dui-color-5: #d9dded;
    --dui-color-alternate: #25336f;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #f8fbff;
    --dui-clr-dominant-l-3: #eef5ff;
    --dui-clr-dominant-l-2: #e5efff;
    --dui-clr-dominant-l-1: #d6e5fb;
    --dui-clr-dominant: #edf4ff;
    --dui-clr-dominant-d-1: #e1edfb;
    --dui-clr-dominant-d-2: #cbdcf3;
    --dui-clr-dominant-d-3: #a5c1e3;
    --dui-clr-dominant-d-4: #7d9dcc;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-indigo.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #eff4ff;
    --dui-color-1: #d3dbf6;
    --dui-color-2: #afbae5;
    --dui-color-3: #8b97d0;
    --dui-color-4: #6874b4;
    --dui-color-5: #475395;
    --dui-color-alternate: #101a3f;
    --dui-highlight-color: #060b1c;
    --dui-color-invert: #060b1c;
    --dui-clr-dominant-l-5: #45548f;
    --dui-clr-dominant-l-4: #3b4880;
    --dui-clr-dominant-l-3: #323e71;
    --dui-clr-dominant-l-2: #293462;
    --dui-clr-dominant-l-1: #212a53;
    --dui-clr-dominant: #1a2245;
    --dui-clr-dominant-d-1: #141a37;
    --dui-clr-dominant-d-2: #0f1429;
    --dui-clr-dominant-d-3: #0a0d1c;
    --dui-clr-dominant-d-4: #060811;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Jade visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-jade.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #145b4c;
    --dui-color-1: #2f7766;
    --dui-color-2: #57957e;
    --dui-color-3: #7caf9c;
    --dui-color-4: #a7c9ba;
    --dui-color-5: #d6e8df;
    --dui-color-alternate: #145b4c;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #f9fdfc;
    --dui-clr-dominant-l-3: #effaf5;
    --dui-clr-dominant-l-2: #e1f3eb;
    --dui-clr-dominant-l-1: #d0eae0;
    --dui-clr-dominant: #f0faf6;
    --dui-clr-dominant-d-1: #e0f0e8;
    --dui-clr-dominant-d-2: #c9e4d7;
    --dui-clr-dominant-d-3: #a3cfbb;
    --dui-clr-dominant-d-4: #78b199;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-jade.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #e8faf0;
    --dui-color-1: #c5e5d6;
    --dui-color-2: #98c5b2;
    --dui-color-3: #6da58b;
    --dui-color-4: #47856d;
    --dui-color-5: #286a56;
    --dui-color-alternate: #0d3027;
    --dui-highlight-color: #04150f;
    --dui-color-invert: #04150f;
    --dui-clr-dominant-l-5: #2d745c;
    --dui-clr-dominant-l-4: #276954;
    --dui-clr-dominant-l-3: #225e4b;
    --dui-clr-dominant-l-2: #1d5342;
    --dui-clr-dominant-l-1: #184839;
    --dui-clr-dominant: #133d31;
    --dui-clr-dominant-d-1: #0f332a;
    --dui-clr-dominant-d-2: #0b2922;
    --dui-clr-dominant-d-3: #071f19;
    --dui-clr-dominant-d-4: #041410;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Lagoon visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-lagoon.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #0b7271;
    --dui-color-1: #169290;
    --dui-color-2: #3ab5b3;
    --dui-color-3: #69c8c5;
    --dui-color-4: #9bd9d5;
    --dui-color-5: #d1efed;
    --dui-color-alternate: #0b7271;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #f5fffa;
    --dui-clr-dominant-l-3: #ebfbf3;
    --dui-clr-dominant-l-2: #dcf5e8;
    --dui-clr-dominant-l-1: #c9ebda;
    --dui-clr-dominant: #e8faf1;
    --dui-clr-dominant-d-1: #d8f0e4;
    --dui-clr-dominant-d-2: #b9e1cd;
    --dui-clr-dominant-d-3: #8fcbb0;
    --dui-clr-dominant-d-4: #62b492;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-lagoon.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #e6ffff;
    --dui-color-1: #b5ebea;
    --dui-color-2: #7fd4d2;
    --dui-color-3: #4ebcb9;
    --dui-color-4: #269e9d;
    --dui-color-5: #0f7c7d;
    --dui-color-alternate: #043c3e;
    --dui-highlight-color: #041a1c;
    --dui-color-invert: #041a1c;
    --dui-clr-dominant-l-5: #21989a;
    --dui-clr-dominant-l-4: #1d8d90;
    --dui-clr-dominant-l-3: #18848a;
    --dui-clr-dominant-l-2: #127a80;
    --dui-clr-dominant-l-1: #0d6f75;
    --dui-clr-dominant: #09656a;
    --dui-clr-dominant-d-1: #075a5f;
    --dui-clr-dominant-d-2: #064e52;
    --dui-clr-dominant-d-3: #044144;
    --dui-clr-dominant-d-4: #023235;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Lavender visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-lavender.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #3d355f;
    --dui-color-1: #5a5280;
    --dui-color-2: #7870a0;
    --dui-color-3: #9991b9;
    --dui-color-4: #bdb7d0;
    --dui-color-5: #e0deec;
    --dui-color-alternate: #3d355f;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #fafaff;
    --dui-clr-dominant-l-3: #f5f5fd;
    --dui-clr-dominant-l-2: #edecfa;
    --dui-clr-dominant-l-1: #e0def1;
    --dui-clr-dominant: #f4f3fc;
    --dui-clr-dominant-d-1: #e8e7f7;
    --dui-clr-dominant-d-2: #d9d8ec;
    --dui-clr-dominant-d-3: #c0bed9;
    --dui-clr-dominant-d-4: #a19fc1;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-lavender.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #f1f0ff;
    --dui-color-1: #d6d3f0;
    --dui-color-2: #b4b0d6;
    --dui-color-3: #918cb9;
    --dui-color-4: #6d6798;
    --dui-color-5: #49436f;
    --dui-color-alternate: #26213f;
    --dui-highlight-color: #0d0b1c;
    --dui-color-invert: #0d0b1c;
    --dui-clr-dominant-l-5: #4f4a78;
    --dui-clr-dominant-l-4: #46416b;
    --dui-clr-dominant-l-3: #3d385e;
    --dui-clr-dominant-l-2: #343051;
    --dui-clr-dominant-l-1: #2c2845;
    --dui-clr-dominant: #25213a;
    --dui-clr-dominant-d-1: #1e1a30;
    --dui-clr-dominant-d-2: #171425;
    --dui-clr-dominant-d-3: #100e1a;
    --dui-clr-dominant-d-4: #090810;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Lime visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-lime.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #4c561f;
    --dui-color-1: #687338;
    --dui-color-2: #899457;
    --dui-color-3: #a8b378;
    --dui-color-4: #c7d09e;
    --dui-color-5: #e4eacb;
    --dui-color-alternate: #4c561f;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #fefff9;
    --dui-clr-dominant-l-3: #f8fbe9;
    --dui-clr-dominant-l-2: #eff4d7;
    --dui-clr-dominant-l-1: #e5edc6;
    --dui-clr-dominant: #f7faec;
    --dui-clr-dominant-d-1: #edf2d8;
    --dui-clr-dominant-d-2: #dfe8be;
    --dui-clr-dominant-d-3: #c4d39a;
    --dui-clr-dominant-d-4: #a8bd73;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-lime.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #f3f8dc;
    --dui-color-1: #dce9ae;
    --dui-color-2: #bfd382;
    --dui-color-3: #a0b45c;
    --dui-color-4: #81943e;
    --dui-color-5: #64742c;
    --dui-color-alternate: #30370d;
    --dui-highlight-color: #141802;
    --dui-color-invert: #141802;
    --dui-clr-dominant-l-5: #687733;
    --dui-clr-dominant-l-4: #5e6c2e;
    --dui-clr-dominant-l-3: #556129;
    --dui-clr-dominant-l-2: #4b5524;
    --dui-clr-dominant-l-1: #41491f;
    --dui-clr-dominant: #383e1a;
    --dui-clr-dominant-d-1: #2e3415;
    --dui-clr-dominant-d-2: #252a10;
    --dui-clr-dominant-d-3: #1b200b;
    --dui-clr-dominant-d-4: #111505;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Marigold visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-marigold.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #66530a;
    --dui-color-1: #806c11;
    --dui-color-2: #9b8424;
    --dui-color-3: #b19b45;
    --dui-color-4: #c8b672;
    --dui-color-5: #ded39f;
    --dui-color-alternate: #66530a;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #faf5e7;
    --dui-clr-dominant-l-3: #f5eacd;
    --dui-clr-dominant-l-2: #eeddb0;
    --dui-clr-dominant-l-1: #e2c98b;
    --dui-clr-dominant: #f1e2bd;
    --dui-clr-dominant-d-1: #e8d4a3;
    --dui-clr-dominant-d-2: #d8bd79;
    --dui-clr-dominant-d-3: #b99a45;
    --dui-clr-dominant-d-4: #947522;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-marigold.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #e6d083;
    --dui-color-1: #cfb963;
    --dui-color-2: #b19a32;
    --dui-color-3: #927b10;
    --dui-color-4: #725c00;
    --dui-color-5: #544200;
    --dui-color-alternate: #2d2300;
    --dui-highlight-color: #120e00;
    --dui-color-invert: #120e00;
    --dui-clr-dominant-l-5: #806e12;
    --dui-clr-dominant-l-4: #74600d;
    --dui-clr-dominant-l-3: #66530a;
    --dui-clr-dominant-l-2: #594700;
    --dui-clr-dominant-l-1: #553f00;
    --dui-clr-dominant: #4e3b00;
    --dui-clr-dominant-d-1: #443200;
    --dui-clr-dominant-d-2: #382900;
    --dui-clr-dominant-d-3: #2b1d00;
    --dui-clr-dominant-d-4: #1d1200;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Meadow visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-meadow.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #405f24;
    --dui-color-1: #5d7b36;
    --dui-color-2: #7e9954;
    --dui-color-3: #a1b67a;
    --dui-color-4: #c3d3a7;
    --dui-color-5: #e4edcf;
    --dui-color-alternate: #405f24;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #f8fcf2;
    --dui-clr-dominant-l-3: #f1f8e6;
    --dui-clr-dominant-l-2: #e7f1d6;
    --dui-clr-dominant-l-1: #d9e7bd;
    --dui-clr-dominant: #eff8df;
    --dui-clr-dominant-d-1: #e1edc6;
    --dui-clr-dominant-d-2: #c9dba2;
    --dui-clr-dominant-d-3: #aac57a;
    --dui-clr-dominant-d-4: #87a34f;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-meadow.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #eff9d9;
    --dui-color-1: #d4e7ad;
    --dui-color-2: #b4cf79;
    --dui-color-3: #90b34e;
    --dui-color-4: #6d922d;
    --dui-color-5: #4c701d;
    --dui-color-alternate: #243b0d;
    --dui-highlight-color: #0c1405;
    --dui-color-invert: #0c1405;
    --dui-clr-dominant-l-5: #4d701e;
    --dui-clr-dominant-l-4: #456519;
    --dui-clr-dominant-l-3: #3d5a15;
    --dui-clr-dominant-l-2: #354f11;
    --dui-clr-dominant-l-1: #2e440e;
    --dui-clr-dominant: #263a0b;
    --dui-clr-dominant-d-1: #1f3009;
    --dui-clr-dominant-d-2: #182507;
    --dui-clr-dominant-d-3: #111b04;
    --dui-clr-dominant-d-4: #0b1202;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Ocean visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
/* Ocean / Fjord visual identity with a subtle runtime accent harmony profile. */
.dui.dui-theme-ocean.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #18324a;
    --dui-color-1: #29475f;
    --dui-color-2: #577086;
    --dui-color-3: #748ea3;
    --dui-color-4: #9aafc0;
    --dui-color-5: #d4e0ea;
    --dui-color-alternate: #18324a;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;

    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #fbfdff;
    --dui-clr-dominant-l-3: #f4f8fc;
    --dui-clr-dominant-l-2: #eaf2f8;
    --dui-clr-dominant-l-1: #dce8f2;
    --dui-clr-dominant: #f5f9fd;
    --dui-clr-dominant-d-1: #e6f0f7;
    --dui-clr-dominant-d-2: #d2e2ee;
    --dui-clr-dominant-d-3: #b0c8d9;
    --dui-clr-dominant-d-4: #8ba7bc;

    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-ocean.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #eaf5fc;
    --dui-color-1: #c9dce9;
    --dui-color-2: #9db5c7;
    --dui-color-3: #7995aa;
    --dui-color-4: #58758c;
    --dui-color-5: #29465e;
    --dui-color-alternate: #0d1c2c;
    --dui-highlight-color: #07131f;
    --dui-color-invert: #07131f;

    --dui-clr-dominant-l-5: #2f5068;
    --dui-clr-dominant-l-4: #28475f;
    --dui-clr-dominant-l-3: #234057;
    --dui-clr-dominant-l-2: #1d384f;
    --dui-clr-dominant-l-1: #193149;
    --dui-clr-dominant: #142a40;
    --dui-clr-dominant-d-1: #102337;
    --dui-clr-dominant-d-2: #0c1c2c;
    --dui-clr-dominant-d-3: #081522;
    --dui-clr-dominant-d-4: #050e17;

    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Rose visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-rose.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #4b2f3d;
    --dui-color-1: #6d4b5b;
    --dui-color-2: #916d7c;
    --dui-color-3: #b08d9b;
    --dui-color-4: #cdb1bd;
    --dui-color-5: #e4d2da;
    --dui-color-alternate: #4b2f3d;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #fffcfd;
    --dui-clr-dominant-l-3: #fcf6f9;
    --dui-clr-dominant-l-2: #f7eaf0;
    --dui-clr-dominant-l-1: #eedbe4;
    --dui-clr-dominant: #fcf5f8;
    --dui-clr-dominant-d-1: #f4e5ec;
    --dui-clr-dominant-d-2: #e9d2dc;
    --dui-clr-dominant-d-3: #d0b0be;
    --dui-clr-dominant-d-4: #b78a9d;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-rose.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #fff0f5;
    --dui-color-1: #f0d2df;
    --dui-color-2: #d4a9bd;
    --dui-color-3: #b87e9a;
    --dui-color-4: #955671;
    --dui-color-5: #71364f;
    --dui-color-alternate: #2d101f;
    --dui-highlight-color: #17070f;
    --dui-color-invert: #17070f;
    --dui-clr-dominant-l-5: #69374f;
    --dui-clr-dominant-l-4: #5e3047;
    --dui-clr-dominant-l-3: #542a3f;
    --dui-clr-dominant-l-2: #492237;
    --dui-clr-dominant-l-1: #3f1d2f;
    --dui-clr-dominant: #351827;
    --dui-clr-dominant-d-1: #2c1220;
    --dui-clr-dominant-d-2: #220d18;
    --dui-clr-dominant-d-3: #190811;
    --dui-clr-dominant-d-4: #100409;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Sandstone visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-sandstone.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #4a382b;
    --dui-color-1: #6b5543;
    --dui-color-2: #8a725d;
    --dui-color-3: #a58e78;
    --dui-color-4: #c0ac98;
    --dui-color-5: #d9c9b7;
    --dui-color-alternate: #4a382b;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #fffefa;
    --dui-clr-dominant-l-4: #fffcf7;
    --dui-clr-dominant-l-3: #fbf5ec;
    --dui-clr-dominant-l-2: #f4eadc;
    --dui-clr-dominant-l-1: #eadbc8;
    --dui-clr-dominant: #f8efe4;
    --dui-clr-dominant-d-1: #efdfce;
    --dui-clr-dominant-d-2: #e3cfb8;
    --dui-clr-dominant-d-3: #cbb197;
    --dui-clr-dominant-d-4: #af8e6e;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-sandstone.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #fff6e8;
    --dui-color-1: #f0d8b8;
    --dui-color-2: #d5b58c;
    --dui-color-3: #b8946e;
    --dui-color-4: #916d4c;
    --dui-color-5: #674a32;
    --dui-color-alternate: #23150b;
    --dui-highlight-color: #120a05;
    --dui-color-invert: #120a05;
    --dui-clr-dominant-l-5: #5e432d;
    --dui-clr-dominant-l-4: #533a27;
    --dui-clr-dominant-l-3: #49321f;
    --dui-clr-dominant-l-2: #3e2919;
    --dui-clr-dominant-l-1: #342113;
    --dui-clr-dominant: #2b1b0e;
    --dui-clr-dominant-d-1: #231508;
    --dui-clr-dominant-d-2: #1b1005;
    --dui-clr-dominant-d-3: #140b03;
    --dui-clr-dominant-d-4: #0d0601;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Sunset visual identity theme.
 *
 * Identity themes provide dominant surfaces and neutral color scales while
 * remaining composable with color mode, accent, density, character, and
 * surface themes.
 */
.dui.dui-theme-sunset.dui-colors-light {
    --dui-accent-harmony-anchor: var(--dui-color);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-2);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #722d24;
    --dui-color-1: #914334;
    --dui-color-2: #ad5c4a;
    --dui-color-3: #c47c6b;
    --dui-color-4: #dda89b;
    --dui-color-5: #efd2c9;
    --dui-color-alternate: #722d24;
    --dui-highlight-color: #ffffff;
    --dui-color-invert: #ffffff;
    --dui-clr-dominant-l-5: #ffffff;
    --dui-clr-dominant-l-4: #fffdfb;
    --dui-clr-dominant-l-3: #fff7f3;
    --dui-clr-dominant-l-2: #ffebe5;
    --dui-clr-dominant-l-1: #f9d8d0;
    --dui-clr-dominant: #fff1ed;
    --dui-clr-dominant-d-1: #f9e0da;
    --dui-clr-dominant-d-2: #f0cbc2;
    --dui-clr-dominant-d-3: #d9a59a;
    --dui-clr-dominant-d-4: #bd776c;
    --dui-card-background: var(--dui-clr-dominant-l-4);
    --dui-card-nested-background: color-mix(in srgb, var(--dui-clr-dominant-l-3) 75%, var(--dui-clr-dominant-l-1) 25%);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-3-background: var(--dui-clr-dominant-d-1);
    --dui-menu-background-color: var(--dui-clr-dominant-l-5);
    --dui-quick-search-bg-color: var(--dui-accent-l-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}

.dui.dui-theme-sunset.dui-colors-dark {
    --dui-accent-harmony-anchor: var(--dui-color-5);
    --dui-accent-harmony-strength: 18%;
    --dui-primary-harmony-anchor: var(--dui-color-5);
    --dui-primary-harmony-strength: 55%;
    --dui-secondary-harmony-anchor: var(--dui-color-3);
    --dui-secondary-harmony-strength: 45%;
    --dui-color: #fff0eb;
    --dui-color-1: #f0c0b5;
    --dui-color-2: #d98b7b;
    --dui-color-3: #be5f4e;
    --dui-color-4: #9c3f32;
    --dui-color-5: #7a2823;
    --dui-color-alternate: #3b100e;
    --dui-highlight-color: #160604;
    --dui-color-invert: #160604;
    --dui-clr-dominant-l-5: #873938;
    --dui-clr-dominant-l-4: #783032;
    --dui-clr-dominant-l-3: #69282b;
    --dui-clr-dominant-l-2: #5a2024;
    --dui-clr-dominant-l-1: #4c181d;
    --dui-clr-dominant: #401217;
    --dui-clr-dominant-d-1: #340e12;
    --dui-clr-dominant-d-2: #280a0e;
    --dui-clr-dominant-d-3: #1c070a;
    --dui-clr-dominant-d-4: #100406;
    --dui-card-background: var(--dui-clr-dominant-l-1);
    --dui-card-nested-background: var(--dui-clr-dominant-l-2);
    --dui-card-nested-2-background: var(--dui-clr-dominant-l-3);
    --dui-card-nested-3-background: var(--dui-clr-dominant-l-4);
    --dui-menu-background-color: var(--dui-clr-dominant-l-1);
    --dui-quick-search-bg-color: var(--dui-accent-d-2);
    --dui-quick-search-color: var(--dui-accent-fg-clr);
}
/*
 * Copyright © 2019 Dominokit
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* Accent Headers is composable: it changes only component-header surfaces. */
.dui.dui-theme-accent-headers {
    --dui-card-header-background: var(--dui-accent-header-background);
    --dui-card-header-color: var(--dui-accent-header-color);
    --dui-card-header-title-color: var(--dui-accent-header-color);
    --dui-card-header-border-color: var(--dui-accent-header-border-color);
    --dui-menu-header-background: var(--dui-accent-header-background);
    --dui-menu-header-color: var(--dui-accent-header-color);
    --dui-menu-header-border-color: var(--dui-accent-header-border-color);
    --dui-tree-header-background: var(--dui-accent-header-background);
    --dui-tree-header-color: var(--dui-accent-header-color);
    --dui-datatable-header-background: var(--dui-accent-header-background);
    --dui-datatable-header-color: var(--dui-accent-header-color);
    --dui-datatable-header-hover-bg-color: var(--dui-accent-header-hover-background);
    --dui-datatable-header-hover-color: var(--dui-accent-header-color);
    --dui-datatable-header-border-color: var(--dui-accent-header-border-color);
}

.dui.dui-theme-accent-headers.dui-colors-light {
    --dui-accent-header-background: var(--dui-accent-l-4);
    --dui-accent-header-hover-background: var(--dui-accent-l-3);
    --dui-accent-header-border-color: var(--dui-accent-l-3);
    --dui-accent-header-color: var(--dui-color);
}

.dui.dui-theme-accent-headers.dui-colors-dark {
    --dui-accent-header-background: var(--dui-accent-d-3);
    --dui-accent-header-hover-background: var(--dui-accent-d-2);
    --dui-accent-header-border-color: var(--dui-accent-d-2);
    --dui-accent-header-color: var(--dui-color);
}
/*
 * Bordered surface theme.
 *
 * Bordered owns component outlines. It can be composed with elevated and
 * rounded surface themes without depending on stylesheet load order.
 */
.dui.dui-theme-bordered {
    --dui-card-box-shadow: var(--dui-box-shadow-none);
    --dui-section-box-shadow: var(--dui-box-shadow-none);
    --dui-layout-drawer-box-shadow: var(--dui-box-shadow-sm);
    --dui-thumbnail-box-shadow: var(--dui-box-shadow-none);
    --dui-infobox-box-shadow: var(--dui-box-shadow-none);
    --dui-btn-focus-box-shadow: var(--dui-box-shadow-none);
    --dui-dialog-box-shadow: var(--dui-box-shadow-none);
    --dui-surface-border: 1px solid var(--dui-border-default);
}

/* Keep Bordered outlines neutral and visible in both color modes. */
.dui.dui-theme-bordered.dui-colors-light {
    --dui-border-default: var(--dui-accent-d-2);
}

.dui.dui-theme-bordered.dui-colors-dark {
    --dui-border-default: var(--dui-accent-l-2);
}

:where(.dui.dui-theme-bordered) :is(.dui-card, .dui-dialog, .dui-menu, .dui-tree, .dui-datatable-responsive) {
    border: var(--dui-surface-border);
}
/*
 * Elevated surface theme.
 *
 * Elevated owns component shadows. It does not clear borders when the
 * composable bordered surface is active.
 */
.dui.dui-theme-elevated {
    --dui-card-box-shadow: var(--dui-box-shadow-1);
    --dui-section-box-shadow: var(--dui-box-shadow-1);
    --dui-layout-drawer-box-shadow: var(--dui-box-shadow-1);
    --dui-thumbnail-box-shadow: var(--dui-box-shadow-1);
    --dui-infobox-box-shadow: var(--dui-box-shadow);
    --dui-btn-focus-box-shadow: var(--dui-box-shadow-2);
    --dui-dialog-box-shadow: var(--dui-box-shadow-10);
}

:where(.dui.dui-theme-elevated:not(.dui-theme-bordered)) :is(.dui-card, .dui-dialog, .dui-menu, .dui-tree, .dui-datatable-responsive) {
    border: 0;
}
/*
 * Rounded surface theme.
 *
 * Rounded owns the shared radius scale and component clipping rules.
 */
/* Rounded increases the shared component radius scale while preserving the selected surface. */
.dui.dui-theme-rounded {
    --dui-radius-xs: 6px;
    --dui-radius-sm: 8px;
    --dui-radius-md: 12px;
    --dui-radius-lg: 16px;
    --dui-radius-xl: 24px;

    --duiel-border-radius: var(--dui-radius-sm);
    --dui-alert-border-radius: var(--dui-radius-md);
    --dui-btn-border-radius: var(--dui-radius-md);
    --dui-btn-group-border-radius: var(--dui-radius-md);
    --dui-card-border-radius: var(--dui-radius-lg);
    --dui-dialog-border-radius: var(--dui-radius-xl);
    --dui-form-field-wrapper-radius: var(--dui-radius-md);
    --dui-progress-radius: var(--dui-radius-md);
    --dui-tab-item-border-radius: var(--dui-radius-md);
    --dui-tree-radius: var(--dui-radius-md);
    --dui-tree-header-radius: var(--dui-radius-md);
    --dui-tree-item-anchor-radius: var(--dui-radius-sm);
    --dui-thumbnail-radius: var(--dui-radius-lg);
    --dui-thumbnail-head-radius: var(--dui-thumbnail-radius);
    --dui-thumbnail-tail-radius: var(--dui-thumbnail-radius);
    --dui-thumbnail-body-radius: var(--dui-thumbnail-radius);
    --dui-thumbnail-image-radius: var(--dui-thumbnail-radius);
    --dui-list-group-radius: var(--dui-radius-md);
    --dui-badge-radius: var(--dui-radius-sm);
    --dui-collapse-group-radius: var(--dui-radius-md);
    --dui-menu-radius: var(--dui-radius-md);
    --dui-breadcrumb-radius: var(--dui-radius-md);
    --dui-carousel-radius: var(--dui-radius-lg);
    --dui-infobox-radius: var(--dui-radius-md);
    --dui-media-radius: var(--dui-radius-md);
    --dui-popover-radius: var(--dui-radius-md);
    --dui-file-upload-radius: var(--dui-radius-md);
    --dui-calendar-radius: var(--dui-radius-md);
    --dui-timepicker-radius: var(--dui-radius-md);
    --dui-datatable-radius: var(--dui-radius-md);
}

/* Keep navigation headers open toward their body while preserving the outer surface shape. */
:where(.dui.dui-theme-rounded) .dui-menu > .dui-nav-bar,
:where(.dui.dui-theme-rounded) .dui-tree-header,
:where(.dui.dui-theme-rounded) .dui-tabs-nav {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Menu and tree items remain clean rectangles; the menu body clips them at the outer corners. */
:where(.dui.dui-theme-rounded) .dui-menu-item,
:where(.dui.dui-theme-rounded) .dui-tree-anchor {
    border-radius: 0;
}

:where(.dui.dui-theme-rounded) .dui-menu > .dui-menu-body {
    overflow: hidden;
}

/* A visible menu header owns the top edge; keep the first item square beneath it. */
:where(.dui.dui-theme-rounded) :where(.dui-menu:has(> .dui-nav-bar:not(:empty))) > .dui-menu-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

:where(.dui.dui-theme-rounded) .dui-breadcrumb {
    border-radius: var(--dui-breadcrumb-radius);
}

/* Rounded carousel surfaces clip animated slides and their images at the same boundary. */
:where(.dui.dui-theme-rounded) .dui-carousel {
    border-radius: var(--dui-carousel-radius);
    overflow: hidden;
}

:where(.dui.dui-theme-rounded) .dui-carousel-inner {
    border-radius: inherit;
}

:where(.dui.dui-theme-rounded) :where(.dui-carousel-inner) > .dui-slide {
    border-radius: inherit;
    overflow: hidden;
}

:where(.dui.dui-theme-rounded) :where(.dui-carousel-inner) > :where(.dui-slide) img,
:where(.dui.dui-theme-rounded) :where(.dui-carousel-inner) > :where(.dui-slide) picture,
:where(.dui.dui-theme-rounded) :where(.dui-carousel-inner) > :where(.dui-slide) picture img {
    border-radius: inherit;
}

/* The accordion owns the rounded surface and clips square panels at its outer corners. */
:where(.dui.dui-theme-rounded) .dui-collapse-group {
    border-radius: var(--dui-collapse-group-radius);
    overflow: hidden;
}

/* Keep panel surfaces square; the group supplies the only rounded geometry. */
:where(.dui.dui-theme-rounded) :where(.dui-collapse-group) .dui-collapse-panel {
    border-radius: 0;
}

/* Keep field input and wrapper backgrounds aligned to the same rounded geometry. */
:where(.dui.dui-theme-rounded) .dui-field-input-wrapper {
    border-radius: var(--dui-form-field-wrapper-radius);
}

:where(.dui.dui-theme-rounded) .dui-field-input {
    border-radius: inherit;
}

:where(.dui.dui-theme-rounded) .dui-info-box {
    border-radius: var(--dui-infobox-radius);
}

/* Clip only content that crosses a rounded list surface; keep item images unmodified. */
:where(.dui.dui-theme-rounded) .dui-list-group-bordered {
    overflow: hidden;
}

:where(.dui.dui-theme-rounded) .dui-media {
    border-radius: var(--dui-media-radius);
}

:where(.dui.dui-theme-rounded) .dui-media-object {
    border-radius: var(--dui-media-radius);
    overflow: hidden;
}

/* Media samples wrap images in anchors; make that wrapper participate in the rounded clip. */
:where(.dui.dui-theme-rounded) :where(.dui-media-object) > a {
    display: block;
    border-radius: var(--dui-media-radius);
    overflow: hidden;
}

:where(.dui.dui-theme-rounded) :where(.dui-media-object) img {
    border-radius: var(--dui-media-radius);
}

/* Keep thumbnail content inside the rounded outer surface. */
:where(.dui.dui-theme-rounded) .dui-thumbnail {
    overflow: hidden;
}

:where(.dui.dui-theme-rounded) .dui-thumbnail-img {
    border-radius: var(--dui-thumbnail-image-radius);
}

:where(.dui.dui-theme-rounded) .dui-popover,
:where(.dui.dui-theme-rounded) .dui-tooltip {
    border-radius: var(--dui-popover-radius);
}

:where(.dui.dui-theme-rounded) .dui-file-upload {
    border-radius: var(--dui-file-upload-radius);
}

:where(.dui.dui-theme-rounded) .dui-calendar {
    border-radius: var(--dui-calendar-radius);
    overflow: hidden;
}

:where(.dui.dui-theme-rounded) .dui-time-picker {
    border-radius: var(--dui-timepicker-radius);
    overflow: hidden;
}

:where(.dui.dui-theme-rounded) .dui-datatable-responsive {
    border-radius: var(--dui-datatable-radius);
}

:where(.dui.dui-theme-rounded) .dui-tab-item {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Vertical tabs meet their content on the right, so keep rounding on the outer left edge. */
:where(.dui.dui-theme-rounded) :where(.dui-tabs.dui-vertical) .dui-tab-item {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--dui-tab-item-border-radius);
}