/* ======================================================================
   lang-highlight.css
   Cores dos tokens de sintaxe (comparar-json.html, comparar-php.html, etc).
   Arquivo isolado — soma-se ao CSS da página base sem sobrescrever nada.
   Usa o mesmo atributo [data-theme] que a página base já controla via JS,
   então o highlight muda de cor junto com o tema claro/escuro existente.
   ====================================================================== */

:root, [data-theme="dark"] {
  --tok-kw: #ff7b72;
  --tok-str: #a5d6ff;
  --tok-num: #79c0ff;
  --tok-com: #8b949e;
  --tok-punct: #c9d1d9;
  --tok-var: #d2a8ff;
  --tok-tag: #7ee787;
  --tok-sel: #7ee787;
  --tok-prop: #79c0ff;
  --tok-hex: #ffa657;
  --tok-key: #79c0ff;
  --tok-prep: #ffa657;
  --tok-regex: #7ee787;
  --tok-entity: #ffa657;
  --tok-atrule: #d2a8ff;
}

[data-theme="light"] {
  --tok-kw: #cf222e;
  --tok-str: #0a3069;
  --tok-num: #0550ae;
  --tok-com: #6e7781;
  --tok-punct: #1f2328;
  --tok-var: #8250df;
  --tok-tag: #116329;
  --tok-sel: #116329;
  --tok-prop: #0550ae;
  --tok-hex: #953800;
  --tok-key: #0550ae;
  --tok-prep: #953800;
  --tok-regex: #116329;
  --tok-entity: #953800;
  --tok-atrule: #8250df;
}

.tok-kw     { color: var(--tok-kw); font-weight: 600; }
.tok-str    { color: var(--tok-str); }
.tok-num    { color: var(--tok-num); }
.tok-com    { color: var(--tok-com); font-style: italic; }
.tok-punct  { color: var(--tok-punct); opacity: 0.75; }
.tok-var    { color: var(--tok-var); }
.tok-tag    { color: var(--tok-tag); }
.tok-attr   { color: var(--tok-var); }
.tok-sel    { color: var(--tok-sel); }
.tok-prop   { color: var(--tok-prop); }
.tok-hex    { color: var(--tok-hex); }
.tok-key    { color: var(--tok-key); font-weight: 600; }
.tok-prep   { color: var(--tok-prep); }
.tok-regex  { color: var(--tok-regex); }
.tok-deco, .tok-anno { color: var(--tok-var); font-weight: 600; }

/* --- novos: sem cor própria, reaproveitando semântica próxima --- */
.tok-ident    { color: var(--tok-var); }              /* sql: identificador entre aspas/crase */
.tok-cdata    { color: var(--tok-str); }               /* xml: bloco CDATA é "conteúdo literal" */
.tok-pi       { color: var(--tok-prep); }              /* xml: processing instruction, como #include */
.tok-doctype  { color: var(--tok-prep); }              /* xml/html: <!DOCTYPE ...> */
.tok-entity   { color: var(--tok-entity); }            /* xml/html: &amp; &#65; etc. */
.tok-atrule   { color: var(--tok-atrule); font-weight: 600; } /* css: @media, @supports... */
.tok-important{ color: var(--tok-kw); font-weight: 600; }     /* css: !important */
.tok-cssvar   { color: var(--tok-hex); }               /* css: --minha-cor (uso e declaração) */
.tok-sym      { color: var(--tok-var); }               /* ruby: :simbolo */
.tok-macro    { color: var(--tok-prep); }              /* rust: println!(...) */
.tok-lifetime { color: var(--tok-hex); }                /* rust: 'a */
.tok-doc      { color: var(--tok-com); }                /* yaml: --- / ... */
.tok-anchor   { color: var(--tok-var); }                /* yaml: &ancora */
.tok-alias    { color: var(--tok-var); }                /* yaml: *ancora */
.tok-block    { color: var(--tok-punct); }              /* yaml: | ou > */
.tok-cmd      { color: var(--tok-str); }                /* bash: $(...) / `...` */

/* Qualquer token dentro de added/removed herda a cor do diff */
span.added,
span.added [class^="tok-"],
span.added [class*=" tok-"] {
  background-color: var(--added-strong-bg);
  border-radius: 3px;
}

span.removed,
span.removed [class^="tok-"],
span.removed [class*=" tok-"] {
  background-color: var(--removed-strong-bg);
  border-radius: 3px;
}

.added [class^="tok-"],
.added [class*=" tok-"] {
  color: var(--added-fg);
}

.removed [class^="tok-"],
.removed [class*=" tok-"] {
  color: var(--removed-fg);
}