.editor-viewport {
  --writer-bg: #fbf0d9;
  --writer-text: #433422;
  --writer-text-muted: #8b7355;
  --writer-accent: #6366f1;
  --writer-accent-hover: #4f46e5;
  --writer-border: #d4c5a9;
  --writer-selection: #e8d5b0;
  --writer-code-bg: #f0e6d2;
  --writer-blockquote-border: #6366f1;
  --writer-heading-color: #433422;
  background-color: var(--writer-bg);
  color: var(--writer-text);
  transition: background-color 0.3s, color 0.3s;
}

.editor-viewport.theme-sepia {
  --writer-bg: #fbf0d9;
  --writer-text: #433422;
  --writer-text-muted: #8b7355;
  --writer-accent: #6366f1;
  --writer-accent-hover: #4f46e5;
  --writer-border: #d4c5a9;
  --writer-selection: #e8d5b0;
  --writer-code-bg: #f0e6d2;
  --writer-blockquote-border: #6366f1;
  --writer-heading-color: #433422;
}

.editor-viewport.theme-dark {
  --writer-bg: #1a1a2e;
  --writer-text: #e0e0e0;
  --writer-text-muted: #6b7280;
  --writer-accent: #818cf8;
  --writer-accent-hover: #6366f1;
  --writer-border: #374151;
  --writer-selection: #374151;
  --writer-code-bg: #16213e;
  --writer-blockquote-border: #818cf8;
  --writer-heading-color: #e0e0e0;
}

.editor-viewport.theme-light {
  --writer-bg: #ffffff;
  --writer-text: #1a1a1a;
  --writer-text-muted: #9ca3af;
  --writer-accent: #6366f1;
  --writer-accent-hover: #4f46e5;
  --writer-border: #e5e7eb;
  --writer-selection: #dbeafe;
  --writer-code-bg: #f3f4f6;
  --writer-blockquote-border: #6366f1;
  --writer-heading-color: #1a1a1a;
}

.editor-viewport.theme-solarized-light {
  --writer-bg: #fdf6e3;
  --writer-text: #657b83;
  --writer-text-muted: #93a1a1;
  --writer-accent: #268bd2;
  --writer-accent-hover: #1a6fb5;
  --writer-border: #eee8d5;
  --writer-selection: #eee8d5;
  --writer-code-bg: #eee8d5;
  --writer-blockquote-border: #268bd2;
  --writer-heading-color: #657b83;
}

.editor-viewport.theme-solarized-dark {
  --writer-bg: #002b36;
  --writer-text: #839496;
  --writer-text-muted: #586e75;
  --writer-accent: #2aa198;
  --writer-accent-hover: #1f8a82;
  --writer-border: #073642;
  --writer-selection: #073642;
  --writer-code-bg: #073642;
  --writer-blockquote-border: #2aa198;
  --writer-heading-color: #839496;
}

.editor-viewport.theme-paper {
  --writer-bg: #f5f0e8;
  --writer-text: #2c2c2c;
  --writer-text-muted: #8b7355;
  --writer-accent: #8b7355;
  --writer-accent-hover: #6b5344;
  --writer-border: #d4c5a9;
  --writer-selection: #e8dcc8;
  --writer-code-bg: #ede4d3;
  --writer-blockquote-border: #8b7355;
  --writer-heading-color: #2c2c2c;
}

.editor-viewport.theme-high-contrast {
  --writer-bg: #000000;
  --writer-text: #ffffff;
  --writer-text-muted: #cccccc;
  --writer-accent: #ffff00;
  --writer-accent-hover: #ffdd00;
  --writer-border: #ffffff;
  --writer-selection: #333333;
  --writer-code-bg: #1a1a1a;
  --writer-blockquote-border: #ffff00;
  --writer-heading-color: #ffffff;
}

.editor-viewport ::selection {
  background-color: var(--writer-selection);
}

.editor-viewport a {
  color: var(--writer-accent);
}

.editor-viewport a:hover {
  color: var(--writer-accent-hover);
}

.editor-viewport code {
  background-color: var(--writer-code-bg);
  color: var(--writer-text);
}

.editor-viewport blockquote {
  border-left-color: var(--writer-blockquote-border);
}

.editor-viewport hr {
  border-color: var(--writer-border);
}

.editor-viewport .ProseMirror-gapcursor::after {
  border-top-color: var(--writer-text-muted);
}

.editor-viewport .ProseMirror p.is-editor-empty:first-child::before {
  color: var(--writer-text-muted);
}

:root {
  --writer-font-serif: 'Lora', 'Source Serif 4', 'Merriweather', Georgia, serif;
  --writer-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --writer-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
}