collabmd 0.1.51 → 0.1.54

package/src/client/styles/foundation/themes.css

@@ -1,6 +1,7 @@
 /* ===== FOUNDATION / THEMES ===== */
 
 :root {
+  color-scheme: light dark;
   --pdf-highlight-bg: rgb(180 0 170 / 25%);
   --pdf-highlight-selected-bg: rgb(0 100 0 / 25%);
   --pdf-selection-bg: rgb(0 90 255 / 25%);
@@ -8,52 +9,47 @@
 
 :root,
 [data-theme="light"] {
-  --color-bg: #f6f8fa;
-  --color-surface: #ffffff;
-  --color-surface-2: #fbfcfd;
-  --color-surface-offset: #f0f3f6;
-  --color-surface-offset-2: #e8edf2;
-  --color-surface-dynamic: #dde3ea;
-  --color-surface-raised: #ffffff;
-  --color-surface-ink: #0b1118;
-  --color-divider: #e3e8ee;
-  --color-border: #cbd4df;
-
-  --color-text: #17212b;
-  --color-text-muted: #596675;
-  --color-text-faint: #8391a1;
-  --color-text-inverse: #f8fafc;
-
-  --color-primary: #2563eb;
-  --color-primary-hover: #1d4ed8;
-  --color-primary-active: #1e40af;
-  --color-primary-contrast: #ffffff;
-  --color-primary-highlight: #dbeafe;
-  --color-comment: #2563eb;
-  --color-comment-soft: rgba(37, 99, 235, 0.08);
-  --color-comment-strong: rgba(37, 99, 235, 0.14);
-  --color-comment-text: #1e40af;
-
-  --color-error: #dc2626;
-  --color-danger: #dc2626;
-  --color-error-highlight: #fce8e8;
-  --color-success: #16a34a;
-  --color-success-highlight: #dcfce7;
-  --color-warning: #d97706;
-  --color-warning-highlight: #fef3c7;
-
-  --diff-add-bg: rgba(22, 163, 74, 0.06);
-  --diff-add-line-bg: rgba(22, 163, 74, 0.14);
-  --diff-add-text: #16a34a;
-  --diff-del-bg: rgba(220, 38, 38, 0.06);
-  --diff-del-line-bg: rgba(220, 38, 38, 0.14);
-  --diff-del-text: #dc2626;
-  --diff-hunk-bg: rgba(37, 99, 235, 0.08);
-  --diff-hunk-text: #2563eb;
-  --diff-gutter: #8391a1;
-
-  --surface-fill-subtle: color-mix(in oklab, var(--color-surface) 92%, var(--color-surface-offset) 8%);
-  --surface-fill-strong: color-mix(in oklab, var(--color-surface-offset) 72%, var(--color-surface-offset-2) 28%);
+  --color-bg: light-dark(#f6f8fa, #0b0f14);
+  --color-surface: light-dark(#ffffff, #11161d);
+  --color-surface-2: light-dark(#fbfcfd, #171d26);
+  --color-surface-offset: light-dark(#f0f3f6, #141a22);
+  --color-surface-offset-2: light-dark(#e8edf2, #1c2530);
+  --color-surface-dynamic: light-dark(#dde3ea, #253140);
+  --color-surface-raised: light-dark(#ffffff, #1a222c);
+  --color-surface-ink: light-dark(#0b1118, #030608);
+  --color-divider: light-dark(#e3e8ee, #242e3a);
+  --color-border: light-dark(#cbd4df, #303c4b);
+  --color-text: light-dark(#17212b, #e6edf3);
+  --color-text-muted: light-dark(#596675, #9aa7b4);
+  --color-text-faint: light-dark(#8391a1, #687584);
+  --color-text-inverse: light-dark(#f8fafc, #0b0f14);
+  --color-primary: light-dark(#2563eb, #60a5fa);
+  --color-primary-hover: light-dark(#1d4ed8, #3b82f6);
+  --color-primary-active: light-dark(#1e40af, #2563eb);
+  --color-primary-contrast: light-dark(#ffffff, #07111f);
+  --color-primary-highlight: light-dark(#dbeafe, #172a45);
+  --color-comment: light-dark(#2563eb, #60a5fa);
+  --color-comment-soft: light-dark(rgba(37, 99, 235, 0.08), rgba(96, 165, 250, 0.1));
+  --color-comment-strong: light-dark(rgba(37, 99, 235, 0.14), rgba(96, 165, 250, 0.16));
+  --color-comment-text: light-dark(#1e40af, #bfdbfe);
+  --color-error: light-dark(#dc2626, #f87171);
+  --color-danger: light-dark(#dc2626, #f87171);
+  --color-error-highlight: light-dark(#fce8e8, #2a1a1a);
+  --color-success: light-dark(#16a34a, #4ade80);
+  --color-success-highlight: light-dark(#dcfce7, #1a2a1a);
+  --color-warning: light-dark(#d97706, #fbbf24);
+  --color-warning-highlight: light-dark(#fef3c7, #2a261a);
+  --diff-add-bg: light-dark(rgba(22, 163, 74, 0.06), rgba(74, 222, 128, 0.08));
+  --diff-add-line-bg: light-dark(rgba(22, 163, 74, 0.14), rgba(74, 222, 128, 0.15));
+  --diff-add-text: light-dark(#16a34a, #4ade80);
+  --diff-del-bg: light-dark(rgba(220, 38, 38, 0.06), rgba(248, 113, 113, 0.08));
+  --diff-del-line-bg: light-dark(rgba(220, 38, 38, 0.14), rgba(248, 113, 113, 0.15));
+  --diff-del-text: light-dark(#dc2626, #f87171);
+  --diff-hunk-bg: light-dark(rgba(37, 99, 235, 0.08), rgba(96, 165, 250, 0.1));
+  --diff-hunk-text: light-dark(#2563eb, #60a5fa);
+  --diff-gutter: light-dark(#8391a1, #687584);
+  --surface-fill-subtle: light-dark(color-mix(in oklab, var(--color-surface) 92%, var(--color-surface-offset) 8%), color-mix(in oklab, var(--color-surface) 88%, var(--color-surface-offset) 12%));
+  --surface-fill-strong: light-dark(color-mix(in oklab, var(--color-surface-offset) 72%, var(--color-surface-offset-2) 28%), color-mix(in oklab, var(--color-surface-offset) 60%, var(--color-surface-offset-2) 40%));
   --surface-overlay: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-offset) 16%);
   --surface-overlay-soft: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-offset) 12%);
   --surface-overlay-strong: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-offset) 10%);
@@ -65,7 +61,7 @@
   --surface-inverse-glass: oklch(0.18 0.02 260 / 0.68);
   --surface-inverse-glass-hover: oklch(0.24 0.02 260 / 0.82);
   --surface-media-canvas: #000;
-  --surface-embed-canvas: #ffffff;
+  --surface-embed-canvas: light-dark(#ffffff, #121212);
   --surface-avatar-muted: rgb(255 255 255 / 0.22);
   --surface-avatar-label: rgb(15 17 23 / 0.84);
   --surface-accent-subtle: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
@@ -94,8 +90,8 @@
   --border-comment-active: color-mix(in srgb, var(--color-border) 78%, var(--color-comment) 22%);
   --shadow-comment-outline: 0 0 0 1px oklch(from var(--color-comment) l c h / 0.14);
   --surface-warning-toast: var(--color-warning-highlight);
-  --border-warning-toast: color-mix(in oklab, #f59e0b 84%, #b45309 16%);
-  --text-warning-toast: #422006;
+  --border-warning-toast: light-dark(color-mix(in oklab, #f59e0b 84%, #b45309 16%), color-mix(in oklab, #f59e0b 78%, white 10%));
+  --text-warning-toast: light-dark(#422006, color-mix(in oklab, white 92%, #fef3c7 8%));
   --shadow-warning-toast: var(--shadow-md);
   --border-accent-soft: color-mix(in oklab, var(--color-primary) 22%, transparent);
   --border-accent-muted: color-mix(in oklab, var(--color-primary) 24%, var(--color-border));
@@ -112,241 +108,30 @@
   --shadow-floating-hover: 0 18px 40px oklch(0 0 0 / 0.2);
   --shadow-media-soft: 0 16px 40px oklch(0 0 0 / 0.24);
   --shadow-media-stage: 0 28px 80px oklch(0 0 0 / 0.28);
-  --shadow-media-modal: 0 10px 40px rgb(0 0 0 / 0.35);
+  --shadow-media-modal: light-dark(0 10px 40px rgb(0 0 0 / 0.35), 0 16px 48px rgb(0 0 0 / 0.6));
   --shadow-card-strong: 0 20px 56px oklch(0 0 0 / 0.24);
   --shadow-sheet-inset: inset 0 1px 0 color-mix(in oklab, var(--color-text) 4%, transparent);
   --shadow-focus: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
   --shadow-focus-compact: 0 0 0 2px oklch(from var(--color-primary) l c h / 0.45);
-  --interactive-border: color-mix(in oklab, var(--color-primary) 22%, transparent);
-  --interactive-surface: color-mix(in oklab, var(--color-primary) 14%, transparent);
+  --interactive-border: light-dark(color-mix(in oklab, var(--color-primary) 22%, transparent), color-mix(in oklab, var(--color-primary) 32%, transparent));
+  --interactive-surface: light-dark(color-mix(in oklab, var(--color-primary) 14%, transparent), color-mix(in oklab, var(--color-primary) 18%, transparent));
   --color-text-on-dark: #ffffff;
-  --shadow-sm: 0 1px 2px oklch(0.2 0.02 260 / 0.06);
-  --shadow-md: 0 4px 12px oklch(0.2 0.02 260 / 0.08);
-  --shadow-lg: 0 12px 32px oklch(0.2 0.02 260 / 0.12);
+  --shadow-sm: light-dark(0 1px 2px oklch(0.2 0.02 260 / 0.06), 0 1px 2px oklch(0 0 0 / 0.22));
+  --shadow-md: light-dark(0 4px 12px oklch(0.2 0.02 260 / 0.08), 0 4px 12px oklch(0 0 0 / 0.3));
+  --shadow-lg: light-dark(0 12px 32px oklch(0.2 0.02 260 / 0.12), 0 16px 40px oklch(0 0 0 / 0.45));
 }
 
-[data-theme="dark"] {
-  --color-bg: #0b0f14;
-  --color-surface: #11161d;
-  --color-surface-2: #171d26;
-  --color-surface-offset: #141a22;
-  --color-surface-offset-2: #1c2530;
-  --color-surface-dynamic: #253140;
-  --color-surface-raised: #1a222c;
-  --color-surface-ink: #030608;
-  --color-divider: #242e3a;
-  --color-border: #303c4b;
+[data-theme="light"] {
+  color-scheme: light;
+}
 
-  --color-text: #e6edf3;
-  --color-text-muted: #9aa7b4;
-  --color-text-faint: #687584;
-  --color-text-inverse: #0b0f14;
+[data-theme="dark"] {
+  color-scheme: dark;
   --color-code-text: #abb2bf;
-
-  --color-primary: #60a5fa;
-  --color-primary-hover: #3b82f6;
-  --color-primary-active: #2563eb;
-  --color-primary-contrast: #07111f;
-  --color-primary-highlight: #172a45;
-  --color-comment: #60a5fa;
-  --color-comment-soft: rgba(96, 165, 250, 0.1);
-  --color-comment-strong: rgba(96, 165, 250, 0.16);
-  --color-comment-text: #bfdbfe;
-
-  --color-error: #f87171;
-  --color-danger: #f87171;
-  --color-error-highlight: #2a1a1a;
-  --color-success: #4ade80;
-  --color-success-highlight: #1a2a1a;
-  --color-warning: #fbbf24;
-  --color-warning-highlight: #2a261a;
-
-  --diff-add-bg: rgba(74, 222, 128, 0.08);
-  --diff-add-line-bg: rgba(74, 222, 128, 0.15);
-  --diff-add-text: #4ade80;
-  --diff-del-bg: rgba(248, 113, 113, 0.08);
-  --diff-del-line-bg: rgba(248, 113, 113, 0.15);
-  --diff-del-text: #f87171;
-  --diff-hunk-bg: rgba(96, 165, 250, 0.1);
-  --diff-hunk-text: #60a5fa;
-  --diff-gutter: #687584;
-
-  --surface-fill-subtle: color-mix(in oklab, var(--color-surface) 88%, var(--color-surface-offset) 12%);
-  --surface-fill-strong: color-mix(in oklab, var(--color-surface-offset) 60%, var(--color-surface-offset-2) 40%);
-  --surface-overlay: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-offset) 16%);
-  --surface-overlay-soft: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-offset) 12%);
-  --surface-overlay-strong: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-offset) 10%);
-  --surface-overlay-raised: color-mix(in oklab, var(--color-surface) 94%, transparent);
-  --surface-overlay-header: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-bg) 24%);
-  --surface-overlay-offset: color-mix(in oklab, var(--color-surface-offset) 82%, transparent);
-  --surface-scrim: oklch(0.1 0 0 / 0.42);
-  --surface-scrim-strong: oklch(0.08 0.01 260 / 0.82);
-  --surface-inverse-glass: oklch(0.18 0.02 260 / 0.68);
-  --surface-inverse-glass-hover: oklch(0.24 0.02 260 / 0.82);
-  --surface-media-canvas: #000;
-  --surface-embed-canvas: #121212;
-  --surface-avatar-muted: rgb(255 255 255 / 0.22);
-  --surface-avatar-label: rgb(15 17 23 / 0.84);
-  --surface-accent-subtle: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
-  --surface-accent-soft: color-mix(in oklab, var(--color-primary) 16%, transparent);
-  --surface-accent-strong: color-mix(in oklab, var(--color-primary) 22%, transparent);
-  --surface-success-soft: color-mix(in oklab, var(--color-success) 14%, transparent);
-  --surface-warning-soft: color-mix(in oklab, var(--color-warning) 14%, transparent);
-  --surface-danger-soft: color-mix(in oklab, var(--color-error) 14%, transparent);
-  --surface-comment-shell-header: color-mix(in srgb, var(--color-surface) 97%, var(--color-comment) 3%);
-  --surface-comment-record-hover: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-  --surface-comment-subtle: color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%);
-  --surface-comment-subtle-strong: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-  --surface-comment-card: color-mix(in srgb, var(--color-surface) 94%, var(--color-comment) 6%);
-  --surface-comment-elevated: color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
-  --surface-comment-offset: color-mix(in srgb, var(--color-surface-offset) 90%, var(--color-comment) 10%);
-  --surface-comment-offset-soft: color-mix(in srgb, var(--color-surface-offset) 88%, var(--color-comment) 12%);
-  --surface-comment-offset-strong: color-mix(in srgb, var(--color-surface-offset) 84%, var(--color-comment) 16%);
-  --surface-comment-offset-active: color-mix(in srgb, var(--color-surface-offset) 72%, var(--color-comment) 28%);
-  --surface-comment-highlight-hover: color-mix(in srgb, var(--color-comment-soft) 74%, var(--color-comment) 26%);
-  --surface-comment-highlight-active: color-mix(in srgb, var(--color-comment-soft) 62%, var(--color-comment) 38%);
-  --surface-comment-selection: color-mix(in srgb, var(--color-surface) 25%, var(--color-comment) 75%);
-  --surface-comment-preview-fade: linear-gradient(180deg, oklch(0 0 0 / 0), color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%));
-  --border-comment-soft: color-mix(in srgb, var(--color-divider) 90%, var(--color-comment) 10%);
-  --border-comment-muted: color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
-  --border-comment-strong: color-mix(in srgb, var(--color-border) 82%, var(--color-comment) 18%);
-  --border-comment-active: color-mix(in srgb, var(--color-border) 78%, var(--color-comment) 22%);
-  --shadow-comment-outline: 0 0 0 1px oklch(from var(--color-comment) l c h / 0.14);
-  --surface-warning-toast: var(--color-warning-highlight);
-  --border-warning-toast: color-mix(in oklab, #f59e0b 78%, white 10%);
-  --text-warning-toast: color-mix(in oklab, white 92%, #fef3c7 8%);
-  --shadow-warning-toast: var(--shadow-md);
-  --border-accent-soft: color-mix(in oklab, var(--color-primary) 22%, transparent);
-  --border-accent-muted: color-mix(in oklab, var(--color-primary) 24%, var(--color-border));
-  --border-accent-strong: color-mix(in oklab, var(--color-primary) 34%, var(--color-border));
-  --border-accent-stronger: color-mix(in oklab, var(--color-primary) 40%, var(--color-border));
-  --shadow-accent-inset: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 14%, transparent);
-  --shadow-accent-outline: 0 0 0 1px color-mix(in oklab, var(--color-primary) 16%, transparent);
-  --shadow-accent-halo: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.16);
-  --shadow-accent-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.18);
-  --shadow-accent-ring-strong: 0 0 0 2px var(--color-bg), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.45);
-  --shadow-accent-ring-solid: 0 0 0 2px var(--color-primary), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.2);
-  --shadow-elevated-soft: 0 10px 24px color-mix(in oklab, var(--color-surface-ink) 10%, transparent);
-  --shadow-floating-soft: 0 14px 34px oklch(0 0 0 / 0.18);
-  --shadow-floating-hover: 0 18px 40px oklch(0 0 0 / 0.2);
-  --shadow-media-soft: 0 16px 40px oklch(0 0 0 / 0.24);
-  --shadow-media-stage: 0 28px 80px oklch(0 0 0 / 0.28);
-  --shadow-media-modal: 0 16px 48px rgb(0 0 0 / 0.6);
-  --shadow-card-strong: 0 20px 56px oklch(0 0 0 / 0.24);
-  --shadow-sheet-inset: inset 0 1px 0 color-mix(in oklab, var(--color-text) 4%, transparent);
-  --shadow-focus: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
-  --shadow-focus-compact: 0 0 0 2px oklch(from var(--color-primary) l c h / 0.45);
-  --interactive-border: color-mix(in oklab, var(--color-primary) 32%, transparent);
-  --interactive-surface: color-mix(in oklab, var(--color-primary) 18%, transparent);
-  --color-text-on-dark: #ffffff;
-  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.22);
-  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
-  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.45);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --color-bg: #0b0f14;
-    --color-surface: #11161d;
-    --color-surface-2: #171d26;
-    --color-surface-offset: #141a22;
-    --color-surface-offset-2: #1c2530;
-    --color-surface-dynamic: #253140;
-    --color-surface-raised: #1a222c;
-    --color-surface-ink: #030608;
-    --color-divider: #242e3a;
-    --color-border: #303c4b;
-    --color-text: #e6edf3;
-    --color-text-muted: #9aa7b4;
-    --color-text-faint: #687584;
-    --color-text-inverse: #0b0f14;
     --color-code-text: #abb2bf;
-    --color-primary: #60a5fa;
-    --color-primary-hover: #3b82f6;
-    --color-primary-active: #2563eb;
-    --color-primary-contrast: #07111f;
-    --color-primary-highlight: #172a45;
-    --color-comment: #60a5fa;
-    --color-comment-soft: rgba(96, 165, 250, 0.1);
-    --color-comment-strong: rgba(96, 165, 250, 0.16);
-    --color-comment-text: #bfdbfe;
-    --color-error: #f87171;
-    --color-danger: #f87171;
-    --color-error-highlight: #2a1a1a;
-    --color-success: #4ade80;
-    --color-success-highlight: #1a2a1a;
-    --color-warning: #fbbf24;
-    --color-warning-highlight: #2a261a;
-    --surface-fill-subtle: color-mix(in oklab, var(--color-surface) 88%, var(--color-surface-offset) 12%);
-    --surface-fill-strong: color-mix(in oklab, var(--color-surface-offset) 60%, var(--color-surface-offset-2) 40%);
-    --surface-overlay: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-offset) 16%);
-    --surface-overlay-soft: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-offset) 12%);
-    --surface-overlay-strong: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-offset) 10%);
-    --surface-overlay-raised: color-mix(in oklab, var(--color-surface) 94%, transparent);
-    --surface-overlay-header: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-bg) 24%);
-    --surface-overlay-offset: color-mix(in oklab, var(--color-surface-offset) 82%, transparent);
-    --surface-scrim: oklch(0.1 0 0 / 0.42);
-    --surface-scrim-strong: oklch(0.08 0.01 260 / 0.82);
-    --surface-inverse-glass: oklch(0.18 0.02 260 / 0.68);
-    --surface-inverse-glass-hover: oklch(0.24 0.02 260 / 0.82);
-    --surface-media-canvas: #000;
-    --surface-embed-canvas: #121212;
-    --surface-avatar-muted: rgb(255 255 255 / 0.22);
-    --surface-avatar-label: rgb(15 17 23 / 0.84);
-    --surface-accent-subtle: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
-    --surface-accent-soft: color-mix(in oklab, var(--color-primary) 16%, transparent);
-    --surface-accent-strong: color-mix(in oklab, var(--color-primary) 22%, transparent);
-    --surface-success-soft: color-mix(in oklab, var(--color-success) 14%, transparent);
-    --surface-warning-soft: color-mix(in oklab, var(--color-warning) 14%, transparent);
-    --surface-danger-soft: color-mix(in oklab, var(--color-error) 14%, transparent);
-    --surface-comment-shell-header: color-mix(in srgb, var(--color-surface) 97%, var(--color-comment) 3%);
-    --surface-comment-record-hover: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-    --surface-comment-subtle: color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%);
-    --surface-comment-subtle-strong: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-    --surface-comment-card: color-mix(in srgb, var(--color-surface) 94%, var(--color-comment) 6%);
-    --surface-comment-elevated: color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
-    --surface-comment-offset: color-mix(in srgb, var(--color-surface-offset) 90%, var(--color-comment) 10%);
-    --surface-comment-offset-soft: color-mix(in srgb, var(--color-surface-offset) 88%, var(--color-comment) 12%);
-    --surface-comment-offset-strong: color-mix(in srgb, var(--color-surface-offset) 84%, var(--color-comment) 16%);
-    --surface-comment-offset-active: color-mix(in srgb, var(--color-surface-offset) 72%, var(--color-comment) 28%);
-    --surface-comment-highlight-hover: color-mix(in srgb, var(--color-comment-soft) 74%, var(--color-comment) 26%);
-    --surface-comment-highlight-active: color-mix(in srgb, var(--color-comment-soft) 62%, var(--color-comment) 38%);
-    --surface-comment-selection: color-mix(in srgb, var(--color-surface) 25%, var(--color-comment) 75%);
-    --surface-comment-preview-fade: linear-gradient(180deg, oklch(0 0 0 / 0), color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%));
-    --border-comment-soft: color-mix(in srgb, var(--color-divider) 90%, var(--color-comment) 10%);
-    --border-comment-muted: color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
-    --border-comment-strong: color-mix(in srgb, var(--color-border) 82%, var(--color-comment) 18%);
-    --border-comment-active: color-mix(in srgb, var(--color-border) 78%, var(--color-comment) 22%);
-    --shadow-comment-outline: 0 0 0 1px oklch(from var(--color-comment) l c h / 0.14);
-    --surface-warning-toast: var(--color-warning-highlight);
-    --border-warning-toast: color-mix(in oklab, #f59e0b 78%, white 10%);
-    --text-warning-toast: color-mix(in oklab, white 92%, #fef3c7 8%);
-    --shadow-warning-toast: var(--shadow-md);
-    --border-accent-soft: color-mix(in oklab, var(--color-primary) 22%, transparent);
-    --border-accent-muted: color-mix(in oklab, var(--color-primary) 24%, var(--color-border));
-    --border-accent-strong: color-mix(in oklab, var(--color-primary) 34%, var(--color-border));
-    --border-accent-stronger: color-mix(in oklab, var(--color-primary) 40%, var(--color-border));
-    --shadow-accent-inset: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 14%, transparent);
-    --shadow-accent-outline: 0 0 0 1px color-mix(in oklab, var(--color-primary) 16%, transparent);
-    --shadow-accent-halo: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.16);
-    --shadow-accent-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.18);
-    --shadow-accent-ring-strong: 0 0 0 2px var(--color-bg), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.45);
-    --shadow-accent-ring-solid: 0 0 0 2px var(--color-primary), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.2);
-    --shadow-elevated-soft: 0 10px 24px color-mix(in oklab, var(--color-surface-ink) 10%, transparent);
-    --shadow-floating-soft: 0 14px 34px oklch(0 0 0 / 0.18);
-    --shadow-floating-hover: 0 18px 40px oklch(0 0 0 / 0.2);
-    --shadow-media-soft: 0 16px 40px oklch(0 0 0 / 0.24);
-    --shadow-media-stage: 0 28px 80px oklch(0 0 0 / 0.28);
-    --shadow-media-modal: 0 16px 48px rgb(0 0 0 / 0.6);
-    --shadow-card-strong: 0 20px 56px oklch(0 0 0 / 0.24);
-    --shadow-sheet-inset: inset 0 1px 0 color-mix(in oklab, var(--color-text) 4%, transparent);
-    --shadow-focus: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
-    --shadow-focus-compact: 0 0 0 2px oklch(from var(--color-primary) l c h / 0.45);
-    --interactive-border: color-mix(in oklab, var(--color-primary) 32%, transparent);
-    --interactive-surface: color-mix(in oklab, var(--color-primary) 18%, transparent);
-    --color-text-on-dark: #ffffff;
-    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.22);
-    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
-    --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.45);
   }
 }

package/src/client/styles/foundation/utilities.css

@@ -34,3 +34,5 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   clip: auto;
   transform: translateY(0);
 }
+
+.clipboard-fallback { position: fixed; left: -9999px; opacity: 0; }

package/src/client/styles/layout/editor-page.css

@@ -36,7 +36,6 @@
 
 .empty-state-logo svg {
   display: block;
-  opacity: 0.72;
 }
 
 .empty-state-title {

package/src/client/styles/layout/overlays.css

@@ -99,6 +99,11 @@
   font-size: var(--text-ui-sm);
 }
 
+.file-context-item[hidden],
+.file-action-sheet-item[hidden] {
+  display: none;
+}
+
 .file-context-item:hover {
   background: var(--color-surface-offset);
 }

package/src/client/styles/layout/shell.css

@@ -1,5 +1,157 @@
 /* ===== APP SHELL ===== */
 
+html[data-workspace-loading] .app-shell,
+html[data-workspace-loading] .skip-link {
+  visibility: hidden;
+}
+
+.workspace-loading {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  padding: var(--space-6);
+  overflow: auto;
+  background: var(--color-bg);
+  color: var(--color-text-muted);
+}
+
+.vault-dashboard {
+  place-items: center;
+  place-content: normal;
+}
+
+.vault-dashboard-card {
+  width: min(100%, 520px);
+  padding: clamp(var(--space-5), 4vw, var(--space-8));
+  border: 1px solid var(--border-accent-soft);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: var(--shadow-card-strong);
+}
+
+.vault-dashboard-header .sidebar-brand {
+  margin-bottom: var(--space-6);
+}
+
+.vault-dashboard-header h1 {
+  margin: 0 0 var(--space-2);
+  font-family: var(--font-display);
+  font-size: var(--text-xl);
+  line-height: 1.15;
+  letter-spacing: -0.035em;
+}
+
+.vault-dashboard-header p {
+  margin: 0 0 var(--space-6);
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-md);
+  line-height: 1.5;
+}
+
+.vault-dashboard-search {
+  position: relative;
+}
+
+.vault-dashboard-search > svg {
+  position: absolute;
+  top: 50%;
+  left: var(--space-3);
+  color: var(--color-text-faint);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.vault-dashboard-search .ui-input {
+  min-height: var(--control-h-lg);
+  padding-left: var(--space-10);
+  background: var(--color-surface-offset);
+}
+
+.vault-dashboard-list-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: var(--space-6) 0 var(--space-3);
+}
+
+.vault-dashboard-list-heading h2 {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+  font-weight: 600;
+}
+
+.vault-dashboard-card nav {
+  display: grid;
+  gap: var(--space-2);
+  max-height: 40dvh;
+  padding: var(--space-1);
+  margin: calc(-1 * var(--space-1));
+  overflow: auto;
+}
+
+.vault-dashboard-link.ui-record-surface {
+  --ui-record-gap: var(--space-3);
+  --ui-record-border-hover: var(--border-accent-soft);
+  flex-direction: row;
+  align-items: center;
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.vault-dashboard-icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  background: var(--color-primary-highlight);
+  color: var(--color-primary);
+}
+
+.vault-dashboard-name {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--text-ui-md);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.vault-dashboard-arrow {
+  flex-shrink: 0;
+  color: var(--color-text-faint);
+}
+
+.vault-dashboard-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+  margin-top: var(--space-6);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--color-divider);
+  color: var(--color-text-faint);
+  font-size: var(--text-caption);
+}
+
+.vault-dashboard-footer kbd {
+  padding: 1px var(--space-1);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-offset);
+  font: inherit;
+}
+
+.vault-dashboard-link[hidden],
+.vault-dashboard-card [role='status'][hidden] {
+  display: none;
+}
+
 .app-shell {
   position: fixed;
   top: var(--app-viewport-offset-top, 0px);
@@ -155,6 +307,10 @@
   font-weight: 600;
 }
 
+.editor-container.hide-cursor-names .cm-ySelectionInfo {
+  display: none;
+}
+
 .preview-body {
   --preview-floating-sidebar-gap: var(--space-3);
   --preview-floating-comments-width: var(--panel-comments-width);
@@ -168,6 +324,8 @@
 }
 
 .preview-container {
+  /* Preview commits and scroll sync explicitly preserve the reading position. */
+  overflow-anchor: none;
   flex: 1;
   min-width: 0;
   overflow-x: hidden;

package/src/client/styles/layout/sidebar.css

@@ -489,6 +489,9 @@ body.is-file-tree-dragging * {
 
 .create-menu {
   position: fixed;
+  /* Override UA popover styles (inset/margin/width) so explicit coordinates win. */
+  inset: auto;
+  margin: 0;
   z-index: 1010;
   width: min(240px, calc(100vw - 24px));
   padding: 6px;