/*
 * Rouge syntax highlighting for the API docs, on the marketing palette.
 * Class names are Rouge's own — https://rouge-ruby.github.io/docs/file.Tokens.html —
 * so they must not be renamed. Colours are derived from the accent presets rather
 * than fixed, so a theme swap carries through.
 */
.mk-code {
  --syn-quiet: var(--code-quiet);
  --syn-string: color-mix(in oklab, var(--accent-green), var(--paper) 55%);
  --syn-key: color-mix(in oklab, var(--accent-cobalt), var(--paper) 58%);
  --syn-num: color-mix(in oklab, var(--accent-ochre), var(--paper) 62%);
  --syn-name: color-mix(in oklab, var(--accent-oxblood), var(--paper) 62%);
  --syn-punct: color-mix(in oklab, var(--paper), var(--ink) 42%);
}

/* Comments */
.highlight .c,
.highlight .cm,
.highlight .cp,
.highlight .c1,
.highlight .cs {
  color: var(--syn-quiet);
  font-style: italic;
}

/* Strings */
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .sh,
.highlight .sx,
.highlight .sr {
  color: var(--syn-string);
}

/* String interpolation and escapes */
.highlight .si,
.highlight .se {
  color: var(--syn-name);
}

/* Keywords */
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.highlight .kc {
  color: var(--syn-key);
}

/* Names — JSON keys, attributes, tags, functions */
.highlight .na,
.highlight .nl,
.highlight .nt,
.highlight .nf,
.highlight .fm,
.highlight .nb,
.highlight .nv,
.highlight .vi,
.highlight .vc,
.highlight .vg {
  color: var(--syn-key);
}

/* Classes, namespaces, constants, entities */
.highlight .nc,
.highlight .nn,
.highlight .ni,
.highlight .no {
  color: var(--syn-name);
}

/* Numbers */
.highlight .m,
.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .mo,
.highlight .mb,
.highlight .il,
.highlight .gi {
  color: var(--syn-num);
}

/* Operators and punctuation */
.highlight .o,
.highlight .ow,
.highlight .p {
  color: var(--syn-punct);
}

.highlight .gd { color: var(--syn-name); }
.highlight .ge { font-style: italic; }
.highlight .gs { font-weight: 500; }
.highlight .w { color: inherit; }
.highlight .err { color: inherit; }