/* Lexxy editor styles (centralized) */

/* 1) Theme variables (override Lexxy defaults) */
/* 値は theme.css のトークンを参照し、ライト/ダークの切替に追従させる */
:root {
  --lexxy-color-text: var(--color-text);
  --lexxy-color-border: var(--color-border);
  --lexxy-color-text-subtle: var(--color-muted);
  --lexxy-color-canvas: transparent;
  --lexxy-color-link: var(--color-accent);
  --lexxy-color-code-bg: var(--color-surface-2);
  --lexxy-color-selected: color-mix(in oklab, var(--color-accent) 15%, transparent);
  --lexxy-focus-ring-color: var(--color-accent);
}

/* 2) Editor surface */
lexxy-editor {
  background: transparent;
  color: var(--lexxy-color-text);
  border: 1px solid var(--lexxy-color-border);
  border-radius: .375rem;
}

/* 3) Toolbar theming */
lexxy-toolbar {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--lexxy-color-text) 12%, transparent);
  border-radius: .375rem;
  padding: 6px;
  border-block-end: 1px solid var(--lexxy-color-border);
}
lexxy-toolbar button {
  color: var(--lexxy-color-text-subtle);
}
lexxy-toolbar button[aria-pressed="true"],
lexxy-toolbar button:hover {
  color: var(--lexxy-focus-ring-color);
}
lexxy-toolbar button[name="upload"] {
  display: none;
}

/* 4) Content (rendered) */
.lexxy-content {
  background: transparent;
  color: var(--lexxy-color-text);;
  border-radius: .375rem;
}
.lexxy-content a { color: var(--color-accent); }
.lexxy-content p { margin-block: 0 .25rem; }
.lexxy-content h2 { margin-block: 0 .8rem; }
.lexxy-content h3 { margin-block: 0 .8rem; }
.lexxy-content h4 { margin-block: 0 .8rem; }

/* 5) Tailwind preflight resets (scoped undo using :where => zero specificity) */
lexxy-editor :where(ol, ul, menu),
.lexxy-content :where(ol, ul, menu) {
  list-style: revert;
  margin: revert;
  padding: revert;
}
lexxy-editor :where(h1,h2,h3,h4,h5,h6),
.lexxy-content :where(h1,h2,h3,h4,h5,h6) {
  font-size: revert;
  font-weight: revert;
  margin: revert;
}
lexxy-editor :where(blockquote),
.lexxy-content :where(blockquote) {
  margin: revert;
  padding: revert;
}

/* 6) Dialog tweaks */
.lexxy-link-dialog #link-dialog { background-color: var(--color-surface); color: var(--color-text); }
.lexxy-link-dialog #link-dialog .lexxy-dialog-actions [type="button"] { background-color: var(--color-surface-2); color: var(--color-text); }

/* 7) Editor internal content tweaks (kept minimal) */
.lexxy-editor__content {
  height: 500px;
  overflow-y: auto;
}
.lexxy-editor__content a { color: var(--color-accent); }
.lexxy-editor__content p { margin-block: 0 .25rem; }
.lexxy-editor__content h2 { margin-block: 0 .8rem; }
.lexxy-editor__content h3 { margin-block: 0 .8rem; }
.lexxy-editor__content h4 { margin-block: 0 .8rem; }