/* ==========================================================================
   Tema escuro da landing page.

   COMO FUNCIONA
   As 8 páginas já definiam a mesma rampa de tokens (`--neutral-*`,
   `--primary-*`) e a usam de verdade: 97 `color: var(--neutral-900)`,
   77 `background: var(--neutral-0)`, 60 `border: var(--neutral-30)`.
   Por isso o tema escuro não reescreve componente nenhum — ele redefine a
   RAMPA. Cada token mantém o mesmo papel (0 = superfície, 900 = texto) e
   inverte a claridade, então as ~230 referências viram tema escuro sozinhas.

   Consequência prática: componente novo que use os tokens já nasce com dark
   mode. Componente que hardcode `#fff` não — por isso os ajustes pontuais no
   fim deste arquivo.

   ORDEM DE CARREGAMENTO
   Este arquivo precisa vir DEPOIS do <style> inline de cada página: as regras
   têm a mesma especificidade e a última vence.

   TRÊS ESTADOS
   O visitante pode estar em: "claro", "escuro" ou "o que o sistema disser"
   (padrão). O atributo `data-theme` no <html> só existe quando ele escolheu
   explicitamente — sem atributo, vale a preferência do sistema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paleta escura.
   Definida uma vez e aplicada nos dois gatilhos (escolha explícita e
   preferência do sistema) para não duplicar valores.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    /* Fundo da página é MAIS FUNDO que a superfície dos cards — assim card
       sobre página tem separação sem depender de sombra (sombra preta é
       invisível no escuro). */
    --page-bg: #000000;

    /* Rampa neutra invertida. Mesmos papéis da rampa clara:
       0 = superfície · 30/40 = borda · 100-300 = texto secundário
       800/900 = texto principal

       A rampa CLARA é cinza-azulada (#222a37, #303843). Espelhar essa matiz
       no escuro deixava o site azul-marinho em vez de preto. Aqui a rampa é
       neutra de propósito — combina com o --neutral-900 (#131313) que a marca
       já usa como preto. */
    --neutral-0: #000000;
    --neutral-10: #0a0a0a;
    --neutral-20: #101010;
    --neutral-30: #1e1e1e;
    --neutral-40: #2a2a2a;
    --neutral-50: #3d3d3d;
    --neutral-60: #474747;
    --neutral-70: #525252;
    --neutral-80: #5e5e5e;
    --neutral-90: #6b6b6b;
    --neutral-100: #7a7a7a;
    --neutral-200: #8c8c8c;
    --neutral-300: #a0a0a0;
    --neutral-400: #b0b0b0;
    --neutral-500: #bfbfbf;
    --neutral-600: #cfcfcf;
    --neutral-700: #dedede;
    --neutral-800: #ededed;
    --neutral-900: #f7f7f7;

    /* Primário: o verde-limão da marca funciona bem sobre escuro e fica.
       O que muda são os extremos da rampa:
       - os tons -50/-75/-100 eram fundos suaves quase brancos → viram
         fundos suaves ESCUROS esverdeados;
       - o -500 era o verde escuro usado como TEXTO (28 usos) → sobre fundo
         escuro daria ~3:1 de contraste, então clareia. */
    --primary: #cbe75e;
    --primary-50: #1b2410;
    --primary-75: #243010;
    --primary-100: #2f3f12;
    --primary-200: #405518;
    --primary-300: #5d7a22;
    --primary-400: #9dbb3a;
    --primary-500: #d8ef7e;

    /* Semânticos: os -50 eram fundos suaves claros → escurecem;
       os fortes clareiam para manter contraste sobre fundo escuro. */
    --success-50: #12261d;
    --success-75: #1a3a2b;
    --success-100: #24523c;
    --success-200: #3f9370;
    --success-300: #58c094;
    --success-400: #7ed3ae;
    --success-500: #9fe0c4;

    --warning-50: #2a2210;
    --warning-75: #3d3114;
    --warning-100: #56441a;
    --warning-200: #c9902a;
    --warning-300: #ffc043;
    --warning-500: #ffd77a;

    --danger-50: #2a1614;
    --danger-75: #3d1e1a;
    --danger-100: #562722;
    --danger-200: #d95f52;
    --danger-300: #f47c6e;

    /* Gráficos: mesma matiz, luminosidade elevada para o fundo escuro. */
    --chart-blue: #3cc0f7;
    --chart-yellow: #f9db6d;
    --chart-red: #f0817e;
    --chart-teal: #6fa08c;
  }
}

