/* Koodin erottuminen taustasta: rivitekstin koodin tausta ja tummassa
 * teemassa koodilohkon tausta. Teeman --md-code-bg-color erottuu kummassakin
 * teemassa sivun taustasta hädin tuskin. Ero tehdään pelkällä taustalla, ei
 * reunuksella: laatikko joka koodinpätkän ympärillä on levottomampi kuin
 * pinta. Pieni rivitekstin nappula tarvitsee suuremman eron kuin palstan
 * levyinen lohko, joten nappula korjataan kummassakin teemassa, lohko vain
 * tummassa. */

/* Kaikki kolme muuttujaa yhdessä: --light ja --lighter ovat nappirivin
 * tausta (.md-code__nav), joka kelluu lohkon päällä. 18 % on suurin arvo,
 * jolla teeman --lightillä piirtämät kommentit ja operaattorit pysyvät
 * WCAG AA:n yli. */
[data-md-color-scheme="slate"] {
  --md-code-bg-color: hsla(var(--md-hue), 20%, 18%, 1);
  --md-code-bg-color--light: hsla(var(--md-hue), 20%, 18%, 0.9);
  --md-code-bg-color--lighter: hsla(var(--md-hue), 20%, 18%, 0.54);
}

/* Rivitekstin koodi. Tausta on tekstivärin läpinäkyvä peitto eikä valmis
 * väri, koska nappuloita on myös laatikoissa, taulukoissa ja tehtäväkorteissa,
 * joiden tausta on eri. Vaaleassa peitto on pienempi: vaalealla pohjalla sama
 * ero näkyy selvemmin, ja 20 % näyttäisi raskaalta harmaalta laatikolta.
 * Varjo on letterpress-kohokuviointi: pikselin siirros taustan suuntaisella
 * värillä terävöittää merkkien reunan. Ilman sumennusta, jotta pieni kirjasin
 * ei mene utuiseksi. */
.md-typeset :not(pre) > code {
  background-color: color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
  text-shadow: 0 1px #fff;
}

[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  background-color: color-mix(in srgb, var(--md-default-fg-color) 20%, transparent);
  text-shadow: 0 1px #000;
}