/*
 * Styles for rendered Action Text content.
 * The Lexxy editor CSS is served via stylesheet_link_tag "lexxy" in the application layout.
 * Rendered note content uses Tailwind's prose classes applied directly in _journal_note_content.html.erb.
 */

/* Lexxy's palette has no dark variant; the autosaving documents (Rulebooks, Playbook) remap it.
   The derived tokens are redeclared too: Lexxy defines them on :root, where var() has already
   resolved to the light values, so remapping only the base tokens would leave a white canvas. */
@media (prefers-color-scheme: dark) {
  [data-controller~="rich-text-autosave"] {
    --lexxy-color-ink: var(--color-gray-100);
    --lexxy-color-ink-medium: var(--color-gray-300);
    --lexxy-color-ink-light: var(--color-gray-400);
    --lexxy-color-ink-lighter: var(--color-gray-600);
    --lexxy-color-ink-lightest: var(--color-gray-800);
    --lexxy-color-ink-inverted: var(--color-gray-900);
    --lexxy-color-accent-dark: var(--color-blue-400);
    --lexxy-color-accent-light: var(--color-slate-600);
    --lexxy-color-accent-lightest: var(--color-slate-700);
    --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
    --lexxy-color-text: var(--lexxy-color-ink);
    --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
    --lexxy-color-link: var(--lexxy-color-accent-dark);
    --lexxy-color-selected: var(--lexxy-color-accent-lightest);
    --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
    --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
    --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
    --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
    --lexxy-color-table-cell-selected: var(--lexxy-color-selected);
    --lexxy-color-table-cell-selected-bg: var(--lexxy-color-accent-lightest);
    --lexxy-color-table-cell-toggle: var(--lexxy-color-accent-lightest);
    --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
    --lexxy-color-code-token-att: #ff7b72;
    --lexxy-color-code-token-comment: #8b949e;
    --lexxy-color-code-token-function: #d2a8ff;
    --lexxy-color-code-token-operator: #ff7b72;
    --lexxy-color-code-token-property: #79c0ff;
    --lexxy-color-code-token-punctuation: #c9d1d9;
    --lexxy-color-code-token-selector: #7ee787;
    --lexxy-color-code-token-variable: #ffa657;
  }
}