/* ===========================================================================
   Docs content typography — sn-docs-content wrapper provido por DocsLayout
   Tokens OpenConnection, respeita data-theme dark via cascata
   =========================================================================== */
.sn-docs-content {
  padding:var(--s-8) var(--s-7);
  max-width:57.5rem;
  margin:0 auto;
  font-size:var(--fs-body-4);
  line-height:1.7;
  color:var(--fg-strong);
}
.sn-docs-content h1 {
  font-size:var(--fs-h3); font-weight:700; color:var(--fg-strong);
  margin:0 0 var(--s-4);
}
.sn-docs-content h2 {
  font-size:var(--fs-h4); font-weight:700; color:var(--fg-strong);
  margin:var(--s-8) 0 var(--s-4);
  border-bottom:0.0625rem solid var(--border-soft);
  padding-bottom:0.375rem;
}
.sn-docs-content h3 {
  font-size:1.0625rem; font-weight:600; color:var(--fg-strong);
  margin:var(--s-7) 0 var(--s-3);
}
.sn-docs-content p { margin:0 0 var(--s-4); }
.sn-docs-content ul, .sn-docs-content ol { padding-left:1.375rem; margin:0 0 var(--s-4); }
.sn-docs-content li { margin-bottom:var(--s-1); }
.sn-docs-content a { color:var(--seg-blue); text-decoration:underline; }
.sn-docs-content a:hover { color:var(--seg-blue-110); }

.sn-docs-content code {
  background:var(--bg-muted);
  color:var(--seg-blue-110);
  padding:0.125rem 0.375rem;
  border-radius:0.25rem;
  font-family:'Fira Code', 'JetBrains Mono', Consolas, monospace;
  font-size:0.78125rem;
}
.sn-docs-content pre {
  background:var(--seg-blue-120);
  color:var(--border-soft);
  padding:var(--s-5) var(--s-6);
  border-radius:0.625rem;
  overflow-x:auto;
  margin:var(--s-5) 0;
  font-family:'Fira Code', 'JetBrains Mono', Consolas, monospace;
  font-size:0.78125rem;
  line-height:1.55;
}
.sn-docs-content pre code {
  background:transparent;
  color:inherit;
  padding:0;
  border-radius:0;
  font-size:inherit;
}

.sn-docs-content blockquote {
  border-left:0.1875rem solid var(--seg-green);
  padding:var(--s-1) 0.875rem;
  margin:var(--s-4) 0;
  color:var(--fg-secondary);
  background:var(--bg-muted);
  border-radius:0 var(--radius-xs) var(--radius-xs) 0;
}

