/* ═══════════════════════════════════════════════════════════════
LIGHT THEME — inverte fundos/textos mantendo paleta de marca
(roxo --purple, azul --blue e gradiente --grad permanecem iguais)
Como aplicar (em index.html):
1) Em , troque class="dark" por class="light-theme"
e style="color-scheme:dark" por style="color-scheme:light"
2) Inclua este arquivo logo APÓS style.css no :
3) (Opcional) Troque a logo do nav e do footer para a versão escura:
assets/logo-roxo.svg → assets/logo-dark.svg
═══════════════════════════════════════════════════════════════ */
html.light-theme{
/* Fundos — espelham a hierarquia escura, agora claros */
--bg:#f7f5fc; /* era #0e0c1d */
--bg-card:#ffffff; /* era #1a1730 */
--bg-m:#fbfaff; /* era #15132a */
/* Bordas — alfa do roxo da marca + alfa escuro para sutilezas */
--border:rgba(124,104,241,.22); /* era rgba(124,104,241,.12) */
--border-s:rgba(14,12,29,.08); /* era rgba(255,255,255,.06) */
/* Texto — inversão direta do --fg escuro original */
--fg:#0e0c1d; /* era #f0eef6 */
--fg-m:rgba(14,12,29,.62); /* era rgba(240,238,246,.55) */
--fg-d:rgba(14,12,29,.42); /* era rgba(240,238,246,.35) */
/* Marca preservada: --purple, --purple-h, --blue, --grad iguais */
}
/* Overrides para valores hardcoded em style.css que usam alfa branco */
/* NAV — fundo translúcido claro, sombra sutil escura no scroll */
html.light-theme .nav{background:rgba(247,245,252,.78)}
html.light-theme .nav.scrolled{box-shadow:inset 0 -1px 0 0 rgba(14,12,29,.08)}
html.light-theme .nav__mob span{background:var(--fg)}
/* HERO glow — leve redução para não estourar no fundo claro */
html.light-theme .hero__glow-in{
background:
radial-gradient(ellipse 80% 60% at 50% 30%,rgba(124,104,241,.20) 0%,transparent 55%),
radial-gradient(ellipse 60% 50% at 30% 70%,rgba(113,181,248,.14) 0%,transparent 50%),
radial-gradient(ellipse 50% 40% at 70% 80%,rgba(167,139,250,.12) 0%,transparent 50%);
}
html.light-theme .hero__img{opacity:.10}
/* Botões */
html.light-theme .btn-g{
border-color:rgba(14,12,29,.14);
color:var(--fg);
}
html.light-theme .btn-g:hover{background:rgba(14,12,29,.04)}
/* Logos do carrossel — silhuetas pretas no fundo claro */
html.light-theme .flow__logo{
filter:brightness(0);
opacity:.55;
}
html.light-theme .flow__logo:hover{opacity:.85}
/* CTA final — glow um pouco mais leve */
html.light-theme .cta-f__glow-in{
background:
radial-gradient(ellipse 60% 40% at 50% 30%,rgba(124,104,241,.18) 0%,transparent 60%),
radial-gradient(ellipse 45% 35% at 35% 40%,rgba(113,181,248,.12) 0%,transparent 50%),
radial-gradient(ellipse 40% 30% at 65% 35%,rgba(167,139,250,.10) 0%,transparent 50%);
}
/* MODAL — overlay continua escuro (efeito dim) */
html.light-theme .ml{box-shadow:0 24px 64px rgba(14,12,29,.18)}
html.light-theme .ml__x{
background:rgba(14,12,29,.06);
color:var(--fg-m);
}
html.light-theme .ml__x:hover{background:rgba(14,12,29,.12)}
html.light-theme .ml__bar{background:rgba(14,12,29,.08)}
/* Form fields */
html.light-theme .fd input{
border-color:rgba(14,12,29,.14);
background:rgba(14,12,29,.025);
color:var(--fg);
}
html.light-theme .fd input:focus{
border-color:var(--purple);
box-shadow:0 0 0 3px rgba(124,104,241,.15);
}
html.light-theme .fd input:disabled{background:rgba(14,12,29,.015)}
/* Autocomplete dropdown */
html.light-theme .ac-list{
border-color:var(--border);
box-shadow:0 12px 32px rgba(14,12,29,.12);
}
html.light-theme .ac-list li:hover,
html.light-theme .ac-list li.hl{background:rgba(124,104,241,.10)}
/* Opções (radio cards) */
html.light-theme .opt{border-color:rgba(14,12,29,.10)}
html.light-theme .opt:hover{
border-color:rgba(124,104,241,.35);
background:rgba(124,104,241,.04);
}
html.light-theme .opt.sel{
border-color:var(--purple);
background:rgba(124,104,241,.06);
box-shadow:0 0 0 1px rgba(124,104,241,.20);
}
html.light-theme .opt__d{border-color:rgba(14,12,29,.20)}
/* Botões do form */
html.light-theme .fb{
background:rgba(14,12,29,.06);
color:var(--fg-m);
}
html.light-theme .fb:hover{background:rgba(14,12,29,.10)}
/* Spinner — borda escura no botão claro caso apareça fora de bg roxo */
html.light-theme .spn{border-color:rgba(14,12,29,.20);border-top-color:#fff}
/* Cards de plano em destaque — sombra colorida mais visível */
html.light-theme .pcard--pop{box-shadow:0 8px 32px rgba(124,104,241,.12)}
/* Imagens placeholders (meet/nr) — leve ajuste de fundo */
html.light-theme .meet__vis,
html.light-theme .nr__vis,
html.light-theme .about__img{background:#eeeaf7}