/*
 * The syntax palette — one rule per class `js/highlight.js` can emit.
 *
 * Ported from `apps/terse-browser/terse_browser/static/` (`styles.css`'s
 * `.tm.*` block, whose classes `terse_highlight.js` emits). That scheme is
 * itself the VS Code plugin's TextMate palette re-tuned for a dark, low-chroma
 * page, which is why it is the one the explorer wears: the same document reads
 * the same in both apps, and both trace back to the editor people already use.
 *
 * The mapping from token kind to class lives in `js/highlight.js`, and the two
 * files are kept honest by `terse-ts/test/highlighter.test.ts`: every kind in
 * `TOKEN_KINDS` has a class, no class names a kind the library does not have,
 * and every class the fold can emit has a rule **here**. This file is the whole
 * appearance of TERSE text on the page — composer overlays, log entries and the
 * state drawer all render through the same fold, so they cannot drift apart.
 *
 * The correspondence, ported class → this one:
 *   .tm.comment                         → .t-comment
 *   .tm.depth/query/directive/wild/…    → .t-keyword
 *   .tm.name-container                  → .t-name-container
 *   .tm.name-object                     → .t-name-object
 *   .tm.key/colon                       → .t-key
 *   .tm.number/date/bool                → .t-value
 *   .tm.flag/value/bracketed            → .t-bareword
 *   .tm.string/string-triple            → .t-string / .t-text
 *   .tm.str-punct                       → .t-string-punct
 *   .tm.ref/ref-at                      → .t-reference
 *   .tm.paren/semi/dot/tail-brack       → .t-punct
 *   .tm.reserved                        → .t-error
 * Query-path names and directive arguments are `.t-plain` because the ported
 * scheme leaves them at the page's own foreground — they are the text, not a
 * construct inside it.
 */

.t-plain {
  color: #e8eef8;
}

.t-punct {
  color: #8b9bb4;
}

.t-comment {
  color: #6a737d;
  font-style: italic;
}

.t-keyword {
  color: #d2a8ff;
}

.t-name-container {
  color: #e3b341;
}

.t-name-object {
  color: #e6c07b;
}

.t-key {
  color: #b5cea8;
}

.t-value {
  color: #6cb6ff;
}

.t-bareword {
  color: #9cdcfe;
}

.t-string {
  color: #ce9178;
}

/* The `"""` fence: the same hue as what it wraps, stepped back so the content
   reads first. */
.t-string-punct {
  color: #ce9178;
  opacity: 0.85;
}

.t-text {
  color: #ce9178;
}

.t-reference {
  color: #4ec9b0;
}

/* Bytes the scanner could not classify. Colour *and* a squiggle, so the mark
   survives a reader who cannot tell red from grey. */
.t-error {
  color: #fb7185;
  text-decoration: underline wavy #fb7185;
  text-underline-offset: 3px;
}

/* The two mark levels, laid over whatever colour the token already has. The
   hues are the shell's `--err` and `--warn`, written out because this file is
   loaded on its own by the palette-totality test. */
.mk-error {
  background: rgba(251, 113, 133, 0.16);
  text-decoration: underline wavy #fb7185;
  text-underline-offset: 3px;
}

.mk-warning {
  background: rgba(251, 191, 36, 0.16);
  text-decoration: underline wavy #fbbf24;
  text-underline-offset: 3px;
}