/* ============================================================
   sevenbee.css — Central de Ajuda
   7bee Design System v1.0 aplicado ao MkDocs Material
   ------------------------------------------------------------
   Os tokens abaixo sao os do design system. Tudo que o tema
   desenha e derivado deles — nao escreva hex solto nas regras,
   use a variavel. Assim uma mudanca de marca e uma linha.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS — copia fiel do 7bee Design System
   ------------------------------------------------------------ */
:root {
  /* Marca */
  --sb-primary-700: #6B47C4;
  --sb-primary-600: #7A54D0;
  --sb-primary:     #8460DA;
  --sb-primary-400: #9B7EE2;
  --sb-primary-300: #B8A0F8;
  --sb-primary-200: #CCB4FC;
  --sb-primary-100: #DED2FC;
  --sb-primary-50:  #F0E8F8;

  /* Neutros */
  --sb-ink:         #1A1A1F;
  --sb-text:        #2B2B33;
  --sb-muted:       #6E6E78;
  --sb-subtle:      #9A9AA4;
  --sb-border:      #E8E8EC;
  --sb-border-strong: #D8D8DE;
  --sb-surface:     #FFFFFF;
  --sb-bg:          #F8F8FA;
  --sb-bg-alt:      #F4F2FA;

  /* Semanticos */
  --sb-success: #2FB27C; --sb-success-bg: #E3F7EE;
  --sb-warning: #E5A93B; --sb-warning-bg: #FCF3E0;
  --sb-danger:  #E15563; --sb-danger-bg:  #FCE8EB;
  --sb-info:    #8460DA; --sb-info-bg:    #F0E8F8;

  /* Sistema */
  --sb-radius-sm: 6px;
  --sb-radius:    10px;
  --sb-radius-lg: 14px;
  --sb-radius-pill: 999px;
  --sb-shadow-sm: 0 1px 2px rgba(26, 26, 31, .06);
  --sb-shadow:    0 4px 16px rgba(26, 26, 31, .08);
  --sb-shadow-lg: 0 12px 40px rgba(132, 96, 218, .18);

  --sb-header-gradient: linear-gradient(135deg, #7A54D0 0%, #8460DA 55%, #9B7EE2 100%);
}

/* ------------------------------------------------------------
   2. PONTE — tokens 7bee -> variaveis do Material
   E isto que faz o `primary: custom` do mkdocs.yml funcionar.
   ------------------------------------------------------------ */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--sb-primary);
  --md-primary-fg-color--light: var(--sb-primary-400);
  --md-primary-fg-color--dark:  var(--sb-primary-700);
  --md-primary-bg-color:        #FFFFFF;
  --md-primary-bg-color--light: rgba(255, 255, 255, .72);

  --md-accent-fg-color:             var(--sb-primary-600);
  --md-accent-fg-color--transparent: var(--sb-primary-50);
  --md-accent-bg-color:             #FFFFFF;

  --md-default-fg-color:          var(--sb-text);
  --md-default-fg-color--light:   var(--sb-muted);
  --md-default-fg-color--lighter: var(--sb-subtle);
  --md-default-fg-color--lightest: var(--sb-border);
  --md-default-bg-color:          var(--sb-surface);

  --md-typeset-color:   var(--sb-text);
  --md-typeset-a-color: var(--sb-primary-600);

  --md-code-fg-color: var(--sb-text);
  --md-code-bg-color: var(--sb-bg-alt);

  --md-footer-bg-color:      var(--sb-ink);
  --md-footer-bg-color--dark: #0F0F13;
  --md-footer-fg-color:      #FFFFFF;
}

/* ------------------------------------------------------------
   3. TIPOGRAFIA — Inter, tracking negativo nos titulos
   ------------------------------------------------------------ */
