/* ===========================================================
   C Foundry — brochure site design system
   Display: Fraunces (serif, optical) | Body/UI: IBM Plex Sans
   Code/mono/labels: IBM Plex Mono
   =========================================================== */

:root{
  --bg:        #0b0c0a;
  --bg-raised: #141510;
  --bg-card:   #15160f;
  --fg:        #f3f1e7;
  --fg-dim:    #a9a493;
  --fg-mute:   #736e5f;
  --accent:    #ff5d1f;
  --accent-2:  #8fe066;
  --accent-3:  #ffd23f;
  --border:    #2b2c22;
  --border-soft: #201f18;
  --radius: 2px;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --grain-opacity: .05;
}

[data-theme="light"]{
  --bg:        #f6f4ec;
  --bg-raised: #ffffff;
  --bg-card:   #ffffff;
  --fg:        #16160f;
  --fg-dim:    #4c4a3e;
  --fg-mute:   #8a8672;
  --border:    #ddd8c4;
  --border-soft: #e8e4d4;
  --grain-opacity: .03;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  transition:background .25s ease, color .25s ease;
  position:relative;
}

/* subtle grain/noise overlay for atmosphere */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9000;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

::selection{ background:var(--accent); color:#0b0c0a; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--fg);
}

.mono{ font-family:var(--mono); }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  background:var(--accent);
  display:inline-block;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:500;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.site-nav .brand{
  font-family:var(--mono);
  font-weight:600;
  font-size:1rem;
  letter-spacing:-.01em;
  display:flex; align-items:center; gap:.5rem;
}
.site-nav .brand .dot{ color:var(--accent); }
.site-nav a.nav-link{
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--fg-dim);
  padding:.4rem .2rem;
  border-bottom:1px solid transparent;
}
.site-nav a.nav-link:hover, .site-nav a.nav-link.active{
  color:var(--fg);
  border-bottom-color:var(--accent);
}
.btn-ghost{
  font-family:var(--mono);
  font-size:.78rem;
  border:1px solid var(--border);
  padding:.35rem .7rem;
  color:var(--fg-dim);
  border-radius:var(--radius);
  background:transparent;
}
.btn-ghost:hover{ color:var(--fg); border-color:var(--fg-mute); }
.theme-toggle{
  width:34px;height:34px;
  border:1px solid var(--border);
  background:var(--bg-raised);
  color:var(--fg-dim);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  cursor:pointer;
}
.theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:7.5rem 0 6rem;
  border-bottom:1px solid var(--border-soft);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 65% 55% at 70% 20%, black 10%, transparent 75%);
  pointer-events:none;
}
.hero .headline{
  font-size:clamp(2.6rem, 5.6vw, 5.2rem);
  line-height:.98;
  max-width:14ch;
}
.hero .headline em{
  font-style:italic;
  color:var(--accent);
}
.hero .lede{
  font-size:1.08rem;
  color:var(--fg-dim);
  max-width:46ch;
  margin-top:1.4rem;
}
.hero .stat-strip{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--fg-mute);
  border-top:1px solid var(--border-soft);
  margin-top:3.2rem;
  padding-top:1rem;
  display:flex;
  gap:2.2rem;
  flex-wrap:wrap;
}
.hero .stat-strip strong{ color:var(--fg); font-weight:600;}

.btn-signal{
  font-family:var(--mono);
  font-size:.85rem;
  background:var(--accent);
  color:#140700;
  border:1px solid var(--accent);
  padding:.75rem 1.3rem;
  border-radius:var(--radius);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-signal:hover{
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--fg);
  color:#140700;
}
.btn-outline-signal{
  font-family:var(--mono);
  font-size:.85rem;
  border:1px solid var(--border);
  color:var(--fg);
  padding:.75rem 1.3rem;
  border-radius:var(--radius);
}
.btn-outline-signal:hover{ border-color:var(--accent); color:var(--accent);}

/* ---------- terminal code block ---------- */
.term{
  background:#0a0a08;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:8px 8px 0 color-mix(in srgb, var(--accent) 14%, transparent);
}
.term-bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.55rem .8rem;
  border-bottom:1px solid var(--border);
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--fg-mute);
}
.term-bar span.d{ width:9px;height:9px;border-radius:50%; display:inline-block;}
.term-bar .d1{background:#ff5f56;} .term-bar .d2{background:#ffbd2e;} .term-bar .d3{background:#27c93f;}
.term pre{
  margin:0; padding:1.1rem 1.2rem;
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--accent-2);
  overflow-x:auto;
}
.term pre .comment{ color:var(--fg-mute); }
.term pre .cmd{ color:var(--fg); }
.term .copy-btn{
  margin-left:auto;
  background:none;border:none;color:var(--fg-mute);
  font-family:var(--mono); font-size:.7rem; cursor:pointer;
}
.term .copy-btn:hover{ color:var(--accent);}

