/*
 * highlight.js theme matching the DSL EDITOR in dark mode.
 *
 * The editor is CodeMirror with @codemirror/theme-one-dark; the read-only
 * viewer is highlight.js. Two different highlighters showing the same Ruby DSL
 * on the same page looked like two different languages, so this file makes the
 * viewer agree with the editor rather than the other way round.
 *
 * Colours are MEASURED from the running editor (getComputedStyle on .cm-content
 * spans), not copied from a palette that might be overridden:
 *
 *   background  rgb(40,44,52)    #282c34
 *   foreground  rgb(171,178,191) #abb2bf   ivory
 *   `do`/`end`  rgb(198,120,221) #c678dd   violet   -> keyword
 *   `:welcome`  rgb(209,154,102) #d19a66   whiskey  -> atom / symbol
 *   `"text"`    rgb(152,195,121) #98c379   sage     -> string
 *   `Inquirex`  rgb(229,192,123) #e5c07b   chalky   -> class / type / number
 *   `define`    rgb(224,108,117) #e06c75   coral    -> name / property
 *   `.`         rgb(86,182,194)  #56b6c2   cyan     -> operator / punctuation
 *   comments                     #7d8799   stone
 *
 * If the editor theme changes, re-measure rather than guessing.
 */

.hljs {
  color: #abb2bf;
  background: #282c34;
}

/* comment, meta — stone */
.hljs-comment,
.hljs-quote,
.hljs-meta {
  color: #7d8799;
}

/* keyword, storage — violet. `do`, `end`, `def`, `if` */
.hljs-keyword,
.hljs-selector-tag,
.hljs-doctag {
  color: #c678dd;
}

/* atom, bool, symbol — whiskey. Ruby symbols (`:welcome`, `to:`) are most of a
   flow DSL, so this is the colour the eye reads most. */
.hljs-symbol,
.hljs-literal,
.hljs-bullet {
  color: #d19a66;
}

/* string, inserted — sage */
.hljs-string,
.hljs-addition {
  color: #98c379;
}

/* name, propertyName — coral. The bare `.hljs-title` is declared here, ahead of
   the compound `.hljs-title.class_` below, so specificity ascends down the file:
   the more specific class/function variants override this one on cascade order
   as well as weight. Declared the other way round it still worked, but only by
   specificity, which linters flag and readers have to verify by hand. */
.hljs-title {
  color: #e06c75;
}

/* number, className, typeName, annotation — chalky */
.hljs-number,
.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type,
.hljs-built_in,
.hljs-section {
  color: #e5c07b;
}

/* name, propertyName, deleted — coral. Method calls such as `define`. */
.hljs-name,
.hljs-tag,
.hljs-title.function_,
.hljs-function .hljs-title,
.hljs-attr,
.hljs-attribute,
.hljs-property,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-deletion {
  color: #e06c75;
}

/* operator, escape, regexp, link — cyan */
.hljs-operator,
.hljs-punctuation,
.hljs-regexp,
.hljs-char.escape_,
.hljs-link,
.hljs-subst {
  color: #56b6c2;
}

/* variable, parameter — foreground, as in the editor */
.hljs-variable,
.hljs-template-variable,
.hljs-params {
  color: #abb2bf;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}