/* Theme bundle: default — generated by scripts/bundle-themes.mjs */

/* ── variables.css ── */
/* ============================================================
   Default Theme — CSS Custom Properties
   Light:  #fdfdfd bg · #282728 fg · #006cac accent
   Dark:   #212737 bg · #eaedf3 fg · #ff6b01 accent
   ============================================================ */

:root {
  --background: 0 0% 99%;
  --foreground: 0 2% 16%;

  --card: 0 0% 99%;
  --card-foreground: 0 2% 16%;

  --popover: 0 0% 99%;
  --popover-foreground: 0 2% 16%;

  --primary: 201 100% 34%;
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 90%;
  --secondary-foreground: 0 2% 16%;

  --muted: 0 0% 90%;
  --muted-foreground: 0 0% 40%;

  --accent: 201 100% 34%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 4% 92%;
  --input: 0 0% 90%;
  --ring: 201 100% 34%;

  --radius: 0.5rem;
}

.dark {
  --background: 223 26% 17%;
  --foreground: 220 27% 93%;

  --card: 223 26% 17%;
  --card-foreground: 220 27% 93%;

  --popover: 223 26% 17%;
  --popover-foreground: 220 27% 93%;

  --primary: 25 100% 50%;
  --primary-foreground: 223 26% 17%;

  --secondary: 225 29% 29%;
  --secondary-foreground: 220 27% 93%;

  --muted: 225 29% 29%;
  --muted-foreground: 220 15% 70%;

  --accent: 25 100% 50%;
  --accent-foreground: 223 26% 17%;

  --border: 24 91% 35%;
  --input: 225 29% 29%;
  --ring: 25 100% 50%;
}

/* ── components.css ── */
/* ============================================================
   Default Theme — Component Styles
   Uses standard shadcn HSL tokens from variables.css.
   Auto-loaded by the theme loader alongside variables.css.
   ============================================================ */

/* ── Inline Code ──────────────────────────────────────────── */

.prose-astropaper code {
  font-size: 0.88em;
  background: hsl(var(--secondary));
  color: hsl(var(--primary));
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

/* ── Links ────────────────────────────────────────────────── */

.prose-astropaper a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: hsl(var(--primary) / 0.4);
  transition: text-decoration-color 0.2s ease;
}

.prose-astropaper a:hover {
  text-decoration-color: hsl(var(--primary));
}

/* ── Heading anchor links ─────────────────────────────────── */

.prose-astropaper h1 a.anchor-link,
.prose-astropaper h2 a.anchor-link,
.prose-astropaper h3 a.anchor-link,
.prose-astropaper h4 a.anchor-link,
.prose-astropaper h5 a.anchor-link,
.prose-astropaper h6 a.anchor-link {
  color: hsl(var(--primary));
  text-decoration: none;
}

/* ── Headings ─────────────────────────────────────────────── */

.prose-astropaper h2 {
  font-size: 1.65rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.prose-astropaper h3 {
  font-size: 1.3rem;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.prose-astropaper h4 {
  font-size: 1.05rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.prose-astropaper p {
  margin-bottom: 1.25rem;
}

/* ── Lists ────────────────────────────────────────────────── */

.prose-astropaper ul,
.prose-astropaper ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.prose-astropaper li {
  margin-bottom: 0.4rem;
}

.prose-astropaper li::marker {
  color: hsl(var(--primary));
}

.prose-astropaper ul ul,
.prose-astropaper ol ol,
.prose-astropaper ul ol,
.prose-astropaper ol ul {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

/* ── Blockquote ───────────────────────────────────────────── */

.prose-astropaper blockquote {
  border-left: 3px solid hsl(var(--primary));
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: hsl(var(--secondary));
  border-radius: 0 6px 6px 0;
}

.prose-astropaper blockquote p {
  font-size: 1.1rem;
  font-style: italic;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* ── Code Blocks ──────────────────────────────────────────── */

.code-block-wrapper {
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
}

.code-block-wrapper:hover {
  border-color: hsl(var(--muted-foreground) / 0.4);
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.78rem;
}

.code-block-lang {
  font-weight: 500;
  color: hsl(var(--primary));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.code-copy-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.code-copy-btn:hover {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
}

.code-copy-btn.copied {
  color: hsl(120 50% 40%);
}

.prose-astropaper pre {
  margin: 0;
  padding: 1.25rem;
  overflow-x: auto;
  background: hsl(var(--muted));
  border-radius: 0;
}

.prose-astropaper pre code {
  font-size: 0.85rem;
  line-height: 1.65;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  display: block;
  white-space: pre;
  tab-size: 4;
  color: inherit;
}

/* ── Mermaid Diagrams ────────────────────────────────────── */

.mermaid-wrapper {
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary));
  padding: 1.5rem;
}

.mermaid-wrapper pre.mermaid {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  overflow: visible;
  display: flex;
  justify-content: center;
}

.mermaid-wrapper svg {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ── Horizontal Rule ──────────────────────────────────────── */

.prose-astropaper hr {
  border: none;
  height: 1px;
  background: hsl(var(--border));
  margin: 3rem 0;
}

/* ── Tables ────────────────────────────────────────────────── */

.prose-astropaper .table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: 8px;
  border: 1px solid hsl(var(--secondary));
}

.prose-astropaper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0;
}

.prose-astropaper thead {
  background: hsl(var(--secondary));
}

.prose-astropaper th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--foreground));
  border-bottom: 1px solid hsl(var(--secondary));
}