.sn-docs-content table {
  width:100%;
  border-collapse:collapse;
  margin:var(--s-5) 0;
  background:var(--bg-surface);
  border-radius:var(--radius-xs);
  overflow:hidden;
  border:0.0625rem solid var(--border-soft);
}
.sn-docs-content th, .sn-docs-content td {
  text-align:left;
  padding:var(--s-3) 0.875rem;
  border-bottom:0.0625rem solid var(--border-soft);
}
.sn-docs-content th {
  background:var(--bg-app);
  font-weight:600;
  font-size:var(--fs-caption);
  color:var(--fg-secondary);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ── Dark mode overrides ────────────────────────────────────── */
/* Bugs #2/#3 (Dogfood 2026-07-12): GettingStarted/Authentication/ConsentFlow/
   ApiReference/ErrorCodes/InstallConsentButton usam cards Tailwind "bg-white"
   (hardcoded, nunca reage a tema) para envolver headings/paragrafos/links. Fonte
   unica do fix:escurecer o proprio card com tokens var(--code-*) — que NAO
   dependem da camada de branding/whitelabel (--bg-app/--bg-surface/--fg-* podem
   ainda estar presos no valor light por um bug separado, fora deste escopo) —
   e aplicar o texto claro correspondente APENAS dentro desses cards. Fora deles
   (títulos de página soltos, paragrafo intro, .hiw-stage/.hiw-faq que já usam
   var(--bg-surface) corretamente) o texto continua herdando var(--fg-strong)/
   var(--fg-secondary) da regra base — que É theme-aware e vai se auto-corrigir
   assim que a camada de branding for corrigida, sem exigir novo ajuste aqui.
   ANTES desta correcao havia um override cego (h1-h4/p/li/strong/a de TODO
   .sn-docs-content para var(--code-text-bright)/dim, pensados para conviver com
   var(--code-bg-dark)) que deixava titulos e paragrafos soltos (fora de card)
   ilegiveis contra o fundo da pagina, que permanece claro. */
:root[data-theme="dark"] .sn-docs-content .docs-card {
  background:var(--code-bg-dark) !important;
  border-color:var(--code-quote-border, var(--border-soft)) !important;
}
/* Bug #5 (Dogfood 2026-07-12) — "caixa branca deslocada sobre bloco de código
   escuro" em /docs/consent-flow:sub-caixas Tailwind (bg-gray-50/blue-50/green-50/
   amber-50/red-50/purple-50, ex. "Campos do body") aninhadas DENTRO do card
   acima permanecem claras (mesma causa: hardcoded ou preso no valor light da
   branding) enquanto o card em volta agora fica escuro — cria o efeito de caixa
   clara flutuando num bloco escuro. Mesma fonte de correção: escurecer também
   essas sub-caixas com os tokens code-* auto-suficientes. */
:root[data-theme="dark"] .sn-docs-content .docs-card .docs-subbox,
:root[data-theme="dark"] .sn-docs-content .docs-card .docs-subbox-info,
:root[data-theme="dark"] .sn-docs-content .docs-card .docs-subbox-success,
:root[data-theme="dark"] .sn-docs-content .docs-card .docs-subbox-warning,
:root[data-theme="dark"] .sn-docs-content .docs-card .docs-subbox-danger,
:root[data-theme="dark"] .sn-docs-content .docs-card .docs-subbox-tip {
  background:var(--code-bg-quote) !important;
  border-color:var(--code-quote-border, var(--border-soft)) !important;
}
:root[data-theme="dark"] .sn-docs-content .docs-card h1,
:root[data-theme="dark"] .sn-docs-content .docs-card h2,
:root[data-theme="dark"] .sn-docs-content .docs-card h3,
:root[data-theme="dark"] .sn-docs-content .docs-card h4 {
  color:var(--code-text-bright) !important;
}
:root[data-theme="dark"] .sn-docs-content .docs-card p,
:root[data-theme="dark"] .sn-docs-content .docs-card li,
:root[data-theme="dark"] .sn-docs-content .docs-card dd {
  color:var(--code-text-dim);
}
:root[data-theme="dark"] .sn-docs-content .docs-card dt,
:root[data-theme="dark"] .sn-docs-content .docs-card strong {
  color:var(--code-text-bright) !important;
}
:root[data-theme="dark"] .sn-docs-content .docs-card a {
  color:var(--code-hl-blue);
}
:root[data-theme="dark"] .sn-docs-content .docs-card a:hover {
  color:var(--code-hl-blue-soft);
}
:root[data-theme="dark"] .sn-docs-content pre {
  background:var(--code-bg-dark);
}
:root[data-theme="dark"] .sn-docs-content code {
  background:var(--code-bg-quote) !important;
  color:var(--code-quote-text) !important;
  border:0.0625rem solid var(--code-quote-border);
}
:root[data-theme="dark"] .sn-docs-content pre code {
  background:transparent !important;
  color:var(--border-soft) !important;
  border:none;
}
:root[data-theme="dark"] .sn-docs-content blockquote {
  background:var(--code-bg-table);
  color:var(--code-text-muted);
  border-left-color:var(--seg-green);
}
:root[data-theme="dark"] .sn-docs-content table {
  background:var(--code-bg-pre);
  border-color:var(--gray-90);
}
:root[data-theme="dark"] .sn-docs-content th {
  background:var(--gray-90) !important;
  color:var(--code-text-faint) !important;
}
:root[data-theme="dark"] .sn-docs-content td {
  color:var(--code-text-gray);
  border-color:var(--gray-90);
}

/* Inline code badges — alto contraste */
.sn-docs-content code.sn-tag-blue { display:inline-block; padding:0.1875rem var(--s-3); border-radius:var(--r-2); background:var(--seg-blue); color:var(--brand-droplet-green); border:0.0625rem solid var(--brand-droplet-green); font-family:'Fira Code',Consolas,monospace; font-size:0.78125rem; font-weight:600; }
.sn-docs-content code.sn-tag-amber { display:inline-block; padding:0.1875rem var(--s-3); border-radius:var(--r-2); background:var(--tag-amber-bg); color:var(--tag-amber-fg); border:0.0625rem solid var(--tag-amber-border); font-family:'Fira Code',Consolas,monospace; font-size:0.78125rem; font-weight:600; }
.sn-docs-content code.sn-tag-green { display:inline-block; padding:0.1875rem var(--s-3); border-radius:var(--r-2); background:var(--brand-droplet-green); color:var(--seg-blue); border:0.0625rem solid var(--seg-blue); font-family:'Fira Code',Consolas,monospace; font-size:0.78125rem; font-weight:600; }

/* Mobile overflow fix */
.sn-docs-content table {
  overflow-x:auto;
  display:block;
  max-width:100%;
}
@media (max-width:40rem) {
  .sn-docs-content pre {
    font-size:var(--fs-micro);
  }
}

/* ===========================================================================
   #905 Frente A escopo 5 — componentes semânticos das páginas /docs/*
   (ApiReference, ErrorCodes, ConsentFlow, Authentication, GettingStarted,
   InstallConsentButton, CodeSamples). Extingue as classes utilitárias
   Tailwind cruas (bg-*, text-*, px-*, rounded-*, etc.) usadas ad-hoc em cada
   elemento — tudo aqui referencia var(--token) do tema. Nomes de escala usam
   palavras (xs/sm/md/lg) em vez de dígitos para não coincidir com o padrão
   que o analyzer OCPL021A caça em classes tailwind (ex.: "p-4").
   =========================================================================== */
.docs-mono { font-family:'Fira Code', 'JetBrains Mono', Consolas, monospace; }
.docs-xs-text { font-size:var(--fs-caption); }
.docs-body-sm-text { font-size:var(--fs-body-4); }
.docs-muted { color:var(--fg-secondary); }
.docs-faint { color:var(--fg-muted); }
.docs-default-text { color:var(--fg-default); }
.docs-strong-text { color:var(--fg-strong); font-weight:600; }
.docs-italic { font-style:italic; }
.docs-leading { line-height:1.6; }

.docs-tint-info    { color:var(--info); }
.docs-tint-success { color:var(--success); }
.docs-tint-warning { color:var(--alert-dark); }
.docs-tint-tip      { color:var(--violet-fg); }
.docs-tint-danger   { color:var(--error); }
.docs-tint-muted    { color:var(--fg-muted); }

.docs-section { margin-bottom:3rem; }
.docs-mb-2xs { margin-bottom:var(--s-1); }
.docs-mb-xs { margin-bottom:var(--s-2); }
.docs-mb-md { margin-bottom:var(--s-5); }
.docs-mb-lg { margin-bottom:var(--s-8); }
.docs-center-text { text-align:center; }
.docs-label-strong { font-weight:700; font-size:var(--fs-body-4); margin-bottom:var(--s-1); }
.docs-mt-xs { margin-top:var(--s-1); }
.docs-mt-sm { margin-top:var(--s-2); }
.docs-mt-md { margin-top:var(--s-5); }
.docs-mt-lg { margin-top:var(--s-9); }

.docs-heading-xl { font-size:var(--fs-h4); font-weight:700; color:var(--fg-strong); margin:0 0 var(--s-2); }
.docs-heading-lg { font-size:var(--fs-h5); font-weight:700; color:var(--fg-strong); margin:0 0 var(--s-1); }
.docs-heading-md { font-size:var(--fs-body-2); font-weight:600; color:var(--fg-strong); }
.docs-heading-sm { font-size:var(--fs-body-4); font-weight:600; color:var(--fg-default); margin-bottom:var(--s-2); }
.docs-eyebrow    { font-size:var(--fs-body-4); font-weight:600; color:var(--fg-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--s-4); }
.docs-eyebrow-xs { font-size:var(--fs-caption); font-weight:600; color:var(--fg-muted); text-transform:uppercase; margin-bottom:var(--s-2); }

.docs-intro    { color:var(--fg-muted); margin-bottom:var(--s-5); }
.docs-intro-sm { color:var(--fg-muted); font-size:var(--fs-body-4); margin-bottom:var(--s-7); }
.docs-body-sm  { font-size:var(--fs-body-4); color:var(--fg-secondary); margin-bottom:var(--s-5); }

.docs-link          { color:var(--link); }
.docs-link:hover, .docs-link-strong:hover { text-decoration:underline; }
.docs-link-strong   { color:var(--link); font-weight:600; }

.docs-stack-xs { display:flex; flex-direction:column; gap:var(--s-1); }
.docs-stack-sm { display:flex; flex-direction:column; gap:var(--s-2); }
.docs-stack-md { display:flex; flex-direction:column; gap:var(--s-5); }

.docs-gap-xs { gap:var(--s-1); }
.docs-gap-sm { gap:var(--s-2); }
.docs-gap-md { gap:var(--s-4); }
.docs-gap-lg { gap:var(--s-5); }

/* Hover highlight de linha de tabela — substitui "hover:bg-gray-50" cru. */
.docs-row-hover:hover { background:var(--bg-muted); }

.docs-max-width { max-width:64rem; margin:0 auto; }
.docs-frame { width:100%; border:0; }
.docs-arrow-sep { color:var(--fg-muted); font-size:var(--fs-h4); font-weight:300; }

/* Cards (endpoint / feature blocks) — mesmo hook visual do antigo "bg-white
   rounded-lg shadow-sm border", agora theme-aware (var(--bg-surface) já
   troca sozinho no dark mode; ver override específico logo abaixo, que
   substitui o hack antigo que mirava a classe Tailwind ".bg-white"). */
.docs-card {
  background:var(--bg-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  border:0.0625rem solid var(--border-soft);
  margin-bottom:var(--s-7);
  overflow:hidden;
}
.docs-pad     { padding:var(--s-6); }
.docs-pad-lg  { padding:var(--s-7); }
.docs-card-header {
  padding:var(--s-6);
  border-bottom:0.0625rem solid var(--border-soft);
  background:var(--bg-muted);
  display:flex;
  align-items:center;
  gap:var(--s-4);
}
.docs-endpoint-path { font-family:'Fira Code', 'JetBrains Mono', Consolas, monospace; font-size:var(--fs-body-3); color:var(--fg-strong); }
.docs-endpoint-desc { color:var(--fg-muted); font-size:var(--fs-body-4); margin-left:auto; }

.docs-index-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--s-2); font-size:var(--fs-body-4); }
@media (min-width:48rem) { .docs-index-grid { grid-template-columns:repeat(5, 1fr); } }
.docs-product-grid { display:grid; grid-template-columns:1fr; gap:var(--s-5); margin-bottom:var(--s-7); }
@media (min-width:48rem) { .docs-product-grid { grid-template-columns:1fr 1fr; } }