/* Escolha explícita do visitante vence a preferência do sistema.
   Os valores repetem os do bloco acima de propósito: CSS não tem como
   compartilhar um bloco de declarações entre dois seletores diferentes sem
   pré-processador, e este site não tem build. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --page-bg: #000000;

  --neutral-0: #000000;
  --neutral-10: #0a0a0a;
  --neutral-20: #101010;
  --neutral-30: #1e1e1e;
  --neutral-40: #2a2a2a;
  --neutral-50: #3d3d3d;
  --neutral-60: #474747;
  --neutral-70: #525252;
  --neutral-80: #5e5e5e;
  --neutral-90: #6b6b6b;
  --neutral-100: #7a7a7a;
  --neutral-200: #8c8c8c;
  --neutral-300: #a0a0a0;
  --neutral-400: #b0b0b0;
  --neutral-500: #bfbfbf;
  --neutral-600: #cfcfcf;
  --neutral-700: #dedede;
  --neutral-800: #ededed;
  --neutral-900: #f7f7f7;

  --primary: #cbe75e;
  --primary-50: #1b2410;
  --primary-75: #243010;
  --primary-100: #2f3f12;
  --primary-200: #405518;
  --primary-300: #5d7a22;
  --primary-400: #9dbb3a;
  --primary-500: #d8ef7e;

  --success-50: #12261d;
  --success-75: #1a3a2b;
  --success-100: #24523c;
  --success-200: #3f9370;
  --success-300: #58c094;
  --success-400: #7ed3ae;
  --success-500: #9fe0c4;

  --warning-50: #2a2210;
  --warning-75: #3d3114;
  --warning-100: #56441a;
  --warning-200: #c9902a;
  --warning-300: #ffc043;
  --warning-500: #ffd77a;

  --danger-50: #2a1614;
  --danger-75: #3d1e1a;
  --danger-100: #562722;
  --danger-200: #d95f52;
  --danger-300: #f47c6e;

  --chart-blue: #3cc0f7;
  --chart-yellow: #f9db6d;
  --chart-red: #f0817e;
  --chart-teal: #6fa08c;
}

/* ==========================================================================
   Ajustes que a inversão da rampa não alcança.
   São os pontos onde a cor está escrita à mão no CSS das páginas, e por isso
   não seguem o token. A lista é curta de propósito — cada item aqui é dívida:
   o certo, ao mexer nesses componentes, é trocar o valor fixo por um token.
   ========================================================================== */

/* Fundo da página um degrau abaixo da superfície dos cards.
   Precisa do seletor com :root porque o `background: var(--neutral-0)` do
   <style> inline de cada página tem a mesma especificidade — vence quem vier
   depois, e este arquivo é carregado depois. */
:root[data-theme='dark'] body {
  background: var(--page-bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body {
    background: var(--page-bg);
  }
}

/* Header fixo: o vidro é branco translúcido em 7 das 8 páginas
   (`rgba(255,255,255,.85)`), o que no escuro vira uma barra clara flutuando.
   Aqui vira vidro escuro com a mesma sensação. */
:root[data-theme='dark'] header,
:root[data-theme='dark'] header.topo {
  background: rgba(0, 0, 0, 0.85);
  border-bottom-color: var(--neutral-30);
}
:root[data-theme='dark'] header.scrolled {
  background: rgba(0, 0, 0, 0.96);
}
:root[data-theme='dark'] .hero-stats {
  background: rgba(12, 12, 12, 0.65);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) header,
  :root:not([data-theme='light']) header.topo {
    background: rgba(0, 0, 0, 0.85);
    border-bottom-color: var(--neutral-30);
  }
  :root:not([data-theme='light']) header.scrolled {
    background: rgba(0, 0, 0, 0.96);
  }
  :root:not([data-theme='light']) .hero-stats {
    background: rgba(12, 12, 12, 0.65);
  }
}

