/* Shared docs skin. Light matches the marketing site; dark keeps its amber
   accent and warm neutral surfaces. An early script sets data-theme. */
:root,
:root[data-theme="light"] {
  --bg: #faf8f4;
  --bg-soft: #f4f1ea;
  --bg-inset: #f6f3ec;
  --fg: #1c1a17;
  --fg-muted: #57534e;
  --fg-faint: #6f6862;
  --line: #e8e2d8;
  --line-strong: #d8d1c4;
  --primary: #96620a;
  --primary-bright: #f2b23c;
  --primary-wash: rgba(242, 178, 60, .16);
  --info: #574f44;
  --info-bg: rgba(87, 79, 68, .07);
  --ok: #2f7d5a;
  --ok-bg: rgba(47, 125, 90, .1);
  --ok-line: rgba(47, 125, 90, .28);
  --danger: #b0503f;
  --danger-bg: rgba(176, 80, 63, .09);
  --danger-line: rgba(176, 80, 63, .28);
  --warn-bg: rgba(242, 178, 60, .12);
  --warn-line: rgba(184, 128, 26, .3);
  --radius: 16px;
  --docs-header: rgba(250, 248, 244, .92);
  --docs-panel: #fff;
  --docs-panel-hover: #fffdf9;
  --docs-pill: #fffaf0;
  --docs-active: #fff8e9;
  --docs-gold-line: rgba(184, 128, 26, .3);
  --docs-heading-wash: rgba(242, 178, 60, .12);
  --docs-article-wash: rgba(242, 178, 60, .1);
  --docs-nav-hover: rgba(60, 48, 28, .05);
  --docs-shadow: 0 1px 2px rgba(60, 48, 28, .05), 0 12px 28px -18px rgba(60, 48, 28, .22);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #191715;
  --bg-soft: #211e1a;
  --bg-inset: #2a2621;
  --fg: #f6f1e8;
  --fg-muted: #d5cbbd;
  --fg-faint: #b5a99a;
  --line: #403a32;
  --line-strong: #5b5145;
  --primary: #f5bf55;
  --primary-bright: #f2b23c;
  --primary-wash: rgba(242, 178, 60, .14);
  --info: #d5cbbd;
  --info-bg: rgba(213, 203, 189, .08);
  --ok: #77c99b;
  --ok-bg: rgba(119, 201, 155, .12);
  --ok-line: rgba(119, 201, 155, .3);
  --danger: #ee927d;
  --danger-bg: rgba(238, 146, 125, .12);
  --danger-line: rgba(238, 146, 125, .3);
  --warn-bg: rgba(242, 178, 60, .12);
  --warn-line: rgba(242, 178, 60, .3);
  --docs-header: rgba(25, 23, 21, .94);
  --docs-panel: #27231f;
  --docs-panel-hover: #302b25;
  --docs-pill: #35291b;
  --docs-active: #3b2d1a;
  --docs-gold-line: rgba(242, 178, 60, .3);
  --docs-heading-wash: rgba(242, 178, 60, .1);
  --docs-article-wash: rgba(242, 178, 60, .06);
  --docs-nav-hover: rgba(255, 255, 255, .06);
  --docs-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 16px 32px -18px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--fg-muted);
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.006em;
}

::selection { background: var(--primary-wash); color: var(--fg); }
a:hover { color: var(--primary); }
:focus-visible { outline-color: var(--primary); }

.site-header {
  background: var(--docs-header);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -26px rgba(60, 48, 28, .5);
  backdrop-filter: blur(16px) saturate(150%);
}
.site-header .brand img { content: url("/DevAuto-01.svg"); }
:root[data-theme="dark"] .site-header .brand img { content: url("/DevAuto-02.svg"); }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 68px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--docs-panel);
  box-shadow: var(--docs-shadow);
  color: var(--fg);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--docs-gold-line); background: var(--docs-panel-hover); }
