/* Axon Curriculum — Shared Site Theme for Jekyll & GitHub Pages.
   Palette matches the interactive demos (docs/assets/demo.css / docs/assets/axon.css) so the
   prose pages and the demos read as one product. */

:root {
  --bg: #f8fafc;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #0284c7;          /* Blue */
  --accent-soft: #e0f2fe;
  --link: #0284c7;
  --code-bg: #0f172a;
  --code-ink: #f8fafc;
  --code-inline-bg: #e2e8f0;
  --code-inline-ink: #0369a1;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.05);
  
  /* Syntax Highlighting Tokens (Light Theme) */
  --hl-kw: #7c3aed;           /* Keywords (def, import, return, for, if) */
  --hl-fn: #0284c7;           /* Functions & methods */
  --hl-bi: #0891b2;           /* Built-ins & classes (print, math, len) */
  --hl-str: #16a34a;          /* Strings */
  --hl-num: #d97706;          /* Numbers & floats */
  --hl-com: #64748b;          /* Comments */
  --hl-op: #0284c7;           /* Operators (+, -, *, /, =) */
  --hl-var: #0f172a;          /* Variables & identifiers */
  --hl-pct: #475569;          /* Punctuation ((), [], {}, :) */
}

/* dark via the OS (only when the reader hasn't forced light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0d14;
    --panel: #141923;
    --ink: #f1f5f9;
    --muted: #94a3b8;
    --line: #232b3b;
    --accent: #38bdf8;
    --accent-soft: #082f49;
    --link: #38bdf8;
    --code-bg: #07090e;
    --code-ink: #f1f5f9;
    --code-inline-bg: #1c2331;
    --code-inline-ink: #7dd3fc;
    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    
    /* Syntax Highlighting Tokens (Dark Theme) */
    --hl-kw: #c084fc;         /* Keywords (purple) */
    --hl-fn: #60a5fa;         /* Functions & methods (light blue) */
    --hl-bi: #38bdf8;         /* Built-ins (cyan) */
    --hl-str: #4ade80;        /* Strings (bright green) */
    --hl-num: #fbbf24;        /* Numbers (amber/orange) */
    --hl-com: #7f8aa0;        /* Comments (muted slate) */
    --hl-op: #f43f5e;         /* Operators (coral/pink) */
    --hl-var: #f8fafc;        /* Variables (bright white) */
    --hl-pct: #94a3b8;        /* Punctuation */
  }
}

/* dark forced by the toggle */
:root[data-theme="dark"] {
  --bg: #0a0d14;
  --panel: #141923;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --line: #232b3b;
  --accent: #38bdf8;
  --accent-soft: #082f49;
  --link: #38bdf8;
  --code-bg: #07090e;
  --code-ink: #f1f5f9;
  --code-inline-bg: #1c2331;
  --code-inline-ink: #7dd3fc;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  
  /* Syntax Highlighting Tokens (Dark Theme) */
  --hl-kw: #c084fc;         /* Keywords (purple) */
  --hl-fn: #60a5fa;         /* Functions & methods (light blue) */
  --hl-bi: #38bdf8;         /* Built-ins (cyan) */
  --hl-str: #4ade80;        /* Strings (bright green) */
  --hl-num: #fbbf24;        /* Numbers (amber/orange) */
  --hl-com: #7f8aa0;        /* Comments (muted slate) */
  --hl-op: #f43f5e;         /* Operators (coral/pink) */
  --hl-var: #f8fafc;        /* Variables (bright white) */
  --hl-pct: #94a3b8;        /* Punctuation */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---- site chrome ---- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 960px; margin: 0 auto; padding: 16px 20px;
}
.site-title {
  color: var(--accent); font-weight: 800; letter-spacing: .01em; text-decoration: none;
  font-size: 1.1rem;
}
.site-title:hover { text-decoration: underline; }
.theme-toggle {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 8px; width: 36px; height: 32px; font-size: 1rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.theme-toggle:hover { border-color: var(--accent); }

.site-footer {
  max-width: 960px; margin: 48px auto 0; padding: 20px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .88rem;
}
.site-footer a { color: var(--link); }

/* auto Prev/Next lesson navigation */
.lesson-nav {
  display: flex; justify-content: space-between; align-items: stretch; gap: 14px;
  margin: 48px 0 4px; padding-top: 22px; border-top: 1px solid var(--line);
}
.lesson-nav-link {
  display: inline-flex; flex-direction: column; gap: 3px; max-width: 48%;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); text-decoration: none;
}
.lesson-nav-link:hover { border-color: var(--accent); }
.lesson-nav-next { text-align: right; margin-left: auto; }
.lesson-nav-dir { font-size: .8rem; font-weight: 600; color: var(--muted); }
.markdown-body .lesson-nav-title { color: var(--link); font-weight: 700; }

