/* =========================
  Rouge Syntax Highlighting (minimal, for TCL and others)
  ========================= */
.highlight .c, .highlight .cm { color: #6a9955; font-style: italic; } /* Comment */
.highlight .k, .highlight .kd, .highlight .kp, .highlight .kr, .highlight .kt { color: #569cd6; } /* Keyword */
.highlight .s, .highlight .s1, .highlight .s2 { color: #ce9178; } /* String */
.highlight .mi, .highlight .mf, .highlight .mh, .highlight .il { color: #b5cea8; } /* Number */
.highlight .o, .highlight .p { color: #d4d4d4; } /* Operator, Punctuation */
.highlight .n, .highlight .nx, .highlight .nv { color: #dcdcaa; } /* Name, Variable */
.highlight .nf, .highlight .fm { color: #dcdcaa; } /* Function */
.highlight .err { color: #f44747; background: #1e0010; } /* Error */
.highlight .na { color: #9cdcfe; } /* Attribute */
.highlight .nb { color: #4ec9b0; } /* Builtin */
.highlight .bp { color: #d7ba7d; } /* Builtin pseudo */
.highlight .nt { color: #569cd6; } /* Tag */
.highlight .vc { color: #b5cea8; } /* Variable class */
.highlight .vg { color: #b5cea8; } /* Variable global */
.highlight .vi { color: #b5cea8; } /* Variable instance */
.highlight .w { color: #d4d4d4; } /* Whitespace */
.highlight .sc { color: #ce9178; } /* Special char */
.highlight .ss { color: #d7ba7d; } /* Symbol */
.highlight .m { color: #b5cea8; } /* Literal number */
.highlight .dl { color: #ce9178; } /* Literal string delimiter */
.highlight .gd { color: #f44747; } /* Deletion */
.highlight .gi { color: #b5cea8; } /* Insertion */
.highlight .gu { color: #d7ba7d; } /* Change */
.highlight .ge { font-style: italic; } /* Emphasis */
.highlight .gs { font-weight: bold; } /* Strong */

/* =========================
   Theme variables
   ========================= */
:root {
  --primary-bg: #ffffff;
  --primary-accent: #e3f0fc;
  --primary-text: #222;

  /* Code theme */
  --code-bg: #0f172a;      /* dark slate */
  --code-fg: #e2e8f0;      /* light text */
  --inline-code-bg: #e5e7eb;
  --inline-code-fg: #555;
}

/* =========================
   Base layout
   ========================= */
body {
  background: linear-gradient(135deg, #e3f0fc 0%, #f8fafc 100%);
  color: var(--primary-text);
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

header, nav, footer {
  background: var(--primary-accent);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 1.2em 2em;
}

main {
  max-width: 800px;
  margin: 2em auto;
  background: var(--primary-bg);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  padding: 2.5em 2em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: #1a365d;
}

a {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: #1e40af;
  text-decoration: underline;
}

/* Smooth transitions */
* {
  transition: background 0.2s, color 0.2s;
}

/* =========================
   Typography for code
   ========================= */
pre, code {
  font-family: "Fira Mono", "Consolas", "Menlo", "Monaco", monospace;
  font-size: 0.98em;
}

/* Inline code (within paragraphs) */
:not(pre) > code {
  background: var(--inline-code-bg);
  color: var(--inline-code-fg);
  padding: 0.08em 0.22em;
  border-radius: 4px;
  box-shadow: 0 1px 0 0 #e5e7eb;
}

/* =========================
   CODE BLOCKS (Jekyll/Rouge)
   ========================= */

/* Rouge usually outputs:
   <div class="highlight"><pre class="highlight"><code>... */

.highlight,
.highlight pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: 3px;
  padding: 0.3em 0.7em;
  overflow-x: auto;
  margin: 0.5em 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Ensure code inside block has no extra background */
.highlight code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* IMPORTANT:
   Do NOT force .highlight span { color: inherit; }
   That breaks syntax highlighting. */

/* Remove extra margin before code blocks */
main > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + pre,
main > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + .highlight {
  margin-top: 0.5em;
}

/* If you have non-Rouge <pre> blocks (rare in Jekyll), style them too */
pre:not(.highlight) {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: 3px;
  padding: 0.3em 0.7em;
  overflow-x: auto;
  margin: 0.5em 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* =========================
   OPTIONAL: basic token colors (works if your highlighter uses Prism-like classes)
   Keep these if your site actually outputs .token.* classes.
   If you use Rouge default classes (like .k, .s, .c), these won't apply.
   ========================= */
.token.comment { color: #94a3b8; font-style: italic; }
.token.keyword { color: #38bdf8; }
.token.string  { color: #facc15; }
.token.function{ color: #34d399; }
.token.number  { color: #a78bfa; }

/* Your earlier custom rules (kept, but they only help if those classes exist) */
.language-tcl .token.keyword,
.language-json .token.property {
  color: #38bdf8;
}
.language-tcl .token.string,
.language-json .token.string {
  color: #facc15;
}
.language-tcl .token.function,
.language-json .token.number {
  color: #34d399;
}
.language-tcl .token.comment,
.language-json .token.comment {
  color: #94a3b8;
  font-style: italic;
}

/* =========================
   Rouge (Jekyll) code blocks
   ========================= */

/* The outer Rouge wrapper */
.highlighter-rouge,
.highlighter-rouge .highlight,
.highlighter-rouge pre.highlight,
div.highlight,
pre.highlight {
  background: #0f172a !important;  /* dark */
  color: #e2e8f0 !important;       /* light */
  border-radius: 3px;
  padding: 0.3em 0.7em;
  overflow-x: auto;
  margin: 0.5em 0;
}

/* Code element inside */
.highlighter-rouge code,
.highlighter-rouge pre code,
pre.highlight code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

/* Inline code produced by Rouge for plain text: */
code.highlighter-rouge,
code.language-plaintext.highlighter-rouge {
  background: var(--inline-code-bg) !important;
  color: var(--inline-code-fg) !important;
  padding: 0.08em 0.22em !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 0 0 #8fa0c4;
}