/* ---- Code palette ----
   Generated by eleventy.code.js from site.brand and contrast-checked
   against the block surface at build time; see "Code blocks" below. */
:root {
    --code-surface: light-dark(#FBF9F3, #2C303F);
    --code-text: light-dark(#33394E, #FBF9F3);
    --code-keyword: light-dark(#AB2158, #EB84AD);
    --code-string: light-dark(#AC4A11, #FFB370);
    --code-function: light-dark(#21697D, #87D5E8);
    --code-number: light-dark(#99650A, #FFD147);
    --code-comment: light-dark(#414C75, #C2B1A6);

    @media (prefers-contrast: more) {
        --code-surface: light-dark(#FFFFFF, #0A0C10);
        --code-text: light-dark(#000000, #FFFFFF);
        --code-keyword: light-dark(#6F1539, #F1A7C5);
        --code-string: light-dark(#79340C, #FFC999);
        --code-function: light-dark(#1C5869, #A9E1EF);
        --code-number: light-dark(#7D5208, #FFE699);
        --code-comment: light-dark(#1F2540, #DAD0C8);
    }
}

/* ============================================================
   Code blocks
   ============================================================
   Every fenced sample (and the guides' {% highlight %} blocks) is a
   .code-block figure rendered by eleventy.code.js: a title bar, the
   language-keyed top edge, a copy button, Shiki-tokenized lines carrying
   .tk-* role classes (painted from the --code-* palette above, so no
   inline styles ship), and optional counters, annotations, collapse, and
   tabs. Corners: 12px all round by default; a block with an accent edge
   flattens its two top corners to 2px, the callout's crisp-edge rule. */
.tk-keyword {
	color: var(--code-keyword);
}
.tk-string {
	color: var(--code-string);
}
.tk-function {
	color: var(--code-function);
}
.tk-number {
	color: var(--code-number);
}
.tk-comment {
	color: var(--code-comment);
}