/* ---- page / markdown ---- */
.page {
  max-width: 960px; margin: 0 auto; padding: 8px 20px 40px;
}
.markdown-body a { color: var(--link); }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { line-height: 1.25; font-weight: 700; }
.markdown-body h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: .2em 0 .5em; }
.markdown-body h2 { font-size: 1.5rem; margin: 1.8em 0 .5em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
.markdown-body h3 { font-size: 1.2rem; margin: 1.5em 0 .4em; }
.markdown-body h4 { font-size: 1.02rem; margin: 1.3em 0 .3em; color: var(--muted); text-transform: none; }
.markdown-body p, .markdown-body li { max-width: 76ch; }
.markdown-body ul, .markdown-body ol { padding-left: 1.4em; }
.markdown-body li { margin: .3em 0; }
.markdown-body img { max-width: 100%; height: auto; border-radius: 8px; }
.markdown-body hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.markdown-body strong { font-weight: 700; }

/* inline + block code */
.markdown-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em;
  background: var(--code-inline-bg); color: var(--code-inline-ink);
  padding: .12em .4em; border-radius: 5px;
}
.markdown-body pre {
  background: var(--code-bg); color: var(--code-ink); border-radius: 12px;
  padding: 14px 16px; overflow-x: auto; line-height: 1.55;
  font: 13.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.markdown-body pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* ---- Syntax Highlighting (Rouge & Prism Token Selectors) ---- */
/* Keywords */
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .ow,
.token.keyword {
  color: var(--hl-kw);
  font-weight: 600;
}

/* Functions & Methods */
.highlight .nf, .highlight .fm, .highlight .na,
.token.function {
  color: var(--hl-fn);
  font-weight: 600;
}

/* Built-ins & Classes */
.highlight .nb, .highlight .nc, .highlight .nd, .highlight .ne,
.token.builtin, .token.class-name {
  color: var(--hl-bi);
}

/* Strings */
.highlight .s, .highlight .sa, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd,
.highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr,
.highlight .s1, .highlight .ss,
.token.string {
  color: var(--hl-str);
}

/* Numbers & Floats */
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il,
.highlight .mo, .highlight .mx,
.token.number {
  color: var(--hl-num);
  font-weight: 600;
}

/* Comments */
.highlight .c, .highlight .ch, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs,
.token.comment {
  color: var(--hl-com);
  font-style: italic;
}

/* Operators */
.highlight .o,
.token.operator {
  color: var(--hl-op);
}

/* Punctuation */
.highlight .p,
.token.punctuation {
  color: var(--hl-pct);
}

/* Variables & Names */
.highlight .n, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm,
.token.variable, .token.property {
  color: var(--hl-var);
}

/* ---- blockquotes callouts ---- */
.markdown-body blockquote {
  margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 10px 10px 0; color: var(--ink);
}
.markdown-body blockquote > :first-child { margin-top: 0; }
.markdown-body blockquote > :last-child { margin-bottom: 0; }
.markdown-body blockquote a { color: var(--link); font-weight: 600; }

/* tables */
.markdown-body table { border-collapse: collapse; width: 100%; margin: 16px 0; overflow: auto; display: block; }
.markdown-body th, .markdown-body td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.markdown-body th { background: var(--accent-soft); font-weight: 700; }