// ============================================================================
// Prism Syntax Highlighting Theme — Grackle Web UI
// ============================================================================
// Token colors reference CSS custom properties (--code-*) defined in
// theme.scss, so syntax highlighting automatically adapts to
// light/dark theme via the data-theme attribute.
// ============================================================================

// ---------------------------------------------------------------------------
// Base code block styles
// ---------------------------------------------------------------------------

code[class*='language-'],
pre[class*='language-'] {
  color: var(--text-primary);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  tab-size: 2;
  hyphens: none;
}

// ---------------------------------------------------------------------------
// Token Colors — referencing theme CSS variables
// ---------------------------------------------------------------------------

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--code-comment);
  font-style: italic;
}

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

.token.namespace {
  opacity: 0.8;
}

.token.string,
.token.attr-value,
.token.template-string,
.token.template-punctuation,
.token.inserted {
  color: var(--code-string);
}

.token.number,
.token.boolean,
.token.constant,
.token.symbol {
  color: var(--code-number);
}

.token.keyword,
.token.tag,
.token.important {
  color: var(--code-keyword);
}

.token.function,
.token.builtin {
  color: var(--code-function);
}

.token.selector,
.token.attr-name,
.token.char {
  color: var(--code-function);
}

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

.token.regex,
.token.deleted {
  color: var(--code-deleted);
}

.token.operator,
.token.entity,
.token.url {
  color: var(--code-keyword);
}

.token.variable,
.token.property {
  color: var(--text-primary);
}

.token.atrule {
  color: var(--code-class);
}

// ---------------------------------------------------------------------------
// Modifiers
// ---------------------------------------------------------------------------

.token.bold {
  font-weight: var(--font-weight-bold);
}

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

.token.entity {
  cursor: help;
}

// ---------------------------------------------------------------------------
// Line highlighting (rehype-prism-plus)
// ---------------------------------------------------------------------------
// When using `{1,3-5}` syntax on fenced code blocks, highlighted lines
// receive the `.highlight-line` class.

.highlight-line {
  background: var(--accent-green-subtle);
  border-left: 3px solid var(--accent-green);
  margin-left: -3px;
}

// ---------------------------------------------------------------------------
// Line numbers (rehype-prism-plus `showLineNumbers`)
// ---------------------------------------------------------------------------

.code-line {
  display: block;
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

.line-number::before {
  content: attr(line);
  display: inline-block;
  width: 2em;
  margin-right: var(--space-sm);
  text-align: right;
  color: var(--text-tertiary);
  user-select: none;
}
