/* =========================================================================
   Vendizap Theme — Scalar API Reference
   Mapeia o design system da Vendizap (cores, tipografia, espaçamento)
   para as variáveis CSS expostas pelo Scalar (prefixo --scalar-*).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100;300;400;500;600;700;800&display=swap');

:root,
.light-mode {
  /* ---------- Paleta Vendizap ---------- */
  --roxo: #850ad6;
  --azul-escuro: #02044f;
  --rosa: #f72985;
  --rosa-claro: #deb1fb;
  --azul-claro: #00c2e0;
  --erros: #f56c6c;
  --verde: #06a75f;
  --amarelo: #d2b100;
  --verde-pix: #00bdae;
  --verde-whats: #075e54;

  --roxo-10p: rgba(133, 10, 214, 0.1);
  --roxo-25p: rgba(133, 10, 214, 0.25);
  --preto-5p: rgba(0, 0, 0, 0.05);
  --preto-10p: rgba(0, 0, 0, 0.1);
  --preto-30p: rgba(0, 0, 0, 0.3);
  --preto-60p: rgba(0, 0, 0, 0.6);

  --cinza100: #585858;
  --cinza75: #797979;
  --cinza60: #a1a1a1;
  --cinza50: #bdbdbd;
  --cinza45: #c0c0c0;
  --cinza35: #d9d9d9;
  --cinza30: #ebebeb;
  --cinza25: #f2f2f2;
  --preto: #111010;
  --branco: #ffffff;

  /* ---------- Tipografia (mantém tamanhos padrão do Scalar) ---------- */
  --scalar-font: 'Urbanist', 'Roboto', sans-serif;
  --scalar-font-code: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular,
    Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --scalar-bold: 700;
  --scalar-semibold: 600;
  --scalar-regular: 400;

  --scalar-radius: 6px;
  --scalar-radius-lg: 10px;
  --scalar-radius-xl: 14px;

  /* ---------- Textos ---------- */
  --scalar-color-1: var(--preto);        /* texto principal */
  --scalar-color-2: var(--cinza100);     /* texto secundário */
  --scalar-color-3: var(--cinza75);      /* texto terciário */
  --scalar-color-disabled: var(--cinza60);
  --scalar-color-ghost: var(--cinza50);

  /* ---------- Cor de destaque (roxo Vendizap) ---------- */
  --scalar-color-accent: var(--roxo);
  --scalar-background-accent: var(--roxo-10p);

  /* ---------- Backgrounds ---------- */
  --scalar-background-1: var(--branco);
  --scalar-background-2: var(--cinza25);
  --scalar-background-3: var(--cinza30);
  --scalar-background-4: var(--roxo-10p);

  /* ---------- Bordas ---------- */
  --scalar-border-color: var(--cinza30);

  /* ---------- Cores semânticas (HTTP methods, status, badges) ---------- */
  --scalar-color-green: var(--verde);
  --scalar-color-red: var(--erros);
  --scalar-color-yellow: var(--amarelo);
  --scalar-color-blue: var(--azul-claro);
  --scalar-color-orange: #f59e0b;
  --scalar-color-purple: var(--roxo);

  /* ---------- Botões ---------- */
  --scalar-button-1: var(--roxo);
  --scalar-button-1-color: var(--branco);
  --scalar-button-1-hover: var(--azul-escuro);

  /* ---------- Sidebar ---------- */
  --scalar-sidebar-background-1: var(--cinza25);
  --scalar-sidebar-item-hover-background: var(--roxo-10p);
  --scalar-sidebar-item-hover-color: var(--roxo);
  --scalar-sidebar-item-active-background: var(--roxo-10p);
  --scalar-sidebar-color-1: var(--preto);
  --scalar-sidebar-color-2: var(--cinza100);
  --scalar-sidebar-color-active: var(--roxo);
  --scalar-sidebar-border-color: var(--cinza30);
  --scalar-sidebar-search-background: var(--branco);
  --scalar-sidebar-search-border-color: var(--cinza30);
  --scalar-sidebar-search--color: var(--cinza75);

  /* ---------- Header ---------- */
  --scalar-header-background-1: var(--branco);
  --scalar-header-border-color: var(--cinza30);

  /* ---------- Code blocks ---------- */
  --scalar-code-language-color-supersede: var(--branco);

  /* ---------- Sombras ---------- */
  --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  --scalar-shadow-2: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
}

/* =========================================================================
   Tema escuro Vendizap (ativado pela classe .dark-mode do Scalar).
   Redefinimos só os tokens da paleta — todas as variáveis --scalar-* acima
   referenciam essas via var(), então herdam automaticamente.
   ========================================================================= */
