/* Code theme copied read-only from VAERO V1 regiekamer.css. */
:root{
  --code-bg:#1E2A39;
  --code-bg-head:#0E1E2D;
  --code-border:#0B1826;
  --code-fg:#F8F8F2;
  --code-muted:#8EA5B8;
  --code-icon:#A7BAC9;
  --code-red:#E85451;
  --code-green:#77E557;
  --code-yellow:#F6CB6B;
  --code-purple:#7D6AC1;
  --code-mint:#88D3BC;
  --code-cyan:#89D2E5;
  --code-grey:#B3B9BE;
  --code-comment:#959CA3;
}

.code-card,.code-edit-wrap,.tip-code{background:var(--code-bg);color:var(--code-fg);border-color:var(--code-border);}
.code-card pre,.code-card code,.code-card pre code,
.code-edit-wrap .code-edit-highlight,.code-edit-wrap .code-edit-highlight code,
.tip-code code{background:none;color:var(--code-fg);text-shadow:none;}
.code-head{background:var(--code-bg-head);color:var(--code-muted);}
.code-copy,.code-correct-btn{color:var(--code-icon);}
.code-copy:hover,.code-correct-btn:hover{color:#fff;background:rgba(255,255,255,.07);}
.code-edit-wrap textarea.correction-code-input{caret-color:var(--code-fg);}
.code-edit-wrap textarea.correction-code-input::placeholder{color:var(--code-comment);}

/* Code tokens must not inherit UI label/badge styling. */
.code-card .token,.code-edit-wrap .token{display:inline;background:transparent;border:0;border-radius:0;padding:0;margin:0;box-shadow:none;font-size:inherit;line-height:inherit;letter-spacing:normal;white-space:inherit}

/* ---- Token palette, identical wherever code is rendered. ---- */

/* Comments -- muted blue-grey, italic. */
.code-card .token.comment,.code-card .token.prolog,.code-card .token.doctype,.code-card .token.cdata,.code-card .token.internal-subset,
.code-edit-wrap .token.comment,.code-edit-wrap .token.prolog,.code-edit-wrap .token.doctype,.code-edit-wrap .token.cdata,.code-edit-wrap .token.internal-subset,
.tip-code .token.comment,.tip-code .token.prolog,.tip-code .token.doctype,.tip-code .token.cdata,.tip-code .token.internal-subset
{color:var(--code-comment);font-style:italic;}

/* Operators -- light grey. Parentheses/braces/punctuation are left
   uncolored on purpose: they fall back to --code-fg, the same "plain
   text" color as anything else Prism doesn't tag. */
.code-card .token.operator,.code-card .token.delimiter,.code-card .token.combinator,
.code-edit-wrap .token.operator,.code-edit-wrap .token.delimiter,.code-edit-wrap .token.combinator,
.tip-code .token.operator,.tip-code .token.delimiter,.tip-code .token.combinator
{color:var(--code-grey);}

/* HTML tags, control structures and types -- bright red/pink. A CSS/SCSS
   selector (body, p, a, .foo, &.foo) is left uncolored on purpose: it
   falls back to --code-fg like other plain text, not red. */
.code-card .token.tag,.code-card .token.keyword,.code-card .token.class-name,.code-card .token.class-name-definition,.code-card .token.attribute-class-name,.code-card .token.namespace,.code-card .token.deleted,.code-card .token.rule,
.code-edit-wrap .token.tag,.code-edit-wrap .token.keyword,.code-edit-wrap .token.class-name,.code-edit-wrap .token.class-name-definition,.code-edit-wrap .token.attribute-class-name,.code-edit-wrap .token.namespace,.code-edit-wrap .token.deleted,.code-edit-wrap .token.rule,
.tip-code .token.tag,.tip-code .token.keyword,.tip-code .token.class-name,.tip-code .token.class-name-definition,.tip-code .token.attribute-class-name,.tip-code .token.namespace,.tip-code .token.deleted,.tip-code .token.rule
{color:var(--code-red);}

/* Function names, CSS properties, HTML attribute names -- bright green. */
.code-card .token.function,.code-card .token.function-definition,.code-card .token.function-variable,.code-card .token.property,.code-card .token.attr-name,.code-card .token.literal-property,.code-card .token.string-property,
.code-edit-wrap .token.function,.code-edit-wrap .token.function-definition,.code-edit-wrap .token.function-variable,.code-edit-wrap .token.property,.code-edit-wrap .token.attr-name,.code-edit-wrap .token.literal-property,.code-edit-wrap .token.string-property,
.tip-code .token.function,.tip-code .token.function-definition,.tip-code .token.function-variable,.tip-code .token.property,.tip-code .token.attr-name,.tip-code .token.literal-property,.tip-code .token.string-property
{color:var(--code-green);}

/* Strings, HTML attribute values, regex -- warm yellow. */
.code-card .token.string,.code-card .token.char,.code-card .token.attr-value,.code-card .token.regex,.code-card .token.url,.code-card .token.inserted,.code-card .token.template-string,
.code-edit-wrap .token.string,.code-edit-wrap .token.char,.code-edit-wrap .token.attr-value,.code-edit-wrap .token.regex,.code-edit-wrap .token.url,.code-edit-wrap .token.inserted,.code-edit-wrap .token.template-string,
.tip-code .token.string,.tip-code .token.char,.tip-code .token.attr-value,.tip-code .token.regex,.tip-code .token.url,.tip-code .token.inserted,.tip-code .token.template-string
{color:var(--code-yellow);}

/* Variables, including recognizable string interpolation -- mint/turquoise. */
.code-card .token.variable,.code-card .token.interpolation,
.code-edit-wrap .token.variable,.code-edit-wrap .token.interpolation,
.tip-code .token.variable,.tip-code .token.interpolation
{color:var(--code-mint);}

/* Built-in functions/classes and other fitting keywords -- light cyan.
   atrule (the whole "@media (...)" wrapper, minus the @media word itself,
   which is .rule and colored red above) and parent (SCSS's own &) are
   left uncolored on purpose: same reasoning as a plain selector. */
.code-card .token.builtin,.code-card .token.important,.code-card .token.module-modifier,.code-card .token.placeholder,
.code-edit-wrap .token.builtin,.code-edit-wrap .token.important,.code-edit-wrap .token.module-modifier,.code-edit-wrap .token.placeholder,
.tip-code .token.builtin,.tip-code .token.important,.tip-code .token.module-modifier,.tip-code .token.placeholder
{color:var(--code-cyan);}

/* Numbers, booleans, null/nil, CSS color values, HTML entities -- purple.
   Ordered after keyword/tag on purpose: JSON's "null" carries both a
   "null" and a "keyword" class, and this rule must win that tie. */
.code-card .token.number,.code-card .token.boolean,.code-card .token.null,.code-card .token.constant,.code-card .token.symbol,.code-card .token.entity,.code-card .token.color,
.code-edit-wrap .token.number,.code-edit-wrap .token.boolean,.code-edit-wrap .token.null,.code-edit-wrap .token.constant,.code-edit-wrap .token.symbol,.code-edit-wrap .token.entity,.code-edit-wrap .token.color,
.tip-code .token.number,.tip-code .token.boolean,.tip-code .token.null,.tip-code .token.constant,.tip-code .token.symbol,.tip-code .token.entity,.tip-code .token.color
{color:var(--code-purple);}

.code-card .token.important,.code-card .token.bold,
.code-edit-wrap .token.important,.code-edit-wrap .token.bold,
.tip-code .token.important,.tip-code .token.bold
{font-weight:700;}

/* PHP's own <?php / ?> delimiter: Prism tags it "delimiter important",
   so the general .important rule above (cyan, bold) wins it by default.
   This combined selector is more specific than that rule alone, so it
   overrides both the color and the weight for this one token. */
.code-card .token.delimiter.important,
.code-edit-wrap .token.delimiter.important,
.tip-code .token.delimiter.important
{color:var(--code-purple);font-weight:400;}

/* SCSS's own & (the parent selector): Prism tags it "parent important",
   the same important-stacking pattern as the PHP delimiter above, so it
   also needs a combined-class override to escape the general .important
   rule -- plain (like a selector), normal weight. */
.code-card .token.parent.important,
.code-edit-wrap .token.parent.important,
.tip-code .token.parent.important
{color:var(--code-fg);font-weight:400;}

/* PHP object properties are field names; methods remain green. */
.code-card code.language-php .token.property,
.code-card .token.language-php .token.property{color:var(--code-fg)}

/* Field names stay white in the correction editor too. */
.code-edit-wrap code.language-php .token.property,
.code-edit-wrap .token.language-php .token.property{color:var(--code-fg)}