/* ============================================================
   Rerius: base design tokens
   Palette sourced from include/ui/theme.h + scripts/theme.sh
   (the CLI's own ANSI palette: xterm 196 / 202 / 208) and the
   README badge colors. Nothing here is invented independently
   of the product's existing visual identity.
   ============================================================ */

:root{
  /* --- neutrals (near-black, GitHub-dark-adjacent but bespoke) --- */
  --void:        #0a0c10;
  --bg:          #0d1015;
  --surface:     #12161d;
  --surface-2:   #171c24;
  --border:      #232a35;
  --border-soft: #1a2029;
  --ink:         #e8eaed;
  --ink-dim:     #9aa4b2;
  --ink-faint:   #626d7c;

  /* --- brand ember gradient (DAX_RED / DAX_FLAME / DAX_AMBER) --- */
  --ember-red:    #ff2b1f;
  --ember-flame:  #ff5f00;
  --ember-amber:  #ff8700;
  --ember-grad: linear-gradient(100deg, var(--ember-red) 0%, var(--ember-flame) 52%, var(--ember-amber) 100%);
  --ember-grad-soft: linear-gradient(100deg, rgba(255,43,31,.14) 0%, rgba(255,95,0,.14) 52%, rgba(255,135,0,.14) 100%);

  /* --- README badge palette, reused as semantic tag colors --- */
  --tag-gold:   #e3b341;   /* version */
  --tag-blue:   #58a6ff;   /* license */
  --tag-green:  #3fb950;   /* language */
  --tag-purple: #bc8cff;   /* architecture */
  --tag-orange: #f0883e;   /* platform */

  /* --- instruction-group colors, mirrored from the CLI's -g output --- */
  --grp-call:   #58a6ff;
  --grp-branch: #bc8cff;
  --grp-ret:    #3fb950;
  --grp-stack:  #e3b341;
  --grp-syscall:#ff5f00;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --content-w: 1180px;
  --header-h: 60px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--void); color-scheme: dark; scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:rgba(255,95,0,.35); color:#fff; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); }

/* focus states: always visible, never suppressed */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--ember-amber);
  outline-offset:2px;
  border-radius:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.container{ max-width:var(--content-w); margin:0 auto; padding:0 28px; }

/* ---------- wordmark / logo ---------- */
.mark{ display:inline-flex; align-items:center; gap:10px; }
.mark svg{ display:block; }
.mark-word{
  font-family:var(--font-display); font-weight:700; letter-spacing:.06em;
  font-size:17px; color:var(--ink);
}
.mark-word b{
  background:var(--ember-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- top nav (shared across all pages) ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(10,12,16,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  padding:8px 12px; border-radius:var(--radius-sm);
  font-size:13.5px; color:var(--ink-dim); font-weight:500;
  transition:color .15s ease, background .15s ease;
}
.nav-links a:hover{ color:var(--ink); background:rgba(255,255,255,.04); }
.nav-links a.current{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:10px; }

.gh-star{
  display:flex; align-items:center; gap:7px;
  padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-md);
  font-size:12.5px; color:var(--ink-dim); font-family:var(--font-mono);
  transition:border-color .15s ease, color .15s ease;
}
.gh-star:hover{ border-color:var(--ink-faint); color:var(--ink); }
.gh-star svg{ width:14px; height:14px; fill:currentColor; }

.search-trigger{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-md);
  color:var(--ink-faint); font-size:13px; background:var(--surface);
  cursor:pointer; min-width:160px;
}
.search-trigger kbd{
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint);
  border:1px solid var(--border); border-radius:3px; padding:1px 5px; margin-left:auto;
}
.search-trigger:hover{ border-color:var(--ink-faint); }

.menu-btn{ display:none; background:none; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--ink); width:34px; height:34px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--radius-md);
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--ember-flame); color:#fff;
}
.btn-primary:hover{ background:#e65500; }
.btn-secondary{
  background:var(--surface); border-color:var(--border); color:var(--ink);
  font-family:var(--font-body); font-weight:600;
}
.btn-secondary:hover{ border-color:var(--ink-faint); }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--ink-dim); }
.btn-ghost:hover{ color:var(--ink); border-color:var(--ink-faint); }
.btn-sm{ padding:7px 12px; font-size:12.5px; }

/* ---------- tags / badges ---------- */
.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  padding:3px 10px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--ink-dim);
}
.tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.tag-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag-gold{ color:var(--tag-gold); } .tag-blue{ color:var(--tag-blue); }
.tag-green{ color:var(--tag-green); } .tag-purple{ color:var(--tag-purple); }
.tag-orange{ color:var(--tag-orange); }
.tag-gold, .tag-blue, .tag-green, .tag-purple, .tag-orange{ background:var(--surface); }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--border-soft); margin-top:100px; padding:56px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin:0 0 14px; font-weight:600; }
.footer-col a{ display:block; font-size:13.5px; color:var(--ink-dim); padding:5px 0; }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:48px; padding-top:24px; border-top:1px solid var(--border-soft); font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap; gap:12px; }
.footer-brand p{ font-size:13px; color:var(--ink-faint); max-width:280px; line-height:1.6; margin-top:12px; }