body, .md-typeset {
  -webkit-font-smoothing: antialiased;
}
.md-typeset {
  font-size: .775rem;
  line-height: 1.6;
}
.md-typeset h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--sb-ink);
  margin-bottom: .6em;
}
.md-typeset h2 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.028em;
  color: var(--sb-ink);
  margin-top: 2.2em;
}
.md-typeset h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--sb-text);
}
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 600;
  color: var(--sb-text);
}
/* rotulos em caixa alta, como o Caption do DS */
.md-nav__title,
.md-typeset table:not([class]) th {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sb-subtle);
}

/* ------------------------------------------------------------
   4. CABECALHO — gradiente do DS
   ------------------------------------------------------------ */
.md-header {
  background: var(--sb-header-gradient);
  box-shadow: 0 1px 0 rgba(26, 26, 31, .06);
}
.md-header__title {
  font-weight: 700;
  letter-spacing: -.015em;
}
.md-tabs {
  background: transparent;
}
.md-tabs__link {
  opacity: .78;
  font-weight: 600;
  font-size: .72rem;
}
.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* busca no cabecalho */
.md-search__form {
  border-radius: var(--sb-radius);
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
}
.md-search__form:hover {
  background: rgba(255, 255, 255, .28);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--sb-surface);
  box-shadow: var(--sb-shadow);
}
.md-search__input::placeholder {
  color: rgba(255, 255, 255, .8);
}
.md-search-result__meta {
  color: var(--sb-muted);
}
.md-search-result__link:is(:focus, :hover),
.md-search-result__more summary:is(:focus, :hover) {
  background: var(--sb-primary-50);
}

/* ------------------------------------------------------------
   5. MENU LATERAL
   ------------------------------------------------------------ */
.md-nav {
  font-size: .70rem;
}
.md-nav__link {
  border-radius: var(--sb-radius-sm);
  padding: 2px 6px;
  margin-left: -6px;
  transition: background .12s, color .12s;
}
.md-nav__link:hover {
  background: var(--sb-bg-alt);
  color: var(--sb-primary-700);
}
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active:hover {
  font-weight: 700;
  color: var(--sb-primary-700);
  background: var(--sb-primary-50);
}
.md-nav--secondary .md-nav__link--active {
  background: none;
}

/* ------------------------------------------------------------
   6. LINKS E BOTOES
   ------------------------------------------------------------ */
.md-typeset a {
  font-weight: 500;
  text-underline-offset: 2px;
}
.md-typeset .md-button {
  font-weight: 600;
  font-size: .72rem;
  padding: 10px 18px;
  border-radius: var(--sb-radius);
  border-width: 1px;
  transition: .15s;
}
.md-typeset .md-button--primary {
  background: var(--sb-primary);
  border-color: var(--sb-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(132, 96, 218, .32);
}
.md-typeset .md-button--primary:is(:hover, :focus) {
  background: var(--sb-primary-600);
  border-color: var(--sb-primary-600);
  color: #FFFFFF;
}
.md-typeset .md-button:not(.md-button--primary) {
  background: var(--sb-primary-50);
  border-color: var(--sb-primary-100);
  color: var(--sb-primary-700);
}
.md-typeset .md-button:not(.md-button--primary):is(:hover, :focus) {
  background: var(--sb-primary-100);
  border-color: var(--sb-primary-200);
  color: var(--sb-primary-700);
}

/* ------------------------------------------------------------
   7. IMAGENS — prints da plataforma
   ------------------------------------------------------------ */
.md-typeset img:not(.twemoji):not(.emojione):not([src$=".svg"]) {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow-sm);
  cursor: zoom-in;
}
/* o lightbox (glightbox) herda o fundo claro */
.gslide-image img {
  background: var(--sb-surface);
  border-radius: var(--sb-radius);
}

/* ------------------------------------------------------------
   8. TABELAS
   ------------------------------------------------------------ */
.md-typeset table:not([class]) {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  box-shadow: none;
  font-size: .70rem;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--sb-surface);
  border-bottom: 1px solid var(--sb-border);
  padding: .7em 1em;
}
.md-typeset table:not([class]) td {
  border-top: none;
  border-bottom: 1px solid var(--sb-border);
  padding: .75em 1em;
}
.md-typeset table:not([class]) tbody tr:last-child td {
  border-bottom: none;
}
.md-typeset table:not([class]) tbody tr:hover {
  background: var(--sb-bg-alt);
  box-shadow: none;
}

