/* ==========================================================================
   Tema escuro da landing (index.html e funcionalidades.html)
   Ativado pela classe "dark" no <html> (js/tema-init.js, antes da pintura).
   Tudo fica sob html.dark: a especificidade maior que :root garante que os
   tokens daqui vençam qualquer camada de cores carregada depois, sem depender
   da ordem das folhas. O tema claro não é tocado por este arquivo (só a chave
   .lp-tema, no fim, vale para os dois temas).
   Cores da marca (--pb-blue, --pb-ocean…) não mudam; tons claros da marca
   usados como fundo viram a própria cor translúcida (color-mix).
   ========================================================================== */

html.dark {
  color-scheme: dark;

  /* ---------- Neutros ---------- */
  --pb-ink: #f5f5f7;
  --pb-ink-mid: #d1d1d6;
  --pb-muted: #a1a1a6;
  --pb-paper: #1c1c1e;          /* superfícies (cartões) */
  --pb-off-white: #0c0c0d;      /* seção alternada */
  --pb-line: #2e2e30;
  --pb-line-strong: #3a3a3c;

  --pb-ink-a90: rgb(245 245 247 / 0.86);
  --pb-ink-a70: rgb(245 245 247 / 0.72);
  --pb-ink-a60: rgb(245 245 247 / 0.58);
  --pb-ink-a55: rgb(245 245 247 / 0.55);
  --pb-ink-a45: rgb(245 245 247 / 0.45);
  --pb-ink-a22: rgb(245 245 247 / 0.22);
  --pb-ink-a18: rgb(245 245 247 / 0.18);
  --pb-ink-a14: rgb(245 245 247 / 0.14);
  --pb-ink-a08: rgb(245 245 247 / 0.08);
  --pb-ink-a07: rgb(245 245 247 / 0.07);
  --pb-ink-a04: rgb(245 245 247 / 0.04);

  /* ---------- Tons claros da marca usados como fundo → translúcidos ---------- */
  --pb-navy-light: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 14%, transparent);
  --pb-navy-border: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 24%, transparent);
  --pb-success-bg: rgb(16 185 129 / 0.14);
  --pb-success-soft: rgb(16 185 129 / 0.14);
  --pb-success-border: rgb(16 185 129 / 0.3);
  --pb-success: #34d399;        /* texto verde legível no escuro */

  /* ---------- Gradientes de fundo claros → escuros ---------- */
  --pb-grad-hero-light:
    radial-gradient(70% 60% at 50% 0, color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 5%, transparent), transparent),
    linear-gradient(180deg, #111113 0%, #0a0a0b 60%, #000000 100%);
  --pb-grad-band: linear-gradient(180deg, #0c0c0d 0%, #000000 100%);
  --pb-grad-page-flow: linear-gradient(180deg, #000000 0%, #000000 100%);
  --pb-grad-glass: linear-gradient(160deg, rgb(28 28 30 / 0.82) 0%, rgb(28 28 30 / 0.66) 55%, rgb(28 28 30 / 0.55) 100%);
  /* Palavra em gradiente: começa no tom suave da marca para ler bem no escuro */
  --pb-grad-text: linear-gradient(95deg, var(--pb-blue-soft) 0%, var(--pb-blue-hover) 50%, var(--pb-cyan) 100%);

  /* ---------- Sombras: contorno sutil + sombra preta suave ---------- */
  --pb-shadow-xs: 0 0 0 1px rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.3);
  --pb-shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.04), 0 2px 6px rgb(0 0 0 / 0.28);
  --pb-shadow-md: 0 0 0 1px rgb(255 255 255 / 0.04), 0 4px 12px rgb(0 0 0 / 0.3);
  --pb-shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.04), 0 8px 24px rgb(0 0 0 / 0.34);
  --pb-shadow-xl: 0 0 0 1px rgb(255 255 255 / 0.04), 0 18px 44px rgb(0 0 0 / 0.45);
  --pb-shadow-glass: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.04), 0 10px 24px rgb(0 0 0 / 0.35);

  scrollbar-color: var(--pb-ocean, var(--pb-blue)) #0c0c0d;
}

/* Fundo da página */
html.dark body { background: #000000; }

/* ---------- Superfícies que eram brancas → cartão escuro ---------- */
html.dark .pb-card,
html.dark .pb-price-card,
html.dark .pb-chip,
html.dark .pb-ribbon,
html.dark .pb-icon-btn,
html.dark .pb-btn--secondary,
html.dark .pb-btn--outline,
html.dark .pb-input,
html.dark .pb-testimonial,
html.dark .pb-faq__item summary::after { background: var(--pb-paper); }
html.dark .pb-btn--secondary { border-color: var(--pb-line-strong); }
html.dark .pb-price-card--featured { background: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 6%, var(--pb-paper)); }
html.dark .pb-logo-tile { background: var(--pb-paper); box-shadow: inset 0 0 0 1px var(--pb-line); }
html.dark .pb-logo-tile:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 30%, transparent), 0 6px 16px rgb(0 0 0 / 0.35); }
html.dark .pb-segmented { background: rgb(255 255 255 / 0.04); border-color: var(--pb-line); box-shadow: none; }
html.dark .pb-segmented__item:not(.is-active):not([aria-pressed="true"]) { color: var(--pb-ink-a70); }
html.dark .pb-segmented__item:not(.is-active):not([aria-pressed="true"]):hover { color: var(--pb-ink); }
html.dark .pb-glass,
html.dark .pb-rating { border-color: rgb(255 255 255 / 0.08); }
html.dark .pb-rating { background: rgb(28 28 30 / 0.6); }
html.dark .pb-avatar { box-shadow: 0 0 0 2px var(--pb-paper), 0 0 0 4px color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 30%, transparent); }
html.dark .pb-btn--white { color: var(--pb-dark-900); }
html.dark .pb-help:hover,
html.dark .pb-btn--quiet:hover { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.2); }

