/* ===== Silver Lang Syntax Highlighting Colors ===== */

/* Keywords */
.syn-kw {
  color: var(--color-code-keyword);
  font-weight: 500;
}

/* Types */
.syn-type {
  color: var(--color-code-type);
}

/* Strings */
.syn-str {
  color: var(--color-code-string);
}

/* Numbers */
.syn-num {
  color: var(--color-code-number);
}

/* Comments */
.syn-cmt {
  color: var(--color-code-comment);
  font-style: italic;
}

/* Functions */
.syn-fn {
  color: var(--color-code-function);
}

/* Operators */
.syn-op {
  color: var(--color-code-operator);
}

/* Code Block Styling */
pre {
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

/* Code is always left-aligned and LTR, regardless of page language/direction */
pre,
pre code,
.code-block,
.code-block code,
.bento-card-code,
.bento-card-code code,
.hero-code-preview code {
  direction: ltr;
  text-align: left;
}

pre code {
  display: block;
  padding: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-code-text);
  tab-size: 4;
}

/* Inline code */
:not(pre) > code {
  padding: 0.15em 0.4em;
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-accent);
}

/* Code block with header */
.code-block {
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-6) 0;
}

.code-block pre {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
}

.code-block pre code {
  padding: var(--space-6);
}

/* Line numbers (optional) */
.line-numbers .line-numbers-rows {
  border-right: 1px solid var(--color-code-border);
}

.line-numbers .line-numbers-rows > span:before {
  color: var(--color-code-comment);
}