/* Soft Bauhaus code theme (site addition; not part of design-handoff/reference/).
   Loaded after full-site.css, whose block, size and spacing rules it keeps.
   Palette: the Bauhaus primaries plus the secondary colours of Itten's wheel and the
   earth tones of Scheper's wall paints and Stoelzl's weaving. One colour per role:
     blue    keywords            green   strings
     orange  numbers             red     TRUE / FALSE / NULL
     teal    function names      plum    operators
     ochre   keys, attributes    warm grey  comments
   Names and variables stay ink; punctuation steps back to muted.
   Every token colour reaches 4.5:1 on the code background in both themes. */

:root {
  --code-bg: color-mix(in srgb, var(--ink) 3%, var(--paper));
  --code-muted: var(--muted);
  --code-blue: #2a5c9a;    /* 6.4:1 on #f9f9f9 */
  --code-green: #2f7347;   /* 5.4:1 */
  --code-orange: #b04f0f;  /* 5.0:1 */
  --code-red: #b8321f;     /* 5.7:1 */
  --code-teal: #0f6e6c;    /* 5.8:1 */
  --code-plum: #87396f;    /* 7.0:1 */
  --code-ochre: #82670c;   /* 5.1:1 */
  --code-comment: #736a60; /* 5.0:1 */
}
:root[data-theme="dark"] {
  --code-blue: #8ab4e0;    /* 5.5:1 on #32373d */
  --code-green: #8cc79a;   /* 6.2:1 */
  --code-orange: #f0a05c;  /* 5.7:1 */
  --code-red: #f0806a;     /* 4.6:1 */
  --code-teal: #6cc4bd;    /* 5.9:1 */
  --code-plum: #d99ac4;    /* 5.4:1 */
  --code-ochre: #dcbc4e;   /* 6.5:1 */
  --code-comment: #a69d93; /* 4.5:1 */
}

/* Block: the existing frame, with a short tricolour rule and a language label on top. */
.content-prose div.highlighter-rouge { position: relative; margin: 27px 0; }
.content-prose div.highlighter-rouge pre { margin: 0; background: var(--code-bg); color: var(--ink); font: 12px/1.8 var(--accent-font); }
.content-prose div.highlighter-rouge::after {
  content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 3px;
  background: linear-gradient(90deg, var(--red) 0 33.33%, var(--blue) 0 66.66%, var(--yellow) 0);
  pointer-events: none;
}
.content-prose div.highlighter-rouge[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 7px; right: 12px;
  font: 10px/1.6 var(--accent-font); letter-spacing: .06em; text-transform: uppercase; color: var(--code-muted);
  pointer-events: none;
}
.content-prose div.highlighter-rouge[data-lang] pre { padding-top: 26px; }
@media (max-width: 680px) { .content-prose div.highlighter-rouge pre { font-size: 11px; } }
.content-prose pre ::selection { background: color-mix(in srgb, var(--blue) 26%, var(--paper)); }

/* Tokens (Rouge / Pygments class names; fc = function call, added at build time). */
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kp, .highlight .kv,
.highlight .ow { color: var(--code-blue); font-weight: 600; }
.highlight .kt, .highlight .nc, .highlight .nn { color: var(--code-blue); }

.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd,
.highlight .sh, .highlight .sx, .highlight .ss, .highlight .dl, .highlight .sa { color: var(--code-green); }
.highlight .se, .highlight .sr { color: var(--code-teal); }
.highlight .si { color: var(--ink); }

.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo, .highlight .mb,
.highlight .il { color: var(--code-orange); }
.highlight .kc, .highlight .bp { color: var(--code-red); font-weight: 600; }

.highlight .nf, .highlight .fm, .highlight .fc, .highlight .nb.fc { color: var(--code-teal); }
.highlight .o { color: var(--code-plum); }
.highlight .na, .highlight .nt, .highlight .nl, .highlight .py, .highlight .nd { color: var(--code-ochre); }

.highlight .n, .highlight .nb, .highlight .nx, .highlight .nv, .highlight .vi, .highlight .vg { color: var(--ink); }
.highlight .p, .highlight .pi { color: var(--code-muted); }
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs, .highlight .ch, .highlight .cd,
.highlight .cp, .highlight .cpf { color: var(--code-comment); font-style: normal; font-weight: 350; }

.highlight .gd { color: var(--code-red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.highlight .gi { color: var(--code-green); background: color-mix(in srgb, var(--code-green) 10%, transparent); }
.highlight .gh, .highlight .gu { color: var(--code-muted); font-weight: 600; }
.highlight .gp { color: var(--code-muted); user-select: none; }
.highlight .err { color: inherit; background: none; }