/* The Playground's code editor (frontend/src/playground/editor.ts): the host element it mounts in, and the syntax
   colours its highlighting reads. Everything inside the editor is styled by its CodeMirror theme, in the site's tokens
   (it lives in a shadow root: the page's CSP refuses the <style> element CodeMirror would add to the document), so
   these custom properties are the way in: they inherit through the shadow root, and a change here, or to style.css's
   tokens, shows at once. The editor fills the host; the page sets the host's height (the default suits a phone). */
.pg-editor {
  display: block; position: relative; height: 26rem; min-height: 12rem; max-height: 80vh;
  --pg-syn-keyword: var(--violet);
  --pg-syn-string: var(--amber);
  --pg-syn-number: var(--seat2-ink);
  --pg-syn-function: var(--teal);
  --pg-syn-type: var(--seat7-ink);
  --pg-syn-comment: var(--ink-2);
  --pg-syn-property: var(--ink);
  --pg-syn-punctuation: var(--ink-2);
}
@media (min-width: 900px) { .pg-editor { height: 34rem; } }

/* The site is dark only today (base.html: data-theme="dark"). A light theme would redefine style.css's tokens; the
   syntax colours here are the editor's own, so they carry a light set that keeps 4.5:1 on a light sheet. */
:root[data-theme="light"] .pg-editor {
  --pg-syn-keyword: #6d28d9;
  --pg-syn-string: #92400e;
  --pg-syn-number: #1d4ed8;
  --pg-syn-function: #0f766e;
  --pg-syn-type: #be185d;
  --pg-syn-comment: #5b6577;
  --pg-syn-punctuation: #4b5565;
}