/* ==========================================================================
   Tema escuro do design system (classe .dark no <html>)

   Arquivo próprio do portal sobre as cópias fiéis do DS (premium-blue/, que
   não são editadas). A página da senha usa uma cópia deste arquivo
   (senha/css/tema-escuro.css) — ao mudar aqui, copie de novo (ver README).

   Regras:
   - Tudo em `html.dark` (especificidade maior que o `:root` e as classes do
     tema da instância, /api/marca/tema.css, que carrega depois): vale em
     qualquer ordem de carga e em qualquer marca.
   - Cores da marca não mudam. Tons claros da marca usados como fundo viram
     translúcidos sobre o escuro a partir dos canais da própria marca
     (--pb-ocean-rgb), nunca de um azul fixo.
   - Contraste AA: texto no acento usa o tom suave da própria marca
     (--pb-blue-soft), porque o tom de texto do claro fica abaixo de 4,5:1
     sobre o fundo escuro. Preenchimentos continuam no tom cheio (--pb-ocean).
   - Seções já escuras (--pb-dark-*) passam a grafite neutro (fim do arquivo).
   - Nada de cor literal da marca aqui (o gerador de tema das marcas não pode
     confundir estas regras com regras da paleta clara).
   ========================================================================== */

html.dark {
  color-scheme: dark;

  /* ---------- Neutros ---------- */
  --pb-ink: #f5f5f7;
  --pb-ink-mid: #d1d1d6;
  --pb-muted: #a1a1a6;
  --pb-paper: #1c1c1e;          /* superfícies (cards, inputs, botões claros) */
  --pb-off-white: #0c0c0d;      /* faixas alternadas, rodapé de modal, linha em destaque */
  --pb-line: #2e2e30;
  --pb-line-strong: #3a3a3c;
  --pagina: #000000;            /* fundo da página */

  /* Canais que o tailwind.config lê */
  --pb-ink-rgb: 232 237 245;
  --pb-ink-mid-rgb: 201 211 225;
  --pb-muted-rgb: 147 160 180;
  --pb-line-rgb: 31 41 57;
  --pb-line-strong-rgb: 38 50 69;
  --superficie-rgb: 15 21 34;   /* bg-white */
  --fundo-suave-rgb: 11 16 25;  /* bg-off-white */

  /* Tinta com opacidade: mesmas opacidades sobre o texto claro */
  --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);

  /* ---------- Acento em texto (AA) ---------- */
  --pb-blue: var(--pb-blue-soft);
  --pb-blue-strong: var(--pb-blue-hover);
  --pb-blue-rgb: var(--pb-blue-soft-rgb);
  --pb-blue-strong-rgb: var(--pb-blue-hover-rgb);
  --pb-indigo: var(--pb-indigo-light);

  /* ---------- Tons claros da marca → translúcidos ---------- */
  --pb-navy-light: rgb(var(--pb-ocean-rgb) / 0.14);
  --pb-navy-light-rgb: var(--pb-ocean-rgb);
  --tom-claro-alfa: 0.14;       /* bg-navy-light: canal da marca × 0,14 */
  --pb-navy-border: rgb(var(--pb-ocean-rgb) / 0.24);

  /* ---------- Estados ---------- */
  --pb-success: #34d399;         /* verde de texto legível no escuro */
  --pb-success-rgb: 52 211 153;
  --pb-success-bg: rgb(5 150 105 / 0.14);
  --pb-success-soft: rgb(16 185 129 / 0.14);
  --pb-success-border: rgb(16 185 129 / 0.3);
  --pb-danger: #f87171;          /* vermelho de texto legível no escuro */
  --pb-danger-rgb: 248 113 113;
  --aviso-rgb: 251 191 36;       /* text-warning */
  --aviso-bg-rgb: 245 158 11;    /* bg-warning-bg (translúcido) */
  --aviso-bg-alfa: 0.14;

  /* ---------- Gradientes de fundo claro ---------- */
  --pb-grad-hero-light:
    radial-gradient(80% 60% at 50% 0, rgb(var(--pb-ocean-rgb) / 0.05), transparent 70%),
    linear-gradient(180deg, #111113 0%, #0a0a0b 60%, #000000 100%);
  --pb-grad-band: linear-gradient(180deg, #111113 0%, #000000 100%);
  --pb-grad-page-flow: linear-gradient(180deg, #111113 0%, #000000 12%, #000000 100%);
  --pb-grad-soft-tint: linear-gradient(135deg, rgb(var(--pb-ocean-rgb) / 0.14) 0%, rgb(var(--pb-ocean-rgb) / 0.05) 100%);
  /* Palavra em gradiente nos títulos: tons claros da própria marca (o tom de
     texto do claro fica abaixo de 3:1 no escuro em algumas marcas). Só a
     variável muda: o .pb-text-gradient mantém o background-clip: text. */
  --pb-grad-text: linear-gradient(95deg, var(--pb-blue-hover) 0%, var(--pb-blue-soft) 50%, var(--pb-cyan) 100%);
  --pb-grad-glass: linear-gradient(160deg, rgb(28 28 30 / 0.84) 0%, rgb(28 28 30 / 0.66) 55%, rgb(28 28 30 / 0.54) 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.32);
  --pb-shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.04), 0 8px 24px rgb(0 0 0 / 0.36);
  --pb-shadow-xl: 0 0 0 1px rgb(255 255 255 / 0.05), 0 18px 44px rgb(0 0 0 / 0.5);
  --pb-shadow-glass: inset 0 1px 0 rgb(255 255 255 / 0.05), 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)) rgb(255 255 255 / 0.06);
}