.prose-astropaper td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.prose-astropaper tbody tr:hover td {
  background: hsl(var(--primary) / 0.05);
}

.prose-astropaper tbody tr:last-child td {
  border-bottom: none;
}

/* ── Tags ─────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 0.25em 0.7em;
  font-size: 0.8rem;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.tag:hover {
  background: hsl(var(--primary) / 0.2);
  border-color: hsl(var(--primary));
  transform: translateY(-1px);
}

/* ── Table of Contents ────────────────────────────────────── */

.table-of-contents {
  background: hsl(var(--secondary));
  border: none;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin-bottom: 3rem;
}

.toc-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
}

.table-of-contents ol {
  list-style: none;
  counter-reset: toc;
  padding-left: 0;
}

.table-of-contents li {
  counter-increment: toc;
  margin-bottom: 0.35rem;
}

.table-of-contents li::before {
  content: counter(toc, decimal-leading-zero) ".";
  color: hsl(var(--primary));
  font-size: 0.82rem;
  font-weight: 500;
  margin-right: 0.5rem;
}

.table-of-contents a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.table-of-contents a:hover {
  color: hsl(var(--primary));
}

/* ── Post Navigation ──────────────────────────────────────── */

.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 3rem 0;
}

.nav-prev,
.nav-next {
  padding: 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.nav-prev:hover,
.nav-next:hover {
  border-color: hsl(var(--primary));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.06);
}

.nav-next {
  text-align: right;
  align-items: flex-end;
}

.nav-direction {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  line-height: 1.35;
}

/* ── Back to Top ──────────────────────────────────────────── */

.back-to-top {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.04);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.06);
  transform: translateY(-2px);
}

/* ── Mark / Highlight ─────────────────────────────────────── */