.dark-mode {
  /* Inversões principais (idem ao bloco [data-theme="dark"] do design system) */
  --branco: #08081a;
  --preto: #ffffff;

  /* Acento muda para o azul-claro Vendizap, que tem contraste no fundo escuro */
  --roxo: #00c2e0;
  --roxo-10p: rgba(0, 194, 224, 0.12);
  --roxo-25p: rgba(0, 194, 224, 0.28);

  /* Tons de cinza invertidos (claros viram escuros e vice-versa) */
  --cinza100: #ffffff;
  --cinza75: #ebebeb;
  --cinza60: #d9d9d9;
  --cinza50: #bdbdbd;
  --cinza45: #c0c0c0;
  --cinza35: #a1a1a1;
  --cinza30: #3a3a4a;
  --cinza25: #1a1a2a;

  /* Backgrounds escuros em camadas (escolhidos pra dar profundidade) */
  --scalar-background-1: #08081a;
  --scalar-background-2: #11112a;
  --scalar-background-3: #1a1a3a;
  --scalar-background-4: rgba(0, 194, 224, 0.12);

  /* Sidebar / header escurecidos */
  --scalar-sidebar-background-1: #11112a;
  --scalar-sidebar-search-background: #1a1a3a;
  --scalar-header-background-1: #08081a;

  /* Borda mais sutil */
  --scalar-border-color: #2a2a45;
  --scalar-sidebar-border-color: #2a2a45;
  --scalar-header-border-color: #2a2a45;

  /* Sombras mais discretas no dark */
  --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --scalar-shadow-2: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
}

/* =========================================================================
   Tipografia base
   ========================================================================= */
html,
body {
  background: var(--branco);
  color: var(--preto);
  font-family: var(--scalar-font);
}

/* Ocultar o bloco "Client Libraries" do topo da introdução.
   O seletor de cliente continua disponível dentro de cada operação. */
.scalar-app .client-libraries-content,
.scalar-app section:has(> .client-libraries-content) {
  display: none !important;
}

/* =========================================================================
   Ajustes finos no Scalar
   ========================================================================= */

/* =========================================================================
   Topbar Vendizap (header customizado acima do Scalar)
   ========================================================================= */
.vz-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0 20px;
  background: var(--branco);
  border-bottom: 1px solid var(--scalar-border-color);
  font-family: var(--scalar-font);
}

.vz-topbar__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--preto);
}

.vz-topbar__logo {
  height: 32px;
  width: auto;
  display: block;
}

/* Fallback caso ./logo.svg não exista ainda — mostra "Vendizap" estilizado */
.vz-topbar__logo-fallback {
  font-weight: var(--scalar-bold);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--roxo);
}

.vz-topbar__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vz-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--scalar-radius);
  background: var(--roxo);
  color: var(--branco) !important;
  font-weight: var(--scalar-semibold);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s ease;
}

.vz-topbar__link:hover {
  background: var(--azul-escuro);
  color: var(--branco) !important;
}

.vz-topbar__link-icon {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .vz-topbar {
    padding: 0 12px;
    height: 52px;
  }
  .vz-topbar__link {
    padding: 6px 10px;
    font-size: 0.85rem;
  }
}

/* Títulos em roxo Vendizap */
.scalar-app h1,
.scalar-app h2,
.scalar-app h3,
.scalar-app h4,
.scalar-app h5,
.scalar-app h6,
.scalar-app .section-header,
.scalar-app .references-header,
.scalar-app .markdown h1,
.scalar-app .markdown h2,
.scalar-app .markdown h3,
.scalar-app .markdown h4,
.scalar-app .markdown h5,
.scalar-app .markdown h6,
.scalar-app .tag-name,
.scalar-app .operation-summary {
  color: var(--roxo);
  font-family: var(--scalar-font);
  font-weight: var(--scalar-bold);
  letter-spacing: -0.01em;
}

/* Botões "Try it" / "Send" e similares: roxo Vendizap */
.scalar-button-primary,
button.scalar-button-primary {
  background: var(--roxo) !important;
  color: var(--branco) !important;
  border-color: var(--roxo) !important;
  transition: background 0.15s ease;
}

.scalar-button-primary:hover,
button.scalar-button-primary:hover {
  background: var(--azul-escuro) !important;
  border-color: var(--azul-escuro) !important;
}

/* Links em roxo */
.scalar-app a {
  color: var(--roxo);
}
.scalar-app a:hover {
  color: var(--azul-escuro);
}

/* Tags de método HTTP — manter contraste forte */
.scalar-api-method,
.http-method {
  font-weight: var(--scalar-semibold);
  letter-spacing: 0.02em;
}

/* Search input com a “cara” Vendizap */
.sidebar-search,
.scalar-sidebar-search {
  border-radius: var(--scalar-radius-lg);
}

/* Markdown e tabelas: quebrar só entre palavras, nunca no meio.
   O Scalar aplica `word-break: break-word` no .markdown e em td/th via CSS
   injetado dinamicamente pelo bundle — usamos !important para vencer
   independentemente da ordem de injeção. */
.scalar-app .markdown,
.scalar-app .markdown p,
.scalar-app .markdown li,
.scalar-app .markdown td,
.scalar-app .markdown th,
.scalar-app .markdown table {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

/* Scrollbar suave */
.scalar-app ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scalar-app ::-webkit-scrollbar-thumb {
  background: var(--cinza35);
  border-radius: 8px;
}
.scalar-app ::-webkit-scrollbar-thumb:hover {
  background: var(--cinza60);
}