/**
 * 07-chroma.css
 * CSS-only syntax highlighting — maps Hugo/Chroma class names to Open Props
 * color tokens. Requires Hugo markup.highlight.noClasses = false.
 *
 * Generated class reference: hugo gen chromastyles --style=monokai
 * Token palette: Open Props perceptual color scale.
 * Part of: Agentic Semantic Web
 */

/* ── Wrapper ─────────────────────────────────────────────────────────── */

.chroma {
  background: var(--surface-2);
  border-radius: var(--radius-2);
  overflow-x: auto;
}

.chroma pre {
  background: var(--surface-2);
  padding: var(--size-3);
  border-radius: var(--radius-2);
  overflow-x: auto;
  margin: 0;
}

/* ── Keywords ────────────────────────────────────────────────────────── */
/* .k .kc .kd .kn .kp .kr .kt */

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kp,
.chroma .kr,
.chroma .kt {
  color: var(--violet-4);
}

/* KeywordNamespace — import/from/as — pink accent to distinguish */
.chroma .kn {
  color: var(--violet-3);
}

/* ── Strings ─────────────────────────────────────────────────────────── */
/* .s .sa .sb .sc .dl .sd .s2 .se .sh .si .sx .sr .s1 .ss */

.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s2,
.chroma .sh,
.chroma .si,
.chroma .sx,
.chroma .sr,
.chroma .s1,
.chroma .ss {
  color: var(--syntax-string);
}

/* LiteralStringEscape — \n \t etc — slightly lighter to distinguish */
.chroma .se {
  color: var(--syntax-string);
}

/* ── Comments ────────────────────────────────────────────────────────── */
/* .c .c1 .ch .cm .cp .cpf .cs */

.chroma .c,
.chroma .c1,
.chroma .ch,
.chroma .cm,
.chroma .cp,
.chroma .cpf,
.chroma .cs {
  color: var(--text-2);
  font-style: italic;
}

/* ── Numbers ─────────────────────────────────────────────────────────── */
/* .m .mb .mf .mh .mi .mo .mx */

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo,
.chroma .mx {
  color: var(--orange-3);
}

/* ── Names / Functions ───────────────────────────────────────────────── */
/* .n .na .nb .nc .nd .ne .nf .ni .nl .nn .nx .py */

.chroma .na,
.chroma .nc,
.chroma .nd,
.chroma .ne,
.chroma .nf,
.chroma .nx,
.chroma .py {
  color: var(--syntax-keyword);
}

/* ── Operators / Punctuation ─────────────────────────────────────────── */
/* .o .ow .p */

.chroma .o,
.chroma .ow {
  color: var(--text);
}

/* ── Error ───────────────────────────────────────────────────────────── */

.chroma .err {
  color: var(--syntax-deleted);
  background: transparent;
}

/* ── Generic diffs / emphasis ────────────────────────────────────────── */

.chroma .gd { color: var(--syntax-deleted); }
.chroma .gi { color: var(--syntax-inserted); }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: bold; }

/* ── Line number chrome ──────────────────────────────────────────────── */

.chroma .ln,
.chroma .lnt {
  color: var(--text-3);
  user-select: none;
  padding-inline-end: var(--size-3);
}