.prose-astropaper mark,
mark {
  background: hsl(50 90% 80% / 0.7);
  color: hsl(var(--foreground));
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

.dark .prose-astropaper mark,
.dark mark {
  background: hsl(50 50% 30% / 0.5);
}

/* ── Keyboard ─────────────────────────────────────────────── */

.prose-astropaper kbd,
kbd {
  font-size: 0.82em;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.15em 0.45em;
  color: hsl(var(--foreground));
}

/* ── Reading Progress Bar ─────────────────────────────────── */

.reading-progress {
  height: 2px;
  background: hsl(var(--primary));
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .post-navigation {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .code-block-wrapper pre {
    padding: 1rem;
  }

  .code-block-wrapper pre code {
    font-size: 0.78rem;
  }

  .table-of-contents {
    padding: 1.25rem 1.5rem;
  }
}

/* ── syntax.css ── */
/* ============================================================
   Default Theme — Syntax Highlighting & Code-Block Label Colours
   Theme inspired by AstroPaper: https://astro-paper.pages.dev/
   ============================================================ */

/* ================================================================
   PART 1 — highlight.js Token Colours
   ================================================================ */

/* ── LIGHT THEME ─────────────────────────────────────────────── */

/* Base / fallback tokens (light) */
:root .hljs {
  color: hsl(220 14% 30%);
  background: transparent;
}

:root .hljs-comment,
:root .hljs-quote {
  color: hsl(220 10% 55%);
  font-style: italic;
}

:root .hljs-keyword,
:root .hljs-selector-tag,
:root .hljs-built_in,
:root .hljs-name {
  color: hsl(286 55% 42%);
}

:root .hljs-string,
:root .hljs-attr,
:root .hljs-symbol,
:root .hljs-bullet,
:root .hljs-addition {
  color: hsl(95 45% 35%);
}

:root .hljs-title,
:root .hljs-section,
:root .hljs-title.class_ {
  color: hsl(30 60% 40%);
}

:root .hljs-variable,
:root .hljs-template-variable {
  color: hsl(187 55% 35%);
}

:root .hljs-number,
:root .hljs-literal {
  color: hsl(29 60% 42%);
}

:root .hljs-type,
:root .hljs-params {
  color: hsl(187 55% 35%);
}

:root .hljs-meta {
  color: hsl(220 10% 50%);
}

:root .hljs-link {
  color: hsl(29 60% 42%);
  text-decoration: underline;
}

:root .hljs-deletion {
  color: hsl(0 60% 45%);
}

:root .hljs-attr {
  color: hsl(187 55% 35%);
}

:root .hljs-attribute {
  color: hsl(95 45% 35%);
}

:root .hljs-tag {
  color: hsl(220 14% 45%);
}

/* ── JS (light) ──────────────────────────────────────────────── */
:root .lang-javascript .hljs-keyword,
:root .lang-javascript .hljs-built_in,
:root .lang-js .hljs-keyword,
:root .lang-js .hljs-built_in {
  color: hsl(286 55% 42%);
}

:root .lang-javascript .hljs-string,
:root .lang-js .hljs-string {
  color: hsl(95 45% 35%);
}

:root .lang-javascript .hljs-title,
:root .lang-javascript .hljs-title.function_,
:root .lang-js .hljs-title,
:root .lang-js .hljs-title.function_ {
  color: hsl(30 65% 38%);
}

:root .lang-javascript .hljs-number,
:root .lang-js .hljs-number {
  color: hsl(29 65% 42%);
}

:root .lang-javascript .hljs-variable,
:root .lang-javascript .hljs-template-variable,
:root .lang-js .hljs-variable,
:root .lang-js .hljs-template-variable {
  color: hsl(187 55% 35%);
}

/* ── TypeScript (light) ──────────────────────────────────────── */
:root .lang-typescript .hljs-keyword,
:root .lang-typescript .hljs-built_in,
:root .lang-ts .hljs-keyword,
:root .lang-ts .hljs-built_in {
  color: hsl(211 60% 40%);
}

:root .lang-typescript .hljs-string,
:root .lang-ts .hljs-string {
  color: hsl(24 70% 40%);
}

:root .lang-typescript .hljs-title,
:root .lang-typescript .hljs-title.function_,
:root .lang-ts .hljs-title,
:root .lang-ts .hljs-title.function_ {
  color: hsl(30 60% 40%);
}

:root .lang-typescript .hljs-type,
:root .lang-typescript .hljs-title.class_,
:root .lang-ts .hljs-type,
:root .lang-ts .hljs-title.class_ {
  color: hsl(170 55% 32%);
}

:root .lang-typescript .hljs-number,
:root .lang-ts .hljs-number {
  color: hsl(95 45% 35%);
}

/* ── Python (light) ──────────────────────────────────────────── */
:root .lang-python .hljs-keyword,
:root .lang-python .hljs-built_in {
  color: hsl(210 60% 40%);
}

:root .lang-python .hljs-string {
  color: hsl(40 75% 38%);
}

:root .lang-python .hljs-title,
:root .lang-python .hljs-title.function_ {
  color: hsl(170 55% 32%);
}

:root .lang-python .hljs-number {
  color: hsl(29 65% 42%);
}

:root .lang-python .hljs-decorator,
:root .lang-python .hljs-meta {
  color: hsl(30 60% 40%);
}

/* ── CSS (light) ─────────────────────────────────────────────── */
:root .lang-css .hljs-keyword,
:root .lang-css .hljs-selector-class,
:root .lang-css .hljs-selector-id {
  color: hsl(210 70% 40%);
}

:root .lang-css .hljs-attribute,
:root .lang-css .hljs-built_in {
  color: hsl(187 55% 35%);
}

:root .lang-css .hljs-number {
  color: hsl(95 45% 35%);
}

:root .lang-css .hljs-string {
  color: hsl(24 70% 40%);
}

:root .lang-css .hljs-selector-tag {
  color: hsl(340 60% 42%);
}

/* ── HTML / XML (light) ──────────────────────────────────────── */
:root .lang-html .hljs-tag,
:root .lang-xml .hljs-tag {
  color: hsl(15 75% 40%);
}

:root .lang-html .hljs-name,
:root .lang-xml .hljs-name {
  color: hsl(15 75% 40%);
}

:root .lang-html .hljs-attr,
:root .lang-xml .hljs-attr {
  color: hsl(30 60% 40%);
}

:root .lang-html .hljs-string,
:root .lang-xml .hljs-string {
  color: hsl(95 45% 35%);
}

/* ── Bash / Shell (light) ────────────────────────────────────── */
:root .lang-bash .hljs-keyword,
:root .lang-bash .hljs-built_in,
:root .lang-shell .hljs-keyword,
:root .lang-shell .hljs-built_in,
:root .lang-sh .hljs-keyword,
:root .lang-sh .hljs-built_in {
  color: hsl(120 40% 35%);
}

:root .lang-bash .hljs-string,
:root .lang-shell .hljs-string,
:root .lang-sh .hljs-string {
  color: hsl(30 60% 40%);
}

:root .lang-bash .hljs-variable,
:root .lang-shell .hljs-variable,
:root .lang-sh .hljs-variable {
  color: hsl(187 55% 35%);
}

/* ── JSON (light) ────────────────────────────────────────────── */
:root .lang-json .hljs-attr {
  color: hsl(35 75% 38%);
}

:root .lang-json .hljs-string {
  color: hsl(95 45% 35%);
}

:root .lang-json .hljs-number {
  color: hsl(29 65% 42%);
}

:root .lang-json .hljs-literal {
  color: hsl(286 55% 42%);
}

/* ── PHP (light) ─────────────────────────────────────────────── */
:root .lang-php .hljs-keyword {
  color: hsl(240 40% 45%);
}

:root .lang-php .hljs-string {
  color: hsl(95 45% 35%);
}

:root .lang-php .hljs-variable {
  color: hsl(187 55% 35%);
}

:root .lang-php .hljs-title,
:root .lang-php .hljs-title.function_ {
  color: hsl(30 60% 40%);
}

/* ── Ruby (light) ────────────────────────────────────────────── */
:root .lang-ruby .hljs-keyword,
:root .lang-rb .hljs-keyword {
  color: hsl(0 55% 42%);
}

:root .lang-ruby .hljs-string,
:root .lang-rb .hljs-string {
  color: hsl(95 45% 35%);
}

:root .lang-ruby .hljs-title,
:root .lang-ruby .hljs-title.function_,
:root .lang-rb .hljs-title,
:root .lang-rb .hljs-title.function_ {
  color: hsl(30 60% 40%);
}

:root .lang-ruby .hljs-symbol,
:root .lang-rb .hljs-symbol {
  color: hsl(187 55% 35%);
}

/* ── Go (light) ──────────────────────────────────────────────── */
:root .lang-go .hljs-keyword,
:root .lang-go .hljs-built_in {
  color: hsl(190 65% 32%);
}

:root .lang-go .hljs-string {
  color: hsl(95 45% 35%);
}

:root .lang-go .hljs-title,
:root .lang-go .hljs-title.function_ {
  color: hsl(30 60% 40%);
}

:root .lang-go .hljs-type {
  color: hsl(187 55% 35%);
}

/* ── Rust (light) ────────────────────────────────────────────── */
:root .lang-rust .hljs-keyword {
  color: hsl(20 65% 40%);
}

:root .lang-rust .hljs-string {
  color: hsl(95 45% 35%);
}

:root .lang-rust .hljs-title,
:root .lang-rust .hljs-title.function_ {
  color: hsl(30 60% 40%);
}

:root .lang-rust .hljs-type,
:root .lang-rust .hljs-title.class_ {
  color: hsl(187 55% 35%);
}

/* ── SQL (light) ─────────────────────────────────────────────── */
:root .lang-sql .hljs-keyword {
  color: hsl(210 50% 40%);
}

:root .lang-sql .hljs-string {
  color: hsl(95 45% 35%);
}

:root .lang-sql .hljs-number {
  color: hsl(29 65% 42%);
}

:root .lang-sql .hljs-built_in {
  color: hsl(30 60% 40%);
}

/* ── Java (light) ────────────────────────────────────────────── */
:root .lang-java .hljs-keyword {
  color: hsl(15 65% 40%);
}

:root .lang-java .hljs-string {
  color: hsl(95 45% 35%);
}

:root .lang-java .hljs-title,
:root .lang-java .hljs-title.class_ {
  color: hsl(30 60% 40%);
}

:root .lang-java .hljs-type {
  color: hsl(187 55% 35%);
}

/* ── C / C++ (light) ─────────────────────────────────────────── */
:root .lang-c .hljs-keyword,
:root .lang-cpp .hljs-keyword {
  color: hsl(210 60% 40%);
}

:root .lang-c .hljs-string,
:root .lang-cpp .hljs-string {
  color: hsl(95 45% 35%);
}

:root .lang-c .hljs-title,
:root .lang-c .hljs-title.function_,
:root .lang-cpp .hljs-title,
:root .lang-cpp .hljs-title.function_ {
  color: hsl(30 60% 40%);
}

:root .lang-c .hljs-type,
:root .lang-cpp .hljs-type {
  color: hsl(187 55% 35%);
}

/* ── YAML (light) ────────────────────────────────────────────── */
:root .lang-yaml .hljs-attr,
:root .lang-yml .hljs-attr {
  color: hsl(0 55% 42%);
}

:root .lang-yaml .hljs-string,
:root .lang-yml .hljs-string {
  color: hsl(95 45% 35%);
}

:root .lang-yaml .hljs-number,
:root .lang-yml .hljs-number {
  color: hsl(29 65% 42%);
}

:root .lang-yaml .hljs-literal,
:root .lang-yml .hljs-literal {
  color: hsl(286 55% 42%);
}

/* ── Markdown (light) ────────────────────────────────────────── */
:root .lang-markdown .hljs-section,
:root .lang-md .hljs-section {
  color: hsl(210 50% 40%);
}

:root .lang-markdown .hljs-bullet,
:root .lang-md .hljs-bullet {
  color: hsl(30 60% 40%);
}

:root .lang-markdown .hljs-link,
:root .lang-md .hljs-link {
  color: hsl(187 55% 35%);
}

:root .lang-markdown .hljs-emphasis,
:root .lang-md .hljs-emphasis {
  font-style: italic;
}

:root .lang-markdown .hljs-strong,
:root .lang-md .hljs-strong {
  font-weight: bold;
}

/* ── DARK THEME ──────────────────────────────────────────────── */

/* Base / fallback tokens (dark) */
.dark .hljs {
  color: hsl(220 14% 80%);
  background: transparent;
}

.dark .hljs-comment,
.dark .hljs-quote {
  color: hsl(220 10% 50%);
  font-style: italic;
}

.dark .hljs-keyword,
.dark .hljs-selector-tag,
.dark .hljs-built_in,
.dark .hljs-name {
  color: hsl(286 60% 72%);
}

.dark .hljs-string,
.dark .hljs-attr,
.dark .hljs-symbol,
.dark .hljs-bullet,
.dark .hljs-addition {
  color: hsl(95 38% 62%);
}

.dark .hljs-title,
.dark .hljs-section,
.dark .hljs-title.class_ {
  color: hsl(39 67% 69%);
}

.dark .hljs-variable,
.dark .hljs-template-variable {
  color: hsl(187 47% 55%);
}

.dark .hljs-number,
.dark .hljs-literal {
  color: hsl(29 54% 61%);
}

.dark .hljs-type,
.dark .hljs-params {
  color: hsl(187 47% 55%);
}

.dark .hljs-meta {
  color: hsl(220 10% 55%);
}

.dark .hljs-link {
  color: hsl(29 54% 61%);
  text-decoration: underline;
}

.dark .hljs-deletion {
  color: hsl(0 60% 60%);
}

.dark .hljs-attr {
  color: hsl(187 47% 55%);
}

.dark .hljs-attribute {
  color: hsl(95 38% 62%);
}

.dark .hljs-tag {
  color: hsl(220 14% 65%);
}

/* ── JavaScript / JS (dark) ──────────────────────────────────── */
.dark .lang-javascript .hljs-keyword,
.dark .lang-javascript .hljs-built_in,
.dark .lang-js .hljs-keyword,
.dark .lang-js .hljs-built_in {
  color: hsl(286 60% 72%);
}

.dark .lang-javascript .hljs-string,
.dark .lang-js .hljs-string {
  color: hsl(95 38% 62%);
}

.dark .lang-javascript .hljs-title,
.dark .lang-javascript .hljs-title.function_,
.dark .lang-js .hljs-title,
.dark .lang-js .hljs-title.function_ {
  color: hsl(50 90% 70%);
}

.dark .lang-javascript .hljs-number,
.dark .lang-js .hljs-number {
  color: hsl(29 70% 65%);
}

.dark .lang-javascript .hljs-variable,
.dark .lang-javascript .hljs-template-variable,
.dark .lang-js .hljs-variable,
.dark .lang-js .hljs-template-variable {
  color: hsl(187 47% 60%);
}

/* ── TypeScript / TS (dark) ──────────────────────────────────── */
.dark .lang-typescript .hljs-keyword,
.dark .lang-typescript .hljs-built_in,
.dark .lang-ts .hljs-keyword,
.dark .lang-ts .hljs-built_in {
  color: hsl(211 60% 65%);
}

.dark .lang-typescript .hljs-string,
.dark .lang-ts .hljs-string {
  color: hsl(24 70% 65%);
}

.dark .lang-typescript .hljs-title,
.dark .lang-typescript .hljs-title.function_,
.dark .lang-ts .hljs-title,
.dark .lang-ts .hljs-title.function_ {
  color: hsl(39 67% 69%);
}

.dark .lang-typescript .hljs-type,
.dark .lang-typescript .hljs-title.class_,
.dark .lang-ts .hljs-type,
.dark .lang-ts .hljs-title.class_ {
  color: hsl(170 50% 60%);
}

.dark .lang-typescript .hljs-number,
.dark .lang-ts .hljs-number {
  color: hsl(95 38% 62%);
}

/* ── Python (dark) ──────────────────────────────────────────── */
.dark .lang-python .hljs-keyword,
.dark .lang-python .hljs-built_in {
  color: hsl(210 60% 65%);
}

.dark .lang-python .hljs-string {
  color: hsl(50 80% 65%);
}

.dark .lang-python .hljs-title,
.dark .lang-python .hljs-title.function_ {
  color: hsl(170 50% 65%);
}

.dark .lang-python .hljs-number {
  color: hsl(29 70% 65%);
}

.dark .lang-python .hljs-decorator,
.dark .lang-python .hljs-meta {
  color: hsl(39 67% 69%);
}

/* ── CSS (dark) ──────────────────────────────────────────────── */
.dark .lang-css .hljs-keyword,
.dark .lang-css .hljs-selector-class,
.dark .lang-css .hljs-selector-id {
  color: hsl(210 70% 65%);
}

.dark .lang-css .hljs-attribute,
.dark .lang-css .hljs-built_in {
  color: hsl(187 47% 60%);
}

.dark .lang-css .hljs-number {
  color: hsl(95 38% 62%);
}

.dark .lang-css .hljs-string {
  color: hsl(24 70% 65%);
}

.dark .lang-css .hljs-selector-tag {
  color: hsl(340 65% 65%);
}

/* ── HTML / XML (dark) ──────────────────────────────────────── */
.dark .lang-html .hljs-tag,
.dark .lang-xml .hljs-tag {
  color: hsl(15 80% 62%);
}

.dark .lang-html .hljs-name,
.dark .lang-xml .hljs-name {
  color: hsl(15 80% 62%);
}

.dark .lang-html .hljs-attr,
.dark .lang-xml .hljs-attr {
  color: hsl(39 67% 69%);
}

.dark .lang-html .hljs-string,
.dark .lang-xml .hljs-string {
  color: hsl(95 38% 62%);
}

/* ── Bash / Shell (dark) ────────────────────────────────────── */
.dark .lang-bash .hljs-keyword,
.dark .lang-bash .hljs-built_in,
.dark .lang-shell .hljs-keyword,
.dark .lang-shell .hljs-built_in,
.dark .lang-sh .hljs-keyword,
.dark .lang-sh .hljs-built_in {
  color: hsl(120 40% 62%);
}

.dark .lang-bash .hljs-string,
.dark .lang-shell .hljs-string,
.dark .lang-sh .hljs-string {
  color: hsl(39 67% 69%);
}

.dark .lang-bash .hljs-variable,
.dark .lang-shell .hljs-variable,
.dark .lang-sh .hljs-variable {
  color: hsl(187 47% 60%);
}

/* ── JSON (dark) ─────────────────────────────────────────────── */
.dark .lang-json .hljs-attr {
  color: hsl(35 80% 65%);
}

.dark .lang-json .hljs-string {
  color: hsl(95 38% 62%);
}

.dark .lang-json .hljs-number {
  color: hsl(29 70% 65%);
}

.dark .lang-json .hljs-literal {
  color: hsl(286 60% 72%);
}

/* ── PHP (dark) ──────────────────────────────────────────────── */
.dark .lang-php .hljs-keyword {
  color: hsl(240 40% 72%);
}

.dark .lang-php .hljs-string {
  color: hsl(95 38% 62%);
}

.dark .lang-php .hljs-variable {
  color: hsl(187 47% 60%);
}

.dark .lang-php .hljs-title,
.dark .lang-php .hljs-title.function_ {
  color: hsl(39 67% 69%);
}

/* ── Ruby (dark) ─────────────────────────────────────────────── */
.dark .lang-ruby .hljs-keyword,
.dark .lang-rb .hljs-keyword {
  color: hsl(0 60% 65%);
}

.dark .lang-ruby .hljs-string,
.dark .lang-rb .hljs-string {
  color: hsl(95 38% 62%);
}

.dark .lang-ruby .hljs-title,
.dark .lang-ruby .hljs-title.function_,
.dark .lang-rb .hljs-title,
.dark .lang-rb .hljs-title.function_ {
  color: hsl(39 67% 69%);
}

.dark .lang-ruby .hljs-symbol,
.dark .lang-rb .hljs-symbol {
  color: hsl(187 47% 60%);
}

/* ── Go (dark) ───────────────────────────────────────────────── */
.dark .lang-go .hljs-keyword,
.dark .lang-go .hljs-built_in {
  color: hsl(190 70% 60%);
}

.dark .lang-go .hljs-string {
  color: hsl(95 38% 62%);
}

.dark .lang-go .hljs-title,
.dark .lang-go .hljs-title.function_ {
  color: hsl(39 67% 69%);
}

.dark .lang-go .hljs-type {
  color: hsl(187 47% 60%);
}

/* ── Rust (dark) ──────────────────────────────────────────────── */
.dark .lang-rust .hljs-keyword {
  color: hsl(20 70% 62%);
}

.dark .lang-rust .hljs-string {
  color: hsl(95 38% 62%);
}

.dark .lang-rust .hljs-title,
.dark .lang-rust .hljs-title.function_ {
  color: hsl(39 67% 69%);
}

.dark .lang-rust .hljs-type,
.dark .lang-rust .hljs-title.class_ {
  color: hsl(187 47% 60%);
}

/* ── SQL (dark) ───────────────────────────────────────────────── */
.dark .lang-sql .hljs-keyword {
  color: hsl(210 50% 68%);
}

.dark .lang-sql .hljs-string {
  color: hsl(95 38% 62%);
}

.dark .lang-sql .hljs-number {
  color: hsl(29 70% 65%);
}

.dark .lang-sql .hljs-built_in {
  color: hsl(39 67% 69%);
}

/* ── Java (dark) ──────────────────────────────────────────────── */
.dark .lang-java .hljs-keyword {
  color: hsl(15 70% 62%);
}

.dark .lang-java .hljs-string {
  color: hsl(95 38% 62%);
}

.dark .lang-java .hljs-title,
.dark .lang-java .hljs-title.class_ {
  color: hsl(39 67% 69%);
}

.dark .lang-java .hljs-type {
  color: hsl(187 47% 60%);
}

/* ── C / C++ (dark) ───────────────────────────────────────────── */
.dark .lang-c .hljs-keyword,
.dark .lang-cpp .hljs-keyword {
  color: hsl(210 60% 65%);
}

.dark .lang-c .hljs-string,
.dark .lang-cpp .hljs-string {
  color: hsl(95 38% 62%);
}

.dark .lang-c .hljs-title,
.dark .lang-c .hljs-title.function_,
.dark .lang-cpp .hljs-title,
.dark .lang-cpp .hljs-title.function_ {
  color: hsl(39 67% 69%);
}

.dark .lang-c .hljs-type,
.dark .lang-cpp .hljs-type {
  color: hsl(187 47% 60%);
}

/* ── YAML (dark) ──────────────────────────────────────────────── */
.dark .lang-yaml .hljs-attr,
.dark .lang-yml .hljs-attr {
  color: hsl(0 60% 65%);
}

.dark .lang-yaml .hljs-string,
.dark .lang-yml .hljs-string {
  color: hsl(95 38% 62%);
}

.dark .lang-yaml .hljs-number,
.dark .lang-yml .hljs-number {
  color: hsl(29 70% 65%);
}

.dark .lang-yaml .hljs-literal,
.dark .lang-yml .hljs-literal {
  color: hsl(286 60% 72%);
}

/* ── Markdown (dark) ──────────────────────────────────────────── */
.dark .lang-markdown .hljs-section,
.dark .lang-md .hljs-section {
  color: hsl(210 50% 68%);
}

.dark .lang-markdown .hljs-bullet,
.dark .lang-md .hljs-bullet {
  color: hsl(39 67% 69%);
}

.dark .lang-markdown .hljs-link,
.dark .lang-md .hljs-link {
  color: hsl(187 47% 60%);
}

.dark .lang-markdown .hljs-emphasis,
.dark .lang-md .hljs-emphasis {
  font-style: italic;
}

.dark .lang-markdown .hljs-strong,
.dark .lang-md .hljs-strong {
  font-weight: bold;
}

/* ================================================================
   PART 2 — Code-Block Language Label & Header Border Accent Colours
   ================================================================ */

/* ── Label text colours — LIGHT ──────────────────────────────── */
.code-block-wrapper.lang-javascript .code-block-lang,
.code-block-wrapper.lang-js .code-block-lang {
  color: hsl(40 80% 35%);
}
.code-block-wrapper.lang-typescript .code-block-lang,
.code-block-wrapper.lang-ts .code-block-lang {
  color: hsl(211 60% 38%);
}
.code-block-wrapper.lang-python .code-block-lang {
  color: hsl(210 60% 38%);
}
.code-block-wrapper.lang-css .code-block-lang {
  color: hsl(210 70% 38%);
}
.code-block-wrapper.lang-html .code-block-lang {
  color: hsl(15 75% 38%);
}
.code-block-wrapper.lang-bash .code-block-lang,
.code-block-wrapper.lang-shell .code-block-lang,
.code-block-wrapper.lang-sh .code-block-lang {
  color: hsl(120 40% 32%);
}
.code-block-wrapper.lang-json .code-block-lang {
  color: hsl(35 75% 35%);
}
.code-block-wrapper.lang-php .code-block-lang {
  color: hsl(240 40% 42%);
}
.code-block-wrapper.lang-ruby .code-block-lang,
.code-block-wrapper.lang-rb .code-block-lang {
  color: hsl(0 55% 40%);
}
.code-block-wrapper.lang-go .code-block-lang {
  color: hsl(190 65% 32%);
}
.code-block-wrapper.lang-rust .code-block-lang {
  color: hsl(20 65% 38%);
}
.code-block-wrapper.lang-markdown .code-block-lang,
.code-block-wrapper.lang-md .code-block-lang {
  color: hsl(200 15% 42%);
}
.code-block-wrapper.lang-yaml .code-block-lang,
.code-block-wrapper.lang-yml .code-block-lang {
  color: hsl(0 55% 40%);
}
.code-block-wrapper.lang-sql .code-block-lang {
  color: hsl(210 50% 38%);
}
.code-block-wrapper.lang-java .code-block-lang {
  color: hsl(15 65% 38%);
}
.code-block-wrapper.lang-c .code-block-lang,
.code-block-wrapper.lang-cpp .code-block-lang {
  color: hsl(210 60% 38%);
}

/* ── Header border accents (both themes) ─────────────────────── */
.code-block-wrapper.lang-javascript .code-block-header,
.code-block-wrapper.lang-js .code-block-header {
  border-bottom-color: hsl(50 100% 50% / 0.3);
}
.code-block-wrapper.lang-typescript .code-block-header,
.code-block-wrapper.lang-ts .code-block-header {
  border-bottom-color: hsl(211 60% 55% / 0.3);
}
.code-block-wrapper.lang-python .code-block-header {
  border-bottom-color: hsl(210 60% 50% / 0.3);
}
.code-block-wrapper.lang-css .code-block-header {
  border-bottom-color: hsl(210 70% 55% / 0.3);
}
.code-block-wrapper.lang-html .code-block-header {
  border-bottom-color: hsl(15 80% 55% / 0.3);
}
.code-block-wrapper.lang-bash .code-block-header,
.code-block-wrapper.lang-shell .code-block-header,
.code-block-wrapper.lang-sh .code-block-header {
  border-bottom-color: hsl(120 40% 45% / 0.3);
}
.code-block-wrapper.lang-json .code-block-header {
  border-bottom-color: hsl(35 80% 50% / 0.3);
}
.code-block-wrapper.lang-php .code-block-header {
  border-bottom-color: hsl(240 40% 60% / 0.3);
}
.code-block-wrapper.lang-ruby .code-block-header,
.code-block-wrapper.lang-rb .code-block-header {
  border-bottom-color: hsl(0 60% 50% / 0.3);
}
.code-block-wrapper.lang-go .code-block-header {
  border-bottom-color: hsl(190 70% 45% / 0.3);
}
.code-block-wrapper.lang-rust .code-block-header {
  border-bottom-color: hsl(20 70% 50% / 0.3);
}
.code-block-wrapper.lang-markdown .code-block-header,
.code-block-wrapper.lang-md .code-block-header {
  border-bottom-color: hsl(200 15% 50% / 0.3);
}
.code-block-wrapper.lang-yaml .code-block-header,
.code-block-wrapper.lang-yml .code-block-header {
  border-bottom-color: hsl(0 60% 55% / 0.3);
}
.code-block-wrapper.lang-sql .code-block-header {
  border-bottom-color: hsl(210 50% 55% / 0.3);
}
.code-block-wrapper.lang-java .code-block-header {
  border-bottom-color: hsl(15 70% 50% / 0.3);
}
.code-block-wrapper.lang-c .code-block-header,
.code-block-wrapper.lang-cpp .code-block-header {
  border-bottom-color: hsl(210 60% 50% / 0.3);
}

/* ── Label text colours — DARK ───────────────────────────────── */
.dark .code-block-wrapper.lang-javascript .code-block-lang,
.dark .code-block-wrapper.lang-js .code-block-lang {
  color: hsl(50 100% 60%);
}
.dark .code-block-wrapper.lang-typescript .code-block-lang,
.dark .code-block-wrapper.lang-ts .code-block-lang {
  color: hsl(211 60% 60%);
}
.dark .code-block-wrapper.lang-python .code-block-lang {
  color: hsl(50 80% 60%);
}
.dark .code-block-wrapper.lang-css .code-block-lang {
  color: hsl(210 70% 65%);
}
.dark .code-block-wrapper.lang-html .code-block-lang {
  color: hsl(15 80% 60%);
}
.dark .code-block-wrapper.lang-bash .code-block-lang,
.dark .code-block-wrapper.lang-shell .code-block-lang,
.dark .code-block-wrapper.lang-sh .code-block-lang {
  color: hsl(120 40% 60%);
}
.dark .code-block-wrapper.lang-json .code-block-lang {
  color: hsl(35 80% 60%);
}
.dark .code-block-wrapper.lang-php .code-block-lang {
  color: hsl(240 40% 70%);
}
.dark .code-block-wrapper.lang-ruby .code-block-lang,
.dark .code-block-wrapper.lang-rb .code-block-lang {
  color: hsl(0 60% 60%);
}
.dark .code-block-wrapper.lang-go .code-block-lang {
  color: hsl(190 70% 60%);
}
.dark .code-block-wrapper.lang-rust .code-block-lang {
  color: hsl(20 70% 60%);
}
.dark .code-block-wrapper.lang-markdown .code-block-lang,
.dark .code-block-wrapper.lang-md .code-block-lang {
  color: hsl(200 15% 65%);
}
.dark .code-block-wrapper.lang-yaml .code-block-lang,
.dark .code-block-wrapper.lang-yml .code-block-lang {
  color: hsl(0 60% 65%);
}
.dark .code-block-wrapper.lang-sql .code-block-lang {
  color: hsl(210 50% 65%);
}
.dark .code-block-wrapper.lang-java .code-block-lang {
  color: hsl(15 70% 60%);
}
.dark .code-block-wrapper.lang-c .code-block-lang,
.dark .code-block-wrapper.lang-cpp .code-block-lang {
  color: hsl(210 60% 65%);
}