/* Identidade visual do Garantora sobre o Material for MkDocs.
 *
 * Os valores vêm de ../design-tokens.md (fonte única da verdade) — não são escolhidos
 * aqui. Mesmos papéis do app: navy (`brand.structure`) é estrutura — cabeçalho, rótulo,
 * link; teal (`brand.accent`) é marca e navegação; nenhuma cor viva vira texto no tema
 * claro. Tipografia: Onest nos títulos, Inter no corpo, rótulos de seção em overline.
 *
 * O site ocupa 100% da largura: a grade do Material tem teto de 61rem, e documentação de
 * spec (tabelas largas, diagramas Mermaid) perdia metade da tela num monitor comum.
 */

@import url("https://fonts.googleapis.com/css2?family=Onest:wght@500;600;700&display=swap");

/* As variáveis do Material também ficam em [data-md-color-scheme="default"]: com
 * `primary: custom`, o tema as redefine nesse seletor, que vence o `:root`. */
:root,
[data-md-color-scheme="default"] {
  /* Marca */
  --gar-structure: #005577;
  --gar-structure-hover: #00445c;
  --gar-accent: #008b8b;
  --gar-accent-hover: #007a7a;
  --gar-info-ink: #0071b5;
  --gar-highlight: #ffa94d;
  /* Neutros — light */
  --gar-bg: #edf1f6;
  --gar-surface: #ffffff;
  --gar-text: #1a1a2e;
  --gar-text-2: #465264;
  --gar-border: #adb8c8;
  --gar-border-list: #c9d4e0;

  /* Primária = navy (links, item ativo, botões do Material). O cabeçalho branco não
   * sai daqui — tem regra própria em .md-header. */
  --md-primary-fg-color: var(--gar-structure);
  --md-primary-fg-color--light: var(--gar-structure-hover);
  --md-primary-fg-color--dark: var(--gar-structure-hover);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
  --md-accent-fg-color: var(--gar-accent-hover);
  --md-accent-fg-color--transparent: #008b8b1a;
  --md-typeset-a-color: var(--gar-structure);
  --md-default-bg-color: var(--gar-bg);
  --md-default-fg-color: var(--gar-text);
  --md-default-fg-color--light: var(--gar-text-2);
  --md-code-bg-color: #f3f6fa;
  --md-text-font: "Inter";
}

[data-md-color-scheme="slate"] {
  --gar-structure: #4da6cc;
  --gar-structure-hover: #3d95bb;
  --gar-accent: #33b3b3;
  --gar-accent-hover: #2ca0a0;
  --gar-info-ink: #4da6cc;
  --gar-bg: #0b1220;
  --gar-surface: #1e293b;
  --gar-text: #e8eaf0;
  --gar-text-2: #acb4c0;
  --gar-border: #49586c;
  --gar-border-list: #364559;

  --md-primary-fg-color: var(--gar-structure);
  --md-primary-fg-color--light: var(--gar-structure-hover);
  --md-primary-fg-color--dark: var(--gar-structure-hover);
  --md-primary-bg-color: #0b1220;
  --md-primary-bg-color--light: #0b1220b3;
  --md-accent-fg-color: var(--gar-accent);
  --md-accent-fg-color--transparent: #33b3b31f;
  --md-typeset-a-color: var(--gar-structure);
  --md-default-bg-color: var(--gar-bg);
  --md-default-fg-color: var(--gar-text);
  --md-default-fg-color--light: var(--gar-text-2);
  --md-code-bg-color: #16203a;
  --md-hue: 222;
}

/* ── Largura total ─────────────────────────────────────────────────────────── */
.md-grid {
  max-width: none;
}
.md-main__inner {
  margin-top: 1rem;
}

/* ── Cabeçalho: superfície branca com o logo, como o topo do app ───────────── */
.md-header {
  background: var(--gar-surface);
  color: var(--gar-text);
  box-shadow: 0 1px 0 var(--gar-border-list);
}
.md-header[data-md-state="shadow"],
.md-header--shadow {
  box-shadow: 0 1px 0 var(--gar-border-list), 0 2px 8px #0055770f;
}
.md-header__button.md-logo {
  margin: 0.2rem 0.4rem;
  padding: 0.2rem 0;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url("logo-dark.svg");
}
.md-header__topic:first-child {
  font-family: "Onest", "Inter", sans-serif;
  font-weight: 600;
  color: var(--gar-structure);
}
.md-search__input {
  background: var(--gar-bg);
  color: var(--gar-text);
}
.md-search__input::placeholder,
.md-search__icon,
.md-header__button,
.md-header__option {
  color: var(--gar-text-2);
}

