/* ==========================================================================
   Tema escuro da página de downloads + chave sol/lua do cabeçalho.
   Incluído depois do design system, do CSS da página e do tema da marca.
   As cópias em ./premium-blue/ continuam fiéis e não são editadas.

   - Ativação: classe "dark" no <html> (script no <head>; preferência em
     localStorage "tema" = "claro" | "escuro"; sem escolha, segue o sistema).
   - Tudo do escuro fica sob html.dark: o tema da marca redefine os neutros
     em :root e html.dark (especificidade maior) vence em qualquer ordem.
   - Cores de marca (--pb-blue, --pb-ocean…) não mudam; os tons claros
     usados como fundo viram a cor da marca translúcida (color-mix com a
     variável da marca — nenhuma cor de marca fixada aqui).
   - Seções que já são escuras (--pb-dark-*, rodapé, painel do hero) passam
     a grafite neutro (fim do arquivo).
   - Tema claro: nada aqui vale sem html.dark, exceto a própria chave.
   ========================================================================== */

/* ---------- Chave sol/lua (vale nos dois temas) ---------- */
.dl-tema {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--pb-ink-a08);
  border-radius: var(--pb-radius-full);
  background: transparent;
  color: var(--pb-ink-a70);
  cursor: pointer;
  transition: color var(--pb-duration-base), background-color var(--pb-duration-base), border-color var(--pb-duration-base), transform var(--pb-duration-base);
}
.dl-tema:hover { color: var(--pb-ink); background-color: var(--pb-ink-a04); border-color: var(--pb-ink-a18); }
.dl-tema:active { transform: scale(0.94); }
.dl-tema:focus-visible { outline: 2px solid var(--pb-blue-soft); outline-offset: 2px; }
/* Header escuro ao rolar: mesmo tratamento do botão discreto do DS. */
.pb-header.is-scrolled .dl-tema { color: rgb(255 255 255 / 0.8); border-color: rgb(255 255 255 / 0.14); }
.pb-header.is-scrolled .dl-tema:hover { color: #fff; background-color: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.28); }
/* Sol e lua empilhados; troca com giro e escala (~300 ms). */
.dl-tema svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  max-width: none;
  transition: transform 0.3s var(--pb-ease-out), opacity 0.3s var(--pb-ease-out);
}
.dl-tema__lua { opacity: 0; transform: rotate(-90deg) scale(0.5); }
html.dark .dl-tema__sol { opacity: 0; transform: rotate(90deg) scale(0.5); }
html.dark .dl-tema__lua { opacity: 1; transform: none; }

/* Transição suave das cores só durante a troca (classe posta por ~220 ms). */
html.tema-transicao,
html.tema-transicao *,
html.tema-transicao *::before,
html.tema-transicao *::after {
  transition-property: background-color, color, border-color, fill, stroke, box-shadow !important;
  transition-duration: 0.22s !important;
  transition-timing-function: ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .dl-tema svg { transition: none; }
  html.tema-transicao,
  html.tema-transicao *,
  html.tema-transicao *::before,
  html.tema-transicao *::after { transition: none !important; }
}

