@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- brand palette (single source of truth) --- */
  --brand-purple: #4c10dd;
  --brand-lavender: #d99dff;
  --brand-lime: #cbed69;

  /* --- scalar theme --- */
  --scalar-color-accent: var(--brand-purple);
  --scalar-font: "Inter", sans-serif;
  --scalar-font-code: "SF Mono", "Fira Code", "Consolas", monospace;
  --scalar-color-1: #1f2933;
  --scalar-color-2: #4a5568;
  --scalar-color-3: #718096;
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f8f8f8;
  --scalar-background-3: #f0f0f0;
  --scalar-border-color: #e2e2e2;
}

/* --- sidebar is always dark, independent of the light/dark theme toggle ---
     Scoped to .light-mode/.dark-mode as well because Scalar's own theme blocks
     use those selectors and would out-specificity a plain :root override. --- */
:root,
.light-mode,
.dark-mode {
  --scalar-sidebar-background-1: #000000;
  --scalar-sidebar-color-1: #ffffff;
  --scalar-sidebar-color-2: #cccccc;
  /* active item keeps Scalar's default dark-sidebar style (pinned for both modes,
     since the light palette's default would be unreadable on the black sidebar) */
  --scalar-sidebar-color-active: #ffffff;
  --scalar-sidebar-item-active-background: #111111;
  --scalar-sidebar-item-hover-background: var(--brand-lavender);
  --scalar-sidebar-item-hover-color: #000000;
  --scalar-sidebar-search-background: #111111;
  --scalar-sidebar-search-border-color: #333333;
  --scalar-sidebar-search-color: #cccccc;
}

/* --- headings and body font weights --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}
body,
p,
li,
td,
th {
  font-weight: 400;
}

/* --- link colors --- */
a:not(.uptempo-logo) {
  color: var(--brand-purple) !important;
}

/* --- sidebar button states (explicit for specificity over Tailwind);
     the dark-mode toggle switch is excluded — a hover fill looks broken on it --- */
aside.t-doc__sidebar button:not([aria-selected="true"]):not([class*="group/toggle"]):hover {
  background-color: var(--brand-lavender) !important;
  color: #000000 !important;
}
.scalar-sidebar-indent-border {
  background-color: #444444 !important;
}

/* --- dark mode: text and border variables (safe on any dark-mode element);
     sidebar variables live in :root since the sidebar is always dark --- */
.dark-mode {
  --scalar-color-1: #ffffff;
  --scalar-color-2: #cccccc;
  --scalar-color-3: #999999;
  --scalar-border-color: rgba(255, 255, 255, 0.1);
}

/* --- dark mode: background overrides scoped to page-level containers only ---
     Scalar applies dark-mode to individual cards (request-card, scalar-card) even in
     light mode; using :not() here prevents those cards from turning black on a light page.
     In true dark mode the page-level ancestor has dark-mode and these variables cascade
     down to all children, including the cards. --- */
.dark-mode:not(.scalar-card):not(.request-card):not(.scalar-card-content):not(.scalar-code-block) {
  --scalar-background-1: #000000;
  --scalar-background-2: #111111;
  --scalar-background-3: #1a1a1a;
}

/* --- request / example cards ---
     Scalar forces .dark-mode onto these cards regardless of theme, so on a light
     page they render black. Force their background variables to the light palette;
     the rule below (keyed on a .dark-mode *ancestor*, i.e. the real page root) puts
     them back to dark when the page is genuinely in dark mode. --- */
.scalar-card.dark-mode,
.request-card.dark-mode,
.scalar-card.dark-mode .scalar-card-content,
.request-card.dark-mode .scalar-card-content,
.scalar-card.dark-mode .scalar-code-block,
.request-card.dark-mode .scalar-code-block {
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f8f8f8;
  --scalar-background-3: #f0f0f0;
  --scalar-color-1: #1f2933;
  --scalar-color-2: #4a5568;
  --scalar-color-3: #718096;
  --scalar-border-color: #e2e2e2;
}

.dark-mode .scalar-card.dark-mode,
.dark-mode .request-card.dark-mode,
.dark-mode .scalar-card.dark-mode .scalar-card-content,
.dark-mode .request-card.dark-mode .scalar-card-content,
.dark-mode .scalar-card.dark-mode .scalar-code-block,
.dark-mode .request-card.dark-mode .scalar-code-block {
  --scalar-background-1: #000000;
  --scalar-background-2: #111111;
  --scalar-background-3: #1a1a1a;
  --scalar-color-1: #ffffff;
  --scalar-color-2: #cccccc;
  --scalar-color-3: #999999;
  --scalar-border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode a:not(.uptempo-logo) {
  color: var(--brand-lime) !important;
}

/* --- sidebar is always black, regardless of theme --- */
aside.t-doc__sidebar {
  background-color: #000000 !important;
}

/* --- sidebar logo (injected via JS; this rule just reserves space) --- */
.uptempo-logo {
  display: block !important;
  width: 130px;
  height: 32px;
  object-fit: contain;
  margin: 18px 16px 10px;
  flex-shrink: 0;
}

/* --- hide top toolbar (Developer Tools / Configure / Share / Deploy) --- */
.api-reference-toolbar {
  display: none !important;
}

/* --- hide footer grid area and Scalar branding link --- */
.references-footer {
  display: none !important;
}
.scalar-version-number {
  display: none !important;
}

/* --- hide Ask AI button --- */
button.bg-sidebar-b-search.whitespace-nowrap {
  display: none !important;
}

/* --- hide MCP menu, Powered by Scalar link, and Ask AI Agent button --- */
.scalar-mcp-layer {
  display: none !important;
}
a[href*="scalar.com"] {
  display: none !important;
}
.agent-button-container {
  display: none !important;
}

/* --- Early Access tag --- */
.early-access-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #000000;
  background: var(--brand-lime);
  border: 1px solid var(--brand-lime);
  margin-right: 8px;
  font-family: var(--scalar-font);
  vertical-align: middle;
  flex-shrink: 0;
  text-decoration: none !important;
  position: relative;
  cursor: help;
}

/* --- Early Access hover tooltip explaining what the stage means ---
     Sidebar badges get a native title attribute instead (scalar-ui.js):
     an absolutely-positioned tooltip would be clipped by the sidebar's
     scroll container. --- */
.early-access-badge::after {
  content: "This resource is part of a feature currently in Early Access, and is restricted to a small set of specific customers. Reach out to Product to discuss enabling this for additional customers.";
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #1f2933;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  white-space: normal;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-in-out;
  pointer-events: none;
}
.early-access-badge::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 16px;
  border: 6px solid transparent;
  border-bottom-color: #1f2933;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-in-out;
  pointer-events: none;
}
.early-access-badge:hover::after,
.early-access-badge:hover::before {
  opacity: 1;
  visibility: visible;
}
aside.t-doc__sidebar .early-access-badge::after,
aside.t-doc__sidebar .early-access-badge::before {
  display: none;
}
