/* Temas nas páginas do site (caça-palavras por tema, Como jogar, Sobre,
   Contato, Privacidade, Obrigado, Exclusão de conta).
   As cores fixas dessas páginas seguem as cores-base abaixo (mesmas do jogo,
   ver src/css/themes.css e tools/theme_css_vars.mjs). O tema vem do mesmo
   wb_theme salvo pelo jogo e é aplicado em <html data-wb-theme> por um script
   curto no <head> de cada página. Sem tema (Escuro), nada muda. */

:root[data-wb-theme='light'] {
    --wb-surface: rgb(244 246 251);
    --wb-ink: rgb(30 41 66);
    --wb-accent: rgb(34 74 158);
    --wb-warm: rgb(150 96 0);
    --wb-mint: rgb(10 128 76);
    --wb-accent-bg: rgb(150 196 250);
    color-scheme: light;
}

:root[data-wb-theme='casino'] {
    --wb-surface: rgb(40 62 38);
    --wb-ink: rgb(246 238 216);
    --wb-accent: rgb(214 178 92);
}

:root[data-wb-theme='noir'] {
    --wb-surface: rgb(22 22 24);
    --wb-ink: rgb(250 250 250);
    --wb-accent: rgb(0 229 255);
}

/* Claro: os brilhos azulados do fundo escuro deixam o branco acinzentado;
   no Claro o fundo das páginas é limpo */
:root[data-wb-theme='light']
    :is(body.site-page, body.privacy-page, body.account-deletion-page, body:has(> .thanks-shell)) {
    background: linear-gradient(180deg, #f6f8fc 0%, #e8edf6 100%);
}

/* Cassino: fundo de feltro verde-musgo, como no jogo */
:root[data-wb-theme='casino']
    :is(body.site-page, body.privacy-page, body.account-deletion-page, body:has(> .thanks-shell)) {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(140, 170, 96, 0.28) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, #3d5a32 0%, #2c4526 52%, #1a2a17 100%);
    background-attachment: fixed;
}

/* Noir: preto com brilhos coloridos */
:root[data-wb-theme='noir']
    :is(body.site-page, body.privacy-page, body.account-deletion-page, body:has(> .thanks-shell)) {
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 0, 170, 0.2) 0%, transparent 38%),
        radial-gradient(circle at 88% 22%, rgba(0, 229, 255, 0.18) 0%, transparent 40%), #050505;
    background-attachment: fixed;
}

/* Claro: textos secundários (menu, notas, contagens, rodapés) mais escuros */
:root[data-wb-theme='light'] {
    --sp-muted: #4c5a78;
}

:root[data-wb-theme='light']
    :is(.privacy-kicker, .privacy-footer, .account-kicker, .account-footer) {
    color: #4c5a78;
}

/* Claro: componentes de alto impacto (site-pages.css) foram desenhados sobre
   fundo escuro; aqui trocamos os véus escuros por claros e escurecemos os
   textos em gradiente e as etiquetas coloridas para manter o contraste. */
:root[data-wb-theme='light'] .sp-hero--impact::before {
    opacity: 0.75;
}

:root[data-wb-theme='light'] .sp-hero--impact::after {
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18));
}

:root[data-wb-theme='light'] .sp-hero--impact h1 {
    background-image: linear-gradient(100deg, #1e2942 0%, #224a9e 55%, #0a804c 100%);
}

:root[data-wb-theme='light'] .sp-kicker--pill {
    color: #1e2942;
    background: rgba(34, 74, 158, 0.08);
    border-color: rgba(34, 74, 158, 0.22);
}

:root[data-wb-theme='light'] .sp-stat b {
    background-image: linear-gradient(135deg, #0a804c, #224a9e);
}

:root[data-wb-theme='light'] .sp-author__ph {
    background: #ffffff;
    color: #1e2942;
}

:root[data-wb-theme='light'] .sp-demo {
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(34, 74, 158, 0.1), transparent 70%),
        rgba(255, 255, 255, 0.6);
}

:root[data-wb-theme='light'] .sp-demo__board {
    background: rgba(30, 41, 66, 0.1);
}

:root[data-wb-theme='light'] .sp-demo__path polyline {
    stroke: #1f9bd6;
}

:root[data-wb-theme='light'] .sp-mode {
    background: linear-gradient(160deg, color-mix(in srgb, var(--m) 28%, #ffffff), #ffffff 72%);
}

:root[data-wb-theme='light'] .sp-mode__tag {
    color: color-mix(in srgb, var(--m) 35%, #1e2942);
    background: color-mix(in srgb, var(--m) 24%, #ffffff);
    border-color: color-mix(in srgb, var(--m) 55%, #ffffff);
}

:root[data-wb-theme='light'] .sp-mode__bg {
    opacity: 0.16;
}

/* Claro, página Obrigado: o verde-menta e o amarelo dos títulos, escurecidos */
:root[data-wb-theme='light'] body:has(> .thanks-shell) {
    --accent: #0a804c;
    --accent-strong: #a87400;
}