/* ---------------------------------------------------------------------------
   Custom theme for "My Technical Notes"
   Loaded after the Zensical stylesheets, so the rules here win.

   Sections
     1. Design tokens (light)
     2. Design tokens (dark / slate)
     3. Typography and content
     4. Header, navigation, table of contents
     5. Code: block chrome, titles, gutter, copy button, inline code
     6. Code: syntax highlighting tokens
     7. Code: diffs, highlighted lines, selection
     8. Admonitions, tables, tags, footer
--------------------------------------------------------------------------- */

/* -- 1. Design tokens (light) --------------------------------------------- */

:root,
[data-md-color-scheme="default"] {
  --md-hue: 220deg;

  /* Surfaces and text */
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #1f2328;
  --md-default-fg-color--light: #59636e;
  --md-default-fg-color--lighter: #8c959f;
  --md-default-fg-color--lightest: #eaedf0;

  /* Header and links */
  --md-primary-fg-color: #14171c;
  --md-primary-fg-color--light: #2c3238;
  --md-primary-fg-color--dark: #0b0d10;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffcc;
  --md-accent-fg-color: #0969da;
  --md-accent-fg-color--transparent: #0969da14;
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffffb3;
  --md-typeset-a-color: #0757ba;

  /* Code surfaces */
  --md-code-fg-color: #1f2328;
  --md-code-bg-color: #f6f8fa;
  --md-code-bg-color--light: #f6f8fab3;
  --md-code-bg-color--lighter: #f6f8fa4d;
  --md-code-border-color: #d1d9e0;
  --md-code-title-bg-color: #eef1f4;
  --md-code-gutter-fg-color: #8c959f;
  --md-code-selection-color: #0969da26;

  /* Misc */
  --md-typeset-mark-color: #fff8c5;
  --md-typeset-table-color: #d1d9e0;
  --md-typeset-table-color--light: #d1d9e045;
  --md-typeset-kbd-color: #f6f8fa;
  --md-typeset-kbd-accent-color: #ffffff;
  --md-typeset-kbd-border-color: #d1d9e0;
  --md-footer-bg-color: #14171c;
  --md-footer-bg-color--dark: #0b0d10;

  /* Syntax tokens */
  --md-code-hl-comment-color: #616a74;
  --md-code-hl-keyword-color: #cf222e;
  --md-code-hl-operator-color: #cf222e;
  --md-code-hl-punctuation-color: #57606a;
  --md-code-hl-string-color: #0a3069;
  --md-code-hl-special-color: #116329;
  --md-code-hl-number-color: #0550ae;
  --md-code-hl-constant-color: #0550ae;
  --md-code-hl-function-color: #8250df;
  --md-code-hl-type-color: #953800;
  --md-code-hl-namespace-color: #6639ba;
  --md-code-hl-variable-color: #953800;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-generic-color: #57606a;
  --md-code-hl-error-color: #82071e;
  --md-code-hl-color: #0969da;
  --md-code-hl-color--light: #0969da1f;

  /* Diff tokens */
  --md-code-diff-add-fg-color: #116329;
  --md-code-diff-add-bg-color: #dafbe1;
  --md-code-diff-del-fg-color: #82071e;
  --md-code-diff-del-bg-color: #ffebe9;
}

/* -- 2. Design tokens (dark / slate) -------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-hue: 215deg;
  color-scheme: dark;

  --md-default-bg-color: #0d1117;
  --md-default-fg-color: #cdd5df;
  --md-default-fg-color--light: #9aa5b1;
  --md-default-fg-color--lighter: #6e7781;
  --md-default-fg-color--lightest: #262c34;

  --md-primary-fg-color: #0d1117;
  --md-primary-fg-color--light: #161b22;
  --md-primary-fg-color--dark: #010409;
  --md-primary-bg-color: #e6edf3;
  --md-primary-bg-color--light: #e6edf3b3;
  --md-accent-fg-color: #58a6ff;
  --md-accent-fg-color--transparent: #58a6ff1f;
  --md-accent-bg-color: #0d1117;
  --md-accent-bg-color--light: #0d1117b3;
  --md-typeset-a-color: #6cb6ff;

  --md-code-fg-color: #c9d1d9;
  --md-code-bg-color: #161b22;
  --md-code-bg-color--light: #161b22e6;
  --md-code-bg-color--lighter: #161b2280;
  --md-code-border-color: #2a313a;
  --md-code-title-bg-color: #1b2129;
  --md-code-gutter-fg-color: #6e7781;
  --md-code-selection-color: #58a6ff33;

  --md-typeset-mark-color: #bb800940;
  --md-typeset-table-color: #2a313a;
  --md-typeset-table-color--light: #2a313a66;
  --md-typeset-kbd-color: #21262d;
  --md-typeset-kbd-accent-color: #30363d;
  --md-typeset-kbd-border-color: #0d1117;
  --md-footer-bg-color: #0b0f15;
  --md-footer-bg-color--dark: #010409;

  --md-code-hl-comment-color: #8b949e;
  --md-code-hl-keyword-color: #ff7b72;
  --md-code-hl-operator-color: #ff7b72;
  --md-code-hl-punctuation-color: #9da7b3;
  --md-code-hl-string-color: #a5d6ff;
  --md-code-hl-special-color: #7ee787;
  --md-code-hl-number-color: #79c0ff;
  --md-code-hl-constant-color: #79c0ff;
  --md-code-hl-function-color: #d2a8ff;
  --md-code-hl-type-color: #ffa657;
  --md-code-hl-namespace-color: #d2a8ff;
  --md-code-hl-variable-color: #ffa657;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-generic-color: #8b949e;
  --md-code-hl-error-color: #ffa198;
  --md-code-hl-color: #58a6ff;
  --md-code-hl-color--light: #388bfd26;

  --md-code-diff-add-fg-color: #7ee787;
  --md-code-diff-add-bg-color: #2ea04326;
  --md-code-diff-del-fg-color: #ffa198;
  --md-code-diff-del-bg-color: #f8514926;
}

/* Headings keep the extra contrast the theme gives them, links stay readable */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: #f0f6fc;
}