/* ------------------------------------------------------------
   9. ADMONITIONS — mapeadas nos semanticos do DS
   Nota: o Material usa seletores como `.md-typeset .admonition.info`
   (3 classes). Para sobrescrever e preciso a mesma especificidade —
   por isso o `:is()` vem DEPOIS de `.admonition` / `details`, nunca
   solto. Caixa neutra, cor so na barra lateral e no titulo.
   ------------------------------------------------------------ */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--sb-border);
  border-left-width: 3px;
  border-radius: var(--sb-radius);
  box-shadow: none;
  font-size: .72rem;
}
.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 700;
  letter-spacing: -.005em;
  border-bottom: none;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  border-radius: 3px;
}

/* info / note */
.md-typeset .admonition:is(.note, .info, .todo),
.md-typeset details:is(.note, .info, .todo) {
  border-color: var(--sb-border);
  border-left-color: var(--sb-info);
}
.md-typeset :is(.note, .info, .todo) > :is(.admonition-title, summary) {
  background: var(--sb-info-bg);
  color: var(--sb-primary-700);
}
.md-typeset :is(.note, .info, .todo) > :is(.admonition-title, summary)::before {
  background-color: var(--sb-info);
}

/* sucesso */
.md-typeset .admonition:is(.tip, .success, .check, .done),
.md-typeset details:is(.tip, .success, .check, .done) {
  border-color: var(--sb-border);
  border-left-color: var(--sb-success);
}
.md-typeset :is(.tip, .success, .check, .done) > :is(.admonition-title, summary) {
  background: var(--sb-success-bg);
  color: #1E7A54;
}
.md-typeset :is(.tip, .success, .check, .done) > :is(.admonition-title, summary)::before {
  background-color: var(--sb-success);
}

/* alerta */
.md-typeset .admonition:is(.warning, .caution, .attention),
.md-typeset details:is(.warning, .caution, .attention) {
  border-color: var(--sb-border);
  border-left-color: var(--sb-warning);
}
.md-typeset :is(.warning, .caution, .attention) > :is(.admonition-title, summary) {
  background: var(--sb-warning-bg);
  color: #9A6B14;
}
.md-typeset :is(.warning, .caution, .attention) > :is(.admonition-title, summary)::before {
  background-color: var(--sb-warning);
}

/* perigo */
.md-typeset .admonition:is(.danger, .error, .failure, .bug),
.md-typeset details:is(.danger, .error, .failure, .bug) {
  border-color: var(--sb-border);
  border-left-color: var(--sb-danger);
}
.md-typeset :is(.danger, .error, .failure, .bug) > :is(.admonition-title, summary) {
  background: var(--sb-danger-bg);
  color: #B23543;
}
.md-typeset :is(.danger, .error, .failure, .bug) > :is(.admonition-title, summary)::before {
  background-color: var(--sb-danger);
}

/* exemplo / citacao / pergunta — herdam o roxo */
.md-typeset .admonition:is(.example, .quote, .question, .abstract, .summary, .tldr),
.md-typeset details:is(.example, .quote, .question, .abstract, .summary, .tldr) {
  border-color: var(--sb-border);
  border-left-color: var(--sb-primary-300);
}
.md-typeset :is(.example, .quote, .question, .abstract, .summary, .tldr) > :is(.admonition-title, summary) {
  background: var(--sb-bg-alt);
  color: var(--sb-primary-700);
}
.md-typeset :is(.example, .quote, .question, .abstract, .summary, .tldr) > :is(.admonition-title, summary)::before {
  background-color: var(--sb-primary-400);
}

/* ------------------------------------------------------------
   10. CODIGO, CITACAO, ABAS
   ------------------------------------------------------------ */
