/* Theme-aware Prism.js syntax highlighting */
/* Uses light-dark() CSS function to automatically adapt to color scheme */

/* =============================================================================
   BASE STYLES
   ============================================================================= */

pre[class*='language-'],
code[class*='language-'] {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  font-size: 13px;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.4;
  tab-size: 4;
  hyphens: none;
  text-shadow: none;
  direction: ltr;
  color: light-dark(#24292f, #d4d4d4);
}

pre[class*='language-'] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 6px;
  background: var(--surface, light-dark(#f6f8fa, rgba(255, 255, 255, 0.05)));
}

:not(pre) > code[class*='language-'] {
  padding: 0.1em 0.3em;
  border-radius: 3px;
  white-space: normal;
  background: var(--surface, light-dark(#f6f8fa, rgba(255, 255, 255, 0.05)));
}

::selection {
  background: light-dark(#add6ff, #75a7ca);
  text-shadow: none;
}

/* =============================================================================
   TOKEN STYLES
   ============================================================================= */

/* Comments */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: light-dark(#6a737d, #6a9955);
  font-style: italic;
}

/* Strings */
.token.string,
.token.attr-value,
.token.selector {
  color: light-dark(#032f62, #ce9178);
}

/* Punctuation & Operators */
.token.punctuation {
  color: light-dark(#24292f, #808080);
}

.token.operator {
  color: light-dark(#24292f, #d4d4d4);
}

/* Numbers, booleans, constants */
.token.entity,
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.constant,
.token.property,
.token.regex,
.token.inserted,
.token.unit {
  color: light-dark(#005cc5, #b5cea8);
}

/* Keywords */
.token.atrule,
.token.keyword,
.token.attr-name {
  color: light-dark(#d73a49, #569cd6);
}

/* Control flow keywords */
.token.keyword.module,
.token.keyword.control-flow {
  color: light-dark(#d73a49, #c586c0);
}

/* Functions */
.token.function,
.token.deleted,
.token.tag,
.token.function-name,
.token.function .token.maybe-class-name {
  color: light-dark(#6f42c1, #dcdcaa);
}

/* Builtins */
.token.char,
.token.builtin {
  color: light-dark(#22863a, #4ec9b0);
}

/* Class names & variables */
.token.class-name,
.token.maybe-class-name,
.token.console,
.token.parameter,
.token.interpolation,
.token.variable,
.token.namespace {
  color: light-dark(#e36209, #4ec9b0);
}

/* Imports/Exports */
.token.imports .token.maybe-class-name,
.token.exports .token.maybe-class-name {
  color: light-dark(#005cc5, #9cdcfe);
}

/* Special tokens */
.token.escape {
  color: light-dark(#22863a, #d7ba7d);
}

.token.tag .token.punctuation,
.token.cdata {
  color: light-dark(#22863a, #808080);
}

.token.attr-value,
.token.attr-value .token.punctuation {
  color: light-dark(#032f62, #ce9178);
}

.token.attr-value .token.punctuation.attr-equals {
  color: light-dark(#24292f, #d4d4d4);
}

/* Regex */
.token.regex {
  color: light-dark(#032f62, #d16969);
}

/* Formatting */
.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.namespace {
  opacity: 0.9;
}

/* Doctype */
.token.doctype .token.doctype-tag {
  color: light-dark(#d73a49, #569cd6);
}

.token.doctype .token.name {
  color: light-dark(#005cc5, #9cdcfe);
}

/* Template literals */
.token.punctuation.interpolation-punctuation {
  color: light-dark(#d73a49, #569cd6);
}

/* Atrule specifics */
.token.atrule .token.rule {
  color: light-dark(#d73a49, #c586c0);
}

.token.atrule .token.url {
  color: light-dark(#005cc5, #9cdcfe);
}

.token.atrule .token.function {
  color: light-dark(#6f42c1, #dcdcaa);
}

/* Arrow operators */
.token.operator.arrow {
  color: light-dark(#d73a49, #569cd6);
}

/* =============================================================================
   LANGUAGE-SPECIFIC OVERRIDES
   ============================================================================= */

pre[class*='language-javascript'],
code[class*='language-javascript'],
pre[class*='language-jsx'],
code[class*='language-jsx'],
pre[class*='language-typescript'],
code[class*='language-typescript'],
pre[class*='language-tsx'],
code[class*='language-tsx'] {
  color: light-dark(#24292f, #9cdcfe);
}

pre[class*='language-css'],
code[class*='language-css'] {
  color: light-dark(#032f62, #ce9178);
}

pre[class*='language-html'],
code[class*='language-html'] {
  color: light-dark(#24292f, #d4d4d4);
}

.language-html .token.punctuation {
  color: light-dark(#24292f, #808080);
}

.language-regex .token.anchor {
  color: light-dark(#6f42c1, #dcdcaa);
}

/* =============================================================================
   LINE HIGHLIGHTING
   ============================================================================= */

pre[data-line],
pre[class*='language-'] > code[class*='language-'] {
  position: relative;
}

.line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: light-dark(
    linear-gradient(to right, hsla(24, 20%, 50%, 0.08) 70%, hsla(24, 20%, 50%, 0)),
    #f7ebc6
  );
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}