/*
 * Prompt Mortem is always dark. Lexxy's colors are variables, so the editor,
 * toolbar, and rendered content share this palette. Loaded after lexxy.css.
 */
:root {
  --lexxy-color-ink: #f0eee8;
  --lexxy-color-ink-medium: #c8c4bc;
  --lexxy-color-ink-light: #9ba098;
  --lexxy-color-ink-lighter: #454934;
  --lexxy-color-ink-lightest: #1a1a1e;
  --lexxy-color-ink-inverted: #111113;

  --lexxy-color-accent-dark: #dfff43;
  --lexxy-color-accent-medium: #e8ff70;
  --lexxy-color-accent-light: #454934;
  --lexxy-color-accent-lightest: #2c311c;

  --lexxy-color-red: #e74742;
  --lexxy-color-green: #dfff43;
  --lexxy-color-blue: #dfff43;
  --lexxy-color-purple: #ffb3ac;

  --lexxy-color-code-token-att: #ffb3ac;
  --lexxy-color-code-token-comment: #9ba098;
  --lexxy-color-code-token-function: #dfff43;
  --lexxy-color-code-token-operator: #ffb3ac;
  --lexxy-color-code-token-property: #f0eee8;
  --lexxy-color-code-token-punctuation: #f0eee8;
  --lexxy-color-code-token-selector: #dfff43;
  --lexxy-color-code-token-variable: #ffb3ac;

  --lexxy-color-canvas: #111113;
  --lexxy-color-text: #f0eee8;
  --lexxy-color-text-subtle: #c8c4bc;
  --lexxy-color-link: #dfff43;
  --lexxy-color-selected: #454934;
  --lexxy-color-selected-hover: #5c6244;
  --lexxy-color-selected-dark: #dfff43;
  --lexxy-color-code-bg: #0e0e10;
  --lexxy-color-floating-controls-separator: #454934;

  --lexxy-color-table-header-bg: #1a1a1e;
  --lexxy-color-table-cell-border: #454934;
  --lexxy-color-table-cell-selected: #454934;
  --lexxy-color-table-cell-selected-border: #dfff43;
  --lexxy-color-table-cell-selected-bg: #2c311c;
  --lexxy-color-table-cell-add: color-mix(in srgb, #dfff43 55%, transparent);
  --lexxy-color-table-cell-toggle: #2c311c;
  --lexxy-color-table-cell-remove: color-mix(in srgb, #e74742 28%, transparent);

  --highlight-1: #dfff43;
  --highlight-2: #ffb3ac;
  --highlight-3: #e74742;
  --highlight-4: #f0eee8;
  --highlight-5: #dfff43;
  --highlight-6: #9ba098;
  --highlight-7: #dfff43;
  --highlight-8: #ffb3ac;
  --highlight-9: #c8c4bc;

  --lexxy-font-base: "Inter", ui-sans-serif, system-ui, sans-serif;
  --lexxy-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --lexxy-text-size: 1rem;
  --lexxy-text-small: 0.8125rem;
  --lexxy-radius: 0;
  --lexxy-focus-ring-color: #dfff43;
  --lexxy-focus-ring-offset: 2px;
  --lexxy-focus-ring-size: 2px;
  --lexxy-shadow: 2px 2px 0 #000000;
}

lexxy-editor {
  color: #f0eee8;
  color-scheme: dark;
  width: 100%;
}

lexxy-editor .lexxy-editor__content:focus {
  outline: 2px solid #dfff43;
  outline-offset: -2px;
}

lexxy-editor ::selection {
  background: #dfff43;
  color: #111113;
}

lexxy-toolbar .lexxy-editor__toolbar-button {
  color: #f0eee8;
}

lexxy-toolbar .lexxy-editor__toolbar-button[aria-pressed="true"],
lexxy-toolbar .lexxy-editor__toolbar-button[aria-checked="true"],
lexxy-toolbar .lexxy-editor__toolbar-button[aria-expanded="true"] {
  background-color: #454934;
  color: #f0eee8;
}

lexxy-toolbar .lexxy-editor__toolbar-button:focus-visible {
  outline: 2px solid #dfff43;
  outline-offset: 1px;
}

.editorial-body {
  --lexxy-text-size: 1.125rem;
}

.editorial-body .lexxy-content,
lexxy-editor.lexxy-content .lexxy-editor__content {
  color: #f0eee8;
}

.editorial-body .lexxy-content :is(h2, h3, h4),
lexxy-editor.lexxy-content .lexxy-editor__content :is(h2, h3, h4) {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.editorial-body .lexxy-content h2 {
  margin-top: 2.75rem;
  font-size: 2.4rem;
}

.editorial-body .lexxy-content h3 {
  margin-top: 2.25rem;
  font-size: 1.7rem;
}

.editorial-body .lexxy-content :is(p, ul, ol) {
  max-width: 68ch;
}

.editorial-body .lexxy-content a,
lexxy-editor.lexxy-content a {
  color: #dfff43;
  text-underline-offset: 3px;
}

.editorial-body .lexxy-content blockquote,
lexxy-editor.lexxy-content blockquote {
  max-width: 22ch;
  border-left: 2px solid #dfff43;
  border-inline-start: 2px solid #dfff43;
  padding-left: 1.25rem;
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  font-size: 2rem;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #f0eee8;
}

.editorial-body .lexxy-content :is(pre, code),
lexxy-editor.lexxy-content :is(pre, code) {
  border-radius: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.editorial-body .lexxy-content pre,
lexxy-editor.lexxy-content pre {
  max-width: none;
  overflow-x: auto;
  border: 1px solid #27272d;
  background: #0e0e10;
  padding: 1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #f0eee8;
}

.editorial-body .lexxy-content table,
lexxy-editor.lexxy-content table {
  width: 100%;
  border-collapse: collapse;
  color: #f0eee8;
}

.editorial-body .lexxy-content :is(th, td),
lexxy-editor.lexxy-content :is(th, td) {
  border: 1px solid #454934;
  padding: 0.5rem 0.75rem;
}

.editorial-body .lexxy-content img,
.editorial-body .lexxy-content video,
lexxy-editor.lexxy-content img,
lexxy-editor.lexxy-content video {
  max-width: 100%;
  height: auto;
}