/* Tema escuro. Ativado por .
Estratégia: inverte os tokens (creme <-> verde) e ajusta o que tem cor fixa. */
/* ----- Interruptor ----- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 2px; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.theme-toggle__track {
position: relative;
display: block;
width: 58px;
height: 30px;
border-radius: 999px;
background: #ebe7da;
color: #344e41;
box-shadow: inset 0 1px 3px rgba(31, 51, 41, 0.25);
transition: background-color var(--dur-base, 0.3s);
}
.theme-toggle__track .icon { position: absolute; top: 8px; width: 14px; height: 14px; transition: opacity var(--dur-base, 0.3s); }
.theme-toggle__track .icon-sun { left: 8px; }
.theme-toggle__track .icon-moon { right: 8px; opacity: 0; }
.theme-toggle__track .icon .ic-fill { fill: currentColor; fill-opacity: 0.2; }
.theme-toggle__knob {
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #2b312d;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
transform: translateX(28px);
transition: transform var(--dur-base, 0.3s) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), background-color var(--dur-base, 0.3s);
}
.theme-toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
:root[data-theme="dark"] .theme-toggle__track { background: #2a312d; color: #f3f6f1; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .theme-toggle__track .icon-sun { opacity: 0; }
:root[data-theme="dark"] .theme-toggle__track .icon-moon { opacity: 1; }
:root[data-theme="dark"] .theme-toggle__knob { background: #f3f3ee; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
.theme-toggle__track, .theme-toggle__knob, .theme-toggle__track .icon { transition: none; }
}
/* ----- Tokens invertidos ----- */
:root[data-theme="dark"] {
color-scheme: dark;
--cream: #121a16;
--cream-deep: #18221d;
--forest: #e6ece3;
}
:root[data-theme="dark"] body { background: var(--cream); color: var(--forest); }
:root[data-theme="dark"] .skip-link { background: #f3f6f1; color: #121a16; }
/* ----- Barra, cabeçalho, rodapé e áreas que ficam escuras nos dois temas ----- */
:root[data-theme="dark"] .announcement { background: #0b110e; color: #f8f6f0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .site-header { background: rgba(18, 26, 22, 0.92); border-bottom-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .site-header .logo-img { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .newsletter,
:root[data-theme="dark"] .drawer__panel { background: #0b110e; color: #f8f6f0; }
:root[data-theme="dark"] .site-footer :is(a, p, li),
:root[data-theme="dark"] .newsletter :is(h2, p) { color: inherit; }
:root[data-theme="dark"] .newsletter input { background: #1d2822; color: #f3f6f1; }
:root[data-theme="dark"] .newsletter input::placeholder { color: rgba(243, 246, 241, 0.6); }
:root[data-theme="dark"] .btn--gold:hover { background: #f8f6f0; }
/* ----- Navegação e botões ----- */
:root[data-theme="dark"] .main-nav a:hover,
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .search { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
:root[data-theme="dark"] .search input { color: #f3f6f1; }
:root[data-theme="dark"] .search input::placeholder { color: rgba(230, 236, 227, 0.65); }
:root[data-theme="dark"] .btn--primary:hover { background: #ffffff; color: #121a16; }
:root[data-theme="dark"] .cart__count { background: var(--forest); color: var(--cream); }
:root[data-theme="dark"] .btn--google { background: #1d2822; color: #f3f6f1; border-color: rgba(255, 255, 255, 0.2); }
/* ----- Superfícies ----- */
:root[data-theme="dark"] .card { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
:root[data-theme="dark"] .section--alt { background: var(--cream-deep); }
:root[data-theme="dark"] .badge { background: rgba(163, 177, 138, 0.2); color: #d3dccb; }
:root[data-theme="dark"] .category__icon { background: #1d2822; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] .steps__icon { background: #22302a; color: var(--gold); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); }
:root[data-theme="dark"] .faq__item,
:root[data-theme="dark"] .benefits li { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
:root[data-theme="dark"] .faq__item[open],
:root[data-theme="dark"] .benefits li:hover { box-shadow: inset 0 0 0 1px rgba(198, 166, 103, 0.65); }
:root[data-theme="dark"] .faq__mark { background: rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] .mockup { background: #1b2620; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .library-item { background: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .progress { background: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .testimonial blockquote,
:root[data-theme="dark"] .testimonial figcaption { color: var(--forest); }
/* ----- Textos com cor fixa ----- */
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .lead,
:root[data-theme="dark"] .faq__a,
:root[data-theme="dark"] .section-title p,
:root[data-theme="dark"] .steps p { color: rgba(230, 236, 227, 0.78); }
:root[data-theme="dark"] .eyebrow { color: rgba(230, 236, 227, 0.8); }
:root[data-theme="dark"] .price--free { background: var(--forest); color: var(--cream); }
/* ----- Formulários, abas, catálogo ----- */
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .catalog-search input { background: #1d2822; color: #f3f6f1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
:root[data-theme="dark"] .field input::placeholder { color: rgba(230, 236, 227, 0.5); }
:root[data-theme="dark"] .tabs { background: rgba(255, 255, 255, 0.07); }
:root[data-theme="dark"] .chip { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .chip:hover { background: rgba(255, 255, 255, 0.14); }
:root[data-theme="dark"] .chip.is-on { background: var(--forest); color: var(--cream); }
:root[data-theme="dark"] .divider { color: rgba(230, 236, 227, 0.7); }
:root[data-theme="dark"] .doc .aviso { background: rgba(198, 166, 103, 0.16); }
:root[data-theme="dark"] .form-message.is-error { color: #ff9b8a; }
/* ----- Versículo do dia ----- */
:root[data-theme="dark"] .versiculo-faixa { background: var(--cream-deep); }
:root[data-theme="dark"] .versiculo {
--vdd-fundo: #1d2822;
--vdd-texto: #f3f6f1;
--vdd-ref: #d9be85;
--vdd-aspas: rgba(163, 177, 138, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.45);
}
/* ----- Ícones em anel no tema escuro ----- */
:root[data-theme="dark"] .category__icon,
:root[data-theme="dark"] .steps__icon,
:root[data-theme="dark"] .seals .icon {
--tile: #1d2822;
--anel: #26332c;
--glifo: #e6ece3;
box-shadow:
0 0 0 6px var(--anel),
0 0 0 7px rgba(255, 255, 255, 0.05),
7px 12px 20px rgba(0, 0, 0, 0.45),
inset 0 2px 5px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .category:hover .category__icon { --tile: #e6ece3; --glifo: #1d2822; }
:root[data-theme="dark"] .steps__icon { background: var(--tile); color: var(--glifo); }
/* ----- Carrinho e conta no tema escuro ----- */
:root[data-theme="dark"] .header-actions .cart,
:root[data-theme="dark"] .account-link .icon {
--tile: #1d2822;
--anel: #26332c;
color: #e6ece3;
box-shadow: 0 0 0 4px var(--anel), 0 0 0 5px rgba(255, 255, 255, 0.05), 3px 6px 10px rgba(0, 0, 0, 0.45), inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .account-link .icon { box-shadow: 0 0 0 3px var(--anel), 0 0 0 4px rgba(255, 255, 255, 0.05), 2px 5px 8px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .header-actions .cart:hover { --tile: #e6ece3; color: #1d2822; }
:root[data-theme="dark"] .header-actions .cart .cart__count { box-shadow: 0 0 0 2px var(--cream); }
:root[data-theme="dark"] .account-link__avatar { background: #1d2822; color: #e6ece3; box-shadow: 0 0 0 3px #26332c, 0 0 0 4px rgba(255, 255, 255, 0.05), 2px 5px 8px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(0, 0, 0, 0.5); }