collabmd 0.1.21 → 0.1.23

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

@@ -0,0 +1,347 @@
+/* ===== FOUNDATION / THEMES ===== */
+
+:root,
+[data-theme="light"] {
+  --color-bg: #f5f5f7;
+  --color-surface: #ffffff;
+  --color-surface-2: #fafafe;
+  --color-surface-offset: #eeeef2;
+  --color-surface-offset-2: #e6e6eb;
+  --color-surface-dynamic: #dddde3;
+  --color-surface-raised: #ffffff;
+  --color-surface-ink: #0f1117;
+  --color-divider: #d1d1d8;
+  --color-border: #c4c4ce;
+
+  --color-text: #1a1a2e;
+  --color-text-muted: #6b6b80;
+  --color-text-faint: #a0a0b0;
+  --color-text-inverse: #f5f5f7;
+
+  --color-primary: #4f46e5;
+  --color-primary-hover: #4338ca;
+  --color-primary-active: #3730a3;
+  --color-primary-highlight: #e0e0ff;
+  --color-comment: #4f46e5;
+  --color-comment-soft: rgba(79, 70, 229, 0.08);
+  --color-comment-strong: rgba(79, 70, 229, 0.14);
+  --color-comment-text: #3730a3;
+
+  --color-error: #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(79, 70, 229, 0.08);
+  --diff-hunk-text: #4f46e5;
+  --diff-gutter: #a0a0b0;
+
+  --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%);
+  --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: #ffffff;
+  --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: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.035), transparent 120px), color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
+  --surface-comment-shell-header: color-mix(in srgb, var(--color-surface) 97%, var(--color-comment) 3%);
+  --surface-comment-record: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.028), transparent 70%), color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%);
+  --surface-comment-record-hover: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.042), transparent 70%), color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
+  --surface-comment-record-active: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.055), transparent 72%), color-mix(in srgb, var(--color-surface-2) 90%, var(--color-comment) 10%);
+  --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: linear-gradient(135deg, color-mix(in oklab, #fcd34d 42%, white 58%), color-mix(in oklab, white 94%, #fff7ed 6%) 42%), #fff8e7;
+  --border-warning-toast: color-mix(in oklab, #f59e0b 84%, #b45309 16%);
+  --text-warning-toast: #422006;
+  --shadow-warning-toast: 0 16px 30px rgb(84 46 10 / 0.18), 0 0 0 1px rgb(245 158 11 / 0.12);
+  --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 10px 40px rgb(0 0 0 / 0.35);
+  --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);
+  --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);
+}
+
+[data-theme="dark"] {
+  --color-bg: #0f1117;
+  --color-surface: #161822;
+  --color-surface-2: #1c1e2c;
+  --color-surface-offset: #1a1c28;
+  --color-surface-offset-2: #22243a;
+  --color-surface-dynamic: #2a2c3e;
+  --color-surface-raised: #202330;
+  --color-surface-ink: #050608;
+  --color-divider: #2e3044;
+  --color-border: #383a50;
+
+  --color-text: #e2e2ea;
+  --color-text-muted: #8b8ba0;
+  --color-text-faint: #5a5a70;
+  --color-text-inverse: #0f1117;
+
+  --color-primary: #818cf8;
+  --color-primary-hover: #6366f1;
+  --color-primary-active: #4f46e5;
+  --color-primary-highlight: #1e1e3a;
+  --color-comment: #818cf8;
+  --color-comment-soft: rgba(129, 140, 248, 0.1);
+  --color-comment-strong: rgba(129, 140, 248, 0.16);
+  --color-comment-text: #c7d2fe;
+
+  --color-error: #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(129, 140, 248, 0.1);
+  --diff-hunk-text: #818cf8;
+  --diff-gutter: #5a5a70;
+
+  --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: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.035), transparent 120px), color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
+  --surface-comment-shell-header: color-mix(in srgb, var(--color-surface) 97%, var(--color-comment) 3%);
+  --surface-comment-record: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.028), transparent 70%), color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%);
+  --surface-comment-record-hover: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.042), transparent 70%), color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
+  --surface-comment-record-active: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.055), transparent 72%), color-mix(in srgb, var(--color-surface-2) 90%, var(--color-comment) 10%);
+  --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: linear-gradient(135deg, color-mix(in oklab, #f59e0b 32%, transparent), color-mix(in oklab, var(--color-surface) 86%, #0b1022 14%) 42%), color-mix(in oklab, var(--color-surface) 74%, #1b1320 26%);
+  --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: 0 18px 34px rgb(0 0 0 / 0.38), 0 0 0 1px color-mix(in oklab, #f59e0b 18%, transparent);
+  --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.25);
+  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
+  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.5);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --color-bg: #0f1117;
+    --color-surface: #161822;
+    --color-surface-2: #1c1e2c;
+    --color-surface-offset: #1a1c28;
+    --color-surface-offset-2: #22243a;
+    --color-surface-dynamic: #2a2c3e;
+    --color-surface-raised: #202330;
+    --color-surface-ink: #050608;
+    --color-divider: #2e3044;
+    --color-border: #383a50;
+    --color-text: #e2e2ea;
+    --color-text-muted: #8b8ba0;
+    --color-text-faint: #5a5a70;
+    --color-text-inverse: #0f1117;
+    --color-primary: #818cf8;
+    --color-primary-hover: #6366f1;
+    --color-primary-active: #4f46e5;
+    --color-primary-highlight: #1e1e3a;
+    --color-comment: #818cf8;
+    --color-comment-soft: rgba(129, 140, 248, 0.1);
+    --color-comment-strong: rgba(129, 140, 248, 0.16);
+    --color-comment-text: #c7d2fe;
+    --color-error: #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: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.035), transparent 120px), color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
+    --surface-comment-shell-header: color-mix(in srgb, var(--color-surface) 97%, var(--color-comment) 3%);
+    --surface-comment-record: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.028), transparent 70%), color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%);
+    --surface-comment-record-hover: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.042), transparent 70%), color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
+    --surface-comment-record-active: linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.055), transparent 72%), color-mix(in srgb, var(--color-surface-2) 90%, var(--color-comment) 10%);
+    --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: linear-gradient(135deg, color-mix(in oklab, #f59e0b 32%, transparent), color-mix(in oklab, var(--color-surface) 86%, #0b1022 14%) 42%), color-mix(in oklab, var(--color-surface) 74%, #1b1320 26%);
+    --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: 0 18px 34px rgb(0 0 0 / 0.38), 0 0 0 1px color-mix(in oklab, #f59e0b 18%, transparent);
+    --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.25);
+    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
+    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.5);
+  }
+}

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

