/* brain-server brand overrides for mdBook.
   Loaded via additional-css AFTER the default theme so it wins.
   Brand accent is theme-agnostic (:root); the steel dark (coal) and
   light palettes are scoped to their mdBook theme classes so the toolbar
   light/dark toggle actually switches.

   Palette: soft + professional — slate-ink text, a muted indigo accent,
   a desaturated gold mark, and gentle borders, tuned per theme. */

:root {
  /* Soft indigo accent (used on both light + dark) */
  --accent-h: 217;
  --accent-s: 54%;
  --accent-l: 51%;

  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-strong: hsl(var(--accent-h) 58% 43%);
  --gold: #b58a3c;        /* desaturated gold mark */

  /* Widen the reading column (mdBook default is 750px) */
  --content-max-width: 1080px;
}

/* ---- Dark (coal) palette: soft charcoal, not pure black ---- */
.coal {
  --bg: #0f1218;          /* soft near-black charcoal */
  --fg: #e4e9f0;          /* soft slate-white text */
  --sidebar-bg: #161b24;
  --content-bg: #0f1218;

  --code-bg: #171c26;
  --inline-code-bg: rgba(148, 163, 184, 0.16);

  --border: #2a3140;
  --border-soft: #222937;
  --muted: #8b96a6;        /* secondary text */
  --accent: hsl(30 88% 58%);                /* soft amber-orange on dark */
  --accent-strong: hsl(30 92% 68%);
  --links: hsl(30 88% 58%);                 /* normal-link color (chrome.css) */
}

/* ---- Light palette: soft warm-white, slate ink ---- */
.light, html:not(.js) {
  --bg: #ffffff;
  --fg: #1b2330;          /* soft slate ink */
  --sidebar-bg: #f7f8fa;
  --content-bg: #ffffff;

  --code-bg: #f5f7fa;
  --inline-code-bg: rgba(100, 116, 139, 0.12);

  --border: #e3e8ef;
  --border-soft: #eef1f6;
  --muted: #5c6a7a;        /* secondary text */
  --links: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); /* normal-link color */
}

/* ---- Typography: keep system stack (self-hosted = bundle size), tuned sizes ---- */
html { font-size: 17px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.7;
}

/* Mono stack */
code, pre, kbd {
  font-family: "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Consolas,
    "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
}

/* ---- Headings with a steel accent ---- */
h1, h2, h3, h4, h5, h6 { color: var(--fg); }
h2, h3 { color: var(--fg); }
h1 { border-bottom: 1px solid var(--border); }
h2 { border-bottom: 1px solid var(--border-soft); }

/* ---- Links ---- */
a { color: var(--accent); }
a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---- Sidebar ---- */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
}
.sidebar .chapter li a.active { color: var(--accent); }
.sidebar .chapter li a.active::before { color: var(--accent); }
.sidebar .chapter li a { color: var(--muted); }
.sidebar .chapter li a:hover { color: var(--fg); }

/* ---- Content ---- */
main { background: var(--content-bg); }
.content { max-width: var(--content-max-width); margin: 0 auto; padding: 2rem 1.5rem; }

/* ---- Code ---- */
pre {
  background: var(--code-bg);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}
:not(pre) > code {
  background: var(--inline-code-bg);
  padding: 0.15em 0.35em;
  border-radius: 4px;
}

/* ---- Tables ---- */
table { border-collapse: collapse; }
th, td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; }
th { background: var(--code-bg); }

/* ---- Callouts / notes (mdBook uses blockquote) ---- */
blockquote {
  border-left: 4px solid var(--accent);
  background: var(--code-bg);
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
}

/* ---- Menu bar (top-right nav) ---- */
.menu-bar { background: var(--bg); border-bottom: 1px solid var(--border); }
.menu-bar a { color: var(--muted); }

/* ---- Search ---- */
.search-wrapper .search-input {
  background: var(--code-bg);
  border: 1px solid var(--border);
  color: var(--fg);
}

/* ---- Focus rings (a11y) ---- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Scrollbars (webkit) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }