/*
 * Re-themes the Scalar API Reference (mounted with `theme: "none"`) to
 * follow the dashboard's own DaisyUI/Tailwind tokens from theme.css,
 * instead of one of Scalar's built-in color themes. Scalar reads its own
 * `--scalar-*` custom properties from the document root, so this just
 * maps them onto the tokens that already flip with the `[data-theme]`
 * attribute on <html> (see theme.css).
 */

:root {
  /* Undocumented but real/functioning (see Scalar's own "Custom Header"
     example) - keeps Scalar's internal sticky sidebar/toolbar below the
     app's own sticky navbar instead of underneath it. base.html/
     base_public.html navbar is min-h-14 (3.5rem) + 1px bottom border. */
  --scalar-custom-header-height: 3.625rem;
}

/* Scalar's CDN bundle injects its own <style> at runtime that defines the
   same --scalar-* variables directly on its `.light-mode`/`.dark-mode`
   container elements. A custom property set on a closer element always
   beats one inherited from <html>, so an html-level `[data-theme]` rule
   never reaches Scalar's subtree. These selectors (specificity 0,2,1)
   out-specify Scalar's injected `.dark-mode` (0,1,0) regardless of source
   order, and the mapped DaisyUI tokens are inherited from <html> and flip
   with `data-theme` - so the docs follow the app theme on first paint and
   on live toggle, whichever mode class Scalar itself picked. */
html[data-theme] .light-mode,
html[data-theme] .dark-mode,
html[data-theme] .scalar-api-reference,
html[data-theme] .scalar-app {
  --scalar-color-1: var(--color-base-content);
  --scalar-color-2: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  --scalar-color-3: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  --scalar-color-accent: var(--color-primary);

  --scalar-background-1: var(--color-base-100);
  --scalar-background-2: var(--color-base-200);
  --scalar-background-3: var(--color-base-300);
  --scalar-border-color: var(--color-base-300);

  --scalar-radius: var(--radius-field);
  --scalar-radius-lg: var(--radius-box);

  --scalar-sidebar-background-1: var(--color-base-100);
  --scalar-sidebar-color-1: var(--color-base-content);
  --scalar-sidebar-border-color: var(--color-base-300);
  --scalar-sidebar-item-hover-background: var(--color-base-200);
  --scalar-sidebar-color-active: var(--color-primary);

  --scalar-button-1: var(--color-primary);
  --scalar-button-1-color: var(--color-primary-content);
  --scalar-button-1-hover: var(--color-primary);

  --scalar-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#api-reference-host { min-height: 60vh; }