/* Bảng màu tô cú pháp.
   Dùng biến của style.css nên đổi chủ đề là đổi theo — không có tệp CSS thứ hai
   phải giữ đồng bộ. */

code[class*="language-"],
pre[class*="language-"] {
  color: var(--code-fg);
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.7;
  tab-size: 2;
  hyphens: none;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  direction: ltr;
  text-align: left;
}

.token.comment,
.token.prolog,
.token.cdata                    { color: var(--syn-comment); font-style: italic; }
.token.punctuation              { color: var(--syn-punct); }
.token.tag,
.token.keyword,
.token.selector,
.token.atrule                   { color: var(--syn-keyword); }
.token.attr-name,
.token.property,
.token.class-name,
.token.symbol                   { color: var(--syn-attr); }
.token.string,
.token.attr-value,
.token.char,
.token.regex                    { color: var(--syn-string); }
.token.number,
.token.boolean,
.token.constant                 { color: var(--syn-number); }
.token.function,
.token.builtin                  { color: var(--syn-func); }
.token.operator,
.token.entity,
.token.url,
.token.variable                 { color: var(--syn-op); }

/* Liquid: dấu {{ }} và {% %} là bộ khung của template — cho chúng nổi lên. */
.token.delimiter                { color: var(--syn-keyword); font-weight: 600; }

.token.important,
.token.bold                     { font-weight: 700; }
.token.italic                   { font-style: italic; }
.token.deleted                  { color: var(--danger); }
.token.inserted                 { color: var(--syn-string); }