@media (max-width: 900px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:32px; }
  .nav-links{ display:none; }
  .menu-btn{ display:flex; align-items:center; justify-content:center; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; }
  .search-trigger{ min-width:auto; }
  .search-trigger span:not(.sr-only){ display:none; }
}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- command palette / search ---------- */
.cmdk-backdrop{
  position:fixed; inset:0; background:rgba(5,6,8,.7); backdrop-filter:blur(2px);
  display:none; align-items:flex-start; justify-content:center; padding-top:12vh; z-index:1000;
}
.cmdk-backdrop.open{ display:flex; }
.cmdk-box{
  width:min(640px, 92vw); background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:0 30px 80px rgba(0,0,0,.6); overflow:hidden;
}
.cmdk-input-row{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.cmdk-input-row svg{ width:16px; height:16px; color:var(--ink-faint); flex:none; }
.cmdk-input{ flex:1; background:none; border:none; outline:none; color:var(--ink); font-size:15px; font-family:var(--font-body); }
.cmdk-input::placeholder{ color:var(--ink-faint); }
.cmdk-esc{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); border:1px solid var(--border); border-radius:3px; padding:2px 5px; }
.cmdk-results{ max-height:56vh; overflow-y:auto; padding:8px; }
.cmdk-item{ display:block; padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; }
.cmdk-item.active, .cmdk-item:hover{ background:rgba(255,95,0,.1); }
.cmdk-item .t{ font-size:13.5px; color:var(--ink); font-weight:500; }
.cmdk-item .p{ font-size:11.5px; color:var(--ink-faint); font-family:var(--font-mono); margin-top:2px; }
.cmdk-empty{ padding:24px 16px; color:var(--ink-faint); font-size:13px; text-align:center; }
.cmdk-hint{ padding:8px 16px 12px; font-size:11px; color:var(--ink-faint); display:flex; gap:14px; border-top:1px solid var(--border); }
.cmdk-hint b{ color:var(--ink-dim); font-family:var(--font-mono); }

/* ---------- generic prose (used inside docs/learn content) ---------- */
.prose{ max-width:760px; }
.prose h1{ font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1.28; margin:0 0 8px; letter-spacing:-.015em; }
.prose h2{ font-family:var(--font-display); font-weight:700; font-size:21px; margin:48px 0 16px; padding-top:8px; border-top:1px solid var(--border-soft); letter-spacing:-.01em; }
.prose h2:first-child{ border-top:none; padding-top:0; margin-top:0; }
.prose h3{ font-size:16.5px; margin:32px 0 12px; font-weight:700; }
.prose h4{ font-size:14.5px; margin:24px 0 10px; font-weight:700; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.04em; }
.prose p{ color:#cdd3db; margin:0 0 16px; font-size:15px; }
.prose ul, .prose ol{ color:#cdd3db; font-size:15px; padding-left:22px; margin:0 0 16px; }
.prose li{ margin:6px 0; }
.prose li > p{ margin:0; }
.prose a{ color:var(--tag-blue); border-bottom:1px solid rgba(88,166,255,.35); }
.prose a:hover{ border-color:var(--tag-blue); }
.prose strong{ color:var(--ink); font-weight:650; }
.prose blockquote{
  margin:20px 0; padding:2px 18px; border-left:2px solid var(--ember-flame);
  color:var(--ink-dim); background:rgba(255,95,0,.04); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.prose blockquote p{ margin:12px 0; font-size:14px; }
.prose hr{ border:none; border-top:1px solid var(--border-soft); margin:40px 0; }
.prose code{
  font-family:var(--font-mono); font-size:.87em; background:var(--surface-2);
  border:1px solid var(--border-soft); padding:.15em .4em; border-radius:4px; color:#ffb88a;
}
.prose pre{
  background:var(--void); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 18px; overflow-x:auto; margin:0 0 20px; font-size:13px; line-height:1.65;
}
.prose pre code{ background:none; border:none; padding:0; color:#dbe1e8; }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 24px; font-size:13.5px; display:block; overflow-x:auto; }
.prose th, .prose td{ text-align:left; padding:9px 14px; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
.prose th{ color:var(--ink-dim); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.prose td{ color:#cdd3db; }
.prose td code{ white-space:nowrap; }
.prose img{ border-radius:var(--radius-md); border:1px solid var(--border); }
.prose .headerlink{ opacity:0; margin-left:8px; color:var(--ink-faint); font-size:.8em; text-decoration:none; border:none; }
.prose h2:hover .headerlink, .prose h3:hover .headerlink{ opacity:1; }