.theme-toggle svg { display: block; width: 16px; height: 16px; flex: none; }
.theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
.hub-title {
  color: var(--fg);
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
}
.utility-nav a,
.primary-nav a {
  border-radius: 999px;
  transition: color .18s ease, background .18s ease;
}
.utility-nav a:hover,
.primary-nav a:hover { background: var(--docs-nav-hover); }
.primary-nav a[aria-current="page"] {
  border: 1px solid var(--docs-gold-line);
  background: var(--docs-pill);
  color: var(--primary);
}
.search-box input,
.copy-page,
.menu-button {
  border-color: var(--line-strong);
  border-radius: 10px;
  background: var(--docs-panel);
  box-shadow: var(--docs-shadow);
}
.search-box input:focus { outline: 2px solid var(--primary); outline-offset: 2px; }

.docs-sidebar,
.page-toc { background: var(--bg-soft); }
.docs-sidebar { border-right-color: var(--line); }
.sidebar-nav a { border-radius: 10px; }
.sidebar-nav a:hover { background: var(--docs-panel); }
.sidebar-nav a.active,
.sidebar-nav a[aria-current="page"] {
  background: var(--docs-active);
  box-shadow: inset 3px 0 0 var(--primary);
  color: var(--primary);
}
.nav-group-title { color: var(--fg-faint); }

.article {
  background: radial-gradient(ellipse 75% 380px at 50% 0%, var(--docs-article-wash), transparent 75%);
}
.article-header {
  margin-bottom: 36px;
  padding: 28px clamp(22px, 3vw, 34px) 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: radial-gradient(ellipse 80% 100% at 70% 0%, var(--docs-heading-wash), transparent 75%), var(--docs-panel);
  box-shadow: var(--docs-shadow);
}
.article h1,
.article h2,
.article h3,
.article h4,
.toc h2 {
  color: var(--fg);
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.032em;
}
.article h1 { font-weight: 700; }
.article h2 { font-weight: 700; }
.article .lede { color: var(--fg-muted); }
.breadcrumbs a:hover,
.toc a:hover,
.toc a.active { color: var(--primary); }
.section-kicker,
.step-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 11px;
  border: 1px solid var(--docs-gold-line);
  border-radius: 999px;
  background: var(--docs-pill);
  color: var(--primary);
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
}
.section-kicker::before,
.step-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--primary-bright);
}
code,
.path,
.badge,
.search-box kbd { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.feature-card,
.workflow li,
.download-btn,
.card,
.checklist-preview,
.inline-links a {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--docs-panel);
  box-shadow: var(--docs-shadow);
}
.feature-card:hover,
.download-btn:hover,
.inline-links a:hover { border-color: var(--docs-gold-line); background: var(--docs-panel-hover); }
.callout,
.callout.info {
  border-color: var(--docs-gold-line);
  border-left: 3px solid var(--primary-bright);
  border-radius: var(--radius);
  background: var(--docs-pill);
}
.callout.danger { border-color: var(--danger-line); border-left-color: var(--danger); background: var(--danger-bg); }
.callout.success { border-color: var(--ok-line); border-left-color: var(--ok); background: var(--ok-bg); }
.shot > img,
.shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--docs-shadow);
}
.shot { min-width: 0; }
.shot-row { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46rem) {
  .shot-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.table-wrap,
.scroller { border-color: var(--line); border-radius: var(--radius); background: var(--docs-panel); }
.docs-footer { border-top-color: var(--line); background: var(--bg-soft); }

@media (max-width: 760px) {
  .article-header { padding: 24px 20px; border-radius: 20px; }
  .docs-sidebar { background: var(--bg-soft); }
  .header-actions { gap: 7px; }
  .theme-toggle { min-width: 36px; width: 36px; padding: 0; }
  .theme-toggle-text { display: none; }
}

@media print {
  .article, .article-header { background: none; box-shadow: none; }
}