/* ---------------------------------------------------------------------------
 * Tema Veraciti para o MkDocs Material.
 *
 * Os valores vêm dos tokens reais do console (veracity-front, Vuetify 3 —
 * `src/plugins/vuetify.ts` e `src/style/style.scss`). O objetivo é ar de
 * família, não clone: mesma paleta, mesma tipografia, mesmos raios e a mesma
 * ideia de profundidade. As divergências deliberadas estão comentadas onde
 * aparecem.
 * ------------------------------------------------------------------------- */

/* --- Tipografia -----------------------------------------------------------
 * Poppins é a família que o console declara intencionalmente (index.html +
 * `* { font-family: "Poppins" }` em App.vue). Fica hospedada aqui, e não no
 * Google Fonts, para o site continuar sem nenhuma requisição a terceiros.
 * Subconjunto `latin` apenas — cobre U+0000..U+00FF, ou seja, toda a
 * acentuação do português. Licença SIL OFL 1.1, em `../fonts/OFL.txt`.
 * ------------------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens comuns ------------------------------------------------------- */

:root {
  /* O Material compõe estes tokens numa cadeia própria
   * (`--md-text-font-family: var(--md-text-font,_), -apple-system, …`),
   * então basta nomear a família — os fallbacks já vêm depois. */
  --md-text-font: "Poppins";
  /* O console não tem token de monoespaçada: usa "Roboto Mono", monospace
   * ad hoc para chave de acesso, UUID e código. Mantemos o nome na pilha e
   * caímos nas monoespaçadas do sistema — nenhuma fonte extra baixada. */
  --md-code-font: ui-monospace, "Roboto Mono";

  /* Contêiner grande = 8px; controle nativo = 4px. É a leitura do console:
   * cards em rounded="lg" (8px) e .section-card (12px), botão/input em 4px. */
  --vrc-radius: 8px;
  --vrc-radius-sm: 4px;

  /* Cores semânticas — idênticas nos dois temas do console. */
  --vrc-success: #4caf50;
  --vrc-warning: #ffc107;
  --vrc-error: #ff5252;
  --vrc-info: #2196f3;
}

/* --- Tema claro -----------------------------------------------------------
 * O console claro: página #f5f5f5 (.v-theme--light .v-main), cards #FFFFFF,
 * app bar #FFFFFF com borda inferior. A prosa aqui é a página, e os blocos
 * (código, admonições, tabelas) são os cards.
 *
 * Azul: no claro o console mostra #1976D2 (a cor do drawer). É também a única
 * das duas que passa em contraste AA sobre branco — #0099FF fica em 3,0:1,
 * insuficiente para texto corrido. O #0099FF do logotipo aparece no tema
 * escuro, que é o padrão do produto.
 * ------------------------------------------------------------------------- */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #1976d2;
  --md-primary-fg-color--light: #4791db;
  --md-primary-fg-color--dark: #115293;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: #0099ff;
  --md-accent-fg-color--transparent: rgba(0, 153, 255, 0.1);

  --md-default-bg-color: #f5f5f5;
  --md-default-fg-color: rgba(0, 0, 0, 0.87);
  --md-default-fg-color--light: rgba(0, 0, 0, 0.6);
  --md-default-fg-color--lighter: rgba(0, 0, 0, 0.38);
  --md-default-fg-color--lightest: rgba(0, 0, 0, 0.12);

  --md-typeset-a-color: #1976d2;
  --md-code-bg-color: #ffffff;
  --md-code-fg-color: rgba(0, 0, 0, 0.87);

  --md-footer-bg-color: #ffffff;
  --md-footer-bg-color--dark: #eeeeee;
  --md-footer-fg-color: rgba(0, 0, 0, 0.87);
  --md-footer-fg-color--light: rgba(0, 0, 0, 0.6);
  --md-footer-fg-color--lighter: rgba(0, 0, 0, 0.38);

  /* Borda do Vuetify no claro: #000 a 12% (default, não sobrescrito). */
  --vrc-border: rgba(0, 0, 0, 0.12);
  --vrc-surface: #ffffff;
  --vrc-surface-variant: #eeeeee;
  --vrc-brand: #1976d2;
  /* Sombra Material clássica — baixa, difusa, cinza neutra. É o que o
   * v-card elevated do console usa. */
  --vrc-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
    0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

