/*
 * Lexxy Token Overrides
 *
 * Maps Lexxy's CSS variables onto the redesign's --rd-* token set. This
 * gives Lexxy editors the new palette everywhere — comments, descriptions,
 * any future rich-text field.
 *
 * NOTE: These :root overrides are intentionally NOT in @layer so they have
 * higher specificity than the Lexxy gem's default CSS.
 */

:root {
  /* Core ink colors */
  --lexxy-color-ink: var(--rd-fg);
  --lexxy-color-ink-medium: var(--rd-fg-muted);
  --lexxy-color-ink-light: var(--rd-fg-subtle);
  --lexxy-color-ink-lighter: var(--rd-border-strong);
  --lexxy-color-ink-lightest: var(--rd-border);
  --lexxy-color-ink-inverted: var(--rd-bg-raised);

  /* Canvas and text */
  --lexxy-color-canvas: var(--rd-bg-raised);
  --lexxy-color-text: var(--rd-fg);
  --lexxy-color-text-subtle: var(--rd-fg-muted);

  /* Links */
  --lexxy-color-link: var(--rd-accent);

  /* Selection colors */
  --lexxy-color-selected: var(--rd-accent-soft);
  --lexxy-color-selected-hover: oklch(0.68 0.22 0 / 0.2);
  --lexxy-color-selected-dark: var(--rd-accent);

  /* Code highlighting — keep GitHub-ish syntax palette */
  --lexxy-color-code-bg: var(--rd-bg-sunken);
  --lexxy-color-code-token-att: light-dark(#d73a49, #ff7b72);
  --lexxy-color-code-token-comment: light-dark(#6a737d, #8b949e);
  --lexxy-color-code-token-function: light-dark(#6f42c1, #d2a8ff);
  --lexxy-color-code-token-operator: light-dark(#d73a49, #ff7b72);
  --lexxy-color-code-token-property: light-dark(#005cc5, #79c0ff);
  --lexxy-color-code-token-punctuation: light-dark(#24292e, #c9d1d9);
  --lexxy-color-code-token-selector: light-dark(#22863a, #7ee787);
  --lexxy-color-code-token-variable: light-dark(#e36209, #ffa657);

  /* Tables */
  --lexxy-color-table-header-bg: var(--rd-bg-sunken);
  --lexxy-color-table-cell-border: var(--rd-border);
  --lexxy-color-table-cell-selected: var(--rd-accent-soft);
  --lexxy-color-table-cell-selected-border: var(--rd-accent);
  --lexxy-color-table-cell-selected-bg: var(--rd-accent-soft);

  /* Accents */
  --lexxy-color-accent-dark: var(--rd-accent);
  --lexxy-color-accent-medium: var(--rd-accent);
  --lexxy-color-accent-light: var(--rd-accent-soft);
  --lexxy-color-accent-lightest: var(--rd-accent-soft);

  /* Focus ring */
  --lexxy-focus-ring-color: var(--rd-accent);

  /* Shadow */
  --lexxy-shadow: var(--rd-shadow-pop);

  /* Text highlight colors (Lexxy's built-in highlighter palette — kept as
     vivid utility colors, these don't benefit from re-theming) */
  --highlight-1: light-dark(rgb(255, 240, 102), rgb(255, 230, 102));
  --highlight-2: light-dark(rgb(255, 200, 102), rgb(255, 178, 102));
  --highlight-3: light-dark(rgb(255, 153, 153), rgb(255, 128, 128));
  --highlight-4: light-dark(rgb(255, 179, 230), rgb(255, 153, 221));
  --highlight-5: light-dark(rgb(220, 200, 255), rgb(204, 179, 255));
  --highlight-6: light-dark(rgb(153, 204, 255), rgb(128, 191, 255));
  --highlight-7: light-dark(rgb(153, 255, 153), rgb(128, 255, 128));
  --highlight-8: light-dark(rgb(230, 190, 153), rgb(221, 170, 128));
  --highlight-9: light-dark(rgb(200, 200, 200), rgb(179, 179, 179));

  --highlight-bg-1: light-dark(rgba(255, 240, 50, 0.3), rgba(229, 223, 6, 0.25));
  --highlight-bg-2: light-dark(rgba(255, 200, 100, 0.3), rgba(255, 185, 87, 0.25));
  --highlight-bg-3: light-dark(rgba(255, 130, 130, 0.3), rgba(255, 118, 118, 0.25));
  --highlight-bg-4: light-dark(rgba(255, 150, 220, 0.3), rgba(248, 137, 216, 0.25));
  --highlight-bg-5: light-dark(rgba(200, 170, 255, 0.3), rgba(190, 165, 255, 0.25));
  --highlight-bg-6: light-dark(rgba(130, 195, 255, 0.3), rgba(124, 192, 252, 0.25));
  --highlight-bg-7: light-dark(rgba(150, 255, 140, 0.3), rgba(140, 255, 129, 0.25));
  --highlight-bg-8: light-dark(rgba(230, 180, 130, 0.3), rgba(221, 170, 123, 0.25));
  --highlight-bg-9: light-dark(rgba(210, 210, 210, 0.3), rgba(200, 200, 200, 0.25));

  /* Shape */
  --lexxy-radius: var(--rd-radius-md);
}

/* Remove Lexxy's default border on the custom element itself. The composer
   wrapper (.cm-compose-body) and the inline description frame own the outer
   frame; the editor should be a transparent inner surface. Unlayered so it
   wins against Lexxy's default (also unlayered) via later declaration. */
lexxy-editor {
  border: 0;
}

/* Restore list markers stripped by our CSS reset (list-style: none) */
.lexxy-content ul,
.cm-text ul {
  list-style-type: disc;
  padding-inline-start: 1.5em;
}

.lexxy-content ol,
.cm-text ol {
  list-style-type: decimal;
  padding-inline-start: 1.5em;
}