/* ---------- Página ---------- */
html.dark body { background: var(--pagina); }
html.dark ::-webkit-scrollbar-track { background: rgb(255 255 255 / 0.04); }
html.dark .pb-aurora { opacity: 0.55; }
@media (max-width: 767px) {
  html.dark .pb-aurora { opacity: 0.3; }
}

/* ---------- Superfícies brancas do DS → superfície escura ---------- */
html.dark :is(.pb-card, .pb-price-card, .pb-btn--secondary, .pb-btn--outline, .pb-icon-btn,
  .pb-chip, .pb-ribbon, .pb-testimonial) {
  background: var(--pb-paper);
}
html.dark .pb-faq__item summary::after { background: var(--pb-paper); }
html.dark .pb-price-card--featured { background: rgb(var(--pb-ocean-rgb) / 0.08); }
html.dark .pb-input { background: var(--pb-off-white); }
html.dark .pb-input:hover { border-color: var(--pb-line-strong); }
html.dark .pb-input:focus { border-color: rgb(var(--pb-ocean-rgb) / 0.6); }
html.dark .pb-glass { border-color: rgb(255 255 255 / 0.06); }
html.dark .pb-segmented { background: rgb(28 28 30 / 0.7); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.03); }
html.dark .pb-logo-tile,
html.dark .pb-logo-tile:hover {
  background: rgb(var(--pb-ocean-rgb) / 0.12);
  box-shadow: inset 0 0 0 1px rgb(var(--pb-ocean-rgb) / 0.22);
}
html.dark .pb-logo-tile:hover { box-shadow: inset 0 0 0 1px rgb(var(--pb-ocean-rgb) / 0.36), 0 6px 16px rgb(0 0 0 / 0.35); }
html.dark .pb-promo-btn { background: var(--pb-paper); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06); }

/* Botões brancos de propósito (fundo branco também no escuro): texto escuro. */
html.dark .pb-btn--white,
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(--pagina);
}

/* Realces que eram "tinta a 4%" sobre branco */
html.dark .pb-nav-link:hover,
html.dark .pb-nav-link[aria-current="page"] { background: rgb(255 255 255 / 0.07); }
html.dark .pb-btn--quiet:hover { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.2); }
html.dark .pb-segmented__item:not([aria-pressed="true"], .is-active) { color: var(--pb-muted); }
html.dark .pb-segmented__item:not([aria-pressed="true"], .is-active):hover { color: var(--pb-ink); }
html.dark .pb-table tbody tr:hover { background: rgb(255 255 255 / 0.035); }
html.dark .pb-avatar { box-shadow: 0 0 0 2px var(--pagina), 0 0 0 4px rgb(var(--pb-ocean-rgb) / 0.35); }
html.dark .pb-badge--solid { background: var(--pb-ocean); color: #fff; }
html.dark .pb-switch input:checked + .pb-switch__track { background: var(--pb-ocean); }
html.dark .pb-text-accent-soft { color: rgb(var(--pb-blue-soft-rgb) / 0.8); }
html.dark ::selection { background: rgb(var(--pb-ocean-rgb) / 0.35); }

/* ---------- Chave de tema (portal e página da senha) ---------- */
/* Botão redondo; sol no claro, lua no escuro, trocando com giro e escala. */
.tema-chave {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--pb-radius-full);
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: inherit;
  cursor: pointer;
  transition: background var(--pb-duration-fast) var(--pb-ease-standard),
    border-color var(--pb-duration-fast) var(--pb-ease-standard),
    transform var(--pb-duration-medium) var(--pb-ease-out);
}
.tema-chave:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  transform: translateY(-1px);
}
.tema-chave:focus-visible { outline: 2px solid var(--pb-blue-soft); outline-offset: 2px; }
.tema-chave svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  max-width: none;
  transition: transform 300ms var(--pb-ease-out), opacity 300ms var(--pb-ease-out);
}
.tema-chave__sol { transform: rotate(0) scale(1); opacity: 1; }
.tema-chave__lua { transform: rotate(-90deg) scale(0.4); opacity: 0; }
html.dark .tema-chave__sol { transform: rotate(90deg) scale(0.4); opacity: 0; }
html.dark .tema-chave__lua { transform: rotate(0) scale(1); opacity: 1; }

/* Transição suave das cores só durante a troca (classe posta por ~220 ms). */
html.tema-trocando,
html.tema-trocando *,
html.tema-trocando *::before,
html.tema-trocando *::after {
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease,
    fill 220ms ease, stroke 220ms ease, box-shadow 220ms ease !important;
}
/* O sol e a lua mantêm o próprio giro durante a troca. */
html.tema-trocando .tema-chave svg {
  transition: transform 300ms var(--pb-ease-out), opacity 300ms var(--pb-ease-out) !important;
}
@media (prefers-reduced-motion: reduce) {
  .tema-chave svg,
  html.tema-trocando .tema-chave svg { transition: none !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);
  --pb-dark-900-rgb: 0 0 0;
  --pb-dark-800-rgb: 10 10 11;
  --pb-dark-700-rgb: 17 17 19;
  --pb-dark-600-rgb: 22 22 24;
  --pb-dark-500-rgb: 35 35 37;
}

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