/* -- 3. Typography and content -------------------------------------------- */

.md-typeset {
  font-size: 0.76rem;
  line-height: 1.75;
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.md-typeset h2 {
  border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.3em;
}

.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  scroll-margin-top: 3.2rem;
}

/* Links: underline only where it helps, never on chips or headings */
.md-typeset a {
  text-decoration-color: color-mix(in srgb, var(--md-typeset-a-color) 40%, transparent);
  text-decoration-line: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.18em;
}

.md-typeset a:hover,
.md-typeset a:focus {
  text-decoration-color: currentcolor;
}

.md-typeset a.md-tag,
.md-typeset a.headerlink,
.md-typeset h1 a,
.md-typeset h2 a,
.md-typeset h3 a,
.md-typeset h4 a {
  text-decoration: none;
}

.md-typeset blockquote {
  border-left: 0.15rem solid var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color--light);
  padding-left: 0.9rem;
}

.md-typeset hr {
  border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
  margin: 2em 0;
}

/* Anchor links appear on hover instead of always sitting next to the heading */
.md-typeset .headerlink {
  opacity: 0;
  transition: opacity 125ms;
}

.md-typeset :is(h1, h2, h3, h4, h5, h6):hover .headerlink,
.md-typeset .headerlink:focus {
  opacity: 1;
}

/* -- 4. Header, navigation, table of contents ----------------------------- */

