/* ═══════════════════════════════════════════════════════════
   Ripple mdBook Theme — matches landing page design system
   Palette: deep space (#06060c) + electric blue (#4d8fec)
   Typography: Inter (body) + JetBrains Mono (code)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #06060c;
  --sidebar-bg: #0a0a14;
  --sidebar-fg: #7a7a96;
  --sidebar-active: #e4e4ed;
  --sidebar-spacer: #1e1e32;
  --fg: #e4e4ed;
  --page-padding: 0 3rem;
  --content-max-width: 820px;
  --links: #4d8fec;
  --inline-code-color: #e8a030;
  --theme-popup-bg: #0d0d16;
  --theme-popup-border: #1e1e32;
  --quote-bg: #0d0d16;
  --quote-border: #4d8fec;
  --table-border-color: #1e1e32;
  --table-header-bg: #0d0d16;
  --table-alternate-bg: #0a0a12;
  --searchbar-border-color: #1e1e32;
  --searchbar-bg: #0d0d16;
  --searchbar-fg: #e4e4ed;
  --searchresults-header-fg: #4d8fec;
  --searchresults-border-color: #1e1e32;
  --scrollbar: #1e1e32;
}

/* ── Typography ──────────────────────────────────────────── */

body, .sidebar {
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
}

code, pre, .hljs {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content main {
  color: #c8c8d8;
  line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
  color: #e4e4ed !important;
  letter-spacing: -0.02em;
}

h1 { font-weight: 700; font-size: 2rem; margin-top: 0; }
h2 { font-weight: 600; font-size: 1.5rem; margin-top: 3rem; border-bottom: 1px solid #1e1e32; padding-bottom: 0.5rem; }
h3 { font-weight: 600; font-size: 1.125rem; margin-top: 2rem; }

p { color: #a0a0b8; }

a { color: #4d8fec !important; text-decoration: none; }
a:hover { color: #6dafff !important; }

strong { color: #e4e4ed; }

/* ── Background ──────────────────────────────────────────── */

body {
  background: #06060c !important;
}

.sidebar {
  background: #0a0a14 !important;
  border-right: 1px solid #1e1e32 !important;
}

.sidebar .sidebar-scrollbox {
  background: #0a0a14 !important;
}

.sidebar ol.chapter li a {
  color: #7a7a96 !important;
  transition: color 0.15s;
}

.sidebar ol.chapter li a:hover,
.sidebar ol.chapter li.active > a {
  color: #e4e4ed !important;
}

.sidebar ol.chapter li.active > a {
  border-left: 2px solid #4d8fec;
  padding-left: 14px;
}

.sidebar .chapter-item {
  margin-top: 0.25rem;
}

.sidebar-resize-handle {
  background: #1e1e32 !important;
}

/* ── Code blocks ─────────────────────────────────────────── */

pre {
  background: #0d0d1a !important;
  border: 1px solid #1e1e32 !important;
  border-radius: 8px !important;
  padding: 1.25rem 1.5rem !important;
}

pre code {
  font-size: 0.8125rem !important;
  line-height: 1.8 !important;
  color: #c8c8d8 !important;
}

code:not(pre code) {
  background: #13131f !important;
  border: 1px solid #1e1e32 !important;
  border-radius: 4px !important;
  padding: 0.15em 0.4em !important;
  font-size: 0.875em !important;
  color: #e8a030 !important;
}

/* ── Syntax highlighting (matches landing page) ──────────── */

.hljs-keyword, .hljs-built_in { color: #c792ea !important; }
.hljs-function, .hljs-title { color: #82aaff !important; }
.hljs-string { color: #c3e88d !important; }
.hljs-number { color: #e8a030 !important; }
.hljs-comment { color: #4a4a64 !important; font-style: italic; }
.hljs-type { color: #ffcb6b !important; }
.hljs-params { color: #89ddff !important; }

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

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
}

table th {
  background: #0d0d16 !important;
  color: #e4e4ed !important;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #1e1e32;
}

table td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid #12121c;
  color: #a0a0b8;
  font-size: 0.9375rem;
}

table tr:hover td {
  background: #0a0a14;
}

/* ── Blockquotes ─────────────────────────────────────────── */

blockquote {
  background: #0d0d16 !important;
  border-left: 3px solid #4d8fec !important;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.5rem !important;
  margin: 1.5rem 0;
}

blockquote p { color: #a0a0b8 !important; }

/* ── Nav bar ─────────────────────────────────────────────── */

.menu-bar {
  background: #06060c !important;
  border-bottom: 1px solid #1e1e32 !important;
}

.menu-bar i {
  color: #7a7a96 !important;
}

.menu-bar i:hover {
  color: #e4e4ed !important;
}

/* ── Nav buttons (prev/next) ─────────────────────────────── */

.nav-chapters {
  color: #4a4a64 !important;
  transition: color 0.15s;
}

.nav-chapters:hover {
  color: #4d8fec !important;
}

/* ── Search ──────────────────────────────────────────────── */

#searchbar {
  background: #0d0d16 !important;
  border: 1px solid #1e1e32 !important;
  border-radius: 6px !important;
  color: #e4e4ed !important;
}

.searchresults a {
  color: #4d8fec !important;
}

/* ── Custom: back-to-site link ───────────────────────────── */

.back-to-site {
  display: block;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0.75rem;
  background: rgba(77, 143, 236, 0.08);
  border: 1px solid rgba(77, 143, 236, 0.2);
  border-radius: 6px;
  color: #4d8fec !important;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: all 0.15s;
}

.back-to-site:hover {
  background: rgba(77, 143, 236, 0.15);
  border-color: rgba(77, 143, 236, 0.4);
}

/* ── Scrollbar ───────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e1e32; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2e2e48; }