/* lexxy エディタを tenaoshi デザイントークンに統合する。
   lexxy 本体 CSS の **後** に読み込ませる必要がある（layouts 側参照）。
   lexxy 内部は :where() でラップされ specificity 0 なので素のクラスで上書き可能。 */

:root {
  /* Ink/Canvas — 文字色と背景を tenaoshi の ink/cream/border に揃える */
  --lexxy-color-ink:           var(--color-text);
  --lexxy-color-ink-medium:    var(--color-text-secondary);
  --lexxy-color-ink-light:     var(--color-text-tertiary);
  --lexxy-color-ink-lighter:   var(--color-border);
  --lexxy-color-ink-lightest:  var(--color-surface-muted);
  --lexxy-color-canvas:        var(--color-surface);
  --lexxy-color-text-subtle:   var(--color-text-secondary);
  /* --lexxy-color-text は lexxy 内部で var(--lexxy-color-ink) を参照するため
     ここで再定義不要 (上の --lexxy-color-ink が tenaoshi トークンに繋がる) */

  /* Accent — lexxy の青系を tomato (primary) に置換 */
  --lexxy-color-link:          var(--color-primary);
  --lexxy-color-accent-dark:   var(--color-primary);
  --lexxy-color-accent-medium: var(--color-primary-hover);
  --lexxy-color-accent-light:  var(--color-primary-subtle);
  --lexxy-color-accent-lightest: var(--color-primary-subtle);
  --lexxy-color-selected:      var(--color-primary-subtle);
  --lexxy-color-selected-hover: var(--color-surface-muted);

  /* Code / Table — honey 系で統一 */
  --lexxy-color-code-bg:            var(--color-surface-muted);
  --lexxy-color-table-header-bg:    var(--color-surface-muted);
  --lexxy-color-table-cell-border:  var(--color-border-subtle);

  /* Typography — tenaoshi の body フォントに揃える */
  --lexxy-font-base: var(--font-body);

  /* 角丸 — form-input の rounded-xl (0.75rem) に揃える */
  --lexxy-radius: 0.75rem;
}

/* エディタ枠を form-input と同じ感触に */
lexxy-editor {
  box-shadow: var(--shadow-sm);
}
lexxy-editor:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(228 90 63 / 0.18);
}