/* ---------- Paleta escura ---------- */
html.dark {
  color-scheme: dark;

  --pb-ink: #f5f5f7;
  --pb-ink-mid: #d1d1d6;
  --pb-muted: #a1a1a6;
  --pb-paper: #1c1c1e;
  --pb-off-white: #0c0c0d;
  --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 usados como fundo → cor translúcida sobre o escuro. */
  --pb-navy-light: color-mix(in srgb, var(--pb-blue) 14%, transparent);
  --pb-success-bg: color-mix(in srgb, var(--pb-success) 14%, transparent);

  /* Fundos em gradiente claro → escuros (o hero com um leve toque da marca). */
  --pb-grad-hero-light: radial-gradient(70% 60% at 50% 0, color-mix(in srgb, var(--pb-blue) 5%, transparent), transparent), linear-gradient(180deg, #111113 0%, #0c0c0d 55%, #000000 100%);
  --pb-grad-page-flow: linear-gradient(180deg, #000000 0%, #000000 100%);
  --pb-grad-band: linear-gradient(180deg, #0c0c0d 0%, #000000 100%);
  --pb-grad-glass: linear-gradient(160deg, rgb(255 255 255 / 0.06) 0%, rgb(255 255 255 / 0.03) 55%, rgb(255 255 255 / 0.02) 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.3);
  --pb-shadow-md: 0 0 0 1px rgb(255 255 255 / 0.04), 0 4px 12px rgb(0 0 0 / 0.35);
  --pb-shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.04), 0 8px 24px rgb(0 0 0 / 0.4);
  --pb-shadow-xl: 0 0 0 1px rgb(255 255 255 / 0.04), 0 18px 44px rgb(0 0 0 / 0.5);
  --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);

  /* Tinta original (texto escuro) para os poucos fundos que continuam brancos. */
  --tema-tinta-escura: #0c0c0d;
  --tema-superficie: #1c1c1e;

  scrollbar-color: var(--pb-blue) rgb(255 255 255 / 0.06);
}

html.dark body { background-color: #000000; color: var(--pb-ink); }
html.dark ::-webkit-scrollbar-track { background-color: rgb(255 255 255 / 0.05); }

/* ---------- Superfícies brancas do DS → superfície escura ---------- */
/* :where() mantém a especificidade baixa: as regras de contexto escuro do DS
   (:is(.pb-dark-shell, …) .pb-chip etc.) continuam valendo sobre estas. */
html.dark :where(.pb-card, .pb-price-card, .pb-btn--secondary, .pb-btn--outline, .pb-icon-btn, .pb-chip, .pb-ribbon, .pb-input, .pb-testimonial, .pb-logo-tile) {
  background-color: var(--tema-superficie);
}
html.dark .pb-faq__item summary::after { background-color: var(--tema-superficie); }
html.dark .pb-logo-tile,
html.dark .pb-logo-tile:hover { box-shadow: var(--pb-shadow-sm); }
html.dark .pb-segmented { background-color: rgb(255 255 255 / 0.04); box-shadow: none; }
/* Cartão em destaque: superfície com um véu da cor da marca. */
html.dark .pb-price-card--featured { background-color: color-mix(in srgb, var(--pb-blue) 7%, var(--tema-superficie)); }

/* Fundos que continuam brancos em contexto escuro (primário do DS): texto escuro. */
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,
html.dark .pb-btn--white { color: var(--tema-tinta-escura); }

/* ---------- Texto de acento: tom claro da marca (AA sobre o escuro) ---------- */
html.dark .pb-kicker,
html.dark .pb-eyebrow,
html.dark .pb-text-accent,
html.dark .pb-chip__icon,
html.dark .pb-check::before,
html.dark .pb-badge--blue,
html.dark .pb-faq__item summary:hover,
html.dark .pb-faq__item[open] summary::after,
html.dark .pb-faq__answer a,
html.dark .pb-price-card--featured .pb-price-card__price { color: var(--pb-blue-soft); }
html.dark .pb-ribbon,
html.dark .pb-badge--indigo { color: var(--pb-indigo-light); }
html.dark .pb-text-accent-soft { color: color-mix(in srgb, var(--pb-blue-soft) 85%, transparent); }
/* Eyebrow em seção escura: mantém o tratamento do DS (branco translúcido). */
html.dark :is(.pb-on-dark, .pb-dark-shell, .pb-hero-dark, .pb-dark-panel, .pb-dark-card, .pb-price-card--dark) .pb-eyebrow { color: rgb(255 255 255 / 0.6); }

/* Textos pequenos que usam tinta a 45% (abaixo de 4,5:1): cinza secundário. */
html.dark .pb-price-card__plan,
html.dark .pb-price-card__note,
html.dark .pb-segmented__item:not([aria-pressed="true"]):not(.is-active) { color: var(--pb-muted); }
html.dark .pb-segmented__item:not([aria-pressed="true"]):not(.is-active):hover { color: var(--pb-ink); }
/* Botão ativo do segmentado: contorno para destacar do cartão escuro. */
html.dark .pb-segmented__item[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }

/* ---------- Navegação do cabeçalho (sobre o hero) ---------- */
html.dark .pb-nav-link:hover,
html.dark .pb-nav-link[aria-current="page"],
html.dark .dl-nav-link[aria-current="location"] { color: var(--pb-ink); background-color: rgb(255 255 255 / 0.07); }
html.dark .pb-header.is-scrolled .pb-nav-link:hover,
html.dark .pb-header.is-scrolled .dl-nav-link[aria-current="location"] { color: #fff; background-color: rgb(255 255 255 / 0.07); }
html.dark .pb-btn--quiet:hover { background-color: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.2); }
html.dark .dl-brand .pb-text-accent { color: var(--pb-blue-soft); }

/* ---------- Partes próprias da página ---------- */
/* Aviso da versão beta (âmbar claro → âmbar translúcido). */
html.dark .dl-alert { color: #fcd34d; background-color: rgb(245 158 11 / 0.12); border-color: rgb(245 158 11 / 0.32); }
html.dark .dl-alert strong { color: #fde68a; }
/* Painel do hero (já escuro): só um contorno para não sumir no fundo. */
html.dark .dl-console { box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.08) inset, 0 0 0 1px rgb(255 255 255 / 0.04); }
/* Logo da marca: contorno sutil no lugar da sombra clara. */
html.dark .dl-brand img { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 6px rgb(0 0 0 / 0.4); }
/* Aviso "preparando seu download": véu mais fechado sobre o fundo escuro. */
html.dark .dl-overlay.is-active { background-color: rgb(0 0 0 / 0.6); }
/* A troca de cores não pode congelar o giro do sol/lua (mesma duração da chave). */
html.tema-transicao .dl-tema svg {
  transition-property: transform, opacity !important;
  transition-duration: 0.3s !important;
  transition-timing-function: var(--pb-ease-out) !important;
}

/* 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);
}

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

/* 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);
}