/* =========================================================================
   Syntax highlighting theme for highlight.js
   -------------------------------------------------------------------------
   Written against the site's own --vd-* tokens instead of shipping one of
   highlight.js's stock themes, because those are single-mode: a dark theme
   is unreadable on the light storefront and vice-versa. The token colours
   below are declared once and swapped under [data-theme="dark"], so code
   blocks follow the same light/dark toggle as everything else.

   Used by product.php (public snippet viewer) and account-downloads.php.
   ========================================================================= */

:root,
[data-theme="light"] {
  --code-keyword: #b45309;
  --code-string: #15803d;
  --code-comment: #78716c;
  --code-number: #b91c1c;
  --code-title: #6d28d9;
  --code-attr: #0369a1;
  --code-meta: #92400e;
  --code-builtin: #0f766e;
}

[data-theme="dark"] {
  --code-keyword: #fbbf24;
  --code-string: #86efac;
  --code-comment: #a8a29e;
  --code-number: #fca5a5;
  --code-title: #c4b5fd;
  --code-attr: #7dd3fc;
  --code-meta: #fdba74;
  --code-builtin: #5eead4;
}

.hljs {
  color: var(--vd-text);
  background: transparent;
}

.hljs-comment,
.hljs-quote {
  color: var(--code-comment);
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-operator {
  color: var(--code-keyword);
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
  color: var(--code-string);
}

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-deletion {
  color: var(--code-number);
}

.hljs-title,
.hljs-title.function_,
.hljs-title.class_,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: var(--code-title);
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-params,
.hljs-property {
  color: var(--code-attr);
}

.hljs-built_in,
.hljs-class .hljs-title {
  color: var(--code-builtin);
}

.hljs-meta,
.hljs-meta .hljs-keyword {
  color: var(--code-meta);
}

.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 700;
}