/* ==========================================================================
   DOCS ENGINE — GLOBAL THEME
   Single source of truth for colors across all DocsEngine pages,
   including the Scalar API reference.
   ========================================================================== */

/* --- Theme Variables ---------------------------------------------------- */

:root {
  /* Backgrounds */
  --docs-bg-base: #ffffff;
  --docs-bg-header: #ffffff;
  --docs-bg-surface: #f9fafb;
  --docs-bg-surface-hover: #f3f4f6;
  --docs-bg-inset: #f1f5f9;
  --docs-bg-code: #e5e7eb;

  /* Text */
  --docs-text-heading: #111827;
  --docs-text-body: #374151;
  --docs-text-muted: #6b7280;
  --docs-text-faint: #9ca3af;
  --docs-text-code: #1D4ED8;

  /* Borders */
  --docs-border: #e5e7eb;
  --docs-border-hover: #d1d5db;

  /* Accent (brand blue) */
  --docs-accent: #1D4ED8;
  --docs-accent-hover: #1e40af;
  --docs-accent-subtle: rgba(29, 78, 216, 0.06);

  /* Version toggle */
  --docs-toggle-bg: rgba(0, 0, 0, 0.06);
  --docs-toggle-hover-bg: rgba(0, 0, 0, 0.1);
  --docs-toggle-text: #6b7280;
  --docs-toggle-text-hover: #374151;

  /* Status badges */
  --docs-badge-warn-bg: #fef3c7;
  --docs-badge-warn-text: #e88a05;
  --docs-badge-error-bg: #fee2e2;
  --docs-badge-error-text: #b91c1c;

  /* Semantic color system compatibility */
  --color-primary-500: 29 78 216;
  --color-primary-600: 37 99 235;

  /* Scalar API reference */
  --scalar-color-1: var(--docs-text-heading);
  --scalar-color-2: rgba(0, 0, 0, 0.62);
  --scalar-color-3: rgba(0, 0, 0, 0.44);
  --scalar-color-accent: var(--docs-accent);
  --scalar-background-1: var(--docs-bg-base);
  --scalar-background-2: var(--docs-bg-surface);
  --scalar-background-3: var(--docs-bg-surface-hover);
  --scalar-background-accent: var(--docs-accent-subtle);
  --scalar-border-color: var(--docs-border);
}

.dark {
  --docs-bg-base: #111827;
  --docs-bg-header: #030712;
  --docs-bg-surface: #1a2332;
  --docs-bg-surface-hover: #1f2937;
  --docs-bg-inset: #0f172a;
  --docs-bg-code: #1f2937;

  --docs-text-heading: #ffffff;
  --docs-text-body: #d1d5db;
  --docs-text-muted: #9ca3af;
  --docs-text-faint: #6b7280;
  --docs-text-code: #7dd3fc;

  --docs-border: #1f2937;
  --docs-border-hover: #374151;

  --docs-accent: #60a5fa;
  --docs-accent-hover: #93c5fd;
  --docs-accent-subtle: rgba(96, 165, 250, 0.08);

  --docs-toggle-bg: rgba(255, 255, 255, 0.1);
  --docs-toggle-hover-bg: rgba(255, 255, 255, 0.15);
  --docs-toggle-text: #9ca3af;
  --docs-toggle-text-hover: #d1d5db;

  --docs-badge-warn-bg: rgba(120, 53, 15, 0.5);
  --docs-badge-warn-text: #facc15;
  --docs-badge-error-bg: rgba(127, 29, 29, 0.5);
  --docs-badge-error-text: #f87171;

  /* Scalar API reference */
  --scalar-color-1: rgba(255, 255, 255, 0.85);
  --scalar-color-2: rgba(255, 255, 255, 0.55);
  --scalar-color-3: rgba(255, 255, 255, 0.35);
  --scalar-color-accent: var(--docs-accent);
  --scalar-background-1: #111827;
  --scalar-background-2: #1a2332;
  --scalar-background-3: #1f2937;
  --scalar-background-accent: var(--docs-accent-subtle);
  --scalar-border-color: var(--docs-border);
}

