/* Soft: floating white surfaces, compact tiles and an independent shell rhythm. */
:root[data-ui-theme="002"] {
  color-scheme: light;
  --ui-header-height: 80px;
  --ui-left-panel-width: 212px;
  --ui-sidebar-block-padding: 24px;
  --ui-sidebar-inline-padding: 22px;
  --ui-bg: #fff;
  --ui-control-bg: #edf1f3;
  --ui-shell-separator: var(--canvas-bg);
  --ui-border: #dce2e5;
  --ui-border-strong: #bdc8ce;
  --ui-value-primary: #293f4b;
  --ui-value-secondary: #4d626d;
  --ui-value-label: #566b76;
  --ui-value-muted: #687b85;
  --ui-value-subtle: #96a5ad;
  --ui-value-inactive: #7b8d96;
  --ui-value-disabled: #acb7be;
  --ui-text-primary: var(--ui-value-primary);
  --ui-text-muted: var(--ui-value-muted);
  --ui-icon-color: var(--ui-value-secondary);
  --ui-header-meta-color: var(--ui-value-muted);
  --ui-panel-title-color: var(--ui-value-primary);
  --ui-section-title-color: var(--ui-value-primary);
  --ui-subsection-title-color: var(--ui-value-secondary);
  --ui-surface-floating: #fbfcfc;
  --ui-surface-field: #edf1f3;
  --ui-surface-draggable: #fff;
  --ui-surface-draggable-hover: #fafafa;
  --ui-surface-drag-preview: #fbfcfc;
  --ui-surface-overlay-control: #fbfcfc;
  --ui-drop-placeholder-surface: #dfe7eb;
  --ui-draggable-grip-color: #9baab2;
  --ui-object-handle-color: #788c96;
  --ui-editor-column-border: #d5dde1;
  --ui-editor-split-preview-halo: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  --ui-editor-drop-outline: color-mix(in srgb, var(--ui-accent) 50%, transparent);
  --ui-editor-panel-selected-border: color-mix(in srgb, var(--ui-accent) 65%, transparent);
  --ui-editor-column-selected-border: color-mix(in srgb, var(--ui-accent) 65%, transparent);
  --scrollbar-thumb: #bfccd2;
  --scrollbar-thumb-hover: #98aab4;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --ui-radius-field: 8px;
  --ui-radius-draggable: 8px;
  --ui-radius-context-toolbar: 12px;
  --shadow-object-tooltip-current: 0 2px 6px #233c4914;
  --shadow-compact-current: 0 3px 6px #233c4933;
  --shadow-nested-current: 0 4px 16px #233c491c;
  --shadow-drag-current: 0 5px 18px #233c4924;
  --shadow-toast-current: 0 4px 16px #233c491c;
  --shadow-panel-current: 0 5px 20px #233c4921;
  --shadow-float-current: 0 5px 18px #233c491f;
}

/* Reuse 36px of the existing blank Canvas top gutter. The main grid clips that
   blank strip; the measured Canvas height and durable Segment sizes stay stable. */
:root[data-ui-theme="002"] .canvas-viewport {
  margin-block-start: calc(44px - var(--ui-header-height));
}

:root[data-ui-theme="002"] .app-header {
  margin: 14px 18px;
  border-radius: 999px;
  box-shadow: 0 2px 8px #0000001a;
}

:root[data-ui-theme="002"] .sidebar--tools {
  margin: 12px 12px 12px 8px;
  border-radius: 14px;
  box-shadow: 0 2px 8px #0000001a;
}

:root[data-ui-theme="002"] .sidebar--tools > .sidebar__title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-border);
}

:root[data-ui-theme="002"] .page-library {
  margin-block: 12px;
  border-radius: 0 12px 12px 0;
}

:root[data-ui-theme="002"] .status-bar { background: transparent; }

:root[data-ui-theme="002"] :is(.app-header, .sidebar, .page-library, .ui-floating-surface, .ui-dialog-surface, .drawing-editor) {
  color: var(--ui-value-primary);
}

:root[data-ui-theme="002"] .ui-draggable-tile:not(:disabled) { color: var(--ui-value-primary); }

:root[data-ui-theme="002"] .sidebar--settings {
  border-radius: 14px;
  background: var(--ui-surface-floating);
  scrollbar-width: thin;
}

:root[data-ui-theme="002"] .content-panel {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px #233c4914;
}

:root[data-ui-theme="002"] body.is-panel-frames-hidden .content-panel:not(.panel-drag-ghost) {
  background: transparent;
  box-shadow: none;
}

:root[data-ui-theme="002"] :is(.ui-field, .ui-select__trigger) {
  border-color: transparent;
  background: var(--ui-surface-field);
  color: var(--ui-value-primary);
}

