/* ==========================================================================
   RAG Tool Curator — Docs design system
   System-native typography, neutral surface, one warm accent. No display
   webfont, no decorative motifs — layout and type carry the hierarchy.
   ========================================================================== */

:root{
  --paper:        #FAFAF8;
  --surface:      #FFFFFF;
  --surface-2:    #F3F1ED;
  --ink:          #1F1E1C;
  --ink-soft:     #57544D;
  --ink-faint:    #8D897F;
  --border:       #E7E3DB;
  --border-strong:#D4CFC3;

  --accent:       #B5502C;
  --accent-ink:   #8C3D20;
  --accent-soft:  #F7E9E1;
  --danger:       #AA3B3B;
  --danger-soft:  #F8E9E9;

  --code-bg:      #1F1E1C;
  --code-ink:     #EDEAE4;
  --code-border:  #322F28;

  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;

  --sidebar-w: 264px;
  --toc-w:     216px;
  --topbar-h:  56px;
  --content-max: 720px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --shadow-sm: 0 1px 2px rgba(31,30,28,0.06);
  --shadow-md: 0 8px 24px rgba(31,30,28,0.12);

  color-scheme: light;
}

:root[data-theme="dark"]{
  --paper:        #171613;
  --surface:      #1E1C18;
  --surface-2:    #262420;
  --ink:          #EDEAE2;
  --ink-soft:     #B7B2A6;
  --ink-faint:    #837E71;
  --border:       #322F28;
  --border-strong:#433F35;
  --accent:       #E08A63;
  --accent-ink:   #F0A886;
  --accent-soft:  rgba(224,138,99,0.13);
  --danger:       #E28080;
  --danger-soft:  rgba(226,128,128,0.12);
  --code-bg:      #121110;
  --code-ink:     #E7E4DC;
  --code-border:  #2C2A24;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:        #171613;
    --surface:      #1E1C18;
    --surface-2:    #262420;
    --ink:          #EDEAE2;
    --ink-soft:     #B7B2A6;
    --ink-faint:    #837E71;
    --border:       #322F28;
    --border-strong:#433F35;
    --accent:       #E08A63;
    --accent-ink:   #F0A886;
    --accent-soft:  rgba(224,138,99,0.13);
    --danger:       #E28080;
    --danger-soft:  rgba(226,128,128,0.12);
    --code-bg:      #121110;
    --code-ink:     #E7E4DC;
    --code-border:  #2C2A24;
    color-scheme: dark;
  }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{ font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.3; }
code, pre, kbd{ font-family: var(--font-mono); }

a{ color: var(--accent-ink); text-decoration: none; }
a:hover{ text-decoration: underline; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

p{ margin: 0 0 1.1em; }
ul, ol{ margin: 0 0 1.1em; padding-left: 1.3em; }
li{ margin-bottom: 0.35em; }

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.topbar{
  position: fixed; top:0; left:0; right:0; height: var(--topbar-h);
  display:flex; align-items:center; gap: 1rem;
  padding: 0 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 200;
}
.topbar .brand{
  display:flex; align-items:baseline; gap:0.45rem;
  font-weight:600; font-size:0.98rem; color: var(--ink); flex-shrink:0;
}
.topbar .brand:hover{ text-decoration:none; }
.brand-name{ letter-spacing:-0.01em; }
.brand-suffix{ font-family: var(--font-mono); font-size:0.72rem; color: var(--ink-faint); font-weight:400; }

.topbar .version-pill{
  font-family: var(--font-mono); font-size:0.68rem; color: var(--ink-faint);
  border:1px solid var(--border-strong); border-radius:999px; padding:0.1rem 0.5rem;
  display:none;
}
@media (min-width:640px){ .topbar .version-pill{ display:inline-block; } }

.topbar-spacer{ flex:1; }

.search-trigger{
  display:flex; align-items:center; gap:0.5rem;
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius); padding: 0.4rem 0.65rem;
  color: var(--ink-faint); font-size:0.85rem; cursor:pointer;
  width: 100%; max-width: 320px;
}
.search-trigger kbd{
  margin-left:auto; font-size:0.68rem; border:1px solid var(--border-strong);
  border-radius:4px; padding:0.05rem 0.35rem; color: var(--ink-faint); background: var(--surface);
}
.search-trigger:hover{ border-color: var(--border-strong); }

