/* Lexxy rich-text editor + rendered content, mapped onto MapleDrop's design
   tokens. The gem ships sane defaults in lexxy-variables.css; we pull those in
   and override only the brand-relevant colors, fonts, and radius so the editor
   and stored content match the app (and flip for free under dark mode, since
   these point at the semantic --color-* tokens). */
@import url("/assets/lexxy-variables-3fef4323.css") layer(base);
@import url("/assets/lexxy-content-0ff2f961.css") layer(base);
@import url("/assets/lexxy-editor-2d5c7ebe.css") layer(base);

:root {
  --lexxy-color-ink:          var(--color-ink);
  --lexxy-color-ink-medium:   var(--color-text-subtle);
  --lexxy-color-ink-light:    var(--color-text-muted);
  --lexxy-color-ink-lighter:  var(--color-border);
  --lexxy-color-ink-lightest: var(--color-bg);
  --lexxy-color-ink-inverted: var(--color-canvas);

  --lexxy-color-canvas: var(--color-canvas);

  /* MapleDrop's accent is the maple red, not Lexxy's default blue. */
  --lexxy-color-accent-dark:     var(--color-primary);
  --lexxy-color-accent-medium:   var(--color-primary-press);
  --lexxy-color-accent-light:    var(--color-mist);
  --lexxy-color-accent-lightest: var(--color-mist);

  --lexxy-color-link:  var(--color-link);
  --lexxy-color-red:   var(--color-down);
  --lexxy-color-green: var(--color-up);

  --lexxy-font-base: var(--font-sans);
  --lexxy-font-mono: var(--font-mono);

  --lexxy-radius:           var(--radius-sm);
  --lexxy-focus-ring-color: var(--focus-ring-color);
}

@layer components {
  lexxy-editor { border-radius: var(--radius-md); }

  /* In the composer the form provides the frame, so the editor itself goes
     borderless and its toolbar sticks to the top as the content area grows. */
  .composer lexxy-editor { border: none; background: transparent; }
  .composer lexxy-toolbar {
    position: sticky; inset-block-start: 0; z-index: 1;
    background: var(--color-canvas);
  }
}