/**
 * Woltti theme for the Scalar API reference pages — token values mirror the V2
 * operator portal (WolttiWebV2/src/styles.scss) and the Docusaurus green scale
 * (src/css/custom.css), so the reference reads as part of the same product.
 * Scalar switches .light-mode / .dark-mode on the body; the topbar follows.
 */

/* Scalar declares --scalar-font: 'Avenir'; without this the family never loads and
   the page silently falls back to a system sans, unlike the rest of the portal.
   V2 ships a single weight and lets the browser synthesise bold — matched here. */
@font-face {
  font-family: 'Avenir';
  src: url('/fonts/avenir/AvenirNextLTPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Scalar theming ─────────────────────────────────────────── */

:root {
  --scalar-font: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --scalar-font-code: 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace;
  --scalar-radius: 8px;
  --scalar-radius-lg: 12px;
}

.light-mode {
  --scalar-color-1: #141414;            /* V2 --color-text-primary */
  --scalar-color-2: #4c4c4c;
  --scalar-color-3: #828282;            /* V2 --color-text-muted */
  --scalar-color-accent: #2d6027;       /* Woltti green */
  --scalar-background-1: #ffffff;       /* V2 --color-bg-card */
  --scalar-background-2: #f1f2f8;       /* V2 --color-bg-page / control */
  --scalar-background-3: #efefef;       /* V2 --color-bg-tag */
  --scalar-background-accent: rgba(45, 96, 39, 0.08);
  --scalar-border-color: #dfdfdf;       /* V2 --color-border-active */
}

.light-mode .sidebar {
  --scalar-sidebar-background-1: #ffffff;
  --scalar-sidebar-color-1: #141414;
  --scalar-sidebar-color-2: #828282;
  --scalar-sidebar-color-active: #2d6027;
  --scalar-sidebar-item-hover-background: #f1f2f8;
  --scalar-sidebar-item-active-background: #f1f2f8;
  --scalar-sidebar-border-color: #dfdfdf;
  --scalar-sidebar-search-background: #f1f2f8;
  --scalar-sidebar-search-border-color: #dfdfdf;
  --scalar-sidebar-search-color: #828282;
}

.dark-mode {
  --scalar-color-1: #e8e9ed;            /* V2 dark --color-text-primary */
  --scalar-color-2: #b6b8c2;
  --scalar-color-3: #868896;            /* V2 dark --color-text-muted */
  --scalar-color-accent: #a0cc90;       /* Woltti green, dark variant */
  --scalar-background-1: #1e1f26;       /* V2 dark --color-bg-card */
  --scalar-background-2: #14151a;       /* V2 dark --color-bg-page */
  --scalar-background-3: #282932;       /* V2 dark --color-bg-control */
  --scalar-background-accent: rgba(160, 204, 144, 0.14);
  --scalar-border-color: #32333d;       /* V2 dark --color-border-divider */
}

.dark-mode .sidebar {
  --scalar-sidebar-background-1: #1e1f26;
  --scalar-sidebar-color-1: #e8e9ed;
  --scalar-sidebar-color-2: #868896;
  --scalar-sidebar-color-active: #a0cc90;
  --scalar-sidebar-item-hover-background: #282932;
  --scalar-sidebar-item-active-background: #282932;
  --scalar-sidebar-border-color: #32333d;
  --scalar-sidebar-search-background: #282932;
  --scalar-sidebar-search-border-color: #32333d;
  --scalar-sidebar-search-color: #868896;
}

/* ── Woltti topbar (mirrors the V2 portal topbar) ───────────── */

html, body { margin: 0; padding: 0; }

.woltti-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 74px;              /* V2 --topbar-height, same as the Docusaurus navbar */
  padding: 0 20px;
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #ffffff;
  border-bottom: 1px solid #dfdfdf;
  position: sticky;
  top: 0;
  z-index: 100;
}

.dark-mode .woltti-topbar {
  background: #1e1f26;
  border-bottom-color: #32333d;
}

.woltti-topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #141414;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.dark-mode .woltti-topbar .brand { color: #e8e9ed; }

/* The Woltti mark is self-coloured (green ground, white bolt) and reads on both
   themes, so it is NOT inverted in dark mode the way the V2 wordmark is. */
.woltti-topbar .brand img { height: 24px; width: 24px; display: block; }

.woltti-topbar nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.woltti-topbar nav a {
  color: #828282;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}

.woltti-topbar nav a:hover {
  background: #f1f2f8;
  color: #141414;
}

.woltti-topbar nav a.active {
  background: #f1f2f8;
  color: #2d6027;
}

.dark-mode .woltti-topbar nav a { color: #868896; }
.dark-mode .woltti-topbar nav a:hover { background: #282932; color: #e8e9ed; }
.dark-mode .woltti-topbar nav a.active { background: #282932; color: #a0cc90; }

/* keep Scalar's own sticky header below the Woltti topbar */
.woltti-reference { min-height: calc(100vh - 60px); }