.icon-btn{
  width:34px; height:34px; border-radius: var(--radius-sm);
  border:1px solid transparent; background: transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color: var(--ink-soft); flex-shrink:0;
}
.icon-btn:hover{ background: var(--surface-2); color: var(--ink); }
.icon-btn svg{ width:17px; height:17px; }
.icon-btn .icon-sun{ display:none; }
:root[data-theme="dark"] .icon-btn .icon-moon{ display:none; }
:root[data-theme="dark"] .icon-btn .icon-sun{ display:block; }

.nav-toggle{ display:flex; }
@media (min-width: 980px){ .nav-toggle{ display:none; } }

/* ==========================================================================
   SHELL / LAYOUT
   ========================================================================== */
.shell{ display:flex; max-width: 1320px; margin:0 auto; padding-top: var(--topbar-h); }

.sidebar{
  width: var(--sidebar-w); flex-shrink:0;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y:auto; padding: 1.5rem 1rem 3rem 1.25rem;
  border-right: 1px solid var(--border);
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:3px; }

.nav-group{ margin-bottom: 1.4rem; }
.nav-group-title{
  font-size:0.72rem; font-weight:600; letter-spacing:0.04em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.4rem 0.6rem;
}
.nav-list{ list-style:none; margin:0; padding:0; }
.nav-link{
  display:block; padding: 0.32rem 0.6rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size:0.89rem; border-left:2px solid transparent;
}
.nav-link:hover{ background: var(--surface-2); color: var(--ink); text-decoration:none; }
.nav-link.active{ color: var(--accent-ink); font-weight:600; border-left-color: var(--accent); }

.content-col{ flex:1; min-width:0; padding: 2.5rem 2.5rem 6rem; max-width: calc(var(--content-max) + 5rem); }
.content-col > .prose{ max-width: var(--content-max); }

.toc{ width: var(--toc-w); flex-shrink:0; position: sticky; top: calc(var(--topbar-h) + 1.5rem); height: fit-content; padding: 1.75rem 1.25rem; display:none; }
@media (min-width: 1200px){ .toc{ display:block; } }
.toc-title{ font-size:0.72rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:0.7rem; }
.toc-list{ list-style:none; margin:0; padding:0; border-left:1px solid var(--border); }
.toc-list a{ display:block; padding: 0.26rem 0 0.26rem 0.9rem; margin-left:-1px; border-left:1px solid transparent; color: var(--ink-faint); font-size:0.82rem; }
.toc-list a.active{ border-left-color: var(--accent); color: var(--accent-ink); }
.toc-list a[data-level="3"]{ padding-left: 1.6rem; }

@media (max-width: 979px){
  .sidebar{
    position: fixed; top: var(--topbar-h); left:0; bottom:0; z-index:150;
    background: var(--paper); width: min(84vw, 300px);
    transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: var(--shadow-md);
  }
  .sidebar.open{ transform: translateX(0); }
  .content-col{ padding: 2rem 1.25rem 4rem; }
  .scrim{ display:none; position:fixed; inset: var(--topbar-h) 0 0 0; z-index:140; background: rgba(0,0,0,0.35); }
  .scrim.open{ display:block; }
}

/* ==========================================================================
   PROSE CONTENT
   ========================================================================== */
.prose h1{ font-size: 1.9rem; margin: 0 0 0.5rem; }
.prose .page-kicker{ font-size:0.75rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:0.6rem; }
.prose .page-dek{ font-size:1.06rem; color: var(--ink-soft); margin-bottom:2.2rem; }
.prose h2{ font-size:1.32rem; margin: 2.3rem 0 0.9rem; padding-top:0.4rem; border-top:1px solid var(--border); }
.prose h2:first-of-type{ border-top:none; padding-top:0; margin-top:1.4rem; }
.prose h3{ font-size:1.08rem; margin: 1.6rem 0 0.65rem; }
.prose hr{ border:none; border-top:1px solid var(--border); margin:2.2rem 0; }

.prose code:not(pre code){
  background: var(--surface-2); border:1px solid var(--border);
  border-radius:4px; padding: 0.1rem 0.4rem; font-size:0.87em; color: var(--accent-ink);
}
.prose pre{
  background: var(--code-bg); color: var(--code-ink);
  border:1px solid var(--code-border); border-radius: var(--radius);
  padding: 1rem 1.1rem; overflow-x:auto; font-size:0.85rem; line-height:1.6;
  margin: 0 0 1.3em;
}
.prose pre code{ background:none; border:none; padding:0; color:inherit; }

