/* SSOT visual — documentação P&D (blue-grey corporativo). */
:root {
  --dc-color-ink: #212121;
  --dc-color-muted: #757575;
  --dc-color-paper: #ffffff;
  --dc-color-surface: #ffffff;
  --dc-color-border: color-mix(in srgb, #546e7a 18%, transparent);
  --dc-color-accent: #546e7a;
  --dc-color-accent-soft: #90a4ae;
  --dc-color-code: #f5f5f5;

  /* Chrome — barra superior (destaque blue-grey) */
  --dc-color-header: #455a64;
  --dc-color-header-fg: #eceff1;
  --dc-color-header-border: color-mix(in srgb, #546e7a 25%, transparent);

  --dc-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --dc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dc-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --dc-radius-sm: 0.375rem;
  --dc-radius-md: 0.5rem;
  --dc-radius-lg: 0.75rem;

  --dc-motion-fast: 150ms;
  --dc-motion-base: 220ms;
  --dc-space-lp: 72rem;
}

[data-md-color-scheme="slate"],
:root[data-theme="dark"] {
  color-scheme: dark;
  --dc-color-ink: #eceff1;
  --dc-color-muted: #b0bac2;
  --dc-color-paper: #0f1418;
  --dc-color-surface: #1a2228;
  --dc-color-border: color-mix(in srgb, #90a4ae 28%, transparent);
  --dc-color-accent: #90a4ae;
  --dc-color-accent-soft: #b0bec5;
  --dc-color-code: #1e272e;

  --dc-color-header: #37474f;
  --dc-color-header-fg: #eceff1;
  --dc-color-header-border: color-mix(in srgb, #90a4ae 35%, transparent);
}
/* Mapeia brand tokens → variáveis do tema Zensical/Material e utilitários dc-.
   tokens.css é concatenado antes deste arquivo por prepare-docs.sh. */

:root,
[data-md-color-scheme="default"] {
  --md-default-fg-color: var(--dc-color-ink);
  --md-default-fg-color--light: var(--dc-color-muted);
  --md-default-bg-color: var(--dc-color-paper);
  --md-primary-fg-color: var(--dc-color-accent);
  --md-primary-fg-color--light: var(--dc-color-accent-soft);
  --md-primary-fg-color--dark: var(--dc-color-header);
  --md-primary-bg-color: var(--dc-color-header-fg);
  --md-accent-fg-color: var(--dc-color-accent-soft);
  --md-code-bg-color: var(--dc-color-code);
  --md-typeset-a-color: var(--dc-color-accent);
  --md-text-font: var(--dc-font-sans);
  --md-code-font: var(--dc-font-mono);
}

[data-md-color-scheme="slate"] {
  --md-default-fg-color: var(--dc-color-ink);
  --md-default-fg-color--light: var(--dc-color-muted);
  --md-default-bg-color: var(--dc-color-paper);
  --md-primary-fg-color: var(--dc-color-accent);
  --md-primary-fg-color--light: var(--dc-color-accent-soft);
  --md-primary-fg-color--dark: var(--dc-color-header);
  --md-primary-bg-color: var(--dc-color-header-fg);
  --md-accent-fg-color: var(--dc-color-accent-soft);
  --md-code-bg-color: var(--dc-color-code);
  --md-typeset-a-color: var(--dc-color-accent);
  --md-text-font: var(--dc-font-sans);
  --md-code-font: var(--dc-font-mono);
  --md-hue: 200;
}

/* Header — destaque explícito (variante Zensical padrão não pinta com primary) */
.md-header {
  background-color: var(--dc-color-header);
  color: var(--dc-color-header-fg);
  border-bottom: 1px solid var(--dc-color-header-border);
}

/* Logomarca (ícone SVG inline) — altura estável no header */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: 1.5rem;
}

.md-header .md-header__title,
.md-header .md-header__button,
.md-header .md-tabs,
.md-header .md-tabs__link {
  color: var(--dc-color-header-fg);
}

.md-header .md-header__button:hover,
.md-header .md-tabs__link:hover,
.md-header .md-tabs__link--active {
  color: var(--dc-color-header-fg);
  opacity: 0.92;
}

.md-header .md-header__button:focus-visible {
  outline: 2px solid var(--dc-color-accent-soft);
  outline-offset: 2px;
}

/* Busca no header — pill clara (Zensical classic usa #00000042 por padrão) */
.md-header .md-search__button,
.md-search__button {
  background-color: color-mix(in srgb, var(--dc-color-header-fg) 18%, transparent) !important;
  color: var(--dc-color-header-fg) !important;
}

/* Lupa = mask em ::before; no modern usa --md-default-fg-color (preto no light) */
.md-header .md-search__button::before,
.md-search__button::before {
  background-color: var(--dc-color-header-fg) !important;
}

.md-header .md-search__button::after,
.md-search__button::after {
  background-color: color-mix(in srgb, var(--dc-color-header-fg) 22%, transparent) !important;
  color: var(--dc-color-header-fg) !important;
}

.md-header .md-search__button:hover,
.md-header .md-search__button:focus,
.md-search__button:hover,
.md-search__button:focus {
  background-color: color-mix(in srgb, var(--dc-color-header-fg) 28%, transparent) !important;
  color: var(--dc-color-header-fg) !important;
}

.md-header .md-search__button:hover::before,
.md-header .md-search__button:focus::before,
.md-search__button:hover::before,
.md-search__button:focus::before {
  background-color: var(--dc-color-header-fg) !important;
}

.md-header .md-search__button:focus-visible,
.md-search__button:focus-visible {
  outline: 2px solid var(--dc-color-accent-soft);
  outline-offset: 2px;
}

/* Ícone SVG de busca no header (viewport estreita / label) */
.md-header .md-header__button.md-icon svg,
.md-header label.md-header__button svg {
  color: var(--dc-color-header-fg);
  stroke: currentColor;
}

/* Instant navigation progress */
.md-progress {
  background-color: var(--dc-color-header);
}

.md-progress__inner,
.md-progress > * {
  background-color: var(--dc-color-accent-soft);
}

/* Nav ativa — pill accent (layout 3 colunas / wayfinding) */
.md-nav--primary .md-nav__item--active > .md-nav__link,
.md-nav--primary .md-nav__link--active {
  color: var(--dc-color-accent);
  font-weight: 600;
  background-color: color-mix(in srgb, var(--dc-color-accent) 14%, transparent);
  border-radius: var(--dc-radius-md);
  border-left: none;
  margin-left: 0;
  padding-left: 0.6rem;
}

.md-nav--primary .md-nav__item--active > .md-nav__link .md-icon,
.md-nav--primary .md-nav__link--active .md-icon,
.md-nav--primary .md-nav__item--active > .md-nav__link svg,
.md-nav--primary .md-nav__link--active svg {
  color: var(--dc-color-accent);
  fill: currentColor;
}

.md-nav__link:focus-visible,
.md-typeset a:focus-visible,
.md-button:focus-visible {
  outline: 2px solid var(--dc-color-accent);
  outline-offset: 2px;
}

/* TOC direita — tokens brand */
.md-nav--secondary .md-nav__title,
.md-sidebar--secondary .md-nav__title {
  color: var(--dc-color-ink);
  font-weight: 700;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--dc-color-accent);
  font-weight: 600;
}

/* VLibras — overlay fixo (evita wrapper 450px/float entrar no fluxo pós-footer) */
div[vw],
div[vw].enabled {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 0.75rem !important;
  /* Acima do footer do tema; não cobrir copyright */
  bottom: 4.5rem !important;
  width: auto !important;
  height: auto !important;
  min-width: 40px !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 40;
  pointer-events: none;
}

div[vw] [vw-access-button],
div[vw] [vw-plugin-wrapper] {
  pointer-events: auto;
}

/* Wrapper fechado: zero contribuição ao layout/scroll */
div[vw] [vw-plugin-wrapper]:not(.active) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  float: none !important;
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Painel aberto: ancorado ao host fixo, sem float no fluxo da página */
div[vw] [vw-plugin-wrapper].active {
  display: flex !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 48px !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  width: 300px !important;
  max-width: min(300px, 95vw) !important;
  height: 450px !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

div[vw] [vw-access-button],
div[vw] [vw-access-button].active,
div[vw] [vw-access-button]:hover,
div[vw] [vw-access-button].isLeft,
div[vw] [vw-access-button].isTopOrBottom:hover {
  width: 40px !important;
  max-width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Esconde o banner "Acessível com VLibras" (vp-pop-up); mantém só o ícone */
div[vw] [vw-access-button] .vp-pop-up {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

div[vw] [vw-access-button] .vp-access-button {
  width: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
}

body {
  font-family: var(--dc-font-sans);
}

.md-typeset h1,
.dc-lp h1,
.font-display {
  font-family: var(--dc-font-display);
}

code,
pre,
.md-typeset code {
  font-family: var(--dc-font-mono);
}

.dc-lp {
  --dc-fg: var(--dc-color-ink);
  --dc-muted: var(--dc-color-muted);
  --dc-accent: var(--dc-color-accent);
  --dc-bg: var(--dc-color-paper);
}

.dc-lp .dc-pillar {
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-lg);
  padding: 1.25rem;
  background: color-mix(in srgb, var(--dc-color-paper) 92%, var(--dc-color-accent));
  transition: border-color var(--dc-motion-base) ease;
}

.dc-lp .dc-pillar:hover {
  border-color: color-mix(in srgb, var(--dc-color-accent) 45%, transparent);
}

.dc-lp .dc-pillar h3 {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dc-color-accent);
}

.dc-lp .dc-pillar p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--dc-color-muted);
}

@media (prefers-reduced-motion: reduce) {
  .dc-lp .dc-pillar,
  mcp-architecture-viewer * {
    transition: none !important;
    animation: none !important;
  }
}