/* =====================================================================
   b'nerd canonical DARK CODE-BLOCK THEME — "Terminal-Nerd Readable"
   ---------------------------------------------------------------------
   Drop-in for ALL MkDocs Material docs surfaces:
     - docs.bnerd.com                 (app/docs)            — docs-engineer
     - cli.docs.bnerd.com                                   — docs-engineer
     - nextcloud-operator.docs.bnerd.com (site-docs/)       — operator docs maintainer

   WHY THIS EXISTS
   ---------------------------------------------------------------------
   The code blocks already use a near-black terminal background (#0d1117),
   but the *syntax* colors were still Material's LIGHT-theme Pygments
   defaults (keyword #3f6ec6, string #1c7d4d, number #d52a2a, comment =
   --md-default-fg-color--light). Those are dark, saturated colors meant
   for a WHITE page. On #0d1117 they measured 3.2–3.8:1 contrast — below
   the 4.5:1 AA body threshold — i.e. muddy and hard to read.

   THE FIX (clean cascade, no per-class CSS)
   ---------------------------------------------------------------------
   Material maps EVERY Pygments token class (.highlight .k, .s, .c, .m, …)
   to one of 12 CSS custom properties (--md-code-hl-*-color). We simply
   redefine those 12 vars, scoped to the code container, with a palette
   tuned for the dark background. This cascades to every language
   automatically — Go, YAML, bash, Ruby, JSON, HCL, Dockerfile, etc.

   Every token below is WCAG AA or AAA on #0d1117 (verified):
     foreground 16.0:1 · keyword 8.7:1 · string 12.3:1 · comment 6.4:1
     number 9.8:1 · function 9.7:1 · builtin 9.7:1 · operator 7.5:1
     punctuation 9.7:1 · line-numbers 4.1:1

   IDENTITY: keyword = #a4abf0, a lightened cast of the brand indigo
   (TUI ColorAccent 69 / web indigo-500). Readability wins over a literal
   palette match — the most frequent token must stay legible — but the
   Terminal-Nerd indigo character is preserved on the most prominent token
   and on the chrome (label tab, copy button, inline code).

   Source of truth: cloud/mission design hub (styleguide §10 "Code blocks")
   and decisions/2026-06-02-design-language.md.
   Owner: ux-designer. Do not fork per-site — change here, sync everywhere.
   ===================================================================== */

/* ── 1. Container, foreground, chrome ─────────────────────────────── */

.md-typeset pre {
  border-radius: 4px;                 /* sharp Terminal-Nerd corner (§3.4) */
  border: 1px solid #30363d;          /* hairline that reads on BOTH the
                                         white page and against the dark bg */
  background: #0d1117;                /* near-black terminal bg ≈ TUI 234 */
}

.md-typeset pre > code {
  background: transparent;
  color: #e6edf3;                     /* off-white default text — 16:1 AAA */
  font-size: 0.8rem;                  /* 12.8px — §4 monospace 11–13px */
  line-height: 1.6;
}

/* ── 2. Syntax token palette (the actual fix) ─────────────────────── */
/* Scope to the highlight container + the bare-fenced <pre><code> so it
   applies whether or not Pygments wrapped the block in .highlight.       */

.md-typeset .highlight,
.md-typeset pre > code {
  /* ---- the 12 Material code-highlight variables ---- */
  --md-code-hl-keyword-color:     #a4abf0;  /* keywords, tags     8.7:1 AAA — lightened brand indigo */
  --md-code-hl-string-color:      #7ee787;  /* strings           12.3:1 AAA */
  --md-code-hl-comment-color:     #8b97a8;  /* comments, docstr   6.4:1 AA  — intentionally quieter */
  --md-code-hl-number-color:      #ffa657;  /* numbers            9.8:1 AAA */
  --md-code-hl-function-color:    #d2a8ff;  /* function/namespace 9.7:1 AAA — violet */
  --md-code-hl-constant-color:    #79c0ff;  /* constants/builtins 9.7:1 AAA — blue */
  --md-code-hl-name-color:        #e6edf3;  /* plain names = default text */
  --md-code-hl-operator-color:    #ff7b72;  /* operators          7.5:1 AAA — coral */
  --md-code-hl-punctuation-color: #b0bac9;  /* punctuation        9.7:1 AAA — muted */
  --md-code-hl-variable-color:    #ffa657;  /* variables          9.8:1 AAA */
  --md-code-hl-special-color:     #ff7b72;  /* special/deleted    7.5:1 AAA */
  --md-code-hl-generic-color:     #b0bac9;  /* generic output     9.7:1 AAA */
}

/* ── 3. Highlighted line (pymdownx hl_lines) + selection ──────────── */

.md-typeset .highlight .hll {
  background: #1f2a3a;                /* subtle indigo-slate wash, no border */
  box-shadow: none;
}

.md-typeset pre > code ::selection,
.md-typeset pre > code::selection {
  background: #264f78;               /* terminal-blue selection */
  color: #ffffff;
}

/* ── 4. Line numbers (when pymdownx linenums is on) ───────────────── */

.md-typeset .highlighttable .linenos,
.md-typeset .linenos pre,
.md-typeset .linenodiv pre,
.md-typeset [data-linenos]::before {
  color: #6e7681;                    /* gutter 4.1:1 — readable, recessive
                                        (was #484f58 ≈ 2.3:1, near-invisible) */
}
.md-typeset .highlighttable .linenos {
  border-right: 1px solid #30363d;   /* hairline gutter divider */
}

/* ── 5. Language label tab / filename ─────────────────────────────── */

.md-typeset .highlight .filename {
  background: #161b22;
  color: #a4abf0;                    /* brand indigo (AAA on the tab bg) */
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid #30363d;
  border-bottom: none;
}

/* ── 6. Copy-to-clipboard button ──────────────────────────────────── */
/* Sits on the dark bg → must be a light glyph, indigo on hover/focus.   */

.md-typeset .highlight .md-clipboard {
  color: #8b97a8;                    /* visible on #0d1117 (6.4:1) */
}
.md-typeset .highlight .md-clipboard:hover,
.md-typeset .highlight .md-clipboard:focus-visible {
  color: #a4abf0;                    /* brand indigo on interaction */
}
.md-clipboard:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── 7. Inline code (on the WHITE page — distinct from blocks) ────── */
/* Inline code stays light/indigo-tinted: it lives in prose on a white
   page, NOT in the dark block. Unchanged from the established treatment;
   5.6:1 AA. Do not make inline code dark — it would punch holes in prose. */

.md-typeset code:not(pre code) {
  background: #eef2ff;               /* indigo-50 */
  color: #4f46e5;                    /* indigo-700 — 5.6:1 AA on indigo-50 */
  border: 1px solid #e0e7ff;         /* indigo-100 */
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-size: 0.82em;
}

/* ── 8. Dark page scheme (Material 'slate') ───────────────────────── */
/* The code block is ALREADY dark, so it needs no change in slate mode —
   only the hairline border softens so it doesn't glow against a dark page.*/

[data-md-color-scheme="slate"] .md-typeset pre {
  border-color: #21262d;
}
[data-md-color-scheme="slate"] .md-typeset code:not(pre code) {
  background: rgba(124,131,212,0.14); /* dim indigo tint, readable on slate */
  color: #c5caf2;
  border-color: rgba(124,131,212,0.28);
}