1 files changed, 391 insertions, 0 deletions
diff --git a/assets/css/chroma-custom.css b/assets/css/chroma-custom.css
new file mode 100644
index 0000000..d632e09
--- /dev/null
+++ b/assets/css/chroma-custom.css
@@ -0,0 +1,391 @@
+/* === Chroma Custom — Catppuccin Macchiato === */
+
+:root {
+  /* Catppuccin Macchiato palette */
+  --ctp-base:     #24273a;
+  --ctp-surface0: #363a4f;
+  --ctp-surface1: #494d64;
+  --ctp-overlay0: #6e738d;
+  --ctp-text:     #cad3f5;
+  --ctp-subtext1: #b8c0e0;
+  --ctp-lavender: #b7bdf8;
+  --ctp-blue:     #8aadf4;
+  --ctp-sapphire: #7dc4e4;
+  --ctp-sky:      #91d7e3;
+  --ctp-teal:     #8bd5ca;
+  --ctp-green:    #a6da95;
+  --ctp-yellow:   #eed49f;
+  --ctp-peach:    #f5a97f;
+  --ctp-maroon:   #ee99a0;
+  --ctp-red:      #ed8796;
+  --ctp-mauve:    #c6a0f6;
+  --ctp-pink:     #f5bde6;
+}
+
+/* === Code block wrapper and header bar === */
+
+.code-block-wrapper {
+  margin: 1.5rem 0;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--border);
+}
+
+.code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.375rem 0.75rem;
+  background-color: var(--ctp-surface0);
+  border-bottom: 1px solid var(--ctp-surface1);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+}
+
+.code-lang-label {
+  color: var(--ctp-subtext1);
+  letter-spacing: 0.05em;
+}
+
+.code-copy-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.code-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  color: var(--ctp-overlay0);
+  transition: color 0.15s ease, background 0.15s ease;
+  line-height: 1;
+}
+
+.code-copy-btn:hover {
+  color: var(--ctp-text);
+  background: rgba(202, 211, 245, 0.08);
+}
+
+.code-copy-btn:focus-visible {
+  outline: 2px solid var(--ctp-lavender);
+  outline-offset: 2px;
+}
+
+.code-copy-btn [data-feather],
+.code-copy-btn svg {
+  width: 14px !important;
+  height: 14px !important;
+  stroke-width: 2px;
+}
+
+.code-copy-btn .hidden {
+  display: none;
+}
+
+.code-copy-btn.is-copied {
+  color: var(--ctp-green);
+}
+
+/* === Code body === */
+
+.code-body {
+  overflow-x: auto;
+}
+
+.code-body .highlight,
+.code-body .highlight .chroma {
+  margin: 0;
+  border-radius: 0;
+  border: none;
+  background-color: var(--ctp-base);
+}
+
+/* === Reset conflicts with main.css base styles === */
+
+.code-block-wrapper pre,
+.prose .code-block-wrapper pre,
+.prose-invert .code-block-wrapper pre {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  overflow-x: visible;
+}
+
+/* Re-apply padding after the reset above, with higher specificity */
+.code-block-wrapper .highlight .lntd:first-child pre {
+  padding: 0.875rem 0;
+}
+
+.code-block-wrapper .highlight .lntd:last-child pre {
+  padding: 0.875rem 1rem;
+}
+
+/* === Chroma table layout (lineNumbersInTable = true) === */
+
+.highlight table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.highlight td {
+  padding: 0;
+  vertical-align: top;
+}
+
+/* Line number column — not selectable */
+/* color: --ctp-overlay0 (#6e738d) on --ctp-surface0 (#363a4f) = ~3.5:1 */
+.highlight .lnt,
+.highlight .ln {
+  padding: 0.875rem 0.75rem 0.875rem 1rem;
+  color: var(--ctp-overlay0);
+  user-select: none;
+  -webkit-user-select: none;
+  min-width: 2.5rem;
+  text-align: right;
+  border-right: 1px solid var(--ctp-surface1);
+  font-size: 0.8125rem;
+}
+
+.highlight .lntd:first-child {
+  background-color: var(--ctp-surface0);
+}
+
+.highlight .lntd:first-child pre {
+  padding: 0.875rem 0;
+}
+
+.highlight .lntd:last-child pre {
+  padding: 0.875rem 1rem;
+}
+
+.highlight .chroma {
+  overflow-x: auto;
+}
+
+.code-block-wrapper pre,
+.code-block-wrapper code {
+  font-size: 0.875em;
+}
+
+/* === Syntax token colors (dark theme default) === */
+
+.highlight {
+  background-color: var(--ctp-base);
+  color: var(--ctp-text);
+}
+
+/* Keywords — mauve */
+.highlight .k,
+.highlight .kc,
+.highlight .kd,
+.highlight .kn,
+.highlight .kp,
+.highlight .kr,
+.highlight .kt {
+  color: var(--ctp-mauve);
+  font-weight: 500;
+}
+
+/* Strings — green */
+.highlight .s,
+.highlight .sa,
+.highlight .sb,
+.highlight .sc,
+.highlight .dl,
+.highlight .sd,
+.highlight .s1,
+.highlight .s2,
+.highlight .se,
+.highlight .sh,
+.highlight .si,
+.highlight .sx,
+.highlight .sr,
+.highlight .ss {
+  color: var(--ctp-green);
+}
+
+/* Numbers — peach */
+.highlight .m,
+.highlight .mb,
+.highlight .mf,
+.highlight .mh,
+.highlight .mi,
+.highlight .il,
+.highlight .mo {
+  color: var(--ctp-peach);
+}
+
+/* Comments — overlay0, italic */
+.highlight .c,
+.highlight .c1,
+.highlight .cm,
+.highlight .cs,
+.highlight .cp,
+.highlight .cpf {
+  color: var(--ctp-overlay0);
+  font-style: italic;
+}
+
+/* Operators — sky */
+.highlight .o,
+.highlight .ow {
+  color: var(--ctp-sky);
+}
+
+/* Names / Identifiers */
+.highlight .n {
+  color: var(--ctp-text);
+}
+
+.highlight .na {
+  color: var(--ctp-yellow);
+}
+
+.highlight .nb {
+  color: var(--ctp-blue);
+}
+
+.highlight .nc {
+  color: var(--ctp-yellow);
+}
+
+.highlight .nd {
+  color: var(--ctp-pink);
+}
+
+.highlight .ne {
+  color: var(--ctp-maroon);
+}
+
+.highlight .nf,
+.highlight .fm {
+  color: var(--ctp-blue);
+}
+
+.highlight .ni {
+  color: var(--ctp-text);
+}
+
+.highlight .nl {
+  color: var(--ctp-teal);
+}
+
+.highlight .nn {
+  color: var(--ctp-yellow);
+}
+
+.highlight .nt {
+  color: var(--ctp-mauve);
+}
+
+.highlight .nv,
+.highlight .vc,
+.highlight .vg,
+.highlight .vi {
+  color: var(--ctp-text);
+}
+
+/* Punctuation */
+.highlight .p {
+  color: var(--ctp-subtext1);
+}
+
+/* Generic tokens (diff output etc.) */
+.highlight .gd {
+  color: var(--ctp-red);
+  background: rgba(237, 135, 150, 0.1);
+}
+
+.highlight .gi {
+  color: var(--ctp-green);
+  background: rgba(166, 218, 149, 0.1);
+}
+
+.highlight .gh {
+  color: var(--ctp-lavender);
+  font-weight: bold;
+}
+
+.highlight .gu {
+  color: var(--ctp-overlay0);
+}
+
+.highlight .ge {
+  font-style: italic;
+}
+
+.highlight .gs {
+  font-weight: bold;
+}
+
+/* Error */
+.highlight .err {
+  color: var(--ctp-red);
+}
+
+/* === Light theme overrides (Catppuccin Latte) === */
+
+html.theme-light .code-block-wrapper {
+  border-color: #ccd0da;
+}
+
+html.theme-light .code-header {
+  background-color: #dce0ea;
+  border-bottom-color: #bcc0cc;
+}
+
+html.theme-light .code-lang-label {
+  color: #5c5f77;
+}
+
+html.theme-light .code-copy-btn {
+  color: #6c6f85;
+}
+
+html.theme-light .code-copy-btn:hover {
+  color: #4c4f69;
+  background: rgba(76, 79, 105, 0.08);
+}
+
+html.theme-light .code-body .highlight,
+html.theme-light .code-body .highlight .chroma {
+  background-color: #eff1f5;
+  color: #4c4f69;
+}
+
+html.theme-light .highlight .lntd:first-child {
+  background-color: #e6e9ef;
+}
+
+html.theme-light .highlight .lnt,
+html.theme-light .highlight .ln {
+  color: #bcc0cc;
+  border-right-color: #bcc0cc;
+}
+
+/* Comments must be darker to read on light bg */
+html.theme-light .highlight .c,
+html.theme-light .highlight .c1,
+html.theme-light .highlight .cm,
+html.theme-light .highlight .cs,
+html.theme-light .highlight .cp,
+html.theme-light .highlight .cpf {
+  color: #7c7f93;
+}
+
+/* Text defaults */
+html.theme-light .highlight .n {
+  color: #4c4f69;
+}
+
+html.theme-light .highlight .p {
+  color: #6c6f85;
+}