.docs-method-dot { width:var(--s-2); height:var(--s-2); border-radius:var(--radius-pill); display:inline-block; }
.docs-method-dot-get     { background:var(--success); }
.docs-method-dot-post    { background:var(--alert); }
.docs-method-dot-delete  { background:var(--error); }
.docs-method-dot-consent { background:var(--seg-blue); }
.docs-method-dot-part    { background:var(--violet-fg); }
.docs-method-dot-data    { background:var(--seg-blue-90); }

.docs-badge { display:inline-flex; align-items:center; font-size:var(--fs-caption); font-weight:700; padding:0.1875rem var(--s-3); border-radius:var(--radius-xs); }
.docs-badge-get     { background:var(--success-bg); color:var(--success-dark); }
.docs-badge-post    { background:var(--alert-bg); color:var(--alert-dark); }
.docs-badge-delete  { background:var(--error-bg); color:var(--error-dark); }
.docs-badge-info    { background:var(--info-light); color:var(--info-dark); }
.docs-badge-tip     { background:var(--violet-bg); color:var(--violet-fg); }
.docs-badge-warn    { background:var(--alert-bg); color:var(--alert-dark); }
.docs-badge-neutral { background:var(--bg-muted); color:var(--fg-default); }

.docs-status-list { display:flex; flex-wrap:wrap; gap:var(--s-2); font-size:var(--fs-caption); }
.docs-status { padding:0.125rem var(--s-2); border-radius:var(--radius-xs); }
.docs-status-ok    { background:var(--success-bg); color:var(--success-dark); }
.docs-status-error { background:var(--error-bg); color:var(--error-dark); }

