/* VeloShip's admin palette mapped onto Scalar. Scalar toggles .light-mode / .dark-mode on <body>
   and starts from the system preference, so the header follows the same classes. */
@font-face { font-family: "Inter"; src: url(/fonts/inter.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --vs-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --vs-mono: "SF Mono", SFMono-Regular, ui-monospace, "JetBrains Mono", Menlo, monospace;
  --vs-signal: #d4ff3a;
  --vs-header-h: 56px;

  --scalar-font: var(--vs-sans);
  --scalar-font-code: var(--vs-mono);
  --scalar-radius: 8px;
  --scalar-radius-lg: 12px;
  --scalar-radius-xl: 16px;
  --scalar-custom-header-height: var(--vs-header-h);
}

.light-mode {
  --vs-bg: #f1efe9;
  --vs-ink: #141413;
  --vs-muted: #78746b;
  --vs-line: rgb(20 20 19 / .1);

  --scalar-background-1: #fbfaf6;
  --scalar-background-2: #f1efe9;
  --scalar-background-3: #e8e5dd;
  --scalar-background-accent: rgb(196 240 30 / .22);
  --scalar-color-1: #141413;
  --scalar-color-2: #3b3a36;
  --scalar-color-3: #78746b;
  /* Lime is unreadable as text on a light background, so links use a deep olive of the same hue. */
  --scalar-color-accent: #4a6b00;
  --scalar-link-color: #4a6b00;
  --scalar-link-color-hover: #141413;
  --scalar-border-color: rgb(20 20 19 / .1);
  --scalar-button-1: #141413;
  --scalar-button-1-color: #f6f4ee;
  --scalar-button-1-hover: #2b2a27;
  --scalar-focus-color: #141413;
  --scalar-scrollbar-color: rgb(20 20 19 / .18);
  --scalar-scrollbar-color-active: rgb(20 20 19 / .32);
  --scalar-shadow-1: 0 1px 2px rgb(20 20 19 / .05), 0 8px 24px -12px rgb(20 20 19 / .12);
  --scalar-shadow-2: 0 24px 64px -16px rgb(20 20 19 / .3);

  --scalar-color-green: #1d7a45;
  --scalar-color-red: #c4320a;
  --scalar-color-yellow: #8a6a00;
  --scalar-color-orange: #a35f00;
  --scalar-color-blue: #22609e;
  --scalar-color-purple: #6b4fb5;

  --scalar-sidebar-background-1: #f1efe9;
  --scalar-sidebar-color-1: #141413;
  --scalar-sidebar-color-2: #3b3a36;
  --scalar-sidebar-border-color: rgb(20 20 19 / .08);
  --scalar-sidebar-item-hover-background: rgb(20 20 19 / .05);
  --scalar-sidebar-item-hover-color: #141413;
  --scalar-sidebar-item-active-background: #d4ff3a;
  --scalar-sidebar-color-active: #141413;
  --scalar-sidebar-search-background: #fbfaf6;
  --scalar-sidebar-search-border-color: rgb(20 20 19 / .12);
  --scalar-sidebar-search-color: #78746b;
}

.dark-mode {
  --vs-bg: #0d0d0c;
  --vs-ink: #f2f0ea;
  --vs-muted: #8b877d;
  --vs-line: rgb(255 255 255 / .08);

  --scalar-background-1: #0d0d0c;
  --scalar-background-2: #161614;
  --scalar-background-3: #1f1f1c;
  --scalar-background-accent: rgb(212 255 58 / .1);
  --scalar-color-1: #f2f0ea;
  --scalar-color-2: #cdc9bf;
  --scalar-color-3: #8b877d;
  --scalar-color-accent: #d4ff3a;
  --scalar-link-color: #d4ff3a;
  --scalar-link-color-hover: #f2f0ea;
  --scalar-border-color: rgb(255 255 255 / .08);
  --scalar-button-1: #d4ff3a;
  --scalar-button-1-color: #141413;
  --scalar-button-1-hover: #c3ee2a;
  --scalar-focus-color: #d4ff3a;
  --scalar-scrollbar-color: rgb(255 255 255 / .14);
  --scalar-scrollbar-color-active: rgb(255 255 255 / .28);
  --scalar-shadow-1: 0 1px 0 rgb(255 255 255 / .03) inset, 0 12px 32px -16px rgb(0 0 0 / .6);
  --scalar-shadow-2: 0 24px 64px -12px rgb(0 0 0 / .7);

  --scalar-color-green: #5fd08e;
  --scalar-color-red: #ff7a52;
  --scalar-color-yellow: #e6d24a;
  --scalar-color-orange: #ffb547;
  --scalar-color-blue: #7cb6f0;
  --scalar-color-purple: #b69cf5;

  --scalar-sidebar-background-1: #0d0d0c;
  --scalar-sidebar-color-1: #f2f0ea;
  --scalar-sidebar-color-2: #8b877d;
  --scalar-sidebar-border-color: rgb(255 255 255 / .07);
  --scalar-sidebar-item-hover-background: rgb(255 255 255 / .05);
  --scalar-sidebar-item-hover-color: #f2f0ea;
  --scalar-sidebar-item-active-background: rgb(212 255 58 / .12);
  --scalar-sidebar-color-active: #d4ff3a;
  --scalar-sidebar-search-background: #161614;
  --scalar-sidebar-search-border-color: rgb(255 255 255 / .1);
  --scalar-sidebar-search-color: #8b877d;
}

body { margin: 0; background: var(--vs-bg, #f1efe9); }
::selection { background: var(--vs-signal); color: #141413; }

.vs-header {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--vs-header-h); box-sizing: border-box; padding: 0 1.25rem;
  background: var(--vs-bg); border-bottom: 1px solid var(--vs-line);
  font-family: var(--vs-sans); color: var(--vs-ink);
}
.vs-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--vs-ink); text-decoration: none; font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; }
.vs-brand img { border-radius: 8px; }
.vs-brand em { font-style: normal; color: var(--vs-muted); margin-left: -.55rem; }
.vs-tag { margin-left: .15rem; padding: .12rem .5rem; border-radius: 999px; background: var(--vs-signal); color: #141413; font-size: .7rem; font-weight: 600; letter-spacing: .04em; }
.vs-header nav { display: flex; align-items: center; gap: .35rem; }
.vs-header nav a { white-space: nowrap; padding: .45rem .8rem; border-radius: 999px; color: var(--vs-muted); font-size: .88rem; font-weight: 500; text-decoration: none; transition: color .15s, background .15s; }
.vs-header nav a:hover { color: var(--vs-ink); background: var(--scalar-background-3); }
.vs-header nav a[aria-current="page"] { color: var(--vs-ink); box-shadow: 0 0 0 1px var(--vs-line) inset; }
@media (max-width: 560px) {
  .vs-header { padding: 0 1rem; gap: .5rem; }
  .vs-header nav { gap: .1rem; }
  .vs-header nav a { padding: .45rem .6rem; }
  .vs-header nav .vs-wide, .vs-brand .vs-tag { display: none; }
}
@media (max-width: 420px) {
  .vs-header nav a.vs-cta { display: none; }
}
.vs-header nav a.vs-cta { background: var(--scalar-button-1); color: var(--scalar-button-1-color); }
.vs-header nav a.vs-cta:hover { background: var(--scalar-button-1-hover); }
.vs-header a:focus-visible { outline: 2px solid var(--scalar-focus-color); outline-offset: 2px; }
.vs-mode { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--vs-muted); cursor: pointer; transition: color .15s, background .15s; }
.vs-mode:hover { color: var(--vs-ink); background: var(--scalar-background-3); }
.vs-mode:focus-visible { outline: 2px solid var(--scalar-focus-color); outline-offset: 2px; }
.vs-mode svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.light-mode .vs-sun, .dark-mode .vs-moon { display: none; }

/* Scalar's own SDK-generation upsell; there's no setting to turn it off. */
.generate-sdk-button, .selected-client-row .selected-client-action { display: none !important; }

/* Scalar themes through body classes, so the logo follows those. */
.logo-dark { display: none; }
.dark-mode .logo-light { display: none; }
.dark-mode .logo-dark { display: inline; }