@liminis/editor 0.1.1 → 0.2.0

package/dist/styles.css

@@ -114,10 +114,10 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: var(--vscode-font-family);
-  font-size: var(--vscode-font-size);
-  color: var(--vscode-foreground);
-  background: var(--vscode-background);
+  font-family: var(--liminis-editor-font-family, var(--vscode-font-family));
+  font-size: var(--liminis-editor-font-size, var(--vscode-font-size));
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
+  background: var(--liminis-editor-background, var(--vscode-background));
   line-height: 1.8;  /* Slightly more generous line height like Loop */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -127,8 +127,8 @@ body {
 .loading-spinner {
   width: 20px;
   height: 20px;
-  border: 2px solid var(--vscode-border);
-  border-top-color: var(--vscode-link);
+  border: 2px solid var(--liminis-editor-border, var(--vscode-border));
+  border-top-color: var(--liminis-editor-link, var(--vscode-link));
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -139,9 +139,49 @@ body {
   }
 }
 
-/* Editor inner wrapper - used for hover state targeting of drag handles */
+/* Loading state - centered spinner + label, dimmed, fills viewport */
+.editor-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  min-height: 100vh;
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
+  opacity: 0.7;
+}
+
+/* Error banner - fixed to top, spans full width, above editor content */
+.editor-error-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0.5rem 1rem;
+  background: oklch(63.7% 0.237 25.331);
+  color: #fff;
+  text-align: center;
+  z-index: 1000;
+}
+
+/* App root wrapper - default className for the top-level container */
+.editor-app-root {
+  min-height: 100vh;
+  padding: 0;
+}
+
+/* Editor content column - centered, fixed max width with left/right gutters */
+.editor-container {
+  position: relative;
+  max-width: 800px;
+  margin-left: 1.25rem;
+  margin-right: 0.25rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+/* Editor inner wrapper - positioned ancestor for drag handles, also targeted by hover state rules */
 .editor-inner {
-  /* Layout handled by Tailwind - this class exists for CSS hover rules */
+  position: relative;
 }
 
 /* Editor content area */
@@ -155,7 +195,7 @@ body {
   position: absolute;
   top: 16px;
   left: 16px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.5;
   pointer-events: none;
   user-select: none;
@@ -171,8 +211,8 @@ body {
   font-weight: 700;
   margin: 32px 0 24px 0;  /* More generous margins */
   line-height: 1.2;
-  color: var(--slashmd-h1-color);
-  margin-left: var(--slashmd-h1-indent);
+  color: var(--liminis-editor-h1-color, var(--slashmd-h1-color));
+  margin-left: var(--liminis-editor-h1-indent, var(--slashmd-h1-indent));
 }
 
 .editor-heading-h2 {
@@ -180,8 +220,8 @@ body {
   font-weight: 600;
   margin: 28px 0 16px 0;  /* More generous margins */
   line-height: 1.3;
-  color: var(--slashmd-h2-color);
-  margin-left: var(--slashmd-h2-indent);
+  color: var(--liminis-editor-h2-color, var(--slashmd-h2-color));
+  margin-left: var(--liminis-editor-h2-indent, var(--slashmd-h2-indent));
 }
 
 .editor-heading-h3 {
@@ -189,8 +229,8 @@ body {
   font-weight: 600;
   margin: 24px 0 12px 0;  /* More generous margins */
   line-height: 1.4;
-  color: var(--slashmd-h3-color);
-  margin-left: var(--slashmd-h3-indent);
+  color: var(--liminis-editor-h3-color, var(--slashmd-h3-color));
+  margin-left: var(--liminis-editor-h3-indent, var(--slashmd-h3-indent));
 }
 
 .editor-heading-h4 {
@@ -198,8 +238,8 @@ body {
   font-weight: 600;
   margin: 20px 0 10px 0;  /* More generous margins */
   line-height: 1.4;
-  color: var(--slashmd-h4-color);
-  margin-left: var(--slashmd-h4-indent);
+  color: var(--liminis-editor-h4-color, var(--slashmd-h4-color));
+  margin-left: var(--liminis-editor-h4-indent, var(--slashmd-h4-indent));
 }
 
 .editor-heading-h5 {
@@ -207,8 +247,8 @@ body {
   font-weight: 600;
   margin: 16px 0 8px 0;  /* More generous margins */
   line-height: 1.4;
-  color: var(--slashmd-h5-color);
-  margin-left: var(--slashmd-h5-indent);
+  color: var(--liminis-editor-h5-color, var(--slashmd-h5-color));
+  margin-left: var(--liminis-editor-h5-indent, var(--slashmd-h5-indent));
 }
 
 /* Lists - Loop-inspired spacing */
@@ -244,14 +284,14 @@ body {
   top: 4px;
   width: 16px;
   height: 16px;
-  border: 2px solid var(--checkbox-border);
+  border: 2px solid var(--liminis-editor-checkbox-border, var(--checkbox-border));
   border-radius: 3px;
   cursor: pointer;
 }
 
 .editor-listitem-checked::before {
-  background: var(--vscode-link);
-  border-color: var(--vscode-link);
+  background: var(--liminis-editor-link, var(--vscode-link));
+  border-color: var(--liminis-editor-link, var(--vscode-link));
 }
 
 .editor-listitem-checked::after {
@@ -286,14 +326,14 @@ body {
   top: 4px;
   width: 16px;
   height: 16px;
-  border: 2px solid var(--checkbox-border);
+  border: 2px solid var(--liminis-editor-checkbox-border, var(--checkbox-border));
   border-radius: 3px;
   cursor: pointer;
 }
 
 .editor-listitem-ordered-checked::before {
-  background: var(--vscode-link);
-  border-color: var(--vscode-link);
+  background: var(--liminis-editor-link, var(--vscode-link));
+  border-color: var(--liminis-editor-link, var(--vscode-link));
 }
 
 .editor-listitem-ordered-checked::after {
@@ -313,8 +353,8 @@ body {
 .editor-quote {
   margin: 20px 0;  /* More generous margins */
   padding: 12px 20px;  /* More padding */
-  border-left: 4px solid var(--vscode-border);
-  background: var(--vscode-code-bg);
+  border-left: 4px solid var(--liminis-editor-border, var(--vscode-border));
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
   font-style: italic;
 }
 
@@ -324,7 +364,7 @@ body {
   position: relative;
   margin: 20px 0;  /* More generous margins */
   padding: 16px 20px;  /* More padding */
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
   border-radius: 10px;  /* Friendlier rounded corners */
   font-family: 'Fira Code', 'Consolas', monospace;
   font-size: 0.9em;
@@ -345,10 +385,10 @@ body {
 .code-language-button {
   padding: 2px 8px;
   font-size: 11px;
-  font-family: var(--vscode-font-family);
-  color: var(--vscode-foreground);
-  background: var(--vscode-code-bg);
-  border: 1px solid var(--vscode-border);
+  font-family: var(--liminis-editor-font-family, var(--vscode-font-family));
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 4px;
   cursor: pointer;
   opacity: 0.7;
@@ -357,7 +397,7 @@ body {
 
 .code-language-button:hover {
   opacity: 1;
-  background: var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, 0.15));
+  background: var(--liminis-editor-toolbar-hoverBackground, var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, 0.15)));
 }
 
 /* Code Copy Button */
@@ -368,9 +408,9 @@ body {
   width: 24px;
   height: 20px;
   padding: 0;
-  color: var(--vscode-foreground);
-  background: var(--vscode-code-bg);
-  border: 1px solid var(--vscode-border);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 4px;
   cursor: pointer;
   opacity: 0.7;
@@ -379,12 +419,12 @@ body {
 
 .code-copy-button:hover {
   opacity: 1;
-  background: var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, 0.15));
+  background: var(--liminis-editor-toolbar-hoverBackground, var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, 0.15)));
 }
 
 .code-copy-button.copied {
   opacity: 1;
-  color: var(--vscode-notificationsInfoIcon-foreground, #3794ff);
+  color: var(--liminis-editor-notificationsInfoIcon-foreground, var(--vscode-notificationsInfoIcon-foreground, #3794ff));
 }
 
 /* Code Language Selector Menu */
@@ -393,8 +433,8 @@ body {
   max-height: 320px;
   display: flex;
   flex-direction: column;
-  background: var(--vscode-background);
-  border: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-background, var(--vscode-background));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 12px;  /* Friendlier rounded corners */
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);  /* Softer shadow */
   z-index: 300;
@@ -405,16 +445,16 @@ body {
   margin: 8px;
   padding: 6px 10px;
   font-size: 13px;
-  font-family: var(--vscode-font-family);
-  color: var(--vscode-foreground);
-  background: var(--vscode-code-bg);
-  border: 1px solid var(--vscode-border);
+  font-family: var(--liminis-editor-font-family, var(--vscode-font-family));
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 4px;
   outline: none;
 }
 
 .code-language-search:focus {
-  border-color: var(--vscode-link);
+  border-color: var(--liminis-editor-link, var(--vscode-link));
 }
 
 .code-language-list {
@@ -430,8 +470,8 @@ body {
   width: 100%;
   padding: 6px 12px;
   font-size: 13px;
-  font-family: var(--vscode-font-family);
-  color: var(--vscode-foreground);
+  font-family: var(--liminis-editor-font-family, var(--vscode-font-family));
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   background: transparent;
   border: none;
   text-align: left;
@@ -439,7 +479,7 @@ body {
 }
 
 .code-language-item:hover {
-  background: var(--vscode-selection);
+  background: var(--liminis-editor-selection, var(--vscode-selection));
 }
 
 .code-language-item.current {
@@ -447,14 +487,14 @@ body {
 }
 
 .code-language-check {
-  color: var(--vscode-link);
+  color: var(--liminis-editor-link, var(--vscode-link));
   font-size: 12px;
 }
 
 .code-language-empty {
   padding: 12px;
   text-align: center;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.6;
   font-size: 13px;
 }
@@ -462,12 +502,12 @@ body {
 /* Inline text formatting */
 .editor-text-bold {
   font-weight: 700;
-  color: var(--slashmd-bold-color);
+  color: var(--liminis-editor-bold-color, var(--slashmd-bold-color));
 }
 
 .editor-text-italic {
   font-style: italic;
-  color: var(--slashmd-italic-color);
+  color: var(--liminis-editor-italic-color, var(--slashmd-italic-color));
 }
 
 .editor-text-strikethrough {
@@ -480,7 +520,7 @@ body {
 
 .editor-text-code {
   font-family: 'Fira Code', 'Consolas', monospace;
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
   padding: 2px 6px;
   border-radius: 6px;  /* Friendlier rounded corners */
   font-size: 0.9em;
@@ -488,7 +528,7 @@ body {
 
 /* Links */
 .editor-link {
-  color: var(--vscode-link);
+  color: var(--liminis-editor-link, var(--vscode-link));
   text-decoration: none;
   cursor: text; /* Normal text cursor for editing */
 }
@@ -499,7 +539,7 @@ body {
 
 /* External links (http/https/mailto) - blue color to differentiate from wiki-links */
 .editor-link-external {
-  color: var(--vscode-external-link);
+  color: var(--liminis-editor-external-link, var(--vscode-external-link));
 }
 
 /* When Cmd/Ctrl is held, show pointer cursor on links to indicate they can be opened */
@@ -524,11 +564,11 @@ body {
 
 /* Broken wiki links - links to non-existent files */
 .editor-link-broken {
-  color: var(--vscode-errorForeground, #f14c4c) !important;
+  color: var(--liminis-editor-errorForeground, var(--vscode-errorForeground, #f14c4c)) !important;
 }
 
 .editor-link-broken:hover {
-  color: var(--vscode-errorForeground, #f14c4c) !important;
+  color: var(--liminis-editor-errorForeground, var(--vscode-errorForeground, #f14c4c)) !important;
   opacity: 0.8;
 }
 
@@ -544,13 +584,13 @@ body {
 
 .editor-table-cell,
 .editor-table-cell-header {
-  border: 1px solid var(--vscode-border);
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   padding: 8px 12px;
   text-align: left;
 }
 
 .editor-table-cell-header {
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
   font-weight: 600;
 }
 
@@ -570,7 +610,7 @@ body {
   left: 0;
   right: 0;
   height: 1px;
-  background: var(--vscode-border);
+  background: var(--liminis-editor-border, var(--vscode-border));
 }
 
 /* Image */
@@ -604,7 +644,7 @@ body {
 }
 
 .image-wrapper.selected img {
-  outline: 2px solid var(--vscode-link);
+  outline: 2px solid var(--liminis-editor-link, var(--vscode-link));
   outline-offset: 2px;
 }
 
@@ -617,8 +657,8 @@ body {
   position: absolute;
   width: 12px;
   height: 12px;
-  background: var(--vscode-link);
-  border: 2px solid var(--vscode-background);
+  background: var(--liminis-editor-link, var(--vscode-link));
+  border: 2px solid var(--liminis-editor-background, var(--vscode-background));
   border-radius: 2px;
   z-index: 10;
 }
@@ -675,28 +715,28 @@ body {
 }
 
 .callout-note {
-  background: var(--slashmd-callout-note-bg);
-  border-left-color: var(--slashmd-callout-note-border);
+  background: var(--liminis-editor-callout-note-bg, var(--slashmd-callout-note-bg));
+  border-left-color: var(--liminis-editor-callout-note-border, var(--slashmd-callout-note-border));
 }
 
 .callout-tip {
-  background: var(--slashmd-callout-tip-bg);
-  border-left-color: var(--slashmd-callout-tip-border);
+  background: var(--liminis-editor-callout-tip-bg, var(--slashmd-callout-tip-bg));
+  border-left-color: var(--liminis-editor-callout-tip-border, var(--slashmd-callout-tip-border));
 }
 
 .callout-warning {
-  background: var(--slashmd-callout-warning-bg);
-  border-left-color: var(--slashmd-callout-warning-border);
+  background: var(--liminis-editor-callout-warning-bg, var(--slashmd-callout-warning-bg));
+  border-left-color: var(--liminis-editor-callout-warning-border, var(--slashmd-callout-warning-border));
 }
 
 .callout-important {
-  background: var(--slashmd-callout-important-bg);
-  border-left-color: var(--slashmd-callout-important-border);
+  background: var(--liminis-editor-callout-important-bg, var(--slashmd-callout-important-bg));
+  border-left-color: var(--liminis-editor-callout-important-border, var(--slashmd-callout-important-border));
 }
 
 .callout-caution {
-  background: var(--slashmd-callout-caution-bg);
-  border-left-color: var(--slashmd-callout-caution-border);
+  background: var(--liminis-editor-callout-caution-bg, var(--slashmd-callout-caution-bg));
+  border-left-color: var(--liminis-editor-callout-caution-border, var(--slashmd-callout-caution-border));
 }
 
 /* Remove bottom margin from last paragraph in callout */
@@ -707,7 +747,7 @@ body {
 /* Toggle - New ElementNode-based structure */
 .toggle-container {
   margin: 8px 0;
-  border: 1px solid var(--vscode-border);
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 10px;  /* Friendlier rounded corners */
   overflow: hidden;
 }
@@ -717,7 +757,7 @@ body {
   align-items: center;
   padding: 10px 14px;
   padding-left: 32px;
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
   position: relative;
   min-height: 24px;
 }
@@ -730,7 +770,7 @@ body {
   top: 50%;
   transform: translateY(-50%);
   font-size: 10px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.7;
   transition: transform 0.2s;
   cursor: pointer;
@@ -752,7 +792,7 @@ body {
 }
 
 .toggle-title:hover {
-  background: var(--vscode-selection);
+  background: var(--liminis-editor-selection, var(--vscode-selection));
 }
 
 /* The paragraph inside the title */
@@ -766,7 +806,7 @@ body {
 .toggle-content-area {
   display: none;
   padding: 12px 14px;
-  border-top: 1px solid var(--vscode-border);
+  border-top: 1px solid var(--liminis-editor-border, var(--vscode-border));
 }
 
 .toggle-container--open .toggle-content-area {
@@ -795,7 +835,7 @@ body {
 /* Empty content placeholder */
 .toggle-content-area:empty::before {
   content: 'Type content here...';
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.4;
 }
 
@@ -805,7 +845,7 @@ body {
 }
 
 .toggle-block {
-  border: 1px solid var(--vscode-border);
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 6px;
   overflow: hidden;
 }
@@ -816,8 +856,8 @@ body {
   align-items: center;
   gap: 4px;
   padding: 8px;
-  background: var(--vscode-background);
-  border: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-background, var(--vscode-background));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 10px;  /* Friendlier rounded corners */
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);  /* Softer shadow */
   z-index: 100;
@@ -833,22 +873,22 @@ body {
   background: transparent;
   border-radius: 4px;
   cursor: pointer;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   font-size: 14px;
 }
 
 .toolbar-button:hover {
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
 }
 
 .toolbar-button.active {
-  background: var(--vscode-selection);
+  background: var(--liminis-editor-selection, var(--vscode-selection));
 }
 
 .toolbar-divider {
   width: 1px;
   height: 20px;
-  background: var(--vscode-border);
+  background: var(--liminis-editor-border, var(--vscode-border));
   margin: 0 4px;
 }
 
@@ -859,8 +899,8 @@ body {
   transform: translateX(-50%);
   margin-top: 4px;
   padding: 8px;
-  background: var(--vscode-background);
-  border: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-background, var(--vscode-background));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
@@ -869,15 +909,15 @@ body {
   width: 220px;
   padding: 6px 10px;
   font-size: 13px;
-  color: var(--vscode-text);
-  background: var(--vscode-input-bg, var(--vscode-code-bg));
-  border: 1px solid var(--vscode-border);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
+  background: var(--liminis-editor-input-bg, var(--vscode-input-bg, var(--liminis-editor-code-bg, var(--vscode-code-bg))));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 4px;
   outline: none;
 }
 
 .toolbar-link-input input:focus {
-  border-color: var(--vscode-focus-border, #007acc);
+  border-color: var(--liminis-editor-focus-border, var(--vscode-focus-border, #007acc));
 }
 
 /* Slash Menu */
@@ -887,8 +927,8 @@ body {
   max-height: 320px;
   display: flex;
   flex-direction: column;
-  background: var(--vscode-background);
-  border: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-background, var(--vscode-background));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 12px;  /* Friendlier rounded corners */
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);  /* Softer shadow */
   z-index: 200;
@@ -899,9 +939,9 @@ body {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.6;
-  border-bottom: 1px solid var(--vscode-border);
+  border-bottom: 1px solid var(--liminis-editor-border, var(--vscode-border));
   flex-shrink: 0;
 }
 
@@ -923,7 +963,7 @@ body {
 
 .slash-menu-item:hover,
 .slash-menu-item.selected {
-  background: var(--vscode-selection);
+  background: var(--liminis-editor-selection, var(--vscode-selection));
 }
 
 .slash-menu-icon {
@@ -932,7 +972,7 @@ body {
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
   border-radius: 4px;
   font-size: 14px;
 }
@@ -954,7 +994,7 @@ body {
 .slash-menu-empty {
   padding: 16px;
   text-align: center;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.6;
 }
 
@@ -992,13 +1032,13 @@ body {
   height: 20px;
   font-size: 14px;
   letter-spacing: -3px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   user-select: none;
   border-radius: 4px;
 }
 
 .drag-handle:hover .drag-handle-icon {
-  background: var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, 0.1));
+  background: var(--liminis-editor-toolbar-hoverBackground, var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, 0.1)));
 }
 
 /* Block Delete Button */
@@ -1030,47 +1070,47 @@ body {
   width: 20px;
   height: 20px;
   font-size: 16px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   user-select: none;
   border-radius: 4px;
 }
 
 .block-delete-button:hover .block-delete-icon {
-  background: var(--vscode-inputValidation-errorBackground, rgba(255, 0, 0, 0.15));
-  color: var(--vscode-errorForeground, #f44336);
+  background: var(--liminis-editor-inputValidation-errorBackground, var(--vscode-inputValidation-errorBackground, rgba(255, 0, 0, 0.15)));
+  color: var(--liminis-editor-errorForeground, var(--vscode-errorForeground, #f44336));
 }
 
 /* Code syntax highlighting */
 .editor-tokenComment {
-  color: var(--slashmd-token-comment);
+  color: var(--liminis-editor-token-comment, var(--slashmd-token-comment));
 }
 
 .editor-tokenPunctuation {
-  color: var(--slashmd-token-punctuation);
+  color: var(--liminis-editor-token-punctuation, var(--slashmd-token-punctuation));
 }
 
 .editor-tokenProperty {
-  color: var(--slashmd-token-property);
+  color: var(--liminis-editor-token-property, var(--slashmd-token-property));
 }
 
 .editor-tokenSelector {
-  color: var(--slashmd-token-selector);
+  color: var(--liminis-editor-token-selector, var(--slashmd-token-selector));
 }
 
 .editor-tokenOperator {
-  color: var(--slashmd-token-operator);
+  color: var(--liminis-editor-token-operator, var(--slashmd-token-operator));
 }
 
 .editor-tokenAttr {
-  color: var(--slashmd-token-keyword);
+  color: var(--liminis-editor-token-keyword, var(--slashmd-token-keyword));
 }
 
 .editor-tokenVariable {
-  color: var(--slashmd-token-variable);
+  color: var(--liminis-editor-token-variable, var(--slashmd-token-variable));
 }
 
 .editor-tokenFunction {
-  color: var(--slashmd-token-function);
+  color: var(--liminis-editor-token-function, var(--slashmd-token-function));
 }
 
 /* Scrollbar - auto-hides on macOS, styled when visible */
@@ -1108,7 +1148,7 @@ body {
 
 /* Focus styles for accessibility */
 *:focus-visible {
-  outline: 2px solid var(--vscode-link);
+  outline: 2px solid var(--liminis-editor-link, var(--vscode-link));
   outline-offset: 2px;
 }
 
@@ -1120,14 +1160,14 @@ body {
 
 /* Selection */
 ::selection {
-  background: var(--vscode-selection);
+  background: var(--liminis-editor-selection, var(--vscode-selection));
 }
 
 /* Table Actions Menu */
 .table-actions-menu {
   min-width: 200px;
-  background: var(--vscode-background);
-  border: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-background, var(--vscode-background));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 12px;  /* Friendlier rounded corners */
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);  /* Softer shadow */
   z-index: 300;
@@ -1143,7 +1183,7 @@ body {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.6;
 }
 
@@ -1155,14 +1195,14 @@ body {
   padding: 8px 12px;
   border: none;
   background: transparent;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   font-size: 13px;
   text-align: left;
   cursor: pointer;
 }
 
 .table-actions-button:hover {
-  background: var(--vscode-selection);
+  background: var(--liminis-editor-selection, var(--vscode-selection));
 }
 
 .table-actions-button.table-actions-danger {
@@ -1183,7 +1223,7 @@ body {
 
 .table-actions-divider {
   height: 1px;
-  background: var(--vscode-border);
+  background: var(--liminis-editor-border, var(--vscode-border));
   margin: 4px 0;
 }
 
@@ -1192,7 +1232,7 @@ body {
 .editor-table th:focus,
 .editor-table-cell:focus,
 .editor-table-cell-header:focus {
-  outline: 2px solid var(--vscode-link);
+  outline: 2px solid var(--liminis-editor-link, var(--vscode-link));
   outline-offset: -2px;
 }
 
@@ -1232,8 +1272,8 @@ body {
   width: 480px;
   max-width: 90vw;
   max-height: 90vh;
-  background: var(--vscode-background);
-  border: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-background, var(--vscode-background));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 16px;  /* Friendlier rounded corners */
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);  /* Softer shadow */
   display: flex;
@@ -1246,7 +1286,7 @@ body {
   align-items: center;
   justify-content: space-between;
   padding: 16px;
-  border-bottom: 1px solid var(--vscode-border);
+  border-bottom: 1px solid var(--liminis-editor-border, var(--vscode-border));
 }
 
 .image-modal-header h3 {
@@ -1266,18 +1306,18 @@ body {
   border-radius: 4px;
   cursor: pointer;
   font-size: 20px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.7;
 }
 
 .image-modal-close:hover {
   opacity: 1;
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
 }
 
 .image-modal-tabs {
   display: flex;
-  border-bottom: 1px solid var(--vscode-border);
+  border-bottom: 1px solid var(--liminis-editor-border, var(--vscode-border));
 }
 
 .image-modal-tab {
@@ -1285,7 +1325,7 @@ body {
   padding: 12px 16px;
   border: none;
   background: transparent;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   font-size: 14px;
   cursor: pointer;
   opacity: 0.7;
@@ -1294,12 +1334,12 @@ body {
 
 .image-modal-tab:hover {
   opacity: 1;
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
 }
 
 .image-modal-tab.active {
   opacity: 1;
-  border-bottom: 2px solid var(--vscode-link);
+  border-bottom: 2px solid var(--liminis-editor-link, var(--vscode-link));
   margin-bottom: -1px;
 }
 
@@ -1314,25 +1354,25 @@ body {
   align-items: center;
   justify-content: center;
   min-height: 160px;
-  border: 2px dashed var(--vscode-border);
+  border: 2px dashed var(--liminis-editor-border, var(--vscode-border));
   border-radius: 8px;
   cursor: pointer;
   transition: border-color 0.15s, background 0.15s;
 }
 
 .image-modal-dropzone:hover {
-  border-color: var(--vscode-link);
+  border-color: var(--liminis-editor-link, var(--vscode-link));
   background: rgba(0, 102, 204, 0.05);
 }
 
 .image-modal-dropzone.drag-over {
-  border-color: var(--vscode-link);
+  border-color: var(--liminis-editor-link, var(--vscode-link));
   background: rgba(0, 102, 204, 0.1);
 }
 
 .image-modal-dropzone.has-preview {
   border-style: solid;
-  border-color: var(--vscode-border);
+  border-color: var(--liminis-editor-border, var(--vscode-border));
   padding: 8px;
 }
 
@@ -1341,7 +1381,7 @@ body {
   flex-direction: column;
   align-items: center;
   gap: 8px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.7;
 }
 
@@ -1366,9 +1406,9 @@ body {
   display: flex;
   justify-content: center;
   padding: 8px;
-  border: 1px solid var(--vscode-border);
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 8px;
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
 }
 
 .image-modal-alt-section {
@@ -1379,7 +1419,7 @@ body {
   display: block;
   margin-bottom: 6px;
   font-size: 13px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.8;
 }
 
@@ -1387,20 +1427,20 @@ body {
   width: 100%;
   padding: 10px 12px;
   font-size: 14px;
-  font-family: var(--vscode-font-family);
-  color: var(--vscode-foreground);
-  background: var(--vscode-code-bg);
-  border: 1px solid var(--vscode-border);
+  font-family: var(--liminis-editor-font-family, var(--vscode-font-family));
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 6px;
   outline: none;
 }
 
 .image-modal-input:focus {
-  border-color: var(--vscode-link);
+  border-color: var(--liminis-editor-link, var(--vscode-link));
 }
 
 .image-modal-input::placeholder {
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.5;
 }
 
@@ -1419,13 +1459,13 @@ body {
   justify-content: flex-end;
   gap: 8px;
   padding: 16px;
-  border-top: 1px solid var(--vscode-border);
+  border-top: 1px solid var(--liminis-editor-border, var(--vscode-border));
 }
 
 .image-modal-button {
   padding: 8px 16px;
   font-size: 14px;
-  font-family: var(--vscode-font-family);
+  font-family: var(--liminis-editor-font-family, var(--vscode-font-family));
   border: none;
   border-radius: 6px;
   cursor: pointer;
@@ -1433,17 +1473,17 @@ body {
 }
 
 .image-modal-button.secondary {
-  color: var(--vscode-foreground);
-  background: var(--vscode-code-bg);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
 }
 
 .image-modal-button.secondary:hover {
-  background: var(--vscode-selection);
+  background: var(--liminis-editor-selection, var(--vscode-selection));
 }
 
 .image-modal-button.primary {
   color: white;
-  background: var(--vscode-link);
+  background: var(--liminis-editor-link, var(--vscode-link));
 }
 
 .image-modal-button.primary:hover {
@@ -1459,8 +1499,8 @@ body {
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  background: var(--vscode-background);
-  border: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-background, var(--vscode-background));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 12px;  /* Friendlier rounded corners */
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);  /* Softer shadow */
   z-index: 500;
@@ -1470,8 +1510,8 @@ body {
   display: flex;
   align-items: center;
   gap: 8px;
-  background: var(--vscode-code-bg);
-  border: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 6px;
   padding: 4px 8px;
 }
@@ -1487,7 +1527,7 @@ body {
 
 .search-icon {
   flex-shrink: 0;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.5;
 }
 
@@ -1495,9 +1535,9 @@ body {
   width: 200px;
   border: none;
   background: transparent;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   font-size: 14px;
-  font-family: var(--vscode-font-family);
+  font-family: var(--liminis-editor-font-family, var(--vscode-font-family));
   outline: none !important;
 }
 
@@ -1508,14 +1548,14 @@ body {
 }
 
 .search-input::placeholder {
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.5;
 }
 
 .search-count {
   flex-shrink: 0;
   font-size: 12px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.7;
   white-space: nowrap;
 }
@@ -1537,13 +1577,13 @@ body {
   background: transparent;
   border-radius: 4px;
   cursor: pointer;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   transition: background 0.15s;
 }
 
 .search-nav-button:hover:not(:disabled),
 .search-close-button:hover {
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
 }
 
 .search-nav-button:disabled {
@@ -1552,7 +1592,7 @@ body {
 }
 
 .search-close-button:hover {
-  color: var(--vscode-errorForeground, #f44336);
+  color: var(--liminis-editor-errorForeground, var(--vscode-errorForeground, #f44336));
 }
 
 /* Search Highlight Layer */
@@ -1620,7 +1660,7 @@ body {
 
 /* Equation Editor Styles */
 .equation-editor-background {
-  background-color: var(--vscode-code-bg);
+  background-color: var(--liminis-editor-code-bg, var(--vscode-code-bg));
   padding: 4px 8px;
   border-radius: 4px;
   display: inline-flex;
@@ -1629,7 +1669,7 @@ body {
 }
 
 .equation-dollar-sign {
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.5;
   font-family: monospace;
   white-space: pre;
@@ -1693,13 +1733,13 @@ body {
 .mermaid-loading {
   padding: 2rem;
   text-align: center;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.7;
 }
 
 /* Mermaid Editor Styles */
 .mermaid-editor-container {
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
   border-radius: 8px;
   overflow: hidden;
   margin: 1em 0;
@@ -1717,14 +1757,14 @@ body {
 .mermaid-editor-label {
   font-family: monospace;
   font-size: 12px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.7;
 }
 
 .mermaid-editor-close {
   background: transparent;
   border: none;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   cursor: pointer;
   padding: 4px 8px;
   border-radius: 4px;
@@ -1744,7 +1784,7 @@ body {
   padding: 12px;
   border: none;
   background: transparent;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   font-family: monospace;
   font-size: 14px;
   line-height: 1.5;
@@ -1753,7 +1793,7 @@ body {
 }
 
 .mermaid-editor-textarea::placeholder {
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.5;
 }
 
@@ -1780,13 +1820,13 @@ body {
 .c4-loading {
   padding: 2rem;
   text-align: center;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.7;
 }
 
 /* C4 Editor Styles */
 .c4-editor-container {
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
   border-radius: 8px;
   overflow: hidden;
   margin: 1em 0;
@@ -1804,14 +1844,14 @@ body {
 .c4-editor-label {
   font-family: monospace;
   font-size: 12px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.7;
 }
 
 .c4-editor-close {
   background: transparent;
   border: none;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   cursor: pointer;
   padding: 4px 8px;
   border-radius: 4px;
@@ -1831,7 +1871,7 @@ body {
   padding: 12px;
   border: none;
   background: transparent;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   font-family: monospace;
   font-size: 14px;
   line-height: 1.5;
@@ -1840,7 +1880,7 @@ body {
 }
 
 .c4-editor-textarea::placeholder {
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.5;
 }
 
@@ -1863,10 +1903,10 @@ body {
   width: 32px;
   height: 32px;
   padding: 0;
-  border: 1px solid var(--vscode-border);
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 6px;
-  background: var(--vscode-background);
-  color: var(--vscode-foreground);
+  background: var(--liminis-editor-background, var(--vscode-background));
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   cursor: pointer;
   opacity: 0.7;
   transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
@@ -1874,13 +1914,13 @@ body {
 
 .frontmatter-toggle-button:hover {
   opacity: 1;
-  background: var(--vscode-code-bg);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
 }
 
 .frontmatter-toggle-button.frontmatter-toggle-active {
   opacity: 1;
-  background: var(--vscode-link);
-  border-color: var(--vscode-link);
+  background: var(--liminis-editor-link, var(--vscode-link));
+  border-color: var(--liminis-editor-link, var(--vscode-link));
   color: #ffffff;
 }
 
@@ -1891,8 +1931,8 @@ body {
   left: 0;
   right: 0;
   z-index: 5;
-  background: var(--vscode-background);
-  border-bottom: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-background, var(--vscode-background));
+  border-bottom: 1px solid var(--liminis-editor-border, var(--vscode-border));
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   transform: translateY(-100%);
   opacity: 0;
@@ -1915,14 +1955,14 @@ body {
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
-  border-bottom: 1px solid var(--vscode-border);
-  background: var(--vscode-code-bg);
+  border-bottom: 1px solid var(--liminis-editor-border, var(--vscode-border));
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
 }
 
 .frontmatter-tray-title {
   font-size: 12px;
   font-weight: 600;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -1937,7 +1977,7 @@ body {
   border: none;
   border-radius: 4px;
   background: transparent;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   cursor: pointer;
   opacity: 0.7;
   transition: opacity 0.15s, background-color 0.15s;
@@ -1945,7 +1985,7 @@ body {
 
 .frontmatter-tray-close:hover {
   opacity: 1;
-  background: var(--vscode-border);
+  background: var(--liminis-editor-border, var(--vscode-border));
 }
 
 .frontmatter-tray-content {
@@ -1957,10 +1997,10 @@ body {
   min-height: 80px;
   max-height: 300px;
   padding: 12px;
-  border: 1px solid var(--vscode-border);
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 4px;
-  background: var(--vscode-code-bg);
-  color: var(--vscode-foreground);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
   font-size: 13px;
   line-height: 1.5;
@@ -1970,11 +2010,11 @@ body {
 
 .frontmatter-tray-textarea:focus {
   outline: none;
-  border-color: var(--vscode-link);
+  border-color: var(--liminis-editor-link, var(--vscode-link));
 }
 
 .frontmatter-tray-textarea::placeholder {
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.5;
 }
 
@@ -1987,10 +2027,10 @@ body {
 
 .frontmatter-tray-toggle-raw {
   padding: 4px 8px;
-  border: 1px solid var(--vscode-border);
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 4px;
   background: transparent;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   font-size: 11px;
   font-weight: 500;
   cursor: pointer;
@@ -1998,8 +2038,8 @@ body {
 }
 
 .frontmatter-tray-toggle-raw:hover {
-  background: var(--vscode-border);
-  border-color: var(--vscode-foreground-muted, var(--vscode-border));
+  background: var(--liminis-editor-border, var(--vscode-border));
+  border-color: var(--liminis-editor-foreground-muted, var(--vscode-foreground-muted, var(--liminis-editor-border, var(--vscode-border))));
 }
 
 /* MDC Form Styles */
@@ -2021,7 +2061,7 @@ body {
   gap: 6px;
   font-size: 12px;
   font-weight: 600;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   text-transform: uppercase;
   letter-spacing: 0.3px;
 }
@@ -2040,42 +2080,42 @@ body {
 
 .mdc-form-input {
   padding: 8px 12px;
-  border: 1px solid var(--vscode-border);
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 4px;
-  background: var(--vscode-code-bg);
-  color: var(--vscode-foreground);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   font-size: 14px;
   line-height: 1.4;
 }
 
 .mdc-form-input:focus {
   outline: none;
-  border-color: var(--vscode-link);
+  border-color: var(--liminis-editor-link, var(--vscode-link));
 }
 
 .mdc-form-input::placeholder {
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.5;
 }
 
 .mdc-form-select {
   padding: 8px 12px;
-  border: 1px solid var(--vscode-border);
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 4px;
-  background: var(--vscode-code-bg);
-  color: var(--vscode-foreground);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   font-size: 14px;
   cursor: pointer;
 }
 
 .mdc-form-select:focus {
   outline: none;
-  border-color: var(--vscode-link);
+  border-color: var(--liminis-editor-link, var(--vscode-link));
 }
 
 .mdc-form-hint {
   font-size: 11px;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.7;
   line-height: 1.4;
 }
@@ -2085,7 +2125,7 @@ body {
   background: rgba(6, 150, 215, 0.08);
   border-radius: 4px;
   opacity: 1;
-  color: var(--vscode-link);
+  color: var(--liminis-editor-link, var(--vscode-link));
 }
 
 .dark .mdc-form-hint-info {
@@ -2118,15 +2158,15 @@ body {
   align-items: center;
   justify-content: space-between;
   padding: 6px 10px;
-  background: var(--vscode-code-bg);
-  border: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 4px;
 }
 
 .mdc-glob-pattern {
   font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
   font-size: 13px;
-  color: var(--vscode-link);
+  color: var(--liminis-editor-link, var(--vscode-link));
 }
 
 .mdc-glob-remove {
@@ -2139,7 +2179,7 @@ body {
   border: none;
   border-radius: 4px;
   background: transparent;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   cursor: pointer;
   opacity: 0.5;
   transition: opacity 0.15s, background-color 0.15s;
@@ -2162,10 +2202,10 @@ body {
 
 .mdc-glob-add-btn {
   padding: 8px 16px;
-  border: 1px solid var(--vscode-link);
+  border: 1px solid var(--liminis-editor-link, var(--vscode-link));
   border-radius: 4px;
   background: transparent;
-  color: var(--vscode-link);
+  color: var(--liminis-editor-link, var(--vscode-link));
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
@@ -2173,7 +2213,7 @@ body {
 }
 
 .mdc-glob-add-btn:hover:not(:disabled) {
-  background: var(--vscode-link);
+  background: var(--liminis-editor-link, var(--vscode-link));
   color: #ffffff;
 }
 
@@ -2186,13 +2226,13 @@ body {
 .mdc-other-yaml {
   margin: 0;
   padding: 10px 12px;
-  background: var(--vscode-code-bg);
-  border: 1px solid var(--vscode-border);
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+  border: 1px solid var(--liminis-editor-border, var(--vscode-border));
   border-radius: 4px;
   font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
   font-size: 12px;
   line-height: 1.5;
-  color: var(--vscode-foreground);
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
   opacity: 0.8;
   white-space: pre-wrap;
   overflow-x: auto;
@@ -2245,7 +2285,7 @@ body {
    focusable, so they are reachable by Tab. */
 .annotation-mark-highlight:focus-visible,
 .annotation-mark-squiggle:focus-visible {
-  outline: 2px solid var(--vscode-link);
+  outline: 2px solid var(--liminis-editor-link, var(--vscode-link));
   outline-offset: 1px;
 }
 
@@ -2304,6 +2344,87 @@ body {
   }
 }
 
+/* ===== Document Outline Styles ===== */
+
+.editor-outline {
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.editor-outline-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.editor-outline-item {
+  margin: 0;
+}
+
+.editor-outline-item-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 4px 8px;
+  border: none;
+  background: transparent;
+  color: var(--liminis-editor-foreground, var(--vscode-foreground));
+  opacity: 0.7;
+  text-align: left;
+  cursor: pointer;
+  transition: opacity 0.15s, background-color 0.15s, color 0.15s;
+}
+
+.editor-outline-item-button:hover {
+  opacity: 1;
+  background: var(--liminis-editor-code-bg, var(--vscode-code-bg));
+}
+
+.editor-outline-item-active .editor-outline-item-button {
+  opacity: 1;
+  color: var(--liminis-editor-link, var(--vscode-link));
+}
+
+.editor-outline-indicator {
+  flex: 0 0 auto;
+  width: 2px;
+  align-self: stretch;
+  border-radius: 1px;
+  background: transparent;
+}
+
+.editor-outline-item-active .editor-outline-indicator {
+  background: var(--liminis-editor-link, var(--vscode-link));
+}
+
+.editor-outline-item-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Indent by heading level (H1-H5; the editor theme has no H6 class to indent). */
+.editor-outline-item[data-outline-level="1"] .editor-outline-item-button {
+  padding-left: 8px;
+}
+
+.editor-outline-item[data-outline-level="2"] .editor-outline-item-button {
+  padding-left: 20px;
+}
+
+.editor-outline-item[data-outline-level="3"] .editor-outline-item-button {
+  padding-left: 32px;
+}
+
+.editor-outline-item[data-outline-level="4"] .editor-outline-item-button {
+  padding-left: 44px;
+}
+
+.editor-outline-item[data-outline-level="5"] .editor-outline-item-button {
+  padding-left: 56px;
+}
+
 /* ============================================================
    Print Styles for Editor Content
    ============================================================