/* --- Scalar Class Overrides --------------------------------------------- */
/* Scalar defines its own --scalar-* vars on .light-mode/.dark-mode containers.
   We must re-declare at the same specificity to override Scalar's defaults.
   The :root/.dark definitions above serve as fallback for initial render. */

.light-mode {
  --scalar-color-1: var(--docs-text-heading);
  --scalar-color-2: rgba(0, 0, 0, 0.62);
  --scalar-color-3: rgba(0, 0, 0, 0.44);
  --scalar-color-accent: var(--docs-accent);
  --scalar-background-1: var(--docs-bg-base);
  --scalar-background-2: var(--docs-bg-surface);
  --scalar-background-3: var(--docs-bg-surface-hover);
  --scalar-background-accent: var(--docs-accent-subtle);
  --scalar-border-color: var(--docs-border);
}

.dark-mode {
  --scalar-color-1: rgba(255, 255, 255, 0.85);
  --scalar-color-2: rgba(255, 255, 255, 0.55);
  --scalar-color-3: rgba(255, 255, 255, 0.35);
  --scalar-color-accent: var(--docs-accent);
  --scalar-background-1: var(--docs-bg-base);
  --scalar-background-2: var(--docs-bg-surface);
  --scalar-background-3: var(--docs-bg-surface-hover);
  --scalar-background-accent: var(--docs-accent-subtle);
  --scalar-border-color: var(--docs-border);
}

/* --- Scalar Containment -------------------------------------------------- */
/* Scalar's overlays (API client, search) use position:fixed and would
   escape above our header. A zero transform on the scrollable main area
   creates a new containing block for fixed-positioned descendants,
   constraining them within the content region below the header. */
.docs-body > .flex > main {
  transform: translateZ(0);
}

/* --- Semantic Component Classes ----------------------------------------- */

.docs-body {
  background-color: var(--docs-bg-base);
  color: var(--docs-text-body);
}

.docs-header {
  background-color: var(--docs-bg-header);
  border-bottom: 1px solid var(--docs-border);
}

.docs-sidebar {
  background-color: var(--docs-bg-base);
  border-right: 1px solid var(--docs-border);
}

.docs-heading {
  color: var(--docs-text-heading);
}

.docs-text-muted {
  color: var(--docs-text-muted);
}

.docs-text-faint {
  color: var(--docs-text-faint);
}

/* Navigation links (header) */
.docs-nav-link {
  color: var(--docs-text-muted);
  transition: color 0.15s;
}
.docs-nav-link:hover { color: var(--docs-text-heading); }
.docs-nav-link.active {
  color: var(--docs-text-heading);
  font-weight: 500;
}

/* Logo */
.docs-logo {
  color: var(--docs-text-heading);
  transition: color 0.15s;
}
.docs-logo:hover { color: var(--docs-text-muted); }

/* Theme toggle — icons are shown/hidden by JS based on current mode */
.docs-theme-toggle {
  color: var(--docs-text-muted);
  cursor: pointer;
}
.docs-theme-toggle:hover { color: var(--docs-text-heading); }
.docs-theme-icon-sun,
.docs-theme-icon-moon { display: none; }

/* Version toggle */
.docs-version-toggle {
  background-color: var(--docs-toggle-bg);
  transition: background-color 0.15s;
}
.docs-version-toggle:hover { background-color: var(--docs-toggle-hover-bg); }

.docs-version-pill {
  background-color: var(--docs-accent);
}