.md-typeset code {
  background: var(--sb-bg-alt);
  color: var(--sb-primary-700);
  border-radius: var(--sb-radius-sm);
  font-size: .86em;
  padding: .1em .4em;
}
.md-typeset pre > code {
  color: var(--sb-text);
  background: var(--sb-bg-alt);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
}
.md-typeset blockquote {
  border-left: 3px solid var(--sb-primary-200);
  color: var(--sb-muted);
}
.md-typeset .tabbed-labels > label {
  font-weight: 600;
  font-size: .7rem;
}
.md-typeset .tabbed-set > input:checked + label {
  color: var(--sb-primary-700);
  border-color: var(--sb-primary);
}

/* marcador do indice lateral e do permalink */
.md-typeset .headerlink {
  color: var(--sb-primary-200);
}
.md-typeset :target > .headerlink,
.md-typeset :hover > .headerlink {
  color: var(--sb-primary);
}

/* ------------------------------------------------------------
   11. RODAPE E NAVEGACAO ENTRE PAGINAS
   ------------------------------------------------------------ */
.md-footer-meta {
  background: var(--sb-ink);
}
.md-footer {
  background: var(--sb-primary-700);
}
.md-footer__link {
  opacity: .9;
}
.md-footer__link:hover {
  opacity: 1;
}

/* ------------------------------------------------------------
   12. MODO ESCURO
   O DS v1.0 cobre so o modo claro. Esta variante foi derivada
   dele: mesmo roxo, neutros invertidos a partir do Ink.
   ------------------------------------------------------------ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #12121A;
  --md-accent-fg-color:  var(--sb-primary-300);

  --md-default-bg-color:          #15151C;
  --md-default-fg-color:          #E7E7EC;
  --md-default-fg-color--light:   #A9A9B4;
  --md-default-fg-color--lighter: #74747F;
  --md-default-fg-color--lightest: #30303B;

  --md-typeset-color:   #E7E7EC;
  --md-typeset-a-color: var(--sb-primary-300);

  --md-code-bg-color: #1E1E27;
  --md-code-fg-color: #E7E7EC;

  --md-footer-bg-color: #0F0F13;

  --sb-ink:     #FFFFFF;
  --sb-text:    #E7E7EC;
  --sb-muted:   #A9A9B4;
  --sb-subtle:  #74747F;
  --sb-border:  #2C2C36;
  --sb-surface: #1B1B23;
  --sb-bg-alt:  #22222C;

  /* o roxo claro vira translucido para nao virar mancha no escuro */
  --sb-primary-50:  rgba(132, 96, 218, .18);
  --sb-primary-100: rgba(132, 96, 218, .28);

  --sb-info-bg:    rgba(132, 96, 218, .16);
  --sb-success-bg: rgba(47, 178, 124, .14);
  --sb-warning-bg: rgba(229, 169, 59, .14);
  --sb-danger-bg:  rgba(225, 85, 99, .14);
}
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active:hover {
  color: var(--sb-primary-300);
  background: var(--sb-primary-50);
}
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: var(--sb-primary-300);
}
[data-md-color-scheme="slate"] .md-header {
  background: linear-gradient(135deg, #2A1F47 0%, #3A2A63 55%, #4A3580 100%);
}
[data-md-color-scheme="slate"] .md-typeset img:not(.twemoji):not([src$=".svg"]) {
  border-color: #2C2C36;
  box-shadow: none;
}
[data-md-color-scheme="slate"] .md-typeset :is(.tip, .success) > :is(.admonition-title, summary),
[data-md-color-scheme="slate"] .md-typeset :is(.warning, .caution) > :is(.admonition-title, summary),
[data-md-color-scheme="slate"] .md-typeset :is(.danger, .error) > :is(.admonition-title, summary),
[data-md-color-scheme="slate"] .md-typeset :is(.note, .info) > :is(.admonition-title, summary) {
  color: #FFFFFF;
}
[data-md-color-scheme="slate"] .md-typeset code {
  color: var(--sb-primary-300);
}