/* =========================================================================
   MoSec0x4d — Monochrome chroma syntax highlighting
   Strict monochrome editorial aesthetic (matches 0x4148):
   - All tokens use --text color (near-black in light, near-white in dark)
   - Comments + strings get a slightly muted color (--secondary)
   - Keywords get bold weight (no color highlight — keeps the monochrome look)
   - Background matches code-bg, no inline color overrides
   ========================================================================= */

/* Override ALL chroma token colors — use !important to beat any
   PaperMod-bundled or Hugo-inline chroma styles that might appear. */

/* === Light mode tokens === */
[data-theme="light"] .chroma,
[data-theme="light"] .chroma .bg,
[data-theme="light"] pre,
[data-theme="light"] pre code,
[data-theme="light"] .highlight,
[data-theme="light"] .highlight pre,
[data-theme="light"] .highlight pre code {
  background-color: var(--code-bg, #ECEBE7) !important;
  color: var(--text, #131313) !important;
}

[data-theme="light"] .chroma .err { color: #b62324 !important; background-color: transparent !important; }

/* All token types — pure near-black */
[data-theme="light"] .chroma .k,
[data-theme="light"] .chroma .kc,
[data-theme="light"] .chroma .kd,
[data-theme="light"] .chroma .kn,
[data-theme="light"] .chroma .kp,
[data-theme="light"] .chroma .kr,
[data-theme="light"] .chroma .kt,
[data-theme="light"] .chroma .na,
[data-theme="light"] .chroma .nb,
[data-theme="light"] .chroma .bp,
[data-theme="light"] .chroma .nc,
[data-theme="light"] .chroma .no,
[data-theme="light"] .chroma .nd,
[data-theme="light"] .chroma .ni,
[data-theme="light"] .chroma .ne,
[data-theme="light"] .chroma .nf,
[data-theme="light"] .chroma .fm,
[data-theme="light"] .chroma .nl,
[data-theme="light"] .chroma .nn,
[data-theme="light"] .chroma .nt,
[data-theme="light"] .chroma .nv,
[data-theme="light"] .chroma .vc,
[data-theme="light"] .chroma .vg,
[data-theme="light"] .chroma .vi,
[data-theme="light"] .chroma .vm,
[data-theme="light"] .chroma .l,
[data-theme="light"] .chroma .ld,
[data-theme="light"] .chroma .s,
[data-theme="light"] .chroma .sa,
[data-theme="light"] .chroma .sb,
[data-theme="light"] .chroma .sc,
[data-theme="light"] .chroma .dl,
[data-theme="light"] .chroma .sd,
[data-theme="light"] .chroma .s2,
[data-theme="light"] .chroma .se,
[data-theme="light"] .chroma .sh,
[data-theme="light"] .chroma .si,
[data-theme="light"] .chroma .sx,
[data-theme="light"] .chroma .sr,
[data-theme="light"] .chroma .s1,
[data-theme="light"] .chroma .ss,
[data-theme="light"] .chroma .m,
[data-theme="light"] .chroma .mb,
[data-theme="light"] .chroma .mf,
[data-theme="light"] .chroma .mh,
[data-theme="light"] .chroma .mi,
[data-theme="light"] .chroma .il,
[data-theme="light"] .chroma .mo,
[data-theme="light"] .chroma .o,
[data-theme="light"] .chroma .ow,
[data-theme="light"] .chroma .p,
[data-theme="light"] .chroma .x {
  color: var(--text, #131313) !important;
}

/* Comments + doc strings — muted (still readable on light bg) */
[data-theme="light"] .chroma .c,
[data-theme="light"] .chroma .ch,
[data-theme="light"] .chroma .cm,
[data-theme="light"] .chroma .cp,
[data-theme="light"] .chroma .c1,
[data-theme="light"] .chroma .cs,
[data-theme="light"] .chroma .sd {
  color: var(--secondary, #484848) !important;
  font-style: italic !important;
}

/* Keywords get bold weight (no color change — keeps monochrome) */
[data-theme="light"] .chroma .k,
[data-theme="light"] .chroma .kc,
[data-theme="light"] .chroma .kd,
[data-theme="light"] .chroma .kn,
[data-theme="light"] .chroma .kp,
[data-theme="light"] .chroma .kr,
[data-theme="light"] .chroma .kt,
[data-theme="light"] .chroma .ow {
  font-weight: 600 !important;
}

/* Line numbers */
[data-theme="light"] .chroma .ln,
[data-theme="light"] .chroma .lnt {
  color: var(--muted, #7B7B7B) !important;
}

/* Line highlight */
[data-theme="light"] .chroma .hl {
  background-color: var(--border, #DCDAD5) !important;
}

/* === Dark mode tokens === */
[data-theme="dark"] .chroma,
[data-theme="dark"] .chroma .bg,
[data-theme="dark"] pre,
[data-theme="dark"] pre code,
[data-theme="dark"] .highlight,
[data-theme="dark"] .highlight pre,
[data-theme="dark"] .highlight pre code {
  background-color: var(--code-bg, #1D1D1D) !important;
  color: var(--text, #F5F5F5) !important;
}

[data-theme="dark"] .chroma .err { color: #ff6b6b !important; background-color: transparent !important; }

/* All token types — pure near-white */
[data-theme="dark"] .chroma .k,
[data-theme="dark"] .chroma .kc,
[data-theme="dark"] .chroma .kd,
[data-theme="dark"] .chroma .kn,
[data-theme="dark"] .chroma .kp,
[data-theme="dark"] .chroma .kr,
[data-theme="dark"] .chroma .kt,
[data-theme="dark"] .chroma .na,
[data-theme="dark"] .chroma .nb,
[data-theme="dark"] .chroma .bp,
[data-theme="dark"] .chroma .nc,
[data-theme="dark"] .chroma .no,
[data-theme="dark"] .chroma .nd,
[data-theme="dark"] .chroma .ni,
[data-theme="dark"] .chroma .ne,
[data-theme="dark"] .chroma .nf,
[data-theme="dark"] .chroma .fm,
[data-theme="dark"] .chroma .nl,
[data-theme="dark"] .chroma .nn,
[data-theme="dark"] .chroma .nt,
[data-theme="dark"] .chroma .nv,
[data-theme="dark"] .chroma .vc,
[data-theme="dark"] .chroma .vg,
[data-theme="dark"] .chroma .vi,
[data-theme="dark"] .chroma .vm,
[data-theme="dark"] .chroma .l,
[data-theme="dark"] .chroma .ld,
[data-theme="dark"] .chroma .s,
[data-theme="dark"] .chroma .sa,
[data-theme="dark"] .chroma .sb,
[data-theme="dark"] .chroma .sc,
[data-theme="dark"] .chroma .dl,
[data-theme="dark"] .chroma .sd,
[data-theme="dark"] .chroma .s2,
[data-theme="dark"] .chroma .se,
[data-theme="dark"] .chroma .sh,
[data-theme="dark"] .chroma .si,
[data-theme="dark"] .chroma .sx,
[data-theme="dark"] .chroma .sr,
[data-theme="dark"] .chroma .s1,
[data-theme="dark"] .chroma .ss,
[data-theme="dark"] .chroma .m,
[data-theme="dark"] .chroma .mb,
[data-theme="dark"] .chroma .mf,
[data-theme="dark"] .chroma .mh,
[data-theme="dark"] .chroma .mi,
[data-theme="dark"] .chroma .il,
[data-theme="dark"] .chroma .mo,
[data-theme="dark"] .chroma .o,
[data-theme="dark"] .chroma .ow,
[data-theme="dark"] .chroma .p,
[data-theme="dark"] .chroma .x {
  color: var(--text, #F5F5F5) !important;
}

/* Comments + doc strings — muted (still readable on dark bg) */
[data-theme="dark"] .chroma .c,
[data-theme="dark"] .chroma .ch,
[data-theme="dark"] .chroma .cm,
[data-theme="dark"] .chroma .cp,
[data-theme="dark"] .chroma .c1,
[data-theme="dark"] .chroma .cs,
[data-theme="dark"] .chroma .sd {
  color: var(--muted, #A1A1A1) !important;
  font-style: italic !important;
}

/* Keywords get bold weight */
[data-theme="dark"] .chroma .k,
[data-theme="dark"] .chroma .kc,
[data-theme="dark"] .chroma .kd,
[data-theme="dark"] .chroma .kn,
[data-theme="dark"] .chroma .kp,
[data-theme="dark"] .chroma .kr,
[data-theme="dark"] .chroma .kt,
[data-theme="dark"] .chroma .ow {
  font-weight: 600 !important;
}

/* Line numbers */
[data-theme="dark"] .chroma .ln,
[data-theme="dark"] .chroma .lnt {
  color: var(--muted, #A1A1A1) !important;
}

/* Line highlight */
[data-theme="dark"] .chroma .hl {
  background-color: var(--border, #363636) !important;
}

/* === Remove inline color styles from code blocks ===
   Hugo's Chroma sometimes outputs inline color styles on tokens.
   Force-override with !important above handles that.
   Also strip inline background-color on the .highlight wrapper. */
.highlight,
.highlight pre,
.highlight pre code,
pre.chroma,
code.chroma,
.chroma,
pre,
pre code {
  background-color: var(--code-bg) !important;
}

/* Plain (non-chroma) code blocks also get the right colors */
pre code {
  color: var(--text) !important;
}

/* Inline code in body text */
code,
:not(pre) > code,
p code,
li code {
  background: var(--code-bg) !important;
  color: var(--text) !important;
  padding: 0.15rem 0.35rem !important;
  border-radius: 3px !important;
  font-family: var(--font-mono, "IBM Plex Mono", monospace) !important;
  font-size: 0.875em !important;
  border: 1px solid var(--border) !important;
}

/* Inside <pre>, no border, no padding (full-width code) */
pre code,
pre > code,
.highlight pre code {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}