.md-header {
  border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-header {
  border-bottom-color: var(--md-code-border-color);
}

.md-nav__link--active,
.md-nav__link--active code {
  font-weight: 700;
}

.md-nav__item .md-nav__link--active {
  color: var(--md-accent-fg-color);
}

.md-sidebar--secondary .md-nav__title {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* -- 5. Code: block chrome, titles, gutter, copy button, inline code ------ */

/* Keep the theme's font-size, line-height and padding: the line-number
   gutter is a separate table cell and only stays aligned if they match. */
.md-typeset pre > code {
  border: 0.05rem solid var(--md-code-border-color);
  tab-size: 4;
}

.md-typeset .highlighttable > tbody > tr > .code > div > pre > code {
  border-left-width: 0;
}

/* Code block title bar (```bash title="deploy.sh") */
.highlight span.filename {
  background-color: var(--md-code-title-bg-color);
  border: 0.05rem solid var(--md-code-border-color);
  border-bottom-width: 0;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  color: var(--md-default-fg-color--light);
  font-family: var(--md-code-font-family);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.5em 1.1em;
}

/* Line numbers: readable, but clearly secondary */
.highlight [data-linenos]::before,
.highlighttable .linenodiv pre {
  color: var(--md-code-gutter-fg-color);
}

.highlight [data-linenos]::before {
  background-color: var(--md-code-bg-color);
  box-shadow: -0.05rem 0 var(--md-code-border-color) inset;
}

.highlighttable .linenos {
  background-color: var(--md-code-bg-color);
  border: 0.05rem solid var(--md-code-border-color);
  border-right-width: 0;
}

/* Copy/select buttons: visible at rest, accented on hover.
   The modern variant uses .md-code__button, the classic one .md-clipboard. */
.md-code__nav {
  background-color: var(--md-code-title-bg-color);
  border: 0.05rem solid var(--md-code-border-color);
  border-radius: 0.3rem;
  right: 0.4em;
  top: 0.4em;
}

.md-code__button,
.md-clipboard {
  color: var(--md-default-fg-color--lighter);
}

:hover > * > .md-code__button,
:hover > .md-clipboard {
  color: var(--md-default-fg-color--light);
}

.md-code__button:hover,
.md-code__button.focus-visible,
.md-clipboard:hover,
.md-clipboard:focus {
  color: var(--md-accent-fg-color);
}

/* Inline code: outlined so it reads as code inside prose */
.md-typeset code:not(pre code) {
  border: 0.05rem solid var(--md-code-border-color);
  font-size: 0.8em;
  padding: 0.1em 0.35em;
}

.md-typeset a code:not(pre code) {
  border-color: color-mix(in srgb, var(--md-typeset-a-color) 35%, transparent);
  color: var(--md-typeset-a-color);
}

.md-typeset :is(h1, h2, h3, h4) code:not(pre code) {
  font-size: 0.85em;
}

/* -- 6. Code: syntax highlighting tokens ---------------------------------- */

/* Comments read as prose, not as code */
.highlight :is(.c, .c1, .ch, .cm, .cs, .sd) {
  color: var(--md-code-hl-comment-color);
  font-style: italic;
}

/* Keywords, and keyword-like markup names */
.highlight :is(.k, .kd, .kn, .kp, .kr, .nd, .ni, .nl, .nt) {
  color: var(--md-code-hl-keyword-color);
  font-weight: 500;
}

/* Types get their own colour instead of sharing the function colour */
.highlight :is(.kt, .nc, .ne) {
  color: var(--md-code-hl-type-color);
}

/* Functions and methods */
.highlight :is(.nf, .fm) {
  color: var(--md-code-hl-function-color);
}

/* Modules, packages, namespaces */
.highlight .nn {
  color: var(--md-code-hl-namespace-color);
}

/* Constants, builtins, true/false/nil */
.highlight :is(.bp, .nb, .no, .kc) {
  color: var(--md-code-hl-constant-color);
}

/* Variables, attributes, object properties */
.highlight :is(.na, .nv, .vc, .vg, .vi, .vm, .py) {
  color: var(--md-code-hl-variable-color);
}

/* Plain identifiers, including JavaScript/TypeScript names (.nx) */
.highlight :is(.n, .nx) {
  color: var(--md-code-hl-name-color);
}

/* Strings, and string affixes/delimiters (f"", b'', heredocs) */
.highlight :is(.l, .s, .s1, .s2, .sb, .sc, .si, .ss, .cpf, .sa, .dl) {
  color: var(--md-code-hl-string-color);
}

/* Escapes, regexes, preprocessor, shell interpolation */
.highlight :is(.cp, .se, .sh, .sr, .sx) {
  color: var(--md-code-hl-special-color);
}

.highlight :is(.o, .ow) {
  color: var(--md-code-hl-operator-color);
}

.highlight .p {
  color: var(--md-code-hl-punctuation-color);
}

.highlight :is(.err, .w.err) {
  background-color: transparent;
  border-bottom: 0.05rem dotted var(--md-code-hl-error-color);
  color: var(--md-code-hl-error-color);
}

/* -- 7. Code: diffs, highlighted lines, selection ------------------------- */

.highlight :is(.gd, .gi) {
  display: inline-block;
  margin: 0 -1.1em;
  padding: 0 1.1em;
  width: calc(100% + 2.2em);
}

.highlight .gi {
  background-color: var(--md-code-diff-add-bg-color);
  color: var(--md-code-diff-add-fg-color);
}

.highlight .gd {
  background-color: var(--md-code-diff-del-bg-color);
  color: var(--md-code-diff-del-fg-color);
}

.highlight .gh {
  color: var(--md-code-hl-namespace-color);
  font-weight: 700;
}

.highlight .gu {
  color: var(--md-code-hl-comment-color);
  font-weight: 700;
}

.highlight .gs {
  font-weight: 700;
}

.highlight .ge {
  font-style: italic;
}

.highlight :is(.gr, .gt) {
  color: var(--md-code-hl-error-color);
}

/* Highlighted lines (```python hl_lines="2 3") */
.highlight .hll {
  background-color: var(--md-code-hl-color--light);
  box-shadow: 0.12rem 0 0 0 var(--md-code-hl-color) inset;
}

.md-typeset pre > code ::selection,
.md-typeset pre > code::selection,
.md-typeset code::selection {
  background-color: var(--md-code-selection-color);
}

/* -- 8. Admonitions, tables, tags, footer -------------------------------- */

.md-typeset :is(.admonition, details) {
  border-radius: 0.35rem;
  border-width: 0.05rem;
  box-shadow: none;
  font-size: 0.72rem;
}

.md-typeset :is(.admonition-title, summary) {
  font-weight: 700;
}

.md-typeset table:not([class]) {
  border-color: var(--md-typeset-table-color);
  border-radius: 0.35rem;
  font-size: 0.7rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--md-code-title-bg-color);
  font-weight: 700;
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--md-typeset-table-color--light);
}

/* Tag chips link to their tag page, so make them look clickable */
.md-typeset .md-tag {
  background-color: transparent;
  border: 0.05rem solid var(--md-code-border-color);
  color: var(--md-default-fg-color--light);
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  font-weight: 500;
  transition: color 125ms, background-color 125ms, border-color 125ms;
}

.md-typeset .md-tag:hover,
.md-typeset .md-tag:focus {
  background-color: var(--md-accent-fg-color--transparent);
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

.md-tags {
  gap: 0.35rem;
}

.md-footer-meta {
  font-size: 0.66rem;
}