@@ -0,0 +1,66 @@
+/* ===== FOUNDATION / TOKENS ===== */
+
+:root {
+  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
+  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
+  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
+  --text-lg: clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
+  --text-xl: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
+  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
+  --text-label: 12px;
+  --text-meta: 11px;
+  --text-caption: 10px;
+  --text-micro: 9px;
+  --text-code-sm: 11.5px;
+  --text-ui-sm: 13px;
+  --text-ui-md: 14px;
+  --text-title-sm: 15px;
+  --text-title-md: 18px;
+
+  --font-body: 'Inter', system-ui, sans-serif;
+  --font-display: 'Geist', 'Cal Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+  --space-32: 8rem;
+
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xs: 2px;
+  --radius-xs: 4px;
+  --radius-lg-plus: 10px;
+  --radius-xl-plus: 18px;
+  --radius-full: 9999px;
+
+  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  --content-narrow: 640px;
+  --content-default: 960px;
+  --content-wide: 1200px;
+  --preview-content-width: 720px;
+  --panel-comments-width: min(300px, 34vw);
+  --panel-comments-min-width: 240px;
+  --panel-outline-width: 220px;
+
+  --toolbar-h: 48px;
+  --control-h-xs: 28px;
+  --control-h-sm: 30px;
+  --control-h-md: 36px;
+  --control-h-lg: 44px;
+  --control-icon-sm: 14px;
+  --control-icon-md: 16px;
+  --panel-border-width: 1px;
+}

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