/* Logo: o arquivo padrão é #282c35 (escuro) e some no fundo escuro. O site já
   tinha `logo-white.svg` pronto — troca o arquivo em vez de inverter com
   filtro, que desbotaria a cor da marca. */
:root[data-theme='dark'] .logo img,
:root[data-theme='dark'] header .logo img {
  content: url('imagens/logo-white.svg');
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo img,
  :root:not([data-theme='light']) header .logo img {
    content: url('imagens/logo-white.svg');
  }
}

/* Sombra preta sobre fundo escuro é invisível — a separação passa a vir da
   borda. Sem isto os cards "flutuam" no claro e somem no escuro. */
:root[data-theme='dark'] .recomendacao {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .recomendacao {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-30);
  }
}

/* Imagens de produto são screenshots da interface CLARA. No escuro elas ficam
   como um bloco branco no meio da página; um leve rebaixamento de brilho tira
   o choque sem descaracterizar o print. Volta ao normal no hover, para quem
   quiser ver a imagem fiel. */
:root[data-theme='dark'] img:not([src$='.svg']) {
  filter: brightness(0.92);
  transition: filter 0.2s ease;
}
:root[data-theme='dark'] img:not([src$='.svg']):hover {
  filter: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) img:not([src$='.svg']) {
    filter: brightness(0.92);
    transition: filter 0.2s ease;
  }
  :root:not([data-theme='light']) img:not([src$='.svg']):hover {
    filter: none;
  }
}

/* ==========================================================================
   Botão de alternar tema.
   Neutro de propósito: usa os tokens, então ele mesmo acompanha o tema.
   ========================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--neutral-30);
  border-radius: 10px;
  background: transparent;
  color: var(--neutral-300);
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--neutral-900);
  border-color: var(--neutral-50);
  background: var(--neutral-10);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* Um ícone por vez: sol quando está escuro (ação = clarear), lua quando está
   claro. O CSS decide qual aparece, então não há flash de ícone errado antes
   do JS rodar. */
.theme-toggle .icon-sun {
  display: none;
}
:root[data-theme='dark'] .theme-toggle .icon-sun {
  display: block;
}
:root[data-theme='dark'] .theme-toggle .icon-moon {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-sun {
    display: block;
  }
  :root:not([data-theme='light']) .theme-toggle .icon-moon {
    display: none;
  }
}

