pict-section-flow 0.0.17 → 0.0.19

package/docs/api/removeConnection.md

@@ -16,12 +16,12 @@ flowView.removeConnection(pConnectionHash)
 
 ## Returns
 
-`boolean` — `true` if the connection was found and removed, `false` otherwise.
+`boolean` -- `true` if the connection was found and removed, `false` otherwise.
 
 ## Events Fired
 
-- `onConnectionRemoved` — with the removed connection object
-- `onFlowChanged` — with the updated flow data
+- `onConnectionRemoved` -- with the removed connection object
+- `onFlowChanged` -- with the updated flow data
 
 ## Examples
 
@@ -53,5 +53,5 @@ tmpFlowData.Connections.forEach((pConn) =>
 
 ## See Also
 
-- [addConnection](addConnection.md) — Create a connection
-- [removeNode](removeNode.md) — Remove a node (cascades connections)
+- [addConnection](addConnection.md) -- Create a connection
+- [removeNode](removeNode.md) -- Remove a node (cascades connections)

package/docs/api/removeNode.md

@@ -16,13 +16,13 @@ flowView.removeNode(pNodeHash)
 
 ## Returns
 
-`boolean` — `true` if the node was found and removed, `false` otherwise.
+`boolean` -- `true` if the node was found and removed, `false` otherwise.
 
 ## Events Fired
 
-- `onNodeRemoved` — with the removed node object
-- `onConnectionRemoved` — for each connection that was cascaded
-- `onFlowChanged` — with the updated flow data
+- `onNodeRemoved` -- with the removed node object
+- `onConnectionRemoved` -- for each connection that was cascaded
+- `onFlowChanged` -- with the updated flow data
 
 ## Examples
 
@@ -76,5 +76,5 @@ tmpFlowData.Nodes.forEach((pNode) =>
 
 ## See Also
 
-- [addNode](addNode.md) — Create a node
-- [deleteSelected](selectNode.md) — Delete the currently selected element
+- [addNode](addNode.md) -- Create a node
+- [deleteSelected](selectNode.md) -- Delete the currently selected element

package/docs/api/saveLayout.md

@@ -148,5 +148,5 @@ tmpLayoutProvider.loadPersistedLayouts();
 
 ## See Also
 
-- [Layout Persistence](../Layout_Persistence.md) — Detailed guide on storage backends
-- [autoLayout](autoLayout.md) — Automatic topological layout
+- [Layout Persistence](../Layout_Persistence.md) -- Detailed guide on storage backends
+- [autoLayout](autoLayout.md) -- Automatic topological layout

package/docs/api/screenToSVGCoords.md

@@ -64,5 +64,5 @@ document.getElementById('flow-container').addEventListener('mousemove', (pEvent)
 
 ## See Also
 
-- [setZoom](setZoom.md) — Viewport zoom (affects coordinate mapping)
-- [addNode](addNode.md) — Create nodes at specific coordinates
+- [setZoom](setZoom.md) -- Viewport zoom (affects coordinate mapping)
+- [addNode](addNode.md) -- Create nodes at specific coordinates

package/docs/api/selectNode.md

@@ -50,7 +50,7 @@ Clear all selection state (node, connection, and tether).
 
 Delete the currently selected node or connection. If a node is selected, its connections are also removed.
 
-**Returns:** `boolean` — `true` if something was deleted.
+**Returns:** `boolean` -- `true` if something was deleted.
 
 ## Examples
 
@@ -112,5 +112,5 @@ function handleDelete()
 
 ## See Also
 
-- [addNode](addNode.md) / [removeNode](removeNode.md) — Node CRUD
-- [registerHandler](registerHandler.md) — Event hooks
+- [addNode](addNode.md) / [removeNode](removeNode.md) -- Node CRUD
+- [registerHandler](registerHandler.md) -- Event hooks

package/docs/api/setTheme.md

@@ -164,5 +164,5 @@ flowView._ThemeProvider.registerTheme('corporate',
 
 ## See Also
 
-- [Custom Styling](../Custom-Styling.md) — Full CSS custom properties reference
-- [registerHandler](registerHandler.md) — Listen for `onThemeChanged` events
+- [Custom Styling](../Custom-Styling.md) -- Full CSS custom properties reference
+- [registerHandler](registerHandler.md) -- Listen for `onThemeChanged` events

package/docs/api/setZoom.md

@@ -92,6 +92,6 @@ Zoom bounds are set in the view configuration:
 
 ## See Also
 
-- [screenToSVGCoords](screenToSVGCoords.md) — Coordinate conversion
-- [toggleFullscreen](toggleFullscreen.md) — Fullscreen mode
-- [autoLayout](autoLayout.md) — Automatic node arrangement
+- [screenToSVGCoords](screenToSVGCoords.md) -- Coordinate conversion
+- [toggleFullscreen](toggleFullscreen.md) -- Fullscreen mode
+- [autoLayout](autoLayout.md) -- Automatic node arrangement

package/docs/api/toggleFullscreen.md

@@ -13,7 +13,7 @@ flowView.exitFullscreen();
 
 Toggles between normal and fullscreen modes.
 
-**Returns:** `boolean` — the new fullscreen state (`true` if now fullscreen).
+**Returns:** `boolean` -- the new fullscreen state (`true` if now fullscreen).
 
 ## exitFullscreen
 
@@ -65,4 +65,4 @@ setTimeout(() =>
 
 ## See Also
 
-- [setZoom / zoomToFit](setZoom.md) — Viewport controls
+- [setZoom / zoomToFit](setZoom.md) -- Viewport controls

package/docs/card-help/EACH.md

@@ -4,9 +4,9 @@ The **Each** node iterates over a collection, executing connected downstream nod
 
 ## Ports
 
-- **Collection** (input) — an array or iterable to loop over
-- **Item** (output) — fires once per element with the current item
-- **Done** (output) — fires after all items have been processed
+- **Collection** (input) -- an array or iterable to loop over
+- **Item** (output) -- fires once per element with the current item
+- **Done** (output) -- fires after all items have been processed
 
 ## Behavior
 

package/docs/card-help/FREAD.md

@@ -4,14 +4,14 @@ The **File Read** node reads the contents of a file from the filesystem and outp
 
 ## Ports
 
-- **Path** (input) — the filesystem path to read
-- **Data** (output) — the file contents on success
-- **Error** (output) — fires if the read operation fails
+- **Path** (input) -- the filesystem path to read
+- **Data** (output) -- the file contents on success
+- **Error** (output) -- fires if the read operation fails
 
 ## Properties
 
-- **FilePath** — the path to the file to read
-- **Encoding** — character encoding for text files (e.g. `utf8`, `ascii`)
+- **FilePath** -- the path to the file to read
+- **Encoding** -- character encoding for text files (e.g. `utf8`, `ascii`)
 
 ## Behavior
 

package/docs/card-help/FWRITE.md

@@ -4,10 +4,10 @@ The **File Write** node writes data to a file on the filesystem.
 
 ## Ports
 
-- **Path** (input) — the destination filesystem path
-- **Data** (input) — the content to write
-- **Done** (output) — fires after a successful write
-- **Error** (output) — fires if the write operation fails
+- **Path** (input) -- the destination filesystem path
+- **Data** (input) -- the content to write
+- **Done** (output) -- fires after a successful write
+- **Error** (output) -- fires if the write operation fails
 
 ## Behavior
 
@@ -19,6 +19,6 @@ The properties panel shows a View-based info panel with details about the config
 
 ## Tips
 
-- Directories in the path are not created automatically — ensure they exist before writing
+- Directories in the path are not created automatically -- ensure they exist before writing
 - Combine with a Set Value node to format data before writing
 - Connect the **Error** output to a Log Values node to capture write failures

package/docs/card-help/GET.md

@@ -4,8 +4,8 @@ The **Get Value** node retrieves a named variable from the flow context and emit
 
 ## Ports
 
-- **In** (input) — trigger to read the value
-- **Value** (output) — the retrieved value
+- **In** (input) -- trigger to read the value
+- **Value** (output) -- the retrieved value
 
 ## Behavior
 

package/docs/card-help/ITE.md

@@ -4,9 +4,9 @@ The **If-Then-Else** node evaluates a boolean condition expression and routes th
 
 ## Ports
 
-- **In** (input) — trigger that starts the evaluation
-- **Then** (output) — activated when the condition is **true**
-- **Else** (output) — activated when the condition is **false**
+- **In** (input) -- trigger that starts the evaluation
+- **Then** (output) -- activated when the condition is **true**
+- **Else** (output) -- activated when the condition is **false**
 
 ## Behavior
 

package/docs/card-help/LOG.md

@@ -4,13 +4,13 @@ The **Log Values** node writes incoming data to the console or log output for de
 
 ## Ports
 
-- **Values** (input, multi) — accepts one or more connections carrying values to log
-- **Pass** (output) — passes the last received value through unchanged
+- **Values** (input, multi) -- accepts one or more connections carrying values to log
+- **Pass** (output) -- passes the last received value through unchanged
 
 ## Properties
 
-- **LogLevel** — the severity level for the log entry (e.g. `info`, `warn`, `error`, `trace`)
-- **Format** — an optional format string controlling how values are serialized
+- **LogLevel** -- the severity level for the log entry (e.g. `info`, `warn`, `error`, `trace`)
+- **Format** -- an optional format string controlling how values are serialized
 
 ## Behavior
 

package/docs/card-help/NOTE.md

@@ -8,7 +8,7 @@ Drop a Comment node anywhere on the canvas to add context, explain design decisi
 
 ## Properties
 
-- **NoteText** — the annotation content displayed in the node body
+- **NoteText** -- the annotation content displayed in the node body
 
 ## Tips
 

package/docs/card-help/PREV.md

@@ -4,8 +4,8 @@ The **Data Preview** node displays a tabular summary of the data flowing through
 
 ## Ports
 
-- **Data** (input) — the data object to inspect
-- **Pass** (output) — passes the data through unchanged
+- **Data** (input) -- the data object to inspect
+- **Pass** (output) -- passes the data through unchanged
 
 ## Behavior
 

package/docs/card-help/SET.md

@@ -4,13 +4,13 @@ The **Set Value** node assigns a value to a named variable in the flow context.
 
 ## Ports
 
-- **In** (input) — trigger to perform the assignment
-- **Out** (output) — fires after the value has been set
+- **In** (input) -- trigger to perform the assignment
+- **Out** (output) -- fires after the value has been set
 
 ## Properties
 
-- **Variable Name** — the key under which the value will be stored
-- **Value Expression** — the expression to evaluate and assign
+- **Variable Name** -- the key under which the value will be stored
+- **Value Expression** -- the expression to evaluate and assign
 
 ## Behavior
 
@@ -22,6 +22,6 @@ Open the properties panel to configure the variable name and value expression us
 
 ## Tips
 
-- Variable names are case-sensitive — use consistent naming conventions
+- Variable names are case-sensitive -- use consistent naming conventions
 - Value expressions have access to the current flow context
 - Use Set Value at the beginning of a flow to initialize default variables

package/docs/card-help/SPKL.md

@@ -4,8 +4,8 @@ The **Sparkline** node renders a live sparkline chart visualizing numeric throug
 
 ## Ports
 
-- **Values** (input) — a numeric array or stream of values to plot
-- **Stats** (output) — emits computed statistics (min, max, mean) for the data set
+- **Values** (input) -- a numeric array or stream of values to plot
+- **Stats** (output) -- emits computed statistics (min, max, mean) for the data set
 
 ## Behavior
 

package/docs/card-help/STAT.md

@@ -4,9 +4,9 @@ The **Status Monitor** node monitors the health status of upstream services and
 
 ## Ports
 
-- **Check** (input, multi) — accepts connections from one or more services to monitor
-- **Healthy** (output) — fires when all monitored services report healthy
-- **Degraded** (output) — fires when one or more services report degraded status
+- **Check** (input, multi) -- accepts connections from one or more services to monitor
+- **Healthy** (output) -- fires when all monitored services report healthy
+- **Degraded** (output) -- fires when one or more services report degraded status
 
 ## Behavior
 

package/docs/card-help/SW.md

@@ -4,10 +4,10 @@ The **Switch** node routes execution to one of multiple outputs based on a match
 
 ## Ports
 
-- **In** (input) — the value to match against cases
-- **Case A** (output) — fires when the input matches case A
-- **Case B** (output) — fires when the input matches case B
-- **Default** (output) — fires when the input does not match any defined case
+- **In** (input) -- the value to match against cases
+- **Case A** (output) -- fires when the input matches case A
+- **Case B** (output) -- fires when the input matches case B
+- **Default** (output) -- fires when the input does not match any defined case
 
 ## Behavior
 

package/docs/css/docuserve.css

@@ -1,73 +1,327 @@
 /* ============================================================================
-   Pict Docuserve - Base Styles
+   Pict Docuserve - Base Styles & Theme Variables
    ============================================================================ */
 
-/* Reset and base */
-*, *::before, *::after {
+/* ----------------------------------------------------------------------------
+   Theme variables — light defaults on :root.
+   Dark mode applies when either:
+     (a) the user explicitly selected dark via <html data-theme="dark">
+     (b) the user hasn't chosen anything AND the system prefers dark
+   An explicit <html data-theme="light"> pins the light palette regardless.
+   ---------------------------------------------------------------------------- */
+
+:root
+{
+	/* Surfaces */
+	--docuserve-bg: #FDFBF7;
+	--docuserve-bg-elevated: #FFFFFF;
+	--docuserve-border: #DDD6CA;
+	--docuserve-border-soft: #EAE3D8;
+
+	/* Text */
+	--docuserve-text: #2A241E;
+	--docuserve-text-strong: #3D3229;
+	--docuserve-text-muted: #5E5549;
+	--docuserve-text-dim: #8A7F72;
+
+	/* Accent / links */
+	--docuserve-accent: #2E7D74;
+	--docuserve-accent-hover: #236660;
+
+	/* Top bar */
+	--docuserve-topbar-bg: #3D3229;
+	--docuserve-topbar-text: #E8E0D4;
+	--docuserve-topbar-text-muted: #B5AA9A;
+	--docuserve-topbar-text-dim: #8A7F72;
+	--docuserve-topbar-hover-bg: #524438;
+	--docuserve-topbar-version-bg: rgba(255, 255, 255, 0.06);
+	--docuserve-topbar-version-border: rgba(255, 255, 255, 0.08);
+	--docuserve-topbar-version-text: #B5AA9A;
+
+	/* Sidebar */
+	--docuserve-sidebar-bg: #FAF7F1;
+	--docuserve-sidebar-border: #DDD6CA;
+	--docuserve-sidebar-border-soft: #E5DED1;
+	--docuserve-sidebar-text: #423D37;
+	--docuserve-sidebar-group-title: #3D3229;
+	--docuserve-sidebar-module-text: #5E5549;
+	--docuserve-sidebar-hover-bg: #EAE3D8;
+	--docuserve-sidebar-hover-text: #2E7D74;
+	--docuserve-sidebar-active-bg: #E5DED1;
+	--docuserve-sidebar-active-text: #2E7D74;
+	--docuserve-sidebar-search-bg: #FFFFFF;
+	--docuserve-sidebar-search-border: #DDD6CA;
+
+	/* Inline code */
+	--docuserve-inline-code-bg: #F0ECE4;
+	--docuserve-inline-code-text: #9E3A50;
+
+	/* Code block panel */
+	--docuserve-code-bg: #F6F3EE;
+	--docuserve-code-border: #E5DED1;
+	--docuserve-code-gutter-bg: #EFEAE0;
+	--docuserve-code-gutter-border: #DDD6CA;
+	--docuserve-code-gutter-text: #A59986;
+	--docuserve-code-text: #2A241E;
+
+	/* Syntax tokens — low-chroma dark-on-light palette */
+	--docuserve-tok-keyword: #A03472;
+	--docuserve-tok-string: #1A6640;
+	--docuserve-tok-number: #B25A00;
+	--docuserve-tok-comment: #8A7F72;
+	--docuserve-tok-operator: #2E7D74;
+	--docuserve-tok-punctuation: #2A241E;
+	--docuserve-tok-function: #2A5DB0;
+	--docuserve-tok-property: #9E3A50;
+	--docuserve-tok-tag: #9E3A50;
+	--docuserve-tok-attr-name: #B25A00;
+	--docuserve-tok-attr-value: #1A6640;
+
+	/* Tables, blockquotes, mermaid */
+	--docuserve-table-header-bg: #F5F0E8;
+	--docuserve-table-row-alt-bg: #F9F6F0;
+	--docuserve-blockquote-bg: #F7F5F0;
+	--docuserve-blockquote-border: #2E7D74;
+	--docuserve-blockquote-text: #5E5549;
+	--docuserve-mermaid-bg: #FFFFFF;
+
+	/* Scrollbars */
+	--docuserve-scrollbar-track: #F5F0E8;
+	--docuserve-scrollbar-thumb: #D4CCBE;
+	--docuserve-scrollbar-thumb-hover: #B5AA9A;
+}
+
+@media (prefers-color-scheme: dark)
+{
+	:root:not([data-theme="light"])
+	{
+		--docuserve-bg: #15120F;
+		--docuserve-bg-elevated: #1B1814;
+		--docuserve-border: #2F2823;
+		--docuserve-border-soft: #26211C;
+
+		--docuserve-text: #E8E0D4;
+		--docuserve-text-strong: #F2ECE0;
+		--docuserve-text-muted: #B5AA9A;
+		--docuserve-text-dim: #7A6F62;
+
+		--docuserve-accent: #5DB8A8;
+		--docuserve-accent-hover: #7FCCB8;
+
+		--docuserve-topbar-bg: #1A1612;
+		--docuserve-topbar-text: #E8E0D4;
+		--docuserve-topbar-text-muted: #B5AA9A;
+		--docuserve-topbar-text-dim: #7A6F62;
+		--docuserve-topbar-hover-bg: #2A241E;
+		--docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
+		--docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
+		--docuserve-topbar-version-text: #B5AA9A;
+
+		--docuserve-sidebar-bg: #1B1814;
+		--docuserve-sidebar-border: #2F2823;
+		--docuserve-sidebar-border-soft: #26211C;
+		--docuserve-sidebar-text: #C9C0B3;
+		--docuserve-sidebar-group-title: #F2ECE0;
+		--docuserve-sidebar-module-text: #B5AA9A;
+		--docuserve-sidebar-hover-bg: #2A241E;
+		--docuserve-sidebar-hover-text: #7FCCB8;
+		--docuserve-sidebar-active-bg: #2F2823;
+		--docuserve-sidebar-active-text: #7FCCB8;
+		--docuserve-sidebar-search-bg: #26211C;
+		--docuserve-sidebar-search-border: #2F2823;
+
+		--docuserve-inline-code-bg: #2A241E;
+		--docuserve-inline-code-text: #E8B07A;
+
+		--docuserve-code-bg: #1E1A17;
+		--docuserve-code-border: #2F2823;
+		--docuserve-code-gutter-bg: #17130F;
+		--docuserve-code-gutter-border: #2F2823;
+		--docuserve-code-gutter-text: #6A6052;
+		--docuserve-code-text: #E8E0D4;
+
+		--docuserve-tok-keyword: #C678DD;
+		--docuserve-tok-string: #98C379;
+		--docuserve-tok-number: #D19A66;
+		--docuserve-tok-comment: #7F848E;
+		--docuserve-tok-operator: #56B6C2;
+		--docuserve-tok-punctuation: #E8E0D4;
+		--docuserve-tok-function: #61AFEF;
+		--docuserve-tok-property: #E06C75;
+		--docuserve-tok-tag: #E06C75;
+		--docuserve-tok-attr-name: #D19A66;
+		--docuserve-tok-attr-value: #98C379;
+
+		--docuserve-table-header-bg: #26211C;
+		--docuserve-table-row-alt-bg: #1F1B17;
+		--docuserve-blockquote-bg: #1F1B17;
+		--docuserve-blockquote-border: #5DB8A8;
+		--docuserve-blockquote-text: #C9C0B3;
+		--docuserve-mermaid-bg: #E8E0D4;
+
+		--docuserve-scrollbar-track: #1B1814;
+		--docuserve-scrollbar-thumb: #3A322B;
+		--docuserve-scrollbar-thumb-hover: #524438;
+	}
+}
+
+:root[data-theme="dark"]
+{
+	--docuserve-bg: #15120F;
+	--docuserve-bg-elevated: #1B1814;
+	--docuserve-border: #2F2823;
+	--docuserve-border-soft: #26211C;
+
+	--docuserve-text: #E8E0D4;
+	--docuserve-text-strong: #F2ECE0;
+	--docuserve-text-muted: #B5AA9A;
+	--docuserve-text-dim: #7A6F62;
+
+	--docuserve-accent: #5DB8A8;
+	--docuserve-accent-hover: #7FCCB8;
+
+	--docuserve-topbar-bg: #1A1612;
+	--docuserve-topbar-text: #E8E0D4;
+	--docuserve-topbar-text-muted: #B5AA9A;
+	--docuserve-topbar-text-dim: #7A6F62;
+	--docuserve-topbar-hover-bg: #2A241E;
+	--docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
+	--docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
+	--docuserve-topbar-version-text: #B5AA9A;
+
+	--docuserve-sidebar-bg: #1B1814;
+	--docuserve-sidebar-border: #2F2823;
+	--docuserve-sidebar-border-soft: #26211C;
+	--docuserve-sidebar-text: #C9C0B3;
+	--docuserve-sidebar-group-title: #F2ECE0;
+	--docuserve-sidebar-module-text: #B5AA9A;
+	--docuserve-sidebar-hover-bg: #2A241E;
+	--docuserve-sidebar-hover-text: #7FCCB8;
+	--docuserve-sidebar-active-bg: #2F2823;
+	--docuserve-sidebar-active-text: #7FCCB8;
+	--docuserve-sidebar-search-bg: #26211C;
+	--docuserve-sidebar-search-border: #2F2823;
+
+	--docuserve-inline-code-bg: #2A241E;
+	--docuserve-inline-code-text: #E8B07A;
+
+	--docuserve-code-bg: #1E1A17;
+	--docuserve-code-border: #2F2823;
+	--docuserve-code-gutter-bg: #17130F;
+	--docuserve-code-gutter-border: #2F2823;
+	--docuserve-code-gutter-text: #6A6052;
+	--docuserve-code-text: #E8E0D4;
+
+	--docuserve-tok-keyword: #C678DD;
+	--docuserve-tok-string: #98C379;
+	--docuserve-tok-number: #D19A66;
+	--docuserve-tok-comment: #7F848E;
+	--docuserve-tok-operator: #56B6C2;
+	--docuserve-tok-punctuation: #E8E0D4;
+	--docuserve-tok-function: #61AFEF;
+	--docuserve-tok-property: #E06C75;
+	--docuserve-tok-tag: #E06C75;
+	--docuserve-tok-attr-name: #D19A66;
+	--docuserve-tok-attr-value: #98C379;
+
+	--docuserve-table-header-bg: #26211C;
+	--docuserve-table-row-alt-bg: #1F1B17;
+	--docuserve-blockquote-bg: #1F1B17;
+	--docuserve-blockquote-border: #5DB8A8;
+	--docuserve-blockquote-text: #C9C0B3;
+	--docuserve-mermaid-bg: #E8E0D4;
+
+	--docuserve-scrollbar-track: #1B1814;
+	--docuserve-scrollbar-thumb: #3A322B;
+	--docuserve-scrollbar-thumb-hover: #524438;
+}
+
+/* ----------------------------------------------------------------------------
+   Reset and base
+   ---------------------------------------------------------------------------- */
+
+*, *::before, *::after
+{
 	box-sizing: border-box;
 }
 
-html, body {
+html, body
+{
 	margin: 0;
 	padding: 0;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 	font-size: 16px;
 	line-height: 1.5;
-	color: #423D37;
-	background-color: #fff;
+	color: var(--docuserve-text);
+	background-color: var(--docuserve-bg);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	transition: background-color 0.15s ease, color 0.15s ease;
 }
 
 /* Typography */
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6
+{
 	margin-top: 0;
 	line-height: 1.3;
+	color: var(--docuserve-text-strong);
 }
 
-a {
-	color: #2E7D74;
+a
+{
+	color: var(--docuserve-accent);
 	text-decoration: none;
 }
 
-a:hover {
-	color: #256861;
+a:hover
+{
+	color: var(--docuserve-accent-hover);
 }
 
 /* Application container */
-#Docuserve-Application-Container {
+#Docuserve-Application-Container
+{
 	min-height: 100vh;
 }
 
 /* Utility: scrollbar styling */
-::-webkit-scrollbar {
+::-webkit-scrollbar
+{
 	width: 8px;
+	height: 8px;
 }
 
-::-webkit-scrollbar-track {
-	background: #F5F0E8;
+::-webkit-scrollbar-track
+{
+	background: var(--docuserve-scrollbar-track);
 }
 
-::-webkit-scrollbar-thumb {
-	background: #D4CCBE;
+::-webkit-scrollbar-thumb
+{
+	background: var(--docuserve-scrollbar-thumb);
 	border-radius: 4px;
 }
 
-::-webkit-scrollbar-thumb:hover {
-	background: #B5AA9A;
+::-webkit-scrollbar-thumb:hover
+{
+	background: var(--docuserve-scrollbar-thumb-hover);
 }
 
 /* Responsive adjustments */
-@media (max-width: 768px) {
-	html {
+@media (max-width: 768px)
+{
+	html
+	{
 		font-size: 14px;
 	}
 
-	#Docuserve-Sidebar-Container {
+	#Docuserve-Sidebar-Container
+	{
 		display: none;
 	}
 
-	.docuserve-body {
+	.docuserve-body
+	{
 		flex-direction: column;
 	}
 }