@@ -0,0 +1,36 @@
+/* ===== FOUNDATION / UTILITIES ===== */
+
+.hidden,
+.u-hidden {
+  display: none !important;
+}
+
+html[data-initial-file-requested="true"] .empty-state {
+  display: none !important;
+}
+
+html[data-initial-file-requested="true"] .editor-page.hidden {
+  display: flex !important;
+}
+
+.skip-link {
+  position: fixed;
+  top: var(--space-2);
+  left: var(--space-2);
+  z-index: 1000;
+  width: auto;
+  height: auto;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--color-primary);
+  color: var(--color-text-inverse);
+  clip: rect(0, 0, 0, 0);
+  transform: translateY(calc(-100% - var(--space-2)));
+  transition: transform var(--transition-interactive);
+}
+
+.skip-link:focus,
+.skip-link:focus-visible {
+  clip: auto;
+  transform: translateY(0);
+}

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

@@ -0,0 +1,203 @@
+/* ===== PAGE LAYOUT ===== */
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8);
+}
+
+.empty-state-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  max-width: 320px;
+  text-align: center;
+}
+
+.empty-state-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  margin-bottom: var(--space-2);
+  border: 1px solid var(--border-accent-soft);
+  border-radius: calc(var(--radius-xl-plus) + var(--radius-sm));
+  background:
+    radial-gradient(circle at top, var(--interactive-border), transparent 70%),
+    linear-gradient(180deg, var(--surface-overlay-raised), var(--surface-overlay-soft));
+  box-shadow:
+    var(--shadow-floating-soft),
+    var(--shadow-sheet-inset);
+}
+
+.empty-state-logo svg {
+  display: block;
+  opacity: 0.72;
+}
+
+.empty-state-title {
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.empty-state-desc {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.empty-state-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: 100%;
+  margin-top: var(--space-4);
+}
+
+.empty-state-btn {
+  justify-content: flex-start;
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  box-shadow: var(--shadow-sm);
+  font-size: var(--text-sm);
+}
+
+.empty-state-btn:hover {
+  border-color: var(--color-text-faint);
+  background: var(--color-surface-offset-2);
+}
+
+.empty-state-kbd {
+  margin-left: auto;
+  padding: 2px 6px;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+}
+
+.editor-page,
+.diff-page {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.toolbar {
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  height: var(--toolbar-h);
+  gap: var(--space-2);
+  padding: 0 var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+  background: var(--color-surface);
+}
+
+.toolbar-left,
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.toolbar-left {
+  min-width: 0;
+  flex: 1;
+}
+
+.toolbar-right {
+  flex-shrink: 0;
+}
+
+.toolbar-logo {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: var(--space-1);
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-interactive);
+}
+
+.toolbar-logo:hover {
+  background: var(--color-surface-offset);
+}
+
+.toolbar-room-info {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.toolbar-room-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.toolbar-badge {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.toolbar-center {
+  flex-shrink: 0;
+}
+
+.diff-mode-toggle,
+.diff-layout-toggle {
+  padding: 3px;
+}
+
+.diff-mode-btn,
+.diff-layout-btn {
+  width: auto;
+  height: 28px;
+  padding: 0 var(--space-3);
+  font-size: var(--text-label);
+  font-weight: 600;
+}
+
+.diff-mode-btn {
+  min-width: 72px;
+}
+
+.diff-layout-btn {
+  min-width: 82px;
+}
+
+.markdown-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  flex-shrink: 0;
+  padding: var(--space-1) var(--space-2);
+  border-bottom: 1px solid var(--color-divider);
+  background: var(--color-surface);
+}
+
+.markdown-toolbar-separator {
+  width: 1px;
+  height: 18px;
+  margin: 0 2px;
+  flex-shrink: 0;
+  background: var(--color-divider);
+}