.docs-inline-code { background:var(--bg-muted); padding:0.0625rem var(--s-1); border-radius:var(--radius-xs); font-size:var(--fs-caption); font-family:'Fira Code', 'JetBrains Mono', Consolas, monospace; }

.docs-tag-swatch { display:inline-block; padding:0.0625rem var(--s-2); border-radius:var(--radius-xs); font-size:var(--fs-caption); font-family:'Fira Code', 'JetBrains Mono', Consolas, monospace; }
.docs-tag-gray   { background:var(--bg-muted); color:var(--fg-default); }
.docs-tag-blue   { background:var(--info-light); color:var(--info-dark); }
.docs-tag-amber  { background:var(--tag-amber-bg); color:var(--tag-amber-fg); }
.docs-tag-green  { background:var(--success-bg); color:var(--success-dark); }
.docs-tag-red    { background:var(--error-bg); color:var(--error-dark); }
.docs-tag-purple { background:var(--violet-bg); color:var(--violet-fg); }
.docs-tag-orange { background:var(--alert-bg); color:var(--alert-dark); }

/* Callout boxes (info/success/warning/tip/danger) — substitui as caixas
   Tailwind "bg-COLOR-50 border border-COLOR-200 rounded-lg p-4". */
.docs-callout { border-radius:var(--radius-md); padding:var(--s-5); margin-bottom:var(--s-5); border:0.0625rem solid transparent; }
.docs-callout-info     { background:var(--info-light); border-color:var(--info); }
.docs-callout-success  { background:var(--success-bg); border-color:var(--success); }
.docs-callout-warning  { background:var(--alert-bg); border-color:var(--alert); }
.docs-callout-tip      { background:var(--violet-bg); border-color:var(--violet-fg); }
.docs-callout-danger   { background:var(--error-bg); border-color:var(--error); }
.docs-callout-neutral  { background:var(--bg-muted); border-color:var(--border-soft); }
.docs-callout-text     { font-size:var(--fs-body-4); }

