/* ────────────────────────────────────────────────────────────────────
 * code-highlight.css — Prism.js token → --demo-code-syntax-* mapping.
 *
 * Lands alongside demo/assets/vendor/prism/prism-*.min.js. The Prism
 * bundle wraps tokenized substrings in `<span class="token <name>">`;
 * this stylesheet maps each Prism `.token.<name>` to a token defined
 * in tokens.css.
 *
 * Owned by demo/ — purely buyer-package. The engine (`src/`) doesn't
 * render syntax-highlighted code anywhere.
 *
 * Two render contexts:
 *
 *   1. INSIDE .demo-code-popover   (every example page · features.php)
 *       The popover's surface is dark-fixed (W4 legacy — matches GitHub
 *       README / Stripe / Vercel docs convention; see code-popover.css
 *       comment block for rationale). Page theme is irrelevant to the
 *       popover surface, so we pin the syntax tokens to the DARK twin
 *       inside .demo-code-popover regardless of [data-theme]. This
 *       keeps One Dark Pro on a dark surface in light + dark page modes.
 *
 *   2. design.php "Code highlight" section  (palette comparison only)
 *       Renders BOTH light + dark palettes side-by-side via explicit
 *       wrappers — `.design-code-highlight__pair--light` (forces light
 *       tokens) and `.design-code-highlight__pair--dark` (forces dark
 *       tokens). Reviewers see both palettes at once regardless of
 *       which theme they're viewing the page in, same pattern as
 *       _partials/design/brand.php's intrinsic specimen panels.
 *
 * Light + dark twin token blocks live in tokens.css §code-highlight.
 * If a buyer wants the popover to follow their page theme, they
 * override the pin block below in their own stylesheet.
 * ──────────────────────────────────────────────────────────────────── */

/* ─── Pin .demo-code-popover to the dark twin ───────────────────────── */

.demo-code-popover {
    /* The 20 tokens below mirror the [data-theme='dark'] block in
     * tokens.css verbatim. Pinning here keeps the popover readable
     * even when the page is in light mode (where :root would otherwise
     * resolve --demo-code-syntax-* to the light palette). */
    --demo-code-syntax-bg:           #1c1f26;
    --demo-code-syntax-fg:           #abb2bf;
    --demo-code-syntax-comment:      #5c6370;
    --demo-code-syntax-keyword:      #c678dd;
    --demo-code-syntax-string:       #98c379;
    --demo-code-syntax-number:       #d19a66;
    --demo-code-syntax-builtin:      #e5c07b;
    --demo-code-syntax-function:     #61afef;
    --demo-code-syntax-class-name:   #e5c07b;
    --demo-code-syntax-property:     #e06c75;
    --demo-code-syntax-tag:          #e06c75;
    --demo-code-syntax-attr-name:    #d19a66;
    --demo-code-syntax-attr-value:   #98c379;
    --demo-code-syntax-operator:     #56b6c2;
    --demo-code-syntax-punctuation:  #abb2bf;
    --demo-code-syntax-variable:     #e06c75;
    --demo-code-syntax-deleted:      #e06c75;
    --demo-code-syntax-inserted:     #98c379;
    --demo-code-syntax-selector:     #c678dd;
    --demo-code-syntax-important:    #c678dd;
}

/* design.php side-by-side comparison — `--pair--light` forces the LIGHT
 * twin tokens within its scope so a light-pair sample renders in One
 * Light regardless of the page theme. The dark pair inherits from the
 * .demo-code-popover pin above (no override needed).
 *
 * The light pair also flips the popover's CHROME tokens (header bg, lang
 * label, copy button border) to match the light body — without this the
 * popover would show a dark header sitting on top of a light body, an
 * awkward split-personality look. The 5-element override covers the
 * header (`--demo-code-bg-elevated`), default text (`--demo-code-fg`),
 * dim text on the language label (`--demo-code-muted`), border lines
 * (`--demo-code-border`), and the copy-button hover surface. The body
 * background `--demo-code-bg` doesn't need overriding because the
 * code-highlight rule above already routes the body through
 * `--demo-code-syntax-bg`. */
.design-code-highlight__pair--light .demo-code-popover {
    --demo-code-syntax-bg:           #fafbfc;
    --demo-code-syntax-fg:           #383a42;
    --demo-code-syntax-comment:      #a0a1a7;
    --demo-code-syntax-keyword:      #a626a4;
    --demo-code-syntax-string:       #50a14f;
    --demo-code-syntax-number:       #986801;
    --demo-code-syntax-builtin:      #d75f00;
    --demo-code-syntax-function:     #4078f2;
    --demo-code-syntax-class-name:   #c18401;
    --demo-code-syntax-property:     #e45649;
    --demo-code-syntax-tag:          #e45649;
    --demo-code-syntax-attr-name:    #986801;
    --demo-code-syntax-attr-value:   #50a14f;
    --demo-code-syntax-operator:     #383a42;
    --demo-code-syntax-punctuation:  #383a42;
    --demo-code-syntax-variable:     #e06c75;
    --demo-code-syntax-deleted:      #e45649;
    --demo-code-syntax-inserted:     #50a14f;
    --demo-code-syntax-selector:     #a626a4;
    --demo-code-syntax-important:    #a626a4;

    /* Chrome tokens — flip header / lang label / copy button to light. */
    --demo-code-bg-elevated:         #f3f4f6;
    --demo-code-fg:                  #383a42;
    --demo-code-muted:                #6b7280;
    --demo-code-border:              rgba(0, 0, 0, 0.10);
    --demo-code-accent:              #4078f2;
}
.design-code-highlight__pair--light .demo-code-popover__copy:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.18);
}
.design-code-highlight__pair--light .demo-code-popover__copy:active {
    background: rgba(0, 0, 0, 0.08);
}