/* Navegação do cabeçalho no topo (sem rolar): realce claro em vez de tinta escura */
html.dark .pb-nav-link:hover,
html.dark .pb-nav-link[aria-current="page"] { background: rgb(255 255 255 / 0.06); }

/* ---------- Acentos em texto: tom suave da marca (AA no fundo escuro) ---------- */
html.dark .pb-text-accent,
html.dark .pb-kicker,
html.dark .pb-eyebrow,
html.dark .pb-chip__icon,
html.dark .pb-check::before,
html.dark .pb-badge--blue,
html.dark .pb-feature-list li::before,
html.dark .pb-rating__stars,
html.dark .pb-faq__answer a,
html.dark .pb-faq__item summary:hover,
html.dark .pb-faq__item[open] summary::after,
html.dark .pb-text-accent-soft,
html.dark .pb-price-card--featured .pb-price-card__price { color: var(--pb-blue-soft); }
html.dark .pb-eyebrow {
  background: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 10%, transparent);
  border-color: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 28%, transparent);
}
html.dark .pb-badge--blue {
  background: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 14%, transparent);
  border-color: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 32%, transparent);
}
html.dark .pb-badge--indigo { color: var(--pb-indigo-light); }
html.dark .pb-feature-list li.is-success { color: var(--pb-success); }
html.dark .pb-input::placeholder { color: var(--pb-ink-a60); }
html.dark ::selection { color: #fff; background: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 45%, transparent); }

/* ---------- Contextos que já são escuros (cores em grafite no fim do arquivo) ----------
   As regras acima têm especificidade maior que as do DS para esses blocos;
   aqui elas voltam aos valores originais do DS (texto claro sobre o escuro). */
html.dark :is(.pb-on-dark, .pb-dark-shell, .pb-hero-dark, .pb-dark-panel, .pb-dark-card, .pb-price-card--dark) .pb-chip {
  color: rgb(255 255 255 / 0.7); background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.1);
}
html.dark :is(.pb-on-dark, .pb-dark-shell, .pb-hero-dark, .pb-dark-panel, .pb-dark-card, .pb-price-card--dark) .pb-eyebrow,
html.dark .pb-eyebrow.pb-eyebrow--dark {
  color: rgb(255 255 255 / 0.6); background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.08);
}
html.dark :is(.pb-on-dark, .pb-dark-shell, .pb-hero-dark, .pb-dark-panel, .pb-dark-card, .pb-price-card--dark) .pb-input {
  color: #fff; background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.1);
}
html.dark :is(.pb-on-dark, .pb-dark-shell, .pb-hero-dark, .pb-dark-panel, .pb-dark-card, .pb-price-card--dark) .pb-kicker { color: rgb(255 255 255 / 0.6); }
/* Primário em contexto escuro é branco no DS, com texto em --pb-ink: no tema
   escuro o --pb-ink é claro, então o texto passa ao tom mais escuro da marca. */
html.dark :is(.pb-on-dark, .pb-dark-shell, .pb-hero-dark, .pb-dark-panel, .pb-dark-card, .pb-price-card--dark, .pb-header.is-scrolled) .pb-btn--primary { color: var(--pb-dark-900); }
html.dark .pb-dark-card,
html.dark .pb-price-card--dark { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.04), 0 8px 24px rgb(0 0 0 / 0.4); }

/* ---------- Peças próprias da landing ---------- */
/* Janela ilustrativa do PDV no hero */
html.dark .lp-window {
  background: var(--pb-paper);
  border-color: rgb(255 255 255 / 0.06);
  box-shadow: 0 0 0 1px var(--pb-line), 0 2px 6px rgb(0 0 0 / 0.3), 0 34px 80px -24px rgb(0 0 0 / 0.7);
}
html.dark .lp-pay {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 7%, var(--pb-paper)) 0%,
    color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 4%, var(--pb-off-white)) 100%);
}
html.dark .lp-pay__method { background: var(--pb-off-white); }
html.dark .lp-pay__method.is-on {
  color: var(--pb-blue-soft);
  background: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 14%, var(--pb-paper));
  border-color: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 16%, transparent);
}
html.dark .lp-chip-scale { background: var(--pb-paper); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.04), 0 10px 26px -8px rgb(0 0 0 / 0.6); }
html.dark .lp-stage::before { opacity: 0.6; }
html.dark .lp-kpi { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.04), 0 24px 50px -16px rgb(0 0 0 / 0.7); }
html.dark .lp-brand img { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06); }

