/* Syntax highlighting, mapping the reference design's palette onto Chroma's
   class names. The defining trait is that code has a BLUE base colour rather
   than near-black: only keywords, strings, variables, comments and attributes
   deviate from it, so a shell snippet reads mostly blue.

   Light values are darkened from the original where it failed WCAG AA on this
   background (comment 2.23, string 2.93, keyword 3.43 -> all >= 4.5). Dark
   values pass as-is. */

:root {
  --src-default: #336699;
  --src-comment: #5d6e7e;
  --src-keyword: #c03c2f;
  --src-string: #2a7c31;
  --src-variable: #a626a4;
  --src-attribute: #986801;
  --src-gutter: #8ba3b5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --src-default: #70b7ff;
    --src-comment: #99aabb;
    --src-keyword: #ff8f8f;
    --src-string: #0fd537;
    --src-variable: #ff81fd;
    --src-attribute: #ffae00;
    --src-gutter: #6c7f8a;
  }
}

/* Surface and base text */
.chroma,
.chroma .bg {
  background-color: var(--well-bg);
  color: var(--src-default);
}

/* Line numbers */
.chroma .ln,
.chroma .lnt {
  color: var(--src-gutter);
  white-space: pre;
  user-select: none;
  -webkit-user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em;
}
.chroma .line { display: flex; }
.chroma .hl { background-color: rgba(128, 160, 180, 0.18); }
.chroma .lntd, .chroma .lntable {
  vertical-align: top; padding: 0; margin: 0; border: 0; border-spacing: 0;
}

/* Comments */
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1,
.chroma .cs, .chroma .cp, .chroma .cpf {
  color: var(--src-comment);
  font-style: italic;
}

/* Keywords */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
.chroma .kp, .chroma .kr, .chroma .kt {
  color: var(--src-keyword);
}

/* Strings */
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl,
.chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si,
.chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss {
  color: var(--src-string);
}

/* Variables and types */
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm,
.chroma .nc, .chroma .nn, .chroma .no {
  color: var(--src-variable);
}

/* Attributes and numbers */
.chroma .na, .chroma .m, .chroma .mb, .chroma .mf,
.chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
  color: var(--src-attribute);
}

/* Everything else stays the base blue: builtins, functions, operators,
   punctuation, tags. This is what gives the blocks their overall colour. */
.chroma .nb, .chroma .nf, .chroma .fm, .chroma .nt, .chroma .nl,
.chroma .nd, .chroma .ni, .chroma .ne, .chroma .nx, .chroma .py,
.chroma .o, .chroma .ow, .chroma .p, .chroma .n {
  color: var(--src-default);
}

/* Diff and generic output */
.chroma .gd { color: var(--src-keyword); }
.chroma .gi { color: var(--src-string); }
.chroma .gu, .chroma .gh { color: var(--src-variable); font-weight: bold; }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: bold; }
.chroma .err { color: var(--src-keyword); }

/* Fences with no language get no Chroma classes, so colour the bare <pre>
   to match, or highlighted and plain blocks would differ. */
pre:not(.chroma) {
  color: var(--src-default);
}