/*
 * Lexxy editor Tailwind color theme overrides
 *
 * The official Lexxy CSS (imported via stylesheet_link_tag "lexxy") handles
 * all layout, structure, and behavior. This file only customizes colors to
 * match our Tailwind theme while preserving Lexxy's functionality.
 */

/* Override Lexxy CSS variables for Tailwind color scheme */
:root {
  /* Editor colors */
  --lexxy-color-canvas: rgb(255 255 255);
  --lexxy-color-ink: rgb(17 24 39);
  --lexxy-color-ink-lighter: rgb(209 213 219);
  --lexxy-color-ink-lightest: rgb(243 244 246);

  /* Focus ring */
  --lexxy-focus-ring-color: rgb(79 70 229);

  /* Selection color */
  --lexxy-color-selected: rgb(224 231 255);
  --lexxy-color-selected-dark: rgb(79 70 229);

  /* Code highlighting (keeping defaults but with Tailwind values) */
  --lexxy-color-code-token-att: rgb(139 92 246);
  --lexxy-color-code-token-property: rgb(239 68 68);
  --lexxy-color-code-token-selector: rgb(34 197 94);
  --lexxy-color-code-token-comment: rgb(107 114 128);
  --lexxy-color-code-token-operator: rgb(234 179 8);
  --lexxy-color-code-token-function: rgb(59 130 246);
  --lexxy-color-code-token-variable: rgb(236 72 153);
  --lexxy-color-code-token-punctuation: rgb(107 114 128);
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    --lexxy-color-canvas: rgba(255, 255, 255, 0.05);
    --lexxy-color-ink: rgb(255 255 255);
    --lexxy-color-ink-lighter: rgba(255, 255, 255, 0.1);
    --lexxy-color-ink-lightest: rgb(31 41 55);

    --lexxy-focus-ring-color: rgb(99 102 241);

    --lexxy-color-selected: rgba(99, 102, 241, 0.2);
    --lexxy-color-selected-dark: rgb(99 102 241);
  }
}

/* Minimal adjustments for form integration */
lexxy-editor {
  /* Match Tailwind form input styling */
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Ensure rendered content in views uses proper styling */
.trix-content,
.lexxy-content {
  /* Let Tailwind prose handle most styling in public views */
  line-height: 1.75;
}

/* Action Text attachments - keep existing behavior */
.trix-content .attachment,
.lexxy-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin: 0.5rem 0;
}

.trix-content .attachment img,
.lexxy-content .attachment img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
}