/* ---------- section headers ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:1px solid var(--border-soft);
  padding-bottom:1.2rem; margin-bottom:2.2rem;
  flex-wrap:wrap; gap:1rem;
}
.section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); }
.section-num{
  font-family:var(--mono); color:var(--fg-mute); font-size:.85rem;
}

/* ---------- library cards ---------- */
.lib-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  height:100%;
  position:relative;
  transition:border-color .18s ease, transform .18s ease;
}
.lib-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
}
.lib-card .idx{
  font-family:var(--mono); font-size:.7rem; color:var(--fg-mute);
  position:absolute; top:1.2rem; right:1.4rem;
}
.lib-card .status{
  display:inline-block;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase;
  padding:.15rem .5rem;
  border:1px solid var(--border);
  color:var(--fg-dim);
  margin-bottom:.9rem;
}
.status.stable{ color:var(--accent-2); border-color:color-mix(in srgb, var(--accent-2) 40%, var(--border)); }
.status.active{ color:var(--accent-3); border-color:color-mix(in srgb, var(--accent-3) 40%, var(--border)); }
.status.early{ color:var(--fg-mute); }
.lib-card h3{ font-size:1.35rem; margin-bottom:.55rem;}
.lib-card p.desc{ color:var(--fg-dim); font-size:.92rem; min-height:4.2em;}
.lib-card .tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 1.2rem;}
.lib-card .tags span{
  font-family:var(--mono); font-size:.68rem; color:var(--fg-mute);
  border:1px solid var(--border-soft); padding:.15rem .45rem;
}
.lib-card .card-actions{ display:flex; gap:1rem; align-items:center; font-family:var(--mono); font-size:.78rem;}
.lib-card .card-actions a{ color:var(--fg); border-bottom:1px solid var(--border); }
.lib-card .card-actions a:hover{ color:var(--accent); border-color:var(--accent);}
.lib-card .gh-badge{ color:var(--fg-mute); display:flex; align-items:center; gap:.3rem;}

/* ---------- features / philosophy strip ---------- */
.feat{
  border:1px solid var(--border-soft);
  padding:1.6rem 1.4rem;
  height:100%;
}
.feat .num{ font-family:var(--mono); color:var(--accent); font-size:.8rem; }
.feat h4{ font-size:1.1rem; margin:.6rem 0 .5rem; }
.feat p{ color:var(--fg-dim); font-size:.9rem; margin:0;}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--border-soft);
  padding:3rem 0 2.4rem;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--fg-mute);
}
.site-footer a:hover{ color:var(--accent); }

/* ---------- docs layout ---------- */
.docs-shell{ display:flex; min-height:calc(100vh - 58px); }
.docs-sidebar{
  width:260px; flex-shrink:0;
  border-right:1px solid var(--border-soft);
  padding:1.6rem 1.2rem;
  position:sticky; top:58px;
  height:calc(100vh - 58px);
  overflow-y:auto;
}
.docs-search{
  width:100%;
  background:var(--bg-raised);
  border:1px solid var(--border);
  color:var(--fg);
  font-family:var(--mono);
  font-size:.8rem;
  padding:.5rem .6rem;
  margin-bottom:1.2rem;
  border-radius:var(--radius);
}
.docs-search:focus{ outline:none; border-color:var(--accent); }
.docs-nav-group{ margin-bottom:1.2rem; }
.docs-nav-group .grp-title{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-mute); margin-bottom:.4rem;
}
.docs-nav-group a{
  display:block; font-size:.86rem; color:var(--fg-dim);
  padding:.3rem 0; border-left:2px solid transparent; padding-left:.6rem;
}
.docs-nav-group a:hover{ color:var(--fg); }
.docs-nav-group a.active{ color:var(--accent); border-left-color:var(--accent); }
.docs-nav-group a.hidden{ display:none; }

.docs-content{
  flex:1; padding:2.6rem clamp(1.2rem,4vw,4rem); max-width:860px;
}
.docs-content h1{ font-size:2.2rem; margin-bottom:.3rem;}
.docs-content .doc-meta{
  font-family:var(--mono); font-size:.78rem; color:var(--fg-mute);
  margin-bottom:2rem; padding-bottom:1.4rem; border-bottom:1px solid var(--border-soft);
}
.docs-content h2{ font-size:1.5rem; margin-top:2.4rem; margin-bottom:.8rem;}
.docs-content h3{ font-size:1.15rem; margin-top:1.8rem; margin-bottom:.6rem;}
.docs-content p{ color:var(--fg-dim); }
.docs-content ul, .docs-content ol{ color:var(--fg-dim); }
.docs-content code{
  font-family:var(--mono); background:var(--bg-raised);
  padding:.1rem .35rem; border-radius:2px; font-size:.85em; color:var(--accent-2);
  border:1px solid var(--border-soft);
}
.docs-content pre{
  background:#0a0a08; border:1px solid var(--border); padding:1rem 1.2rem;
  overflow-x:auto; border-radius:var(--radius);
}
.docs-content pre code{ border:none; background:none; padding:0; color:var(--fg); }
.docs-content table{ width:100%; border-collapse:collapse; margin:1rem 0;}
.docs-content th, .docs-content td{ border:1px solid var(--border-soft); padding:.5rem .7rem; font-size:.88rem;}
.docs-content th{ font-family:var(--mono); color:var(--fg-mute); text-align:left;}
.docs-content blockquote{
  border-left:3px solid var(--accent); padding-left:1rem; color:var(--fg-mute); margin:1.2rem 0;
}
.docs-empty{ color:var(--fg-mute); font-family:var(--mono); }

@media (max-width: 900px){
  .docs-sidebar{ position:relative; top:0; height:auto; width:100%; border-right:none; border-bottom:1px solid var(--border-soft);}
  .docs-shell{ flex-direction:column; }
}