:root[data-ui-theme="002"] .ui-range { background: transparent; }

:root[data-ui-theme="002"] .ui-draggable-tile {
  box-shadow: 0 1px 5px #00000024;
}

:root[data-ui-theme="002"] .element-tool-button.ui-draggable-tile {
  width: min(100%, 112px);
  min-height: 28px;
  padding: 4px 8px;
  line-height: 1.35;
  border-radius: 7px;
}

:root[data-ui-theme="002"] .element-tool-button + .element-tool-button {
  margin-top: 9px;
}

:root[data-ui-theme="002"][data-ui-density="compact"] {
  --ui-left-panel-width: 192px;
  --ui-sidebar-block-padding: 20px;
  --ui-sidebar-inline-padding: 18px;
}

:root[data-ui-theme="002"][data-ui-density="spacious"] {
  --ui-left-panel-width: 236px;
  --ui-sidebar-block-padding: 26px;
  --ui-sidebar-inline-padding: 24px;
}

:root[data-ui-theme="002"][data-ui-density="compact"] .element-tool-button.ui-draggable-tile {
  min-height: 26px;
}

:root[data-ui-theme="002"][data-ui-density="spacious"] .element-tool-button.ui-draggable-tile {
  min-height: 30px;
}

:root[data-ui-theme="002"] :is(.ui-action-button, .ui-select__options) {
  border-color: transparent;
  border-radius: var(--ui-radius-field);
}

:root[data-ui-theme="002"] .ui-select__option[aria-selected="true"],
:root[data-ui-theme="002"] .ui-action-button[aria-pressed="true"] {
  background: var(--ui-accent);
  color: var(--ui-text-on-accent);
}

:root[data-ui-theme="002"] :is(.ui-floating-surface, .ui-dialog-surface) {
  border-color: transparent;
  border-radius: 14px;
}

:root[data-ui-theme="002"] :is(button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

:root[data-ui-theme="002"] :is(.ui-icon-button, .header-icon-button):not(:disabled):not([aria-disabled="true"]):hover {
  color: var(--ui-accent);
}

/* Approved reversible Dark viewing layer; stored colors and PDF remain authored. */
:root[data-ui-theme="002"][data-ui-scheme="dark"] {
  color-scheme: dark;
  --ui-bg: #292929;
  --ui-control-bg: #363636;
  --ui-shell-separator: #1d1d1d;
  --ui-border: #424242;
  --ui-border-strong: #626262;
  --text-color: #e8e8e8;
  --muted-color: #aaa;
  --ui-value-primary: #eee;
  --ui-value-secondary: #ccc;
  --ui-value-label: #bdbdbd;
  --ui-value-muted: #aaa;
  --ui-value-subtle: #888;
  --ui-value-inactive: #999;
  --ui-value-disabled: #737373;
  --ui-surface-floating: #303030;
  --ui-surface-field: #383838;
  --ui-surface-draggable: #383838;
  --ui-surface-draggable-hover: #424242;
  --ui-surface-drag-preview: #303030;
  --ui-surface-overlay-control: #303030;
  --ui-draggable-grip-color: #999;
  --ui-object-handle-color: #aaa;
  --ui-editor-column-border: #393939;
  --ui-drop-placeholder-surface: #3d3d3d;
  --ui-backdrop-modal: #00000099;
  --scrollbar-thumb: #606060;
  --scrollbar-thumb-hover: #808080;
  --shadow-object-tooltip-current: 0 2px 6px #00000040;
  --shadow-compact-current: 0 3px 6px #0000004d;
  --shadow-nested-current: 0 4px 16px #00000040;
  --shadow-drag-current: 0 5px 18px #00000050;
  --shadow-toast-current: 0 4px 16px #00000040;
  --shadow-panel-current: 0 5px 20px #00000050;
  --shadow-float-current: 0 5px 18px #00000040;
}

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

:root[data-ui-theme="002"] .column-header__label { color: var(--ui-value-label); }

:root[data-ui-theme="002"][data-ui-scheme="dark"] .canvas-viewport {
  --canvas-bg: #1d1d1d !important;
  --panel-bg: #2b2b2b !important;
  --text-color: #e8e8e8 !important;
}

:root[data-ui-theme="002"][data-ui-scheme="dark"] .content-panel {
  background: #2b2b2b;
  box-shadow: 0 2px 8px #00000040;
}

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

:root[data-ui-theme="002"][data-ui-scheme="dark"] .canvas-segment {
  --segment-scrollbar-thumb: #444;
  --segment-scrollbar-thumb-hover: #555;
}

:root[data-ui-theme="002"][data-ui-scheme="dark"] .drawing-editor { background: #252525; }