/* Token colours for the chroma classes petroglyph writes: GitHub's prettylights
   palette, one block per theme in the shape accentCSS emits for --accent, so a
   stored data-theme beats the media query and no theme attribute falls back to
   the light block.

   A token rule names a variable and never a colour, so the two palettes cannot
   drift by one rule; TestChromaPalette checks every variable a rule uses is
   defined in all three blocks, and that each colour clears AA contrast on the
   surface it is drawn on. Output and prompt text carry no rule at all and take
   the block's own foreground, the way GitHub renders them. */

:root,
[data-theme="light"] {
  --code-keyword: #cf222e; --code-entity: #8250df; --code-variable: #953800;
  --code-tag: #116329; --code-string: #0a3069; --code-constant: #0550ae;
  --code-comment: #57606a;
  --code-error: #cf222e; --code-error-bg: #ffebe9;
  --code-deleted: #86181d; --code-deleted-bg: #ffebe9;
  --code-inserted: #116329; --code-inserted-bg: #dafbe1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --code-keyword: #ff7b72; --code-entity: #d2a8ff; --code-variable: #ffa657;
    --code-tag: #7ee787; --code-string: #a5d6ff; --code-constant: #79c0ff;
    --code-comment: #8b949e;
    --code-error: #ff7b72; --code-error-bg: rgba(248, 81, 73, .15);
    --code-deleted: #ffa198; --code-deleted-bg: rgba(248, 81, 73, .15);
    --code-inserted: #7ee787; --code-inserted-bg: rgba(63, 185, 80, .15);
  }
}

[data-theme="dark"] {
  --code-keyword: #ff7b72; --code-entity: #d2a8ff; --code-variable: #ffa657;
  --code-tag: #7ee787; --code-string: #a5d6ff; --code-constant: #79c0ff;
  --code-comment: #8b949e;
  --code-error: #ff7b72; --code-error-bg: rgba(248, 81, 73, .15);
  --code-deleted: #ffa198; --code-deleted-bg: rgba(248, 81, 73, .15);
  --code-inserted: #7ee787; --code-inserted-bg: rgba(63, 185, 80, .15);
}

/* var(--code-bg) is also what article pre paints an unhighlighted fence with, so
   the two kinds of block agree through the theme rather than through this file. */
.chroma { background-color: var(--code-bg); }
.chroma .line { display: flex }

/* Keyword.Constant, .Declaration, .Namespace, .Pseudo, .Reserved, and .Type: one
   keyword colour, because a keyword's colour does not change with the slot it
   fills and the separate type colour was a difference no reader saw. */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr,
.chroma .kt { color: var(--code-keyword) }

/* .fm is a magic function (__init__) and .ni an entity reference (&); both
   are names to GitHub, so they take the entity colour the other names use. */
.chroma .nc, .chroma .nd, .chroma .ne, .chroma .fm, .chroma .nf, .chroma .nl,
.chroma .nn, .chroma .ni {
  color: var(--code-entity);
}

.chroma .na, .chroma .nb, .chroma .bp, .chroma .no, .chroma .nv, .chroma .vc,
.chroma .vg, .chroma .vi, .chroma .vm { color: var(--code-variable) }

.chroma .nt { color: var(--code-tag) }

.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd,
.chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1,
.chroma .ss { color: var(--code-string) }

/* An escape is a constant to GitHub, so it joins the numbers rather than the
   string it sits inside. */
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il,
.chroma .mo, .chroma .se { color: var(--code-constant) }

/* GitHub draws operators in the constant blue, not in the text colour: .o is
   punctuation that computes (:=, +), .ow a word operator (and, not), .or a
   reserved one. */
.chroma .o, .chroma .ow, .chroma .or { color: var(--code-constant) }

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

.chroma .err { color: var(--code-error); background-color: var(--code-error-bg) }
.chroma .gr, .chroma .gt { color: var(--code-error) }

.chroma .gd { color: var(--code-deleted); background-color: var(--code-deleted-bg) }
.chroma .gi { color: var(--code-inserted); background-color: var(--code-inserted-bg) }

.chroma .gh, .chroma .gu { color: var(--code-constant); font-weight: 600 }

.chroma .ge { font-style: italic }
.chroma .gs { font-weight: 600 }
.chroma .gl { text-decoration: underline }

/* Every space and newline carries .w from chroma v2.27 on, so this may set a
   colour and never a background: a tint here would paint all whitespace. */
.chroma .w { color: var(--line) }