/**
 * VidraSec syntax theme for highlight.js.
 *
 * design.html maps code blocks to Surface (#F4F4F4) with Ink (#333) text;
 * token colors reuse the brand palette where it's legible on a light
 * background (Pomegranate for keywords, Link Blue for strings/values,
 * Mint/Salmon backgrounds for diff additions/deletions). The base `.hljs`
 * rule sources its background/color from vidrasec-reveal.css's
 * --vidrasec-surface/--vidrasec-ink custom properties, so it already follows
 * that file's `[data-theme-version="dark"]` re-pointing for free; the
 * per-token colors below aren't variable-driven, so their dark counterparts
 * are explicit `[data-theme-version="dark"]`-scoped overrides instead.
 *
 * Lives in static/reveal.js/dist/plugin/highlight/ — Hugo merges this over
 * the vendored reveal.js dist mount (see hugo.yaml), so it's addressable
 * exactly like the stock themes via the `highlightTheme` front-matter param.
 */

.hljs {
  display: block;
  overflow-x: auto;
  background: var(--vidrasec-surface, #F4F4F4);
  color: var(--vidrasec-ink, #333);
}

.hljs-comment,
.hljs-quote {
  color: #8a8a8a;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag,
.hljs-type {
  color: #C0392B;
}

.hljs-string,
.hljs-number,
.hljs-literal,
.hljs-regexp,
.hljs-link,
.hljs-symbol,
.hljs-bullet,
.hljs-attr,
.hljs-attribute,
.hljs-template-variable,
.hljs-variable {
  color: #1a56a0;
}

.hljs-title,
.hljs-section,
.hljs-function .hljs-title,
.hljs-title.function_ {
  color: #333;
  font-weight: 600;
}

.hljs-meta,
.hljs-selector-id,
.hljs-selector-class,
.hljs-doctag,
.hljs-params {
  color: #555;
}

.hljs-addition {
  background: #A8E6CF;
  color: #333;
}

.hljs-deletion {
  background: #E28D98;
  color: #333;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/*********************************************
 * DARK VARIANT
 * Recolored for legibility on a near-black background: dark-on-light brand
 * colors (Link Blue, Pomegranate) swap for their lighter counterparts (Non
 * Photo Blue, Salmon Pink), and diff addition/deletion go from solid pastel
 * fills to low-alpha tints. Comment/quote and emphasis/strong are unchanged
 * from the light rules above (already legible on both backgrounds).
 *********************************************/
[data-theme-version="dark"] .hljs-keyword,
[data-theme-version="dark"] .hljs-selector-tag,
[data-theme-version="dark"] .hljs-built_in,
[data-theme-version="dark"] .hljs-name,
[data-theme-version="dark"] .hljs-tag,
[data-theme-version="dark"] .hljs-type {
  color: #e28d98;
}

[data-theme-version="dark"] .hljs-string,
[data-theme-version="dark"] .hljs-number,
[data-theme-version="dark"] .hljs-literal,
[data-theme-version="dark"] .hljs-regexp,
[data-theme-version="dark"] .hljs-link,
[data-theme-version="dark"] .hljs-symbol,
[data-theme-version="dark"] .hljs-bullet,
[data-theme-version="dark"] .hljs-attr,
[data-theme-version="dark"] .hljs-attribute,
[data-theme-version="dark"] .hljs-template-variable,
[data-theme-version="dark"] .hljs-variable {
  color: #99e9ff;
}

[data-theme-version="dark"] .hljs-title,
[data-theme-version="dark"] .hljs-section,
[data-theme-version="dark"] .hljs-function .hljs-title,
[data-theme-version="dark"] .hljs-title.function_ {
  color: #f5f5f5;
  font-weight: 600;
}

[data-theme-version="dark"] .hljs-meta,
[data-theme-version="dark"] .hljs-selector-id,
[data-theme-version="dark"] .hljs-selector-class,
[data-theme-version="dark"] .hljs-doctag,
[data-theme-version="dark"] .hljs-params {
  color: #9a9a9a;
}

[data-theme-version="dark"] .hljs-addition {
  background: rgba(168, 230, 207, 0.18);
  color: #cdeedb;
}

[data-theme-version="dark"] .hljs-deletion {
  background: rgba(226, 141, 152, 0.18);
  color: #f3c9cf;
}