/* ButterStack design-system bridge for the Just-the-Docs site.
 *
 * The docs site's color scheme (_sass/color_schemes/butterstack-dark.scss)
 * is actually a hardcoded light theme. This file overrides the compiled
 * CSS at runtime using --bs-* tokens so docs respects the same theme
 * toggle as the Rails app and the blog.
 *
 * Loaded after custom.css (last in head_custom.html), so these
 * declarations win the cascade without !important. */

:root {
  --bs-brand-purple:        oklch(48% 0.22 295);
  --bs-brand-purple-soft:   oklch(95% 0.04 295);
  --bs-brand-purple-strong: oklch(38% 0.22 295);
  --bs-brand-yellow:        oklch(85% 0.18 95);

  /* Docs defaults to LIGHT (matches the existing visual baseline). */
  --bs-bg-app:        oklch(98% 0.002 250);
  --bs-bg-panel:      oklch(100% 0.000 250);
  --bs-bg-panel-2:    oklch(96% 0.003 250);
  --bs-bg-row-hover:  oklch(94% 0.004 250);
  --bs-bg-input:      oklch(96% 0.003 250);
  --bs-line:          oklch(88% 0.005 250);
  --bs-line-strong:   oklch(78% 0.008 250);
  --bs-fg:            oklch(12% 0.012 250);
  --bs-fg-soft:       oklch(25% 0.015 250);
  --bs-fg-mute:       oklch(45% 0.018 250);
  --bs-fg-faint:      oklch(65% 0.012 250);
  --bs-accent:        oklch(55% 0.15 200);
  --bs-accent-soft:   oklch(55% 0.15 200 / 0.08);
}

[data-theme="dark"] {
  --bs-bg-app:        oklch(15% 0.012 250);
  --bs-bg-panel:      oklch(19% 0.014 250);
  --bs-bg-panel-2:    oklch(22% 0.015 250);
  --bs-bg-row-hover:  oklch(24% 0.016 250);
  --bs-bg-input:      oklch(22% 0.014 250);
  --bs-line:          oklch(28% 0.018 250);
  --bs-line-strong:   oklch(34% 0.020 250);
  --bs-fg:            oklch(96% 0.005 250);
  --bs-fg-soft:       oklch(80% 0.012 250);
  --bs-fg-mute:       oklch(62% 0.014 250);
  --bs-fg-faint:      oklch(48% 0.014 250);
  --bs-accent:        oklch(78% 0.13 200);
  --bs-accent-soft:   oklch(78% 0.13 200 / 0.14);
}

/* ---------------------------------------------------------------- */
/* Surfaces                                                         */
/* ---------------------------------------------------------------- */

html,
body {
  background: var(--bs-bg-app);
  color: var(--bs-fg);
}

/* Just-the-Docs main + side regions */
.side-bar,
.main { background: var(--bs-bg-app); }
.main-content,
.main-content-wrap { background: var(--bs-bg-app); color: var(--bs-fg); }

.side-bar { border-right: 1px solid var(--bs-line); }

/* Headings */
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 { color: var(--bs-fg); }

.main-content p,
.main-content li,
.main-content blockquote { color: var(--bs-fg-soft); }

.main-content a,
.main-content a:visited { color: var(--bs-brand-purple); }
.main-content a:hover { color: var(--bs-brand-purple-strong); }

/* ---------------------------------------------------------------- */
/* Top nav                                                          */
/* ---------------------------------------------------------------- */