/* --- Tema escuro ----------------------------------------------------------
 * É o padrão do console (defaultTheme: "dark"). Página #121212, superfície
 * #212121, variante #2C2C2C. Aqui o azul de marca real (#0099FF) tem 6,3:1
 * sobre #121212 e é o que aparece em link, botão e título de seção.
 * ------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-hue: 220;

  --md-primary-fg-color: #0099ff;
  --md-primary-fg-color--light: #4db8ff;
  --md-primary-fg-color--dark: #0077cc;
  --md-primary-bg-color: rgba(255, 255, 255, 0.92);
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: #4db8ff;
  --md-accent-fg-color--transparent: rgba(0, 153, 255, 0.1);

  --md-default-bg-color: #121212;
  /* As variantes do fundo são hsla() derivadas do matiz no tema slate; sem
   * fixá-las aqui, os overlays sairiam azulados sobre um fundo neutro. */
  --md-default-bg-color--light: rgba(18, 18, 18, 0.7);
  --md-default-bg-color--lighter: rgba(18, 18, 18, 0.3);
  --md-default-bg-color--lightest: rgba(18, 18, 18, 0.12);
  /* O console usa on-surface #FFFFFF puro. Para texto corrido, branco puro
   * sobre quase-preto cansa; 92% mantém a cor e alivia a leitura longa. */
  --md-default-fg-color: rgba(255, 255, 255, 0.92);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.7);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.5);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.12);

  --md-typeset-a-color: #0099ff;
  --md-code-bg-color: #212121;
  --md-code-fg-color: rgba(255, 255, 255, 0.92);

  --md-footer-bg-color: #212121;
  --md-footer-bg-color--dark: #1a1a1a;
  --md-footer-fg-color: rgba(255, 255, 255, 0.92);
  --md-footer-fg-color--light: rgba(255, 255, 255, 0.7);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.5);

  /* Borda do console no escuro: #5A6472 a 28% — cinza-ardósia frio, escolhido
   * lá porque o branco a 12% do Vuetify "brilhava" demais. */
  --vrc-border: rgba(90, 100, 114, 0.28);
  --vrc-surface: #212121;
  --vrc-surface-variant: #2c2c2c;
  --vrc-brand: #0099ff;
  /* No escuro a separação vem da luminosidade da superfície, não da sombra —
   * como no console. */
  --vrc-shadow: none;
}

/* --- Corpo do texto -------------------------------------------------------
 * O console roda em 14px (o par dominante é text-caption + text-body-2).
 * Para texto corrido isso é apertado demais, então ficamos em 15px
 * (.75rem sobre a base de 20px do Material) — um passo na direção da
 * densidade dele, sem prejudicar leitura longa.
 * ------------------------------------------------------------------------- */

.md-typeset {
  font-size: 0.75rem;
  line-height: 1.65;
}

/* --- Títulos --------------------------------------------------------------
 * O gesto mais característico do console é .section-heading: 20px, peso 700,
 * cor primária, letter-spacing -0.5px. Título de seção é azul e bold em todo
 * o app. Aqui h2 e h3 fazem esse papel; h1 é o título da página e fica neutro.
 * ------------------------------------------------------------------------- */

