/* Farsight Scalar theme — overrides Scalar's CSS variables to match the
   Joshua/Farsight Dashboard at /farsight. Token values mirror static/farsight/
   farsight.css `:root` (--r2-*). When Lane 8 publishes /farsight/tokens.css
   the values here become a fallback layer; Scalar still reads the --scalar-*
   names below. */

@import url("/farsight/tokens.css") screen;

:root {
  --ff-bg: #0a0e1a;
  --ff-bg-secondary: #111827;
  --ff-surface: rgba(17, 24, 39, 0.78);
  --ff-surface-hover: rgba(24, 34, 56, 0.88);
  --ff-sidebar: rgba(10, 14, 26, 0.95);
  --ff-glass: rgba(255, 255, 255, 0.03);
  --ff-input: rgba(255, 255, 255, 0.05);

  --ff-border: rgba(255, 255, 255, 0.06);
  --ff-border-medium: rgba(255, 255, 255, 0.1);
  --ff-border-strong: rgba(255, 255, 255, 0.14);

  --ff-text: #f1f5f9;
  --ff-text-secondary: #94a3b8;
  --ff-text-muted: #64748b;

  --ff-accent: #2dd4bf;
  --ff-accent-hover: #5eead4;
  --ff-accent-dim: rgba(45, 212, 191, 0.15);
  --ff-cyan: #22d3ee;
  --ff-blue: #3b82f6;
  --ff-violet: #8b5cf6;
  --ff-brand-bar: linear-gradient(90deg, #2dd4bf, #3b82f6, #8b5cf6);

  --ff-online: #10b981;
  --ff-offline: #ef4444;
  --ff-degraded: #f59e0b;

  --ff-font-sans: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;

  --ff-radius-sm: 6px;
  --ff-radius-md: 10px;
  --ff-radius-lg: 14px;

  --ff-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
}

html,
body,
#app {
  height: 100%;
  margin: 0;
}

body.ff-scalar {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(45, 212, 191, 0.05) 0%, transparent 58%),
    radial-gradient(ellipse at 86% 12%, rgba(139, 92, 246, 0.035) 0%, transparent 52%),
    radial-gradient(ellipse at 80% 100%, rgba(59, 130, 246, 0.04) 0%, transparent 60%),
    var(--ff-bg);
  color: var(--ff-text);
  font-family: var(--ff-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

/* Top brand bar — same teal→blue→violet gradient as the dashboard. */
.ff-brand-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 3px;
  background: var(--ff-brand-bar);
  flex: 0 0 auto;
}

/* Header strip above the Scalar viewer. */
.ff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 28px;
  background: var(--ff-sidebar);
  border-bottom: 1px solid var(--ff-border);
  backdrop-filter: blur(8px);
  flex: 0 0 auto;
}

.ff-header__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ff-text);
  text-decoration: none;
  font-family: var(--ff-font-sans);
}

.ff-header__mark {
  width: 22px;
  height: 22px;
  color: var(--ff-accent);
  align-self: center;
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.4));
}

.ff-header__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ff-header__sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--ff-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ff-header__nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ff-header__nav a {
  color: var(--ff-text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--ff-radius-sm);
  transition: color 150ms ease, background 150ms ease;
}

.ff-header__nav a:hover {
  color: var(--ff-accent);
  background: var(--ff-accent-dim);
}

.ff-scalar-app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Scalar CSS variable overrides — applied on top of the `moon` base theme so
   any names we miss inherit something sensible. Scoped through every data-theme
   variant Scalar emits (dark/light) so our values win regardless of which mode
   Scalar bootstraps into. */
.scalar-app,
.scalar-api-reference,
[data-theme],
[data-theme="dark"],
[data-theme="light"],
.dark-mode,
.light-mode,
:root {
  --scalar-font: var(--ff-font-sans);
  --scalar-font-code: var(--ff-font-mono);
  --scalar-radius: var(--ff-radius-sm);
  --scalar-radius-lg: var(--ff-radius-md);
  --scalar-radius-xl: var(--ff-radius-lg);

  --scalar-background-1: var(--ff-bg);
  --scalar-background-2: var(--ff-bg-secondary);
  --scalar-background-3: rgba(255, 255, 255, 0.04);
  --scalar-background-accent: var(--ff-accent-dim);

  --scalar-color-1: var(--ff-text);
  --scalar-color-2: var(--ff-text-secondary);
  --scalar-color-3: var(--ff-text-muted);
  --scalar-color-disabled: var(--ff-text-muted);
  --scalar-color-ghost: var(--ff-text-muted);

  --scalar-color-accent: var(--ff-accent);
  --scalar-background-btn-primary: var(--ff-accent);
  --scalar-color-btn-primary: #04221c;

  --scalar-color-green: var(--ff-online);
  --scalar-color-red: var(--ff-offline);
  --scalar-color-yellow: var(--ff-degraded);
  --scalar-color-blue: var(--ff-blue);
  --scalar-color-orange: var(--ff-degraded);
  --scalar-color-purple: var(--ff-violet);

  --scalar-border-color: var(--ff-border);

  --scalar-sidebar-background-1: var(--ff-sidebar);
  --scalar-sidebar-item-hover-color: currentColor;
  --scalar-sidebar-item-hover-background: var(--ff-surface-hover);
  --scalar-sidebar-item-active-background: var(--ff-accent-dim);
  --scalar-sidebar-color-1: var(--ff-text);
  --scalar-sidebar-color-2: var(--ff-text-secondary);
  --scalar-sidebar-color-active: var(--ff-accent);
  --scalar-sidebar-search-background: var(--ff-input);
  --scalar-sidebar-search-color: var(--ff-text);
  --scalar-sidebar-search-border-color: var(--ff-border);
  --scalar-sidebar-border-color: var(--ff-border);

  --scalar-button-1: var(--ff-accent);
  --scalar-button-1-color: #04221c;
  --scalar-button-1-hover: var(--ff-accent-hover);

  --scalar-code-language-color-supersede: var(--ff-text-secondary);
  --scalar-shadow-1: var(--ff-shadow-card);
  --scalar-shadow-2: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* Dark mode lock — Scalar's `moon` theme can flip light/dark on system
   preference; we want consistent dark like the dashboard. */
.scalar-app,
.scalar-api-reference {
  color-scheme: dark;
}

/* Selected-tag and method pill polish — softer rounding, dashboard-matched. */
.scalar-api-reference .endpoint .method,
.scalar-api-reference .request-method,
.scalar-api-reference .http-method {
  border-radius: var(--ff-radius-sm);
  font-family: var(--ff-font-mono);
  letter-spacing: 0.04em;
}

/* Focus ring matches dashboard. */
.scalar-api-reference :focus-visible,
.ff-header :focus-visible {
  outline: 2px solid var(--ff-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ff-accent-dim);
}

a {
  color: var(--ff-accent);
}