/* Sub-boxes aninhadas dentro de .docs-card (ex.: "Campos do body" em
   ConsentFlow) — substitui "bg-COLOR-50 rounded-lg p-4" sem borda. */
.docs-subbox          { background:var(--bg-muted); border-radius:var(--radius-md); padding:var(--s-5); }
.docs-subbox-info      { background:var(--info-light); border-radius:var(--radius-md); padding:var(--s-5); }
.docs-subbox-success   { background:var(--success-bg); border-radius:var(--radius-md); padding:var(--s-5); }
.docs-subbox-warning   { background:var(--alert-bg); border-radius:var(--radius-md); padding:var(--s-5); }
.docs-subbox-tip       { background:var(--violet-bg); border-radius:var(--radius-md); padding:var(--s-5); }
.docs-subbox-danger    { background:var(--error-bg); border-radius:var(--radius-md); padding:var(--s-5); }

.docs-step-circle    { flex-shrink:0; width:var(--s-9); height:var(--s-9); background:var(--seg-blue); color:var(--white); border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-body-2); }
.docs-step-circle-sm { flex-shrink:0; width:var(--s-8); height:var(--s-8); background:var(--seg-blue); color:var(--white); border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-body-4); }

/* Grid-style table (ConsentFlow/Authentication) — variante com borda em
   toda célula; a base ".sn-docs-content table/th/td" já cobre o resto
   (largura, radius, padding, border-bottom, cor de cabeçalho). */
.docs-table-grid th, .docs-table-grid td { border:0.0625rem solid var(--border-soft); }

/* CodeBlock.razor — bloco de código escuro com botão copiar (usado nas 7
   páginas /docs/* via <CodeBlock Language="..." Code="..." />). Reaproveita
   a mesma família var(--code-*) já usada em .sn-docs-content pre/code. */
.docs-codeblock { position:relative; margin-bottom:var(--s-5); max-width:100%; overflow:hidden; }
.docs-codeblock-toolbar { position:absolute; top:var(--s-2); right:var(--s-2); display:flex; align-items:center; gap:var(--s-2); z-index:10; }
.docs-codeblock-lang { font-size:var(--fs-caption); color:var(--code-text-muted); font-weight:500; }
.docs-codeblock-copy { background:var(--code-bg-table); color:var(--code-text-dim); font-size:var(--fs-caption); padding:var(--s-1) var(--s-4); border-radius:0.25rem; border:0; cursor:pointer; transition:background-color .15s; }
.docs-codeblock-copy:hover { background:var(--code-bg-quote); }
.docs-codeblock-body { background:var(--code-bg-dark); border-radius:var(--radius-md); padding:var(--s-5); padding-top:2.5rem; font-size:var(--fs-body-4); font-family:'Fira Code', 'JetBrains Mono', Consolas, monospace; color:var(--code-text); overflow-x:auto; width:100%; }
.docs-codeblock-pre { white-space:pre; min-width:0; }

/* Loading spinner (DocsPageShell) */
.docs-loading { display:flex; align-items:center; gap:var(--s-2); color:var(--fg-muted); padding:var(--s-8) 0; }
.docs-spinner {
  display:inline-block; width:var(--s-5); height:var(--s-5);
  border:0.125rem solid var(--border-strong); border-top-color:var(--fg-secondary);
  border-radius:var(--radius-pill); animation:docsSpin 0.6s linear infinite;
}
@keyframes docsSpin { to { transform:rotate(360deg); } }

/* Markdown prose wrapper (DocsPageShell) — reaproveita .sn-docs-content em
   vez de duplicar estilos via Tailwind Typography plugin (prose-*). */
.sn-docs-content.docs-markdown { padding:0; max-width:none; }