.examples-preview-yaml .syntax-key,
.examples-preview-yaml .syntax-type-key,
.examples-preview-yaml .syntax-marker {
  color: #2563eb;
}

.studio-editor-highlight .syntax-type-key,
.studio-editor-highlight .syntax-type-reference,
.studio-codemirror .syntax-type-key,
.studio-codemirror .syntax-type-reference,
.examples-preview-yaml .syntax-type-reference {
  color: #2563eb;
}

.studio-editor-highlight .syntax-directive-key,
.studio-codemirror .syntax-directive-key,
.examples-preview-yaml .syntax-directive-key {
  color: #7c3aed;
}

.studio-editor-highlight .syntax-field-key,
.studio-editor-highlight .syntax-field-reference,
.studio-codemirror .syntax-field-key,
.studio-codemirror .syntax-field-reference,
.examples-preview-yaml .syntax-field-key,
.examples-preview-yaml .syntax-field-reference {
  color: #b45309;
}

.studio-codemirror .syntax-string {
  color: #0891b2;
}

.studio-codemirror .syntax-number {
  color: #16a34a;
}

.studio-codemirror .syntax-literal {
  color: #c2410c;
}

.studio-codemirror .syntax-comment,
.studio-codemirror .syntax-marker {
  color: #64748b;
}

.studio-codemirror .cm-line.syntax-indent-guided {
  --indent-guide-color: rgba(148, 163, 184, 0.28);
}

.studio-codemirror .cm-line.syntax-indent-guided::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--indent-guide-image);
  background-position: var(--indent-guide-position);
  background-repeat: no-repeat;
  background-size: 1px 100%;
}

.studio-codemirror .syntax-string.syntax-type-reference,
.studio-codemirror .syntax-string .syntax-type-reference,
.studio-codemirror .syntax-type-reference .syntax-string {
  color: #2563eb;
}

.studio-codemirror .syntax-string.syntax-field-reference,
.studio-codemirror .syntax-string .syntax-field-reference,
.studio-codemirror .syntax-field-reference .syntax-string {
  color: #b45309;
}

.examples-preview-yaml .syntax-string {
  color: #0891b2;
}

.examples-preview-yaml .syntax-number {
  color: #16a34a;
}

.examples-preview-yaml .syntax-literal {
  color: #c2410c;
}

.examples-preview-yaml .syntax-comment {
  color: #64748b;
}

@media (prefers-color-scheme: dark) {
