:root {
  --lexxy-popup-background: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lexxy-color-ink: #f8fafc;
    --lexxy-color-ink-medium: #cbd5e1;
    --lexxy-color-ink-light: #94a3b8;
    --lexxy-color-ink-lighter: #475569;
    --lexxy-color-ink-lightest: #334155;
    --lexxy-color-ink-inverted: #0f172a;

    --lexxy-popup-background: #1e293b;
    --lexxy-color-text: #f8fafc;
    --lexxy-color-text-subtle: #cbd5e1;
    --lexxy-color-code-bg: #1e293b;

    --lexxy-color-accent-lightest: #334155;
    --lexxy-color-accent-light: #475569;
    --lexxy-color-selected: #334155;
    --lexxy-color-selected-hover: #475569;
    --lexxy-color-selected-dark: #60a5fa;

    --lexxy-color-table-header-bg: #334155;
    --lexxy-color-table-cell-border: #475569;
    --lexxy-color-table-cell-selected-bg: #334155;
    --lexxy-color-code-token-att: #fca5a5;
    --lexxy-color-code-token-comment: #94a3b8;
    --lexxy-color-code-token-function: #c4b5fd;
    --lexxy-color-code-token-operator: #fca5a5;
    --lexxy-color-code-token-property: #93c5fd;
    --lexxy-color-code-token-punctuation: #e2e8f0;
    --lexxy-color-code-token-selector: #86efac;
    --lexxy-color-code-token-variable: #fdba74;
  }
}

.dark {
  --lexxy-color-ink: #f8fafc;
  --lexxy-color-ink-medium: #cbd5e1;
  --lexxy-color-ink-light: #94a3b8;
  --lexxy-color-ink-lighter: #475569;
  --lexxy-color-ink-lightest: #334155;
  --lexxy-color-ink-inverted: #0f172a;

  --lexxy-popup-background: #1e293b;
  --lexxy-color-text: #f8fafc;
  --lexxy-color-text-subtle: #cbd5e1;
  --lexxy-color-code-bg: #1e293b;

  --lexxy-color-accent-lightest: #334155;
  --lexxy-color-accent-light: #475569;
  --lexxy-color-selected: #334155;
  --lexxy-color-selected-hover: #475569;
  --lexxy-color-selected-dark: #60a5fa;

  --lexxy-color-table-header-bg: #334155;
  --lexxy-color-table-cell-border: #475569;
  --lexxy-color-table-cell-selected-bg: #334155;
  --lexxy-color-code-token-att: #fca5a5;
  --lexxy-color-code-token-comment: #94a3b8;
  --lexxy-color-code-token-function: #c4b5fd;
  --lexxy-color-code-token-operator: #fca5a5;
  --lexxy-color-code-token-property: #93c5fd;
  --lexxy-color-code-token-punctuation: #e2e8f0;
  --lexxy-color-code-token-selector: #86efac;
  --lexxy-color-code-token-variable: #fdba74;
}

/* Editor toolbar — fixed rem sizes so prose-xl line-height doesn't inflate buttons. */
lexxy-editor {
  --lexxy-color-canvas: transparent;
  --lexxy-toolbar-button-size: 2rem;
  --lexxy-toolbar-icon-size: 1.125rem;

  border: none;
  border-radius: 0;
  background-color: transparent;
}

lexxy-editor [data-dropdown-panel],
lexxy-editor .lexxy-prompt-menu {
  background-color: var(--lexxy-popup-background);
}

lexxy-editor .lexxy-editor__toolbar-dropdown-list button {
  background-color: transparent;
  border-radius: var(--lexxy-radius);
}

lexxy-editor .lexxy-editor__toolbar-dropdown--link input[type="url"],
lexxy-editor lexxy-code-language-picker select {
  background-color: var(--lexxy-popup-background);
}

/* Lexxy 0.9 exports semantic tags; class-based rules live in gem CSS. */
.lexxy-content s,
.lexxy-content del,
.lexxy-content .lexxy-content__strikethrough {
  text-decoration: line-through;
}

.lexxy-content u,
.lexxy-content .lexxy-content__underline {
  text-decoration: underline;
}

.lexxy-content s u,
.lexxy-content u s,
.lexxy-content del u,
.lexxy-content u del,
.lexxy-content .lexxy-content__strikethrough.lexxy-content__underline {
  text-decoration: line-through underline;
}

lexxy-editor lexxy-toolbar {
  font-size: 1rem;
  inline-size: max-content;
  max-inline-size: 100%;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  margin-block: 0 1rem;
  border-block-end: none;
  background-color: rgb(255 255 255 / 0.5);
  backdrop-filter: blur(12px);
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
  z-index: 10;
}

.dark lexxy-editor lexxy-toolbar {
  background-color: rgb(30 41 59 / 0.8);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) lexxy-editor lexxy-toolbar {
    background-color: rgb(30 41 59 / 0.8);
  }
}

lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button,
lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button,
lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu .lexxy-editor__toolbar-button {
  aspect-ratio: 1;
  block-size: var(--lexxy-toolbar-button-size);
  inline-size: var(--lexxy-toolbar-button-size);
  min-inline-size: var(--lexxy-toolbar-button-size);
  max-inline-size: var(--lexxy-toolbar-button-size);
  padding: 0;
  border: 0;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  flex: none;
  background-color: rgb(248 250 252 / 0.5);
}

.dark lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button,
.dark lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button,
.dark lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu .lexxy-editor__toolbar-button {
  background-color: rgb(148 163 184 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button,
  :root:not(.light) lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button,
  :root:not(.light) lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu .lexxy-editor__toolbar-button {
    background-color: rgb(148 163 184 / 0.5);
  }
}

lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button[aria-pressed="true"],
lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button[aria-pressed="true"] {
  background-color: var(--lexxy-color-selected);
}

lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-button--chevron,
lexxy-editor lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button--chevron {
  aspect-ratio: unset;
  inline-size: auto;
  max-inline-size: none;
  min-inline-size: calc(var(--lexxy-toolbar-button-size) + 0.75rem);
  padding-inline: 0.5rem;
}

lexxy-editor [data-dropdown-panel]:not(.lexxy-editor__toolbar-overflow-menu) .lexxy-editor__toolbar-button {
  aspect-ratio: unset;
  block-size: auto;
  min-block-size: var(--lexxy-toolbar-button-size);
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: none;
  padding-inline: 2ch;
  border-radius: var(--lexxy-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex: 1;
  background-color: var(--lexxy-color-ink-lightest);
}

lexxy-editor .lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] button[value="link"] {
  background-color: var(--lexxy-color-accent-dark);
  color: var(--lexxy-color-ink-inverted);
}

lexxy-editor .lexxy-editor__toolbar-dropdown--highlight [data-dropdown-panel] .lexxy-editor__toolbar-dropdown-reset {
  flex: none;
  inline-size: 100%;
  white-space: nowrap;
}

lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-dropdown {
  flex: none;
}

lexxy-editor lexxy-toolbar .lexxy-editor__toolbar-overflow-menu {
  background-color: var(--lexxy-popup-background);
  backdrop-filter: blur(16px);
  border-radius: 0.5rem;
  padding: 0.5rem;
  z-index: 10;
}