/* Lexxy ships its own stylesheets; we import them into the base layer and only
   map its CSS variables onto our Tailwind palette (same pattern as Fizzy).
   Tailwind utilities live in a later layer, so classes on the editor still win. */
@import url("/assets/lexxy-variables-3fef4323.css") layer(base);
@import url("/assets/lexxy-content-0ff2f961.css") layer(base);
@import url("/assets/lexxy-editor-5b842411.css") layer(base);

:root {
  --lexxy-color-ink: #1f2937; /* gray-800 */
  --lexxy-color-ink-medium: #6b7280; /* gray-500 */
  --lexxy-color-ink-light: #d1d5db; /* gray-300 */
  --lexxy-color-ink-lighter: #e5e7eb; /* gray-200 */
  --lexxy-color-ink-lightest: #f3f4f6; /* gray-100 */
  --lexxy-color-ink-inverted: #ffffff;

  --lexxy-color-canvas: #ffffff;
  --lexxy-color-link: #2563eb; /* blue-600 */

  --lexxy-color-accent-dark: #2563eb; /* blue-600 */
  --lexxy-color-accent-medium: #60a5fa; /* blue-400 */
  --lexxy-color-accent-light: #bfdbfe; /* blue-200 */
  --lexxy-color-accent-lightest: #eff6ff; /* blue-50 */

  --lexxy-font-base: ui-sans-serif, system-ui, sans-serif;
  --lexxy-focus-ring-color: #3b82f6; /* blue-500 */
}

.dark {
  --lexxy-color-ink: #e5e7eb; /* gray-200 */
  --lexxy-color-ink-medium: #9ca3af; /* gray-400 */
  --lexxy-color-ink-light: #4b5563; /* gray-600 */
  --lexxy-color-ink-lighter: #374151; /* gray-700 */
  --lexxy-color-ink-lightest: #111827; /* gray-900 */
  --lexxy-color-ink-inverted: #000000;

  --lexxy-color-canvas: #000000;
  --lexxy-color-link: #60a5fa; /* blue-400 */

  --lexxy-color-accent-dark: #60a5fa; /* blue-400 */
  --lexxy-color-accent-medium: #3b82f6; /* blue-500 */
  --lexxy-color-accent-light: #1e3a5f;
  --lexxy-color-accent-lightest: #172554; /* blue-950 */

  --lexxy-focus-ring-color: #60a5fa; /* blue-400 */
}

@layer components {
  lexxy-editor {
    /* Finger-sized toolbar buttons on touch screens, compact on desktop. */
    --lexxy-toolbar-button-size: 2.75rem;
  }

  @media (min-width: 640px) {
    lexxy-editor {
      --lexxy-toolbar-button-size: 2rem;
    }
  }

  lexxy-toolbar {
    background-color: var(--lexxy-color-canvas);
    /* The sticky background would otherwise paint square over the editor's
       rounded top corners, so it takes the same radius. */
    border-start-start-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
    border-start-end-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
  }

  /* Trim the toolbar to what descriptions and comments actually use — the same
     mechanism the gem uses to drop its upload buttons ([data-attachments]). */
  lexxy-toolbar :is(
    button[name="quote"],
    button[name="code"],
    button[name="table"],
    button[name="divider"],
    lexxy-highlight-dropdown
  ) {
    display: none;
  }
}