/* code.css — syntax highlighting for fenced code blocks.
 *
 * Put a language class on the <pre> (e.g. class="lang-program"). The class
 * prints the language name in the top-right corner of the block and turns on
 * the token palette. Colours are applied by wrapping parts of the code in
 * spans: .tok-keyword, .tok-type, .tok-var, .tok-symbol, .tok-const.
 *
 * The palette is the rainbow stripe from under the navigation, lifted a little
 * for legibility on the dark code background. More languages can be added later
 * by giving their blocks a new lang-* class and an ::after label below.
 */

pre[class*="lang-"] { position: relative; padding-top: 2.3em; }

pre[class*="lang-"]::after {
  position: absolute; top: 0; right: 0;
  padding: 4px 11px;
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #908f84;
  background: rgba(255, 255, 255, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 8px;
}

/* one rule per supported language */
pre.lang-program::after { content: "Program"; }
pre.lang-javascript::after { content: "JavaScript"; }
pre.lang-typescript::after { content: "TypeScript"; }
pre.lang-dart::after { content: "Dart"; }
pre.lang-swift::after { content: "Swift"; }
pre.lang-go::after { content: "Go"; }
pre.lang-rust::after { content: "Rust"; }
pre.lang-zig::after { content: "Zig"; }
pre.lang-json::after { content: "JSON"; }
pre.lang-syntax::after { content: "Syntax"; }

/* token palette — the nav-stripe hues, but at full brightness for the dark code
   block. Each colour keeps the hue of its stripe variable and pushes saturation
   and lightness up, rather than mixing toward white (which only dulled them).
   types are purple and function calls blue (so they read apart); the only symbol
   is "=", in grey. The plain hex is a fallback for browsers without hsl(). */
.tok-keyword { color: #f86e4f; color: hsl(11 92% 64%); }   /* retro-red    hue */
.tok-type    { color: #b98cf8; color: hsl(265 88% 76%); }  /* retro-violet hue */
.tok-call    { color: #59a6f8; color: hsl(211 92% 66%); }  /* retro-blue   hue */
.tok-var     { color: #40dd60; color: hsl(132 70% 56%); }  /* retro-green  hue */
.tok-const   { color: #fab22e; color: hsl(39 95% 58%); }   /* retro-amber  hue */
.tok-symbol  { color: #9d9d93; }
.tok-comment { color: #6c6b62; font-style: italic; }       /* muted, for schema notes */