/* Ícones dos destaques (Fiscal) e tiles de funcionalidade */
html.dark .lp-point__icon { color: var(--pb-blue-soft); background: var(--pb-paper); }
html.dark .lp-feature .pb-logo-tile { color: var(--pb-blue-soft); }
html.dark :is(.lp-feature, .lp-feat, .lp-app) .pb-logo-tile {
  background: var(--pb-navy-light);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 22%, transparent);
}
/* Tiles dentro da seção escura continuam com o vidro branco do DS */
html.dark .pb-dark-shell .lp-feat .pb-logo-tile { background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }

/* Botão flutuante do WhatsApp: contorno para destacar do fundo escuro */
html.dark .lp-wa-float { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 26px rgb(0 0 0 / 0.5); }

/* Imagens: um pouco menos de brilho para não estourar no escuro */
html.dark main img { filter: brightness(0.92); }

/* ---------- Transição suave só durante a troca de tema ---------- */
html.tema-transicao,
html.tema-transicao *,
html.tema-transicao *::before,
html.tema-transicao *::after {
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, fill 220ms ease, stroke 220ms ease, box-shadow 220ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.tema-transicao,
  html.tema-transicao *,
  html.tema-transicao *::before,
  html.tema-transicao *::after { transition: none !important; }
}

/* ==========================================================================
   Chave de tema (cabeçalho) — vale para os dois temas
   Receita do .pb-icon-btn em formato redondo, do tamanho do .pb-btn--sm.
   Mostra a lua no claro (vai para o escuro) e o sol no escuro.
   ========================================================================== */
.lp-tema {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius-full);
  background: var(--pb-paper);
  color: var(--pb-ink-a70);
  box-shadow: var(--pb-shadow-xs);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--pb-duration-base), border-color var(--pb-duration-base), color var(--pb-duration-base), background-color var(--pb-duration-base);
}
.lp-tema:hover {
  color: var(--pb-ink);
  border-color: color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 35%, transparent);
  transform: translateY(-1px);
}
.lp-tema:focus-visible { outline: 2px solid var(--pb-blue-soft); outline-offset: 2px; }
.lp-tema__icone {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  max-width: none;
  transition: transform 300ms var(--pb-ease-out), opacity 300ms var(--pb-ease-out);
}
.lp-tema__sol { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.lp-tema__lua { opacity: 1; transform: rotate(0) scale(1); }
html.dark .lp-tema__sol { opacity: 1; transform: rotate(0) scale(1); }
html.dark .lp-tema__lua { opacity: 0; transform: rotate(90deg) scale(0.5); }
/* O ícone gira mesmo durante a transição de cores (que usa !important) */
html.tema-transicao .lp-tema .lp-tema__icone { transition: transform 300ms var(--pb-ease-out), opacity 300ms var(--pb-ease-out) !important; }

/* Cabeçalho escuro ao rolar: mesma receita do .pb-btn--quiet no escuro */
.pb-header.is-scrolled .lp-tema {
  color: rgb(255 255 255 / 0.8);
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.14);
  box-shadow: none;
}
.pb-header.is-scrolled .lp-tema:hover { color: #fff; background: rgb(255 255 255 / 0.1); }
@media (prefers-reduced-motion: reduce) {
  .lp-tema__icone { transition: opacity 0.01ms; }
}

/* Seções que já eram escuras (topo, rodapé, painéis) também em grafite neutro
   no modo escuro — padrão do modo escuro do macOS, sem azul-marinho. */
html.dark {
  --pb-dark-900: #000000;
  --pb-dark-800: #0a0a0b;
  --pb-dark-700: #111113;
  --pb-dark-600: #161618;
  --pb-dark-500: #232325;
  /* Botão principal no escuro: cor de destaque da marca (como no macOS). */
  --pb-grad-cta: var(--pb-grad-blue);
  /* Brilhos das seções escuras: só um reflexo leve da marca sobre o preto. */
  --pb-grad-dark-shell: radial-gradient(60% 70% at 10% 50%, color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 9%, transparent), transparent);
  --pb-grad-hero-dark: radial-gradient(70% 60% at 50% 0, color-mix(in srgb, var(--pb-ocean, var(--pb-blue)) 8%, transparent), transparent);
}

/* Halo atrás da cena do PDV mais discreto sobre o preto. */
html.dark .lp-stage::before { opacity: .45; }

/* Auroras (manchas de cor desfocadas) quase apagadas sobre o preto. */
html.dark .pb-aurora { opacity: .2; }

/* Destaque do título do topo no escuro: prata metálico com branco (só a
   imagem de fundo — mantém o background-clip: text do DS). */
html.dark .lp-hero__title .pb-text-gradient {
  background-image: linear-gradient(180deg, #ffffff 0%, #f2f2f7 30%, #c7c7cc 62%, #8e8e93 100%);
}

/* Cabeçalho rolado no escuro: grafite translúcido com desfoque (barra do macOS). */
html.dark .pb-header.is-scrolled {
  background: rgb(22 22 24 / 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06);
}