/* ===== Kairos mdBook — Inspired by Cursor, Claude, Aesop ===== */
/* Warm palette, light heading weights, generous whitespace, thin borders */

/* ------------------------------------------------------------------ */
/*  Google Fonts — Inter (body) + Source Serif 4 (display headings)   */
/* ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;1,8..60,400&display=swap');

/* ------------------------------------------------------------------ */
/*  Design Tokens                                                      */
/* ------------------------------------------------------------------ */

/* Ayu (default dark) — warm dark brown, not pure black */
.ayu {
  --kairos-bg: #0f1419;
  --kairos-fg: #e6e1cf;
  --kairos-fg-muted: #8a8678;
  --kairos-accent: #ffb454;
  --kairos-accent-dim: rgba(255, 180, 84, 0.10);
  --kairos-border: rgba(255, 255, 255, 0.08);
  --kairos-surface: rgba(255, 255, 255, 0.035);
  --kairos-code-bg: rgba(255, 255, 255, 0.04);
  --kairos-card-border: rgba(255, 255, 255, 0.06);
  --kairos-table-header-bg: rgba(255, 180, 84, 0.08);
}

/* Navy */
.navy {
  --kairos-bg: #161923;
  --kairos-fg: #c8c9db;
  --kairos-fg-muted: #7b7e96;
  --kairos-accent: #5dacff;
  --kairos-accent-dim: rgba(93, 172, 255, 0.10);
  --kairos-border: rgba(255, 255, 255, 0.08);
  --kairos-surface: rgba(255, 255, 255, 0.035);
  --kairos-code-bg: rgba(255, 255, 255, 0.04);
  --kairos-card-border: rgba(255, 255, 255, 0.06);
  --kairos-table-header-bg: rgba(93, 172, 255, 0.08);
}

/* Coal */
.coal {
  --kairos-bg: #1a1a1a;
  --kairos-fg: #c8c8c8;
  --kairos-fg-muted: #808080;
  --kairos-accent: #5dacff;
  --kairos-accent-dim: rgba(93, 172, 255, 0.10);
  --kairos-border: rgba(255, 255, 255, 0.07);
  --kairos-surface: rgba(255, 255, 255, 0.03);
  --kairos-code-bg: rgba(255, 255, 255, 0.035);
  --kairos-card-border: rgba(255, 255, 255, 0.06);
  --kairos-table-header-bg: rgba(93, 172, 255, 0.08);
}

/* Light — warm cream like Cursor/Aesop, not pure white */
.light {
  --kairos-bg: #f7f7f4;
  --kairos-fg: #26251e;
  --kairos-fg-muted: #7a7974;
  --kairos-accent: #c77c0a;
  --kairos-accent-dim: rgba(199, 124, 10, 0.08);
  --kairos-border: rgba(0, 0, 0, 0.08);
  --kairos-surface: rgba(0, 0, 0, 0.025);
  --kairos-code-bg: rgba(0, 0, 0, 0.03);
  --kairos-card-border: rgba(0, 0, 0, 0.08);
  --kairos-table-header-bg: rgba(199, 124, 10, 0.06);
}

/* Rust */
.rust {
  --kairos-bg: #f3f0ea;
  --kairos-fg: #262220;
  --kairos-fg-muted: #7a7570;
  --kairos-accent: #b7410e;
  --kairos-accent-dim: rgba(183, 65, 14, 0.08);
  --kairos-border: rgba(0, 0, 0, 0.10);
  --kairos-surface: rgba(0, 0, 0, 0.025);
  --kairos-code-bg: rgba(0, 0, 0, 0.03);
  --kairos-card-border: rgba(0, 0, 0, 0.08);
  --kairos-table-header-bg: rgba(183, 65, 14, 0.06);
}

/* ------------------------------------------------------------------ */
/*  Base Typography                                                    */
/* ------------------------------------------------------------------ */
.content main {
  max-width: 800px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--kairos-fg);
}

.content main p {
  margin-bottom: 1em;
}

/* ------------------------------------------------------------------ */
/*  Headings — light weight, serif for h1, generous spacing            */
/* ------------------------------------------------------------------ */
.content main h1 {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 2.1em;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.8em;
  padding-bottom: 0;
  border-bottom: none;
  color: var(--kairos-fg);
}

.content main h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 1.35em;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 2.8em;
  margin-bottom: 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 0.5px solid var(--kairos-border);
  color: var(--kairos-fg);
}

.content main h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 2em;
  margin-bottom: 0.6em;
  color: var(--kairos-fg);
}

.content main h4 {
  font-size: 1em;
  font-weight: 500;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  color: var(--kairos-fg-muted);
}