.docs-version-label {
  color: var(--docs-toggle-text);
}
.docs-version-label.active { color: #ffffff; }
.group:hover .docs-version-label:not(.active) { color: var(--docs-toggle-text-hover); }

/* Sidebar links */
.docs-sidebar-label {
  color: var(--docs-text-faint);
}

.docs-sidebar-link {
  color: var(--docs-text-muted);
  transition: color 0.15s, background-color 0.15s;
}
.docs-sidebar-link:hover {
  color: var(--docs-text-heading);
  background-color: var(--docs-bg-surface-hover);
}
.docs-sidebar-link.active {
  color: var(--docs-text-heading);
  background-color: var(--docs-bg-surface-hover);
  font-weight: 500;
}

/* Cards (guides index, problems index) */
.docs-card {
  background-color: var(--docs-bg-surface);
  border: 1px solid var(--docs-border);
  transition: background-color 0.15s, border-color 0.15s;
}
.docs-card:hover {
  background-color: var(--docs-bg-surface-hover);
  border-color: var(--docs-border-hover);
}

.docs-card-title {
  color: var(--docs-text-heading);
  transition: color 0.15s;
}
.group:hover .docs-card-title { color: var(--docs-accent); }

.docs-card-desc {
  color: var(--docs-text-muted);
}

/* Back links ("← All Guides", etc.) */
.docs-back-link {
  color: var(--docs-text-faint);
  transition: color 0.15s;
}
.docs-back-link:hover { color: var(--docs-text-body); }

/* Inset boxes (URI display, example responses) */
.docs-inset-box {
  background-color: var(--docs-bg-surface);
  border: 1px solid var(--docs-border);
}

/* Inline code (outside markdown) */
.docs-code-inline {
  color: var(--docs-text-code);
  background-color: var(--docs-bg-code);
}

/* Accent text (links, URIs) */
.docs-accent-text {
  color: var(--docs-accent);
}

/* Status badges */
.docs-badge-warn {
  background-color: var(--docs-badge-warn-bg);
  color: var(--docs-badge-warn-text);
}

.docs-badge-error {
  background-color: var(--docs-badge-error-bg);
  color: var(--docs-badge-error-text);
}

/* Status code in sidebar */
.docs-status-warn { color: var(--docs-badge-warn-text); }
.docs-status-error { color: var(--docs-badge-error-text); }

/* --- Table of Contents -------------------------------------------------- */

.toc ul { list-style: none; padding: 0; margin: 0; }
.toc > ul > li { margin-bottom: 0.25rem; }
.toc a {
  color: var(--docs-text-muted);
  text-decoration: none;
  display: block;
  padding: 0.125rem 0;
  transition: color 0.15s;
}
.toc a:hover { color: var(--docs-accent); }
.toc ul ul { padding-left: 0.75rem; margin-top: 0.25rem; }
.toc ul ul a { font-size: 0.8125rem; color: var(--docs-text-faint); }
.toc ul ul a:hover { color: var(--docs-text-muted); }

/* --- Markdown Content --------------------------------------------------- */

.markdown-content h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; margin-top: 2rem; }
.markdown-content h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.75rem; margin-top: 1.5rem; border-bottom: 1px solid var(--docs-border); padding-bottom: 0.5rem; }
.markdown-content h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; margin-top: 1.25rem; }
.markdown-content p { margin-bottom: 0.75rem; line-height: 1.625; }
.markdown-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.markdown-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.markdown-content li { margin-bottom: 0.25rem; }
.markdown-content code { background: var(--docs-bg-code); color: var(--docs-text-code); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; }
.markdown-content pre { background: var(--docs-bg-inset); border: 1px solid var(--docs-border); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1rem; }
.markdown-content pre code { background: none; color: var(--docs-text-body); padding: 0; font-size: 0.8125rem; line-height: 1.625; }
.markdown-content a { color: var(--docs-accent); text-decoration: none; }
.markdown-content a:hover { color: var(--docs-accent-hover); text-decoration: underline; }
.markdown-content blockquote { border-left: 4px solid var(--docs-accent); padding-left: 1rem; color: var(--docs-text-muted); font-style: italic; margin-bottom: 0.75rem; }
.markdown-content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.markdown-content th, .markdown-content td { border: 1px solid var(--docs-border); padding: 0.5rem 0.75rem; text-align: left; }
.markdown-content th { background: var(--docs-bg-code); font-weight: 600; }