/*
 * Lexxy editor — crafted for Hub and Spoke's editorial aesthetic.
 * Import Lexxy's base styles, then override variables with our design tokens.
 */
@import url("/assets/lexxy-variables-3fef4323.css") layer(base);
@import url("/assets/lexxy-content-0ff2f961.css") layer(base);
@import url("/assets/lexxy-editor-ba519c90.css") layer(base);

:root {
  /* Map Lexxy color variables to our design tokens */
  --lexxy-color-ink: var(--color-ink);
  --lexxy-color-ink-medium: var(--color-ink-light);
  --lexxy-color-ink-light: var(--color-muted);
  --lexxy-color-ink-lighter: var(--color-rule);
  --lexxy-color-ink-lightest: var(--color-paper-tint);
  --lexxy-color-ink-inverted: var(--color-paper);

  --lexxy-color-canvas: var(--color-paper);
  --lexxy-color-text: var(--color-ink);
  --lexxy-color-text-subtle: var(--color-muted);
  --lexxy-color-link: var(--color-accent);

  --lexxy-color-accent-dark: var(--color-accent);
  --lexxy-color-accent-medium: var(--color-accent-hover);
  --lexxy-color-accent-light: var(--color-rule);
  --lexxy-color-accent-lightest: var(--color-paper-tint);

  --lexxy-color-selected: var(--color-paper-tint);
  --lexxy-color-selected-hover: var(--color-rule);
  --lexxy-color-selected-dark: var(--color-accent);

  --lexxy-color-code-bg: var(--color-paper-tint);

  /* Typography — use our editorial fonts */
  --lexxy-font-base: var(--font-body);
  --lexxy-font-mono: var(--font-mono);
  --lexxy-text-small: var(--text-sm);
  --lexxy-content-margin: var(--space-4);

  /* Focus ring — oxblood accent */
  --lexxy-focus-ring-color: var(--color-accent);
  --lexxy-focus-ring-offset: 2px;
  --lexxy-focus-ring-size: 2px;

  /* Shape — no radius for editorial feel */
  --lexxy-radius: 0;
  --lexxy-shadow: none;
  --lexxy-toolbar-button-size: 2.25rem;
}

@layer components {
  /* Editor container — borderless, clean */
  lexxy-editor {
    --lexxy-editor-padding: var(--space-4);
    --lexxy-toolbar-gap: 0;
    --lexxy-toolbar-spacing: 0;

    border: var(--border);
    border-radius: 0;
    background-color: var(--color-paper);
  }

  /* Toolbar — understated rule separation */
  lexxy-toolbar {
    border-bottom: var(--border);
    padding: var(--space-2);
    gap: var(--space-1);
  }

  /* Content area — editorial type */
  .lexxy-content,
  lexxy-editor [contenteditable] {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.75;
    max-width: 65ch;
    color: var(--color-ink);

    & h1, & h2, & h3 {
      font-family: var(--font-display);
      letter-spacing: -0.02em;
    }

    & h1 {
      font-size: var(--text-3xl);
      font-weight: 400;
      letter-spacing: -0.02em;
      margin-block: var(--space-8) var(--space-3);
    }

    & h2 {
      font-size: var(--text-2xl);
      font-weight: 400;
      margin-block: var(--space-8) var(--space-3);
    }

    & h3 {
      font-size: var(--text-xl);
      font-weight: 400;
      margin-block: var(--space-6) var(--space-2);
    }

    & p {
      margin-block-end: var(--space-4);
    }

    & blockquote {
      border-inline-start: 2px solid var(--color-rule-strong);
      padding-inline-start: var(--space-4);
      margin-inline: 0;
      color: var(--color-muted);
      font-style: italic;
    }

    & pre {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      background: var(--color-paper-tint);
      padding: var(--space-4);
      overflow-x: auto;
    }

    & code {
      font-family: var(--font-mono);
      font-size: 0.9em;
      background: var(--color-paper-tint);
      padding: 0.1em 0.3em;
    }

    & pre code {
      background: none;
      padding: 0;
    }

    & ul, & ol {
      padding-inline-start: var(--space-6);
      margin-block-end: var(--space-4);
    }

    & a {
      color: var(--color-accent);
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }

    & img {
      max-width: 100%;
      margin-block: var(--space-4);
    }
  }
}