/* ============================================================
   /docs — palette overrides for the existing bespoke docs styles
   Scope: body.docs-redesign
   The page has its own 341-line base CSS at docs-base.css (extracted
   from the original inline <style>). Here we only retarget the
   theme-visible parts — fonts, surfaces, lines, accent, code blocks —
   so it reads as the same product as the rest of the app.
   ============================================================ */

body.docs-redesign {
  font-family: var(--artra-font) !important;
  background: var(--artra-bg) !important;
  color: var(--artra-ink) !important;
  letter-spacing: -0.003em;
  font-feature-settings: "ss01", "cv11", "cv09";
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Top bar (dark sticky header)
   ============================================================ */
body.docs-redesign .top-bar {
  background: var(--artra-ink) !important;
  height: 52px;
  border-bottom: 1px solid rgba(246, 245, 241, 0.06);
}
body.docs-redesign .top-bar-title {
  font-family: var(--artra-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.72) !important;
  border-left: 1px solid rgba(246, 245, 241, 0.12) !important;
}

/* ============================================================
   Outer layout
   ============================================================ */
body.docs-redesign .docs-outer,
body.docs-redesign .docs-wrap,
body.docs-redesign .docs-shell {
  background: var(--artra-bg);
}

/* Sidebar (left nav) */
body.docs-redesign .docs-side,
body.docs-redesign .docs-sidebar,
body.docs-redesign .docs-nav,
body.docs-redesign aside {
  background: var(--artra-surface);
  border-right: 1px solid var(--artra-line);
  font-family: var(--artra-font);
}
body.docs-redesign .docs-side a,
body.docs-redesign .docs-sidebar a,
body.docs-redesign .docs-nav a,
body.docs-redesign aside a {
  color: var(--artra-ink-2) !important;
  font-family: var(--artra-font);
  font-size: 13px;
  letter-spacing: -0.003em;
  text-decoration: none;
}
body.docs-redesign .docs-side a:hover,
body.docs-redesign aside a:hover {
  color: var(--artra-ink) !important;
}
body.docs-redesign .docs-side a.active,
body.docs-redesign aside a.active,
body.docs-redesign .docs-nav a.active {
  color: var(--artra-accent-ink) !important;
  font-weight: 500;
}
body.docs-redesign .docs-side .section-label,
body.docs-redesign .docs-sidebar .section-label,
body.docs-redesign aside h3,
body.docs-redesign aside h4 {
  font-family: var(--artra-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--artra-ink-3) !important;
}

/* Main content */
body.docs-redesign main,
body.docs-redesign .docs-content,
body.docs-redesign article {
  background: var(--artra-bg);
  color: var(--artra-ink);
}

/* Headings */
body.docs-redesign h1,
body.docs-redesign h2,
body.docs-redesign h3,
body.docs-redesign h4,
body.docs-redesign h5,
body.docs-redesign h6 {
  font-family: var(--artra-font) !important;
  color: var(--artra-ink) !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
}
body.docs-redesign h1 { font-size: 28px !important; }
body.docs-redesign h2 { font-size: 20px !important; }
body.docs-redesign h3 { font-size: 16px !important; }
body.docs-redesign h4 { font-size: 14px !important; }

/* Body copy */
body.docs-redesign p,
body.docs-redesign li {
  font-family: var(--artra-font) !important;
  font-size: 14px;
  color: var(--artra-ink-2) !important;
  letter-spacing: -0.002em;
  line-height: 1.6;
}

/* Inline + block code — keep Fira Code, retarget surfaces */
body.docs-redesign code,
body.docs-redesign pre,
body.docs-redesign kbd {
  font-family: "Fira Code", var(--artra-mono), ui-monospace, monospace !important;
}
body.docs-redesign code:not(pre code) {
  background: var(--artra-surface-2) !important;
  color: var(--artra-ink) !important;
  border: 1px solid var(--artra-line);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.88em;
}
body.docs-redesign pre {
  background: var(--artra-ink) !important;
  color: var(--artra-bg) !important;
  border: 1px solid var(--artra-ink);
  border-radius: var(--artra-radius);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.55;
}
body.docs-redesign pre code {
  background: transparent !important;
  border: 0 !important;
  padding: 0;
  color: inherit !important;
}

/* Links */
body.docs-redesign a {
  color: var(--artra-accent-ink) !important;
  text-decoration: none;
}
body.docs-redesign a:hover {
  color: var(--artra-accent) !important;
  text-decoration: underline;
}

/* Cards / callouts / tip boxes (best-effort against common class names) */
body.docs-redesign .card,
body.docs-redesign .callout,
body.docs-redesign .tip,
body.docs-redesign .note,
body.docs-redesign .info-box,
body.docs-redesign blockquote {
  background: var(--artra-surface) !important;
  border: 1px solid var(--artra-line) !important;
  border-radius: var(--artra-radius) !important;
  box-shadow: none !important;
  padding: 14px 16px;
  color: var(--artra-ink-2);
  font-family: var(--artra-font);
}
body.docs-redesign blockquote {
  border-left: 3px solid var(--artra-accent) !important;
  border-radius: var(--artra-radius-sm) !important;
}
body.docs-redesign .warning,
body.docs-redesign .alert.warning {
  background: var(--artra-warn-soft) !important;
  border-color: #ead9b2 !important;
  color: #8a5f1e !important;
}
body.docs-redesign .danger,
body.docs-redesign .alert.danger {
  background: #f7e6e3 !important;
  border-color: #e6c8c3 !important;
  color: #8a3d33 !important;
}

/* Tables */
body.docs-redesign table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--artra-font);
  font-size: 13px;
}
body.docs-redesign table th {
  font-family: var(--artra-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--artra-ink-3) !important;
  background: var(--artra-surface-2) !important;
  border-bottom: 1px solid var(--artra-line) !important;
  padding: 9px 14px !important;
  text-align: left;
}
body.docs-redesign table td {
  border-bottom: 1px solid var(--artra-line) !important;
  padding: 10px 14px !important;
  color: var(--artra-ink) !important;
  vertical-align: top;
}

/* HR */
body.docs-redesign hr {
  border: 0;
  border-top: 1px solid var(--artra-line);
  margin: 22px 0;
}

/* Buttons (best-effort) */
body.docs-redesign button.primary,
body.docs-redesign .btn-primary,
body.docs-redesign a.btn-primary {
  background: var(--artra-ink) !important;
  border: 1px solid var(--artra-ink) !important;
  color: var(--artra-bg) !important;
  border-radius: var(--artra-radius-sm) !important;
  font-family: var(--artra-font);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  letter-spacing: -0.003em;
  cursor: pointer;
}
body.docs-redesign button.secondary,
body.docs-redesign .btn-outline,
body.docs-redesign a.btn-outline {
  background: var(--artra-surface) !important;
  border: 1px solid var(--artra-line) !important;
  color: var(--artra-ink) !important;
  border-radius: var(--artra-radius-sm) !important;
  font-family: var(--artra-font);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  letter-spacing: -0.003em;
}

/* Selection */
body.docs-redesign ::selection {
  background: var(--artra-accent);
  color: #ffffff;
}