/* No menu mobile o botão vira item da lista, alinhado com os links. */
nav ul li.theme-toggle-item {
  display: flex;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  :root[data-theme='dark'] img:not([src$='.svg']) {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Encaixe do botão no header.

   O botão entra como filho direto de `.header-inner` (e não dentro de
   `nav ul`) de propósito: no mobile a lista vira dropdown com `display:none`,
   e o visitante ficaria sem como trocar o tema até abrir o menu.

   Como `.header-inner` é `space-between`, um terceiro filho jogaria o menu
   para o meio. O `margin-left:auto` no nav mantém o desenho original —
   logo à esquerda, menu e botão juntos à direita.
   -------------------------------------------------------------------------- */
header .header-inner,
header.topo .wrap {
  gap: 12px;
}
header .header-inner > nav {
  margin-left: auto;
}

@media (max-width: 768px) {
  /* No mobile o menu vira dropdown posicionado; a ordem visível passa a ser
     logo · tema · hambúrguer. */
  header .header-inner > nav {
    margin-left: 0;
    order: 4;
  }
  header .header-inner > .theme-toggle {
    order: 2;
    margin-left: auto;
  }
  header .header-inner > .mobile-toggle {
    order: 3;
  }
}

/* ==========================================================================
   TOKENS DE PAPEL

   O `--neutral-900` da rampa original faz DUAS coisas: é a cor do texto
   (97 usos) e é o fundo das seções pretas — footer, CTA, botão escuro,
   tooltip (25 usos). Inverter a rampa acerta o primeiro papel e quebra o
   segundo: o footer preto virou footer branco.

   A saída é dar nome ao papel. `--surface-inverse` é "a superfície que é
   escura nos DOIS temas"; no claro ela aponta para o preto da marca, no
   escuro para uma superfície levemente acima do fundo da página.

   Vantagem de fazer assim em vez de duplicar seletor: as regras abaixo são
   escritas UMA vez e valem nos dois temas — não existe uma versão clara e
   outra escura para sair de sincronia.
   ========================================================================== */
:root {
  --surface-inverse: var(--neutral-900);
  --on-inverse: var(--neutral-0);
  /* Texto sobre o verde-limão é sempre escuro: o lime é claro demais para
     receber texto branco em qualquer tema. */
  --on-primary: #131313;
  --on-inverse-muted: var(--neutral-60);
  --hatch-line: rgb(237, 237, 238);
  --field-bg: #ffffff;
  --tint-blue: #e8f4fd;
  --tint-purple: #f0e8ff;
  --tint-lime: #f2f7d8;
  --tint-sky: #e6f3fb;
  --fg-purple: #7c3aed;
}

:root[data-theme='dark'] {
  /* Um degrau acima do --page-bg (#0a0a0a) para o painel escuro não sumir
     dentro da página escura. */
  --surface-inverse: #0c0c0c;
  --on-inverse: #f7f7f7;
  --on-primary: #131313;
  /* --neutral-60 no escuro é #474747: cinza sobre o painel #141414 dá ~2:1.
     Este token mantém o secundário legível DENTRO do painel escuro. */
  --on-inverse-muted: #9a9a9a;
  --hatch-line: #1f1f1f;
  --field-bg: #0c0c0c;
  --tint-blue: #10202b;
  --tint-purple: #1c1630;
  --tint-lime: #1b2410;
  --tint-sky: #0f1e28;
  /* #7c3aed sobre o roxo escuro dá 2,5:1 — ilegível. Clareia. */
  --fg-purple: #c4a7ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface-inverse: #0c0c0c;
    --on-inverse: #f7f7f7;
    --on-primary: #131313;
    --on-inverse-muted: #9a9a9a;
    --hatch-line: #1f1f1f;
    --field-bg: #0c0c0c;
    --tint-blue: #10202b;
    --tint-purple: #1c1630;
    --tint-lime: #1b2410;
    --tint-sky: #0f1e28;
    --fg-purple: #c4a7ff;
  }
}

/* --------------------------------------------------------------------------
   Painéis que são escuros de propósito nos dois temas.
   Footer, seção de CTA, botão escuro, tooltip, plano em destaque.
   -------------------------------------------------------------------------- */
.footer-inner,
.cta-section,
.btn-dark,
.tooltip-text,
.audience-check,
.method-number,
.scope-icon,
.split-visual,
.price-card.featured .price-card-inner,
.mobile-plan.mobile-featured .mobile-plan-header {
  background: var(--surface-inverse);
}
/* Texto CLARO sobre painel escuro. Estes usavam `color: var(--neutral-0)`,
   que no tema escuro vira #141414 — a mesma cor do painel. Era o motivo de o
   título "Entrada" e o valor do plano sumirem: a cor existia, só era igual ao
   fundo. */
.btn-dark,
.btn-accent,
.step-number,
.tooltip-text,
.cta-section h2,
.price-card.featured .price-card-inner,
.price-card.featured .price-plan-name,
.price-card.featured .price-amount,
.mobile-plan.mobile-featured .mobile-plan-header,
.mobile-plan.mobile-featured .mobile-plan-header .mobile-plan-price {
  color: var(--on-inverse);
}

/* Secundários DENTRO do painel escuro (descrição, período, "/m", crédito). */
.price-card.featured .price-plan-desc,
.price-card.featured .price-period,
.price-card.featured .price-amount span,
.price-card.featured .price-credits,
.price-card.featured .price-annual-note,
.price-card.featured .price-original,
.mobile-plan.mobile-featured .mobile-plan-header .mobile-plan-credits {
  color: var(--on-inverse-muted);
}
.btn-dark:hover {
  background: var(--neutral-800);
}

/* Botões de marca: o lime é o mesmo nos dois temas, então o texto sobre ele
   também precisa ser. Sem isto, no escuro o `color: var(--neutral-900)` vira
   quase branco e o botão fica ilegível. */
.nav-cta,
.btn-primary,
.btn.primary,
.pricing-toggle,
.price-card.featured .btn {
  color: var(--on-primary) !important;
}

/* Serrilhado das seções (Perguntas frequentes, Impacto real, Insights,
   Engajamento): a linha era `rgb(237,237,238)` fixa — quase branca sobre
   fundo preto. Agora acompanha o tema.

   São DOIS pseudo-elementos, um por lateral: `::before` desenha a faixa da
   esquerda e `::after` a da direita. A regra original declara os dois juntos,
   então é fácil sobrescrever só um e corrigir metade da tela — foi o que
   aconteceu na primeira tentativa. */
.section-pattern::before,
.section-pattern::after {
  background: repeating-linear-gradient(
    45deg,
    var(--hatch-line),
    var(--hatch-line) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* Campos de formulário: `background: #fff` fixo virava um retângulo branco. */
.calc-campo input,
.campo input,
.campo select,
.campo textarea {
  background: var(--field-bg);
  color: var(--neutral-900);
}

/* Etiquetas e ícones com fundo pastel. O texto de cada um já é uma cor
   saturada (verde, azul, roxo...) que se mantém legível sobre o tom escuro
   equivalente — só o fundo e a borda precisavam acompanhar o tema. */
.sdr-tag.frio,
.card-icon.blue {
  background: var(--tint-blue);
}
.sdr-tag.potencial,
.card-icon.purple {
  background: var(--tint-purple);
}
.engage-card-green {
  background: var(--tint-lime);
}
.engage-card-blue {
  background: var(--tint-sky);
}
.sdr-tag.novo {
  background: var(--primary-50);
  border-color: var(--primary-100);
}
.sdr-tag.morno,
.sdr-tag.reengajar {
  background: var(--warning-50);
  border-color: var(--warning-100);
}
.sdr-tag.churn {
  background: var(--danger-50);
  border-color: var(--danger-100);
}
.sdr-tag.recorrente {
  background: var(--success-50);
  border-color: var(--success-100);
}
.pain-icon {
  background: var(--danger-50);
}
.content .highlight {
  background: var(--primary-50);
}

/* Texto das etiquetas: os valores estavam fixos (#9bb810, #05a8f1, ...) e no
   escuro ficavam sem contraste sobre o tom equivalente. Cada um vira o token
   correspondente, que já muda com o tema — no claro os valores continuam
   exatamente os mesmos de antes. */
.sdr-tag.novo {
  color: var(--primary-500);
}
.sdr-tag.morno {
  color: var(--warning-300);
}
.sdr-tag.frio {
  color: var(--chart-blue);
}
.sdr-tag.churn {
  color: var(--danger-300);
}
.sdr-tag.recorrente {
  color: var(--success-300);
}
.sdr-tag.reengajar {
  color: var(--chart-yellow);
}
.sdr-tag.potencial,
.card-icon.purple {
  color: var(--fg-purple);
}

/* --------------------------------------------------------------------------
   Banner e modal de cookies.

   O `cookies.js` injeta o próprio <style> em runtime, com as cores escritas à
   mão (#fff, #131313, #656b74, #ecedee). Como esse <style> entra no <head>
   DEPOIS deste arquivo, empatar em especificidade não basta — daí o prefixo
   `:root`, que sobe para (0,2,0) e vence.

   Os tokens usados aqui resolvem, no tema claro, exatamente para os mesmos
   valores que o JS escreve. Ou seja: nada muda de aparência no claro, e o
   escuro passa a funcionar. Não mexer no cookies.js é de propósito — o
   arquivo trata consentimento e não vale o risco de tocar por causa de cor.
   -------------------------------------------------------------------------- */
:root .cc-banner,
:root .cc-modal {
  background: var(--neutral-0);
  border-color: var(--neutral-30);
}
:root .cc-banner h3,
:root .cc-modal h3,
:root .cc-category-head h4 {
  color: var(--neutral-900);
}
:root .cc-banner p,
:root .cc-modal > p,
:root .cc-category p,
:root .cc-btn-link {
  color: var(--neutral-300);
}
:root .cc-btn-ghost {
  color: var(--neutral-900);
  border-color: var(--neutral-40);
}
:root .cc-btn-ghost:hover,
:root .cc-btn-link:hover {
  border-color: var(--neutral-900);
  color: var(--neutral-900);
}
:root .cc-category {
  border-top-color: var(--neutral-30);
}
:root .cc-category:last-of-type {
  border-bottom-color: var(--neutral-30);
}
:root .cc-toggle {
  background: var(--neutral-50);
}

/* --------------------------------------------------------------------------
   Accent das páginas de vertical (advogados = vermelho, automais/log = azul).

   Cada página define o próprio `--accent`/`--accent-light` no <style> inline,
   com os mesmos NOMES e valores diferentes. `--accent-light` é um tom pastel
   usado como fundo (21 usos) — e pastel não escurece sozinho: no tema escuro
   sobravam 35 a 55 blocos claros por página.

   Em vez de listar valor por página aqui (que sairia de sincronia no dia em
   que alguém mudar a cor da vertical), o tom escuro é DERIVADO do accent da
   própria página com `color-mix`. Trocar a cor da vertical continua sendo
   mexer num lugar só.

   `--accent-medium` é a variante já clara do accent (#ef4444 / #60a5fa) e
   serve de cor de texto sobre esse fundo escuro.
   -------------------------------------------------------------------------- */
:root[data-theme='dark'] {
  --accent-light: color-mix(
    in srgb,
    var(--accent-medium, var(--accent)) 16%,
    #0a0a0a
  );
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --accent-light: color-mix(
      in srgb,
      var(--accent-medium, var(--accent)) 16%,
      #0a0a0a
    );
  }
}

/* Texto/ícone sobre o fundo derivado: o `--accent` puro (#b91c1c) é escuro
   demais para o tom escuro. A variante `-medium` já é a versão clara. */
:root[data-theme='dark'] .hero-badge,
:root[data-theme='dark'] .solution-icon,
:root[data-theme='dark'] .pain-icon,
:root[data-theme='dark'] .step-number {
  color: var(--accent-medium, var(--accent));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero-badge,
  :root:not([data-theme='light']) .solution-icon,
  :root:not([data-theme='light']) .pain-icon,
  :root:not([data-theme='light']) .step-number {
    color: var(--accent-medium, var(--accent));
  }
}

/* `.product-tag` usa `--primary-700`, um degrau que não existe na rampa
   (ela vai até 500). No claro o valor herdado resolvia em oliva escuro, que
   sobre o fundo preto fica ilegível. Aponta para o lime da marca no escuro. */
:root[data-theme='dark'] .product-tag {
  color: var(--primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .product-tag {
    color: var(--primary);
  }
}
