/*
 * WarDrivingMapper code-block theme — a Tokyo-Night-ish dark theme tuned
 * to match the navy/cream/coral palette the user picked out (Frigate docs
 * style). Applies to `<pre><code class="language-X">` blocks; inline
 * `<code>foo</code>` keeps its existing softer look from app.css so the
 * highlighted blocks stand out as the "real" code surfaces.
 */

/* The dark box itself */
pre[class*="language-"] {
  background: #1a2030;             /* navy — matches the screenshot */
  color: #e2e8f0;                  /* pale cream foreground for plain text */
  border-radius: 8px;
  padding: 16px 18px;
  margin: 14px 0;
  overflow-x: auto;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

pre[class*="language-"] code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
}

/* Token colors — picked to read well on the navy background */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata        { color: #6b7a90; font-style: italic; }

.token.punctuation  { color: #c9d1d9; }

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted      { color: #f7768e; }     /* coral — keys, properties */

.token.boolean,
.token.number       { color: #ff9e64; }     /* orange — numbers + true/false */

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.url,
.token.inserted     { color: #9ece6a; }     /* sage green — strings */

.token.operator,
.token.entity,
.token.variable     { color: #7dcfff; }     /* sky blue — operators, vars */

.token.atrule,
.token.attr-value,
.token.keyword,
.token.function,
.token.class-name   { color: #bb9af7; }     /* lavender — keywords + funcs */

.token.regex,
.token.important    { color: #ff9e64; }

.token.important,
.token.bold         { font-weight: 600; }

.token.italic       { font-style: italic; }

.token.namespace    { opacity: 0.7; }

/* Plain pre.codeblock without a language= class (e.g. ASCII diagrams) gets
   the same dark surface but no token colors, so the wiring diagram + plain
   examples still look consistent with the highlighted blocks. */
pre.codeblock {
  background: #1a2030;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 16px 18px;
  margin: 14px 0;
  overflow-x: auto;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
pre.codeblock code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}