.top-nav {
  background: var(--bs-bg-app);
  border-bottom: 1px solid var(--bs-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.top-nav-logo,
.top-nav-logo-link { color: var(--bs-fg); }
.top-nav-logo-link:hover { color: var(--bs-brand-purple); }
.top-nav-link { color: var(--bs-fg-mute); }
.top-nav-link:hover { color: var(--bs-fg); }
.top-nav-cta {
  background: var(--bs-brand-purple);
  color: #fff;
}
.top-nav-cta:hover {
  background: var(--bs-brand-purple-strong);
  color: #fff;
}

.search-trigger {
  background: var(--bs-bg-panel-2);
  border-color: var(--bs-line);
  color: var(--bs-fg-mute);
}
.search-trigger:hover { border-color: var(--bs-brand-purple); }
.search-trigger kbd {
  background: var(--bs-bg-panel);
  border-color: var(--bs-line);
  color: var(--bs-fg-mute);
}

.mobile-menu-toggle { color: var(--bs-fg); }

/* ---------------------------------------------------------------- */
/* Sidebar nav                                                      */
/* ---------------------------------------------------------------- */

.nav-list .nav-list-item .nav-list-link { color: var(--bs-fg-soft); }
.nav-list .nav-list-item .nav-list-link:hover { color: var(--bs-fg); background: var(--bs-bg-row-hover); }
.nav-list .nav-list-item .nav-list-link.active {
  color: var(--bs-brand-purple);
  background: oklch(48% 0.22 295 / 0.08);
}
.nav-category { color: var(--bs-fg-faint); }

/* ---------------------------------------------------------------- */
/* Tables                                                           */
/* ---------------------------------------------------------------- */

.main-content table { background: var(--bs-bg-app); border: 1px solid var(--bs-line); }
.main-content thead {
  background: var(--bs-bg-panel-2);
  color: var(--bs-fg);
}
.main-content tbody tr { border-top: 1px solid var(--bs-line); }
.main-content tbody tr:nth-child(odd) { background: var(--bs-bg-row-hover); }
.main-content th,
.main-content td { color: var(--bs-fg-soft); border-color: var(--bs-line); }

/* ---------------------------------------------------------------- */
/* Code blocks                                                      */
/* ---------------------------------------------------------------- */

.main-content code,
.main-content pre {
  background: var(--bs-bg-panel-2);
  color: var(--bs-fg);
  border: 1px solid var(--bs-line);
}
.main-content pre code { border: 0; }

/* Inline code inside paragraphs */
.main-content p code,
.main-content li code {
  background: var(--bs-bg-panel-2);
  color: var(--bs-brand-purple);
  border: 0;
}

/* ---------------------------------------------------------------- */
/* Search modal                                                     */
/* ---------------------------------------------------------------- */

.search-modal {
  background: var(--bs-bg-panel);
  border: 1px solid var(--bs-line);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
.search-modal-input-wrap { border-bottom: 1px solid var(--bs-line); }
.search-modal-input { color: var(--bs-fg); }
.search-modal-input::placeholder { color: var(--bs-fg-mute); }
.search-modal-result { color: var(--bs-fg-soft); }
.search-modal-result:hover,
.search-modal-result.focused { background: oklch(48% 0.22 295 / 0.10); }
.search-modal-result .result-title { color: var(--bs-fg); }
.search-modal-result .result-preview { color: var(--bs-fg-mute); }
.search-modal-empty { color: var(--bs-fg-mute); }

/* ---------------------------------------------------------------- */
/* Theme-toggle button (mirror of the marketing/blog one)           */
/* ---------------------------------------------------------------- */

.bs-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--bs-line);
  background: var(--bs-bg-panel-2);
  color: var(--bs-fg-mute);
  cursor: pointer;
  margin: 0 0.25rem;
}
.bs-theme-toggle:hover { color: var(--bs-fg); border-color: var(--bs-fg-mute); }
.bs-theme-toggle .bs-theme-toggle__sun { display: none; }
.bs-theme-toggle .bs-theme-toggle__moon { display: inline-block; }
[data-theme="dark"] .bs-theme-toggle .bs-theme-toggle__sun { display: inline-block; }
[data-theme="dark"] .bs-theme-toggle .bs-theme-toggle__moon { display: none; }

/* ---------------------------------------------------------------- */
/* Just-the-Docs buttons + labels                                   */
/* ---------------------------------------------------------------- */

.btn,
.btn-outline {
  background: var(--bs-bg-panel-2);
  color: var(--bs-fg);
  border: 1px solid var(--bs-line);
}
.btn:hover,
.btn-outline:hover { color: var(--bs-fg); border-color: var(--bs-fg-mute); }
.btn-primary,
.btn-purple {
  background: var(--bs-brand-purple);
  color: #fff;
  border-color: var(--bs-brand-purple);
}
.btn-primary:hover,
.btn-purple:hover {
  background: var(--bs-brand-purple-strong);
  border-color: var(--bs-brand-purple-strong);
  color: #fff;
}

.label-purple { background: oklch(48% 0.22 295 / 0.18); color: var(--bs-brand-purple); }
.label-blue   { background: oklch(72% 0.13 240 / 0.18); color: oklch(72% 0.13 240); }
.label-green  { background: oklch(72% 0.16 150 / 0.18); color: oklch(72% 0.16 150); }
.label-yellow { background: oklch(80% 0.15 85 / 0.18);  color: oklch(80% 0.15 85);  }
.label-red    { background: oklch(68% 0.20 25 / 0.18);  color: oklch(68% 0.20 25);  }

.note,
.warning {
  background: var(--bs-bg-panel-2);
  border-left: 4px solid var(--bs-accent);
  color: var(--bs-fg);
}
.warning { border-left-color: var(--bs-brand-yellow); }

/* JtD's "fs-9" hero heading sometimes inherits a hard color */
.main-content .fs-9,
.main-content .fs-6 { color: var(--bs-fg); }

/* Hr + footer */
.main-content hr { border-color: var(--bs-line); }
.site-footer { color: var(--bs-fg-mute); border-top: 1px solid var(--bs-line); }

/* ---------------------------------------------------------------- */
/* Feedback + copy buttons                                          */
/* ---------------------------------------------------------------- */

.feedback-buttons button,
.copy-button {
  background: var(--bs-bg-panel-2);
  border: 1px solid var(--bs-line);
  color: var(--bs-fg-mute);
}
.feedback-buttons button:hover,
.copy-button:hover { color: var(--bs-fg); border-color: var(--bs-fg-mute); }