/*
 * Dark theme for the Lexxy editor and its rendered content.
 *
 * Lexxy defines all of its colours as variables in lexxy-variables.css and
 * documents overriding them as the way to theme it — so this file only
 * redefines variables. No rule here targets a Lexxy internal class, which
 * means a gem upgrade cannot silently break the theme.
 *
 * Loaded AFTER lexxy.css in the head, so these win on equal specificity.
 * Values are the app's own palette: gray-800 fields, gray-100 text,
 * white/15 borders, and the #8f87e6 purple used by every other control.
 */
:root {
  /* The ink ramp runs light-on-dark now, so "lightest" is the darkest
     surface rather than the palest one. */
  --lexxy-color-ink: oklch(96% 0 0);
  --lexxy-color-ink-medium: oklch(72% 0 0);
  --lexxy-color-ink-light: oklch(58% 0 0);
  --lexxy-color-ink-lighter: oklch(38% 0 0);
  --lexxy-color-ink-lightest: oklch(28% 0 0);
  --lexxy-color-ink-inverted: #1f2937;

  /* The app's purple, not Lexxy's blue. */
  --lexxy-color-accent-dark: #8f87e6;
  --lexxy-color-accent-medium: #a79fee;
  --lexxy-color-accent-light: oklch(38% 0.06 285);
  --lexxy-color-accent-lightest: oklch(32% 0.05 285);
  --lexxy-color-blue: #8f87e6;

  --lexxy-color-canvas: #1f2937;
  --lexxy-color-text: #f3f4f6;
  --lexxy-color-text-subtle: #9ca3af;
  --lexxy-color-link: #a79fee;
  --lexxy-color-code-bg: #111827;

  /* Syntax tokens: the shipped set is tuned for a white background and is
     close to unreadable on gray-900. */
  --lexxy-color-code-token-att: #ff9492;
  --lexxy-color-code-token-comment: #8b949e;
  --lexxy-color-code-token-function: #d2a8ff;
  --lexxy-color-code-token-operator: #ff9492;
  --lexxy-color-code-token-property: #79c0ff;
  --lexxy-color-code-token-punctuation: #c9d1d9;
  --lexxy-color-code-token-selector: #7ee787;
  --lexxy-color-code-token-variable: #ffa657;

  --lexxy-color-table-header-bg: #111827;
  --lexxy-color-table-cell-border: rgba(255, 255, 255, 0.15);

  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* The editor's own chrome: match the form fields beside it. */
lexxy-editor {
  background-color: #1f2937;
  color: #f3f4f6;
  border-radius: 0.375rem;
}

/* The toolbar reads as a separate strip in light mode; here it needs an
   explicit divider or it merges into the writing area. */
lexxy-editor .lexxy-editor__toolbar,
lexxy-toolbar {
  background-color: #111827;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Placeholder was near-black on the dark canvas. */
lexxy-editor [data-lexical-editor] p:first-child:empty::before,
lexxy-editor .lexxy-editor__placeholder {
  color: #6b7280;
}