.md-typeset h1 {
  color: var(--md-default-fg-color);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.md-typeset h2 {
  color: var(--vrc-brand);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.md-typeset h3 {
  color: var(--vrc-brand);
  font-weight: 700;
  letter-spacing: -0.25px;
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 500;
  letter-spacing: 0;
}

/* --- Chrome ---------------------------------------------------------------
 * O cabeçalho do console NÃO é colorido de marca: é superfície neutra, chata,
 * com uma borda inferior (PageHeader.vue — color="surface" flat border="b").
 * O Material pinta o cabeçalho de primária por padrão; desfazemos isso, que é
 * o que mais aproxima as duas telas.
 * ------------------------------------------------------------------------- */

.md-header {
  background-color: var(--vrc-surface);
  color: var(--md-default-fg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--vrc-border);
}

.md-header--shadow {
  box-shadow: none;
  transition: none;
}

.md-tabs {
  background-color: var(--vrc-surface);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--vrc-border);
}

/* A busca herda `currentColor` do cabeçalho; o fundo, a borda e o placeholder
 * precisam de ajuste, porque foram pensados para um cabeçalho colorido.
 *
 * O seletor precisa ser `.md-header .md-search__form`: o Material tem uma
 * regra de mesma forma no breakpoint de desktop, e um `.md-search__form`
 * sozinho perderia dela por especificidade. Campo de busca com borda é o que
 * o console faz no cabeçalho dele. */
.md-header .md-search__form {
  background-color: var(--vrc-surface-variant);
  color: var(--md-default-fg-color);
  border: 1px solid var(--vrc-border);
  border-radius: var(--vrc-radius-sm);
  box-shadow: none;
}

.md-header .md-search__form:hover {
  background-color: var(--md-default-fg-color--lightest);
}

.md-search__input::placeholder {
  color: var(--md-default-fg-color--light);
}

.md-search__input ~ .md-search__icon,
.md-search__options > .md-icon {
  color: var(--md-default-fg-color--light);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: var(--vrc-radius-sm) var(--vrc-radius-sm) 0 0;
}

.md-search__output {
  border-radius: 0 0 var(--vrc-radius-sm) var(--vrc-radius-sm);
}

.md-footer-meta {
  border-top: 1px solid var(--vrc-border);
}

/* --- Blocos: forma e profundidade -----------------------------------------
 * Card branco sobre página cinza no claro, superfície mais clara sobre fundo
 * quase preto no escuro. Raio de 8px, sombra baixa só no claro.
 * ------------------------------------------------------------------------- */

.md-typeset pre > code,
.md-typeset .highlight > pre,
.md-typeset .highlighttable {
  border-radius: var(--vrc-radius);
}

.md-typeset .highlight,
.md-typeset pre {
  border-radius: var(--vrc-radius);
  box-shadow: var(--vrc-shadow);
}

/* Código em linha: chip pequeno, raio de controle. */
.md-typeset code {
  border-radius: var(--vrc-radius-sm);
  border: 1px solid var(--vrc-border);
}

/* Dentro de um bloco de código o chip não deve ganhar borda nem raio. */
.md-typeset pre > code,
.md-typeset .highlight code {
  border: none;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--vrc-radius);
  border-width: 1px;
  box-shadow: var(--vrc-shadow);
  background-color: var(--vrc-surface);
  font-size: 0.7rem;
}

.md-typeset .tabbed-set > .tabbed-content,
.md-typeset .tabbed-block {
  border-radius: 0 0 var(--vrc-radius) var(--vrc-radius);
}

.md-typeset .tabbed-labels > label {
  font-weight: 500;
}

/* --- Tabelas --------------------------------------------------------------
 * As páginas de compatibilidade são quase inteiramente tabela, então esta é a
 * superfície que mais aparece no site. Cabeçalho na variante de superfície,
 * borda fina, cantos de contêiner.
 * ------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  border-radius: var(--vrc-radius);
  border: 1px solid var(--vrc-border);
  box-shadow: var(--vrc-shadow);
  background-color: var(--vrc-surface);
  font-size: 0.68rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--vrc-surface-variant);
  color: var(--md-default-fg-color);
  font-weight: 700;
  letter-spacing: -0.25px;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--vrc-border);
  vertical-align: top;
}

/* --- Navegação ------------------------------------------------------------ */

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--vrc-brand);
}

.md-nav__item .md-nav__link--active {
  font-weight: 500;
}

.md-nav__title {
  font-weight: 700;
  letter-spacing: -0.25px;
}

/* --- Admonições: cores semânticas do console ------------------------------
 * success #4CAF50, warning #FFC107, error #FF5252, info #2196F3 — os mesmos
 * quatro tokens que pintam os chips de status no app. Só os tipos realmente
 * usados no conteúdo, mais `note` e `danger` por serem os prováveis próximos.
 * ------------------------------------------------------------------------- */

.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: var(--vrc-info);
}
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: rgba(33, 150, 243, 0.1);
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  background-color: var(--vrc-info);
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--vrc-info);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(33, 150, 243, 0.1);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--vrc-info);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--vrc-success);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(76, 175, 80, 0.1);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--vrc-success);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--vrc-warning);
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(255, 193, 7, 0.1);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: var(--vrc-warning);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--vrc-error);
}
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: rgba(255, 82, 82, 0.1);
}
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before {
  background-color: var(--vrc-error);
}

/* --- Detalhes -------------------------------------------------------------
 * A referência da API renderiza dentro de um swagger-ui empacotado; ele traz
 * o próprio CSS e fica de fora deste tema de propósito — mexer nele é mais
 * arriscado do que vale.
 * ------------------------------------------------------------------------- */

.md-typeset .md-button {
  border-radius: var(--vrc-radius-sm);
  font-weight: 500;
}

.md-typeset kbd {
  border-radius: var(--vrc-radius-sm);
}

.md-typeset hr {
  border-bottom: 1px solid var(--vrc-border);
}