:root[data-ui-theme="default"][data-ui-scheme="light"] .element-tool-button.ui-draggable-tile {
  background: #fff;
}

:root[data-ui-theme="default"][data-ui-scheme="light"] .element-tool-button.ui-draggable-tile:not(:disabled):hover {
  background: var(--ui-surface-draggable-hover);
}

:root[data-ui-theme="default"][data-ui-scheme="dark"] {
  color-scheme: dark;
  --ui-bg: #202220;
  --ui-border: #363a36;
  --ui-control-bg: #2b2e2b;
  --ui-shell-separator: #191b19;
  --text-color: #e7e9e4;
  --muted-color: #a4aaa2;
  --scrollbar-thumb: #565c56;
  --scrollbar-thumb-hover: #70776f;
  --ui-value-primary: #eef0eb;
  --ui-value-secondary: #c8ccc5;
  --ui-value-label: #b9beb6;
  --ui-value-muted: #a4aaa2;
  --ui-value-subtle: #858b84;
  --ui-value-inactive: #777d76;
  --ui-value-disabled: #656a64;
  --ui-text-on-accent: #fff;
  --ui-surface-floating: #292c29;
  --ui-surface-field: #2b2e2b;
  --ui-surface-drag-preview: #303330;
  --ui-surface-overlay-control: rgba(35, 38, 35, .92);
  --ui-border-strong: #484d48;
  --ui-border-overlay-control: rgba(235, 239, 232, .16);
  --ui-editor-column-border: rgba(225, 231, 222, .12);
  --ui-editor-split-preview-halo: rgba(12, 182, 171, .14);
  --ui-editor-drop-outline: rgba(12, 182, 171, .48);
  --ui-editor-panel-selected-border: rgba(12, 182, 171, .62);
  --ui-editor-column-selected-border: rgba(12, 182, 171, .68);
  --ui-backdrop-modal: rgba(0, 0, 0, .52);
  --ui-drop-placeholder-surface: #3a3e3a;
  --shadow-object-tooltip-current: 0 2px 5px rgba(0, 0, 0, .32);
  --shadow-compact-current: 0 3px 6px rgba(0, 0, 0, .42);
  --shadow-nested-current: 0 6px 16px rgba(0, 0, 0, .4);
  --shadow-drag-current: 0 7px 16px rgba(0, 0, 0, .34);
  --shadow-toast-current: 0 7px 18px rgba(0, 0, 0, .36);
  --shadow-panel-current: 0 8px 16px rgba(0, 0, 0, .4);
  --shadow-float-current: 0 8px 22px rgba(0, 0, 0, .42);
}

:root[data-ui-theme="default"][data-ui-scheme="dark"] .canvas-viewport {
  --canvas-bg: #191b19 !important;
  --panel-bg: rgba(42, 45, 42, .72) !important;
  --text-color: #e7e9e4 !important;
}

:root[data-ui-theme="default"][data-ui-scheme="dark"] .canvas-segment {
  --segment-scrollbar-thumb: color-mix(in srgb, var(--text-color) 14%, var(--canvas-bg));
  --segment-scrollbar-thumb-hover: color-mix(in srgb, var(--text-color) 23%, var(--canvas-bg));
}

:root[data-ui-theme="default"][data-ui-scheme="dark"] .content-panel {
  background: var(--panel-bg);
}

:root[data-ui-theme="default"][data-ui-scheme="dark"] .item-bullet-marker[data-bullet-style="black"],
:root[data-ui-theme="default"][data-ui-scheme="dark"] .item-bullet-marker[data-bullet-style="blackLarge"] {
  color: var(--text-color);
}

:root[data-ui-theme="default"][data-ui-scheme="dark"] .item-bullet-marker:is(
  [data-bullet-style="black"],
  [data-bullet-style="blackLarge"]
):is(:hover, [aria-expanded="true"]) {
  filter: brightness(1.15);
}

:root[data-ui-theme="default"][data-ui-scheme="dark"] .drawing-editor {
  background: rgba(28, 30, 28, .98);
}

:root[data-ui-theme="default"][data-ui-scheme="dark"] .app-brand__mark,
:root[data-ui-theme="default"][data-ui-scheme="dark"] .mobile-gate__brand img {
  filter: invert(1);
}