/* ------------------------------------------------------------------ */
/*  Blockquotes — subtle accent bar, warm tint                         */
/* ------------------------------------------------------------------ */
.content main blockquote {
  border-left: 3px solid var(--kairos-accent);
  background: var(--kairos-accent-dim);
  margin: 1.8em 0;
  padding: 1em 1.4em;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05em;
  line-height: 1.6;
  color: var(--kairos-fg-muted);
}

.content main blockquote p {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/*  Code — thin border, warm surface, Berkeley Mono fallback           */
/* ------------------------------------------------------------------ */
.content main pre {
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 1.5em 0;
  border: 0.5px solid var(--kairos-card-border);
  background: var(--kairos-code-bg) !important;
  overflow-x: auto;
  font-size: 0.875em;
  line-height: 1.65;
}

.content main code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  font-size: 0.875em;
}

/* Inline code — subtle pill */
.content main :not(pre) > code {
  background: var(--kairos-code-bg);
  border: 0.5px solid var(--kairos-card-border);
  border-radius: 4px;
  padding: 0.15em 0.45em;
  font-size: 0.85em;
}

/* ------------------------------------------------------------------ */
/*  Tables — clean, minimal, warm header                               */
/* ------------------------------------------------------------------ */
.content main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 0.9em;
  line-height: 1.55;
}

.content main table th {
  font-weight: 400;
  font-size: 0.85em;
  text-align: left;
  padding: 0.7em 1em;
  border-bottom: 1.5px solid var(--kairos-border);
  color: var(--kairos-fg-muted);
  letter-spacing: 0.01em;
}

.content main table td {
  padding: 0.7em 1em;
  border-bottom: 0.5px solid var(--kairos-border);
}

.content main table tbody tr:last-child td {
  border-bottom: none;
}

.content main table tbody tr:hover {
  background: var(--kairos-surface);
}

/* ------------------------------------------------------------------ */
/*  Lists — square bullets (like Claude docs), comfortable spacing     */
/* ------------------------------------------------------------------ */
.content main ul {
  list-style-type: square;
  margin: 0.8em 0;
  padding-left: 1.4em;
}

.content main ol {
  margin: 0.8em 0;
  padding-left: 1.4em;
}

.content main li {
  margin-bottom: 0.5em;
  line-height: 1.65;
}

.content main li > strong:first-child {
  color: var(--kairos-accent);
  font-weight: 500;
}

/* Nested lists */
.content main li > ul,
.content main li > ol {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

/* ------------------------------------------------------------------ */
/*  Mermaid Diagrams — clean card container                            */
/* ------------------------------------------------------------------ */
.content main .mermaid {
  margin: 2em 0;
  padding: 1.5em 1em;
  background: var(--kairos-surface);
  border: 0.5px solid var(--kairos-card-border);
  border-radius: 8px;
  text-align: center;
  overflow-x: auto;
}

/* ------------------------------------------------------------------ */
/*  Horizontal Rules                                                   */
/* ------------------------------------------------------------------ */
.content main hr {
  border: none;
  height: 0.5px;
  background: var(--kairos-border);
  margin: 2.5em 0;
}

/* ------------------------------------------------------------------ */
/*  Sidebar — refined hierarchy                                        */
/* ------------------------------------------------------------------ */
.sidebar .sidebar-scrollbox {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.9em;
}

.sidebar .chapter li.part-title {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.06em;
  margin-top: 1.6em;
  opacity: 0.55;
}

.sidebar .chapter li a {
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ------------------------------------------------------------------ */
/*  Page Navigation (prev/next)                                        */
/* ------------------------------------------------------------------ */
.nav-chapters {
  font-size: 0.9em;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.nav-chapters:hover {
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/*  Strong / Bold — use medium weight, not heavy bold                  */
/* ------------------------------------------------------------------ */
.content main strong {
  font-weight: 500;
}

/* ------------------------------------------------------------------ */
/*  Links — accent color, subtle underline                             */
/* ------------------------------------------------------------------ */
.content main a {
  text-decoration: none;
  border-bottom: 0.5px solid var(--kairos-accent);
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.content main a:hover {
  border-bottom-color: transparent;
  opacity: 0.8;
}

/* ------------------------------------------------------------------ */
/*  Smooth Scroll & Selection                                          */
/* ------------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--kairos-accent-dim);
}

/* ------------------------------------------------------------------ */
/*  Print                                                              */
/* ------------------------------------------------------------------ */
@media print {
  .content main pre {
    border: 1px solid #ddd;
  }
  .content main table {
    border-collapse: collapse;
  }
  .content main table th,
  .content main table td {
    border: 1px solid #ddd;
  }
  .nav-chapters,
  .sidebar {
    display: none;
  }
}