/* Abas: a navegação, em navy com sublinhado teal na ativa. */
.md-tabs {
  background: var(--gar-surface);
  color: var(--gar-text-2);
  border-bottom: 1px solid var(--gar-border-list);
}
.md-tabs__link {
  font-weight: 600;
  opacity: 1;
  color: var(--gar-text-2);
}
.md-tabs__link:hover,
.md-tabs__item--active .md-tabs__link {
  color: var(--gar-structure);
}
.md-tabs__item--active .md-tabs__link {
  box-shadow: inset 0 -2px 0 var(--gar-accent);
}

/* ── Conteúdo num painel, sobre o fundo azulado — o mesmo arranjo do app ───── */
.md-content__inner {
  background: var(--gar-surface);
  border: 1px solid var(--gar-border-list);
  border-radius: 12px;
  padding: 1.2rem 1.6rem 1.6rem;
  margin: 0 0.8rem 1.6rem;
}
@media screen and (max-width: 44.984375em) {
  .md-content__inner {
    margin: 0 0 1rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 1rem;
  }
}

/* ── Tipografia ────────────────────────────────────────────────────────────── */
.md-typeset {
  font-size: 0.75rem; /* 15px sobre a base de 20px do Material: o body-lg dos tokens */
  line-height: 1.6;
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Onest", "Inter", sans-serif;
  color: var(--gar-structure);
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  font-weight: 700;
  font-size: 1.6em;
  margin-bottom: 0.8em;
}
.md-typeset h2 {
  font-weight: 600;
  padding-top: 0.4em;
  border-top: 1px solid var(--gar-border-list);
}
.md-typeset h3 {
  font-weight: 600;
}
.md-typeset a {
  color: var(--gar-structure);
  text-decoration: underline;
  text-decoration-color: #00557740;
  text-underline-offset: 2px;
}
.md-typeset a:hover {
  color: var(--gar-structure-hover);
  text-decoration-color: currentColor;
}

/* ── Navegação lateral: rótulos de seção em overline, como a sider do app ──── */
.md-nav__item--section > .md-nav__link,
.md-nav__item--section > label.md-nav__link,
.md-nav--primary > .md-nav__title {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gar-text-2);
}
.md-nav__link {
  color: var(--gar-text);
}
.md-nav__link--active,
.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--gar-structure);
}
.md-nav__link--active {
  font-weight: 600;
}

/* ── Tabelas: cabeçalho em overline, linhas finas, rolagem só dentro da tabela ── */
.md-typeset table:not([class]) {
  font-size: 0.7rem;
  border: 1px solid var(--gar-border-list);
  border-radius: 8px;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background: var(--gar-bg);
  color: var(--gar-text-2);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--gar-border-list);
}
.md-typeset .md-typeset__table {
  display: block;
  max-width: 100%;
}
.md-typeset .md-typeset__table table {
  display: table;
  width: 100%;
}
.md-typeset__scrollwrap {
  overflow-x: auto;
}

/* Código e citações */
.md-typeset code {
  border-radius: 4px;
}
.md-typeset blockquote {
  border-left: 3px solid var(--gar-accent);
  color: var(--gar-text-2);
}

/* Moldura dos diagramas Mermaid. O Material os desenha num shadow DOM fechado: o tamanho
 * do SVG não se ajusta por CSS nem por `window.mermaidConfig` (testado em 2026-10-15), e um
 * diagrama grande fica encolhido para caber — a saída é dividi-lo em diagramas menores. */
.md-typeset .mermaid {
  overflow-x: auto;
  border: 1px solid var(--gar-border-list);
  border-radius: 8px;
  padding: 0.6rem;
}
.md-typeset .mermaid svg {
  max-width: none !important;
  height: auto;
}

/* Rodapé discreto, na cor da estrutura. */
.md-footer {
  background: var(--gar-structure);
}
[data-md-color-scheme="slate"] .md-footer {
  background: var(--gar-surface);
}

/* Documento com status não-corrente (ex.: spec/fix "em-implementacao") — usado por
 * quem quiser sinalizar isso no corpo do texto; não é aplicado automaticamente. */
.md-typeset .status-badge {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  background: var(--md-accent-fg-color--transparent);
  color: var(--gar-structure);
}