/* ─── Surface (popover body bg + default code color) ─────────────────── */

/* The pre/code surface inside the popover swaps to the syntax-bg/fg
 * tokens once Prism has wrapped tokens. Before Prism boots, the parent
 * .demo-code-popover__body's existing dark surface (#0b1020) shows as
 * a neutral fallback so unhighlighted code never reads as broken. */
.demo-code-popover .demo-code-popover__body {
    background: var(--demo-code-syntax-bg);
}
.demo-code-popover .demo-code-popover__body code[class*='language-'] {
    color: var(--demo-code-syntax-fg);
    /* Prism wraps tokens in <span> — keep code's background transparent
     * so the body bg shows through. */
    background: transparent;
}

/* ─── Token mappings (covers Prism.js generic + per-language tokens) ── */

.demo-code-popover .token.comment,
.demo-code-popover .token.prolog,
.demo-code-popover .token.cdata,
.demo-code-popover .token.doc-comment {
    color: var(--demo-code-syntax-comment);
    font-style: italic;
}

.demo-code-popover .token.keyword,
.demo-code-popover .token.atrule,
.demo-code-popover .token.rule {
    color: var(--demo-code-syntax-keyword);
}

.demo-code-popover .token.string,
.demo-code-popover .token.url,
.demo-code-popover .token.url-link,
.demo-code-popover .token.template-string,
.demo-code-popover .token.char {
    color: var(--demo-code-syntax-string);
}

.demo-code-popover .token.number,
.demo-code-popover .token.boolean,
.demo-code-popover .token.regex,
.demo-code-popover .token.unit {
    color: var(--demo-code-syntax-number);
}

.demo-code-popover .token.builtin,
.demo-code-popover .token.constant,
.demo-code-popover .token.symbol {
    color: var(--demo-code-syntax-builtin);
}

.demo-code-popover .token.function,
.demo-code-popover .token.method,
.demo-code-popover .token.function-name,
.demo-code-popover .token.function-variable {
    color: var(--demo-code-syntax-function);
}

.demo-code-popover .token.class-name,
.demo-code-popover .token.maybe-class-name {
    color: var(--demo-code-syntax-class-name);
}

.demo-code-popover .token.tag,
.demo-code-popover .token.tag .punctuation,
.demo-code-popover .token.tag .tag {
    color: var(--demo-code-syntax-tag);
}

.demo-code-popover .token.attr-name {
    color: var(--demo-code-syntax-attr-name);
}

.demo-code-popover .token.attr-value,
.demo-code-popover .token.attr-value .punctuation:not(.attr-equals) {
    color: var(--demo-code-syntax-attr-value);
}

.demo-code-popover .token.property,
.demo-code-popover .token.property-access,
.demo-code-popover .token.style-attr {
    color: var(--demo-code-syntax-property);
}

.demo-code-popover .token.operator,
.demo-code-popover .token.entity {
    color: var(--demo-code-syntax-operator);
}

.demo-code-popover .token.punctuation {
    color: var(--demo-code-syntax-punctuation);
}

.demo-code-popover .token.variable {
    color: var(--demo-code-syntax-variable);
}

.demo-code-popover .token.selector,
.demo-code-popover .token.id-selector,
.demo-code-popover .token.class-selector,
.demo-code-popover .token.pseudo-class,
.demo-code-popover .token.pseudo-element {
    color: var(--demo-code-syntax-selector);
}

.demo-code-popover .token.important {
    color: var(--demo-code-syntax-important);
    font-weight: bold;
}

.demo-code-popover .token.deleted {
    color: var(--demo-code-syntax-deleted);
    background: rgba(228, 86, 73, 0.10);
}

.demo-code-popover .token.inserted {
    color: var(--demo-code-syntax-inserted);
    background: rgba(80, 161, 79, 0.10);
}

/* PHP-specific — `<?php`/`?>` tag delimiters. Without this they fall
 * back to `.token.delimiter` which would be miscolored. */
.demo-code-popover .token.delimiter {
    color: var(--demo-code-syntax-keyword);
}

/* Markup template-punctuation `{{ }}` `${ }` should read as variable
 * delimiters, not generic punctuation. */
.demo-code-popover .token.template-punctuation {
    color: var(--demo-code-syntax-keyword);
}

/* Bash shebang line gets the comment treatment so `#!/bin/bash` doesn't
 * misread as a heading. */
.demo-code-popover .token.shebang {
    color: var(--demo-code-syntax-comment);
    font-style: italic;
}