.prose table{ width:100%; border-collapse:collapse; margin: 0 0 1.5em; font-size:0.9rem; display:block; overflow-x:auto; }
.prose th, .prose td{ text-align:left; padding:0.55rem 0.8rem; border-bottom:1px solid var(--border); }
.prose th{ font-size:0.72rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color: var(--ink-faint); }
.prose td.num, .prose th.num{ text-align:right; font-family: var(--font-mono); }

.prose blockquote{ margin: 0 0 1.3em; padding: 0.2rem 0 0.2rem 1rem; border-left:3px solid var(--accent); color: var(--ink-soft); font-style:italic; }

.prose figure{ margin: 0 0 1.6em; }
.prose figure img{ width:100%; display:block; border:1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.prose figcaption{ font-size:0.82rem; color: var(--ink-faint); margin-top:0.5rem; }

/* Callouts — two tones only: neutral note, and a warning tone reused for both caution and limitation */
.callout{ border:1px solid var(--border); border-left-width:3px; border-radius: var(--radius); padding: 0.9rem 1.1rem; margin: 0 0 1.4em; font-size:0.92rem; background: var(--surface-2); }
.callout p:last-child{ margin-bottom:0; }
.callout-title{ font-weight:600; font-size:0.92rem; margin-bottom:0.3rem; }
.callout.note{ border-left-color: var(--ink-faint); }
.callout.caution, .callout.limitation{ border-left-color: var(--accent); background: var(--accent-soft); }
.callout.caution .callout-title, .callout.limitation .callout-title{ color: var(--accent-ink); }

.btn{ display:inline-flex; align-items:center; gap:0.5rem; font-weight:600; font-size:0.92rem; padding: 0.55rem 1rem; border-radius: var(--radius); border:1px solid transparent; cursor:pointer; }
.btn:hover{ text-decoration:none; }
.btn.primary{ background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .btn.primary{ background: var(--accent); color:#1A0F08; }
.btn.secondary{ background: var(--surface); border-color: var(--border-strong); color: var(--ink); }

.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:1rem; margin: 1.5rem 0; }
.card{ display:block; border:1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; background: var(--surface); }
.card:hover{ border-color: var(--border-strong); background: var(--surface-2); text-decoration:none; }
.card-title{ font-weight:600; margin-bottom:0.3rem; color: var(--ink); }
.card-desc{ font-size:0.87rem; color: var(--ink-soft); }

/* ==========================================================================
   HOME HERO
   ========================================================================== */
.hero{ padding: 1rem 0 2rem; }
.hero-kicker{ font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:0.9rem; }
.hero h1{ font-size:2.2rem; max-width:20ch; margin:0 0 1rem; }
.hero .lede{ font-size:1.1rem; color: var(--ink-soft); max-width:58ch; margin-bottom:1.75rem; }
.hero-actions{ display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:2.5rem; }

.stat-row{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin:2rem 0; }
.stat-cell{ border:1px solid var(--border); border-radius: var(--radius); padding:1rem 1.1rem; background: var(--surface); }
.stat-num{ font-size:1.5rem; font-weight:700; color: var(--ink); }
.stat-num.accent{ color: var(--accent-ink); }
.stat-label{ font-family: var(--font-mono); font-size:0.73rem; color: var(--ink-faint); margin-top:0.2rem; }

/* Search modal */
.search-modal{ position:fixed; inset:0; z-index:300; display:none; align-items:flex-start; justify-content:center; padding-top:12vh; background: rgba(20,18,16,0.4); }
.search-modal.open{ display:flex; }
.search-panel{ width:min(560px,90vw); background: var(--surface); border:1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow:hidden; }
.search-input-row{ display:flex; align-items:center; gap:0.6rem; padding:0.9rem 1rem; border-bottom:1px solid var(--border); }
.search-input-row input{ flex:1; border:none; outline:none; background:transparent; font-size:1rem; font-family: var(--font-sans); color: var(--ink); }
.search-results{ max-height:50vh; overflow-y:auto; padding:0.4rem; }
.search-result{ display:block; padding:0.6rem 0.8rem; border-radius: var(--radius-sm); }
.search-result:hover, .search-result.active{ background: var(--surface-2); text-decoration:none; }
.search-result-title{ font-weight:600; color: var(--ink); font-size:0.92rem; }
.search-result-group{ font-size:0.68rem; color: var(--ink-faint); text-transform:uppercase; }
.search-empty{ padding:1.2rem; color: var(--ink-faint); font-size:0.88rem; text-align:center; }

.page-footer{ max-width: var(--content-max); margin: 3rem auto 0; padding: 1.5rem 0 0; font-size:0.8rem; color: var(--ink-faint); }