/*
 * O tema escuro do site da Vitrine Urbana.
 *
 * São duas partes: os valores do escuro das cores do site (os nomes e os valores do claro estão no :root do
 * site.css) e as poucas regras que só existem no escuro. As folhas das páginas não sabem do tema: usam as
 * variáveis. Cor nova entra no site.css com o valor do claro e aqui com o do escuro.
 *
 * A folha inteira fica dentro de um único @media, que é a chave do tema: como está escrito, ele vale no aparelho
 * em tema escuro, e é assim que o site segue o aparelho, mesmo sem JavaScript. Quem escolheu um tema no rodapé
 * tem a condição deste @media trocada pelo "tema" do site.js ("screen" para o escuro, "not all" para o claro).
 * Por isso tudo o que é do escuro tem de ficar dentro dele, e ele tem de continuar sendo a primeira regra da
 * folha. No papel o site sai sempre claro.
 *
 * Não se repetem aqui, porque são iguais nos dois temas: --vu-magenta, --vu-degrade (sempre com letra ou ícone
 * branco por cima), --vu-sobre-marca e --vu-ambar.
 */

@media screen and (prefers-color-scheme: dark) {

    :root {
        /* a marca: no fundo escuro o roxo de link, de ícone e de destaque é o mesmo matiz, clareado até dar leitura */
        --vu-roxo: #c4a1ff;
        /* o tom de mais ênfase (link sob o ponteiro, letra dos chips): no escuro a ênfase é clarear */
        --vu-roxo-escuro: #dfccff;
        --vu-violeta: #d18cff;

        /* os fundos de realce */
        --vu-lilas: #2e1d54;
        --vu-lilas-forte: #3f2c73;

        /* o texto: o título quase branco, puxado para o lilás, e o corpo e o apoio um degrau abaixo cada um */
        --vu-tinta: #f5f0ff;
        --vu-texto: #cdc5e0;
        --vu-apoio: #a79fbe;
        --vu-linha: #352a52;

        /* sombra roxa não aparece no escuro: preta e mais forte. Quem separa as camadas é a superfície e a borda */
        --vu-sombra: 0 12px 32px rgba(0, 0, 0, .45);
        --vu-sombra-forte: 0 22px 48px rgba(0, 0, 0, .60);

        /* os fundos e as superfícies: o roxo da marca levado ao escuro, cada camada um degrau acima da anterior */
        --vu-fundo: #120b1f;
        --vu-fundo-suave: #120b1f;
        --vu-superficie: #19102b;
        --vu-superficie-alta: #211637;
        --vu-campo: #120b1f;
        --vu-borda-campo: #6f6198;
        --vu-exemplo: #8d84a6;
        --vu-rodape-fundo: #0b0614;

        /* o preenchimento com letra branca passa ao segundo roxo da marca: o primeiro some no fundo escuro */
        --vu-roxo-cheio: #9100f2;
        --vu-roxo-cheio-forte: #a52bff;
        --vu-degrade-texto: linear-gradient(135deg, #8c66ff 0%, #b05cff 55%, #e05cf7 100%);

        /* os estados */
        --vu-erro: #ff8fa3;
        --vu-erro-forte: #ff5c7c;
        --vu-erro-fundo: #3a1220;
        --vu-erro-borda: #6e2438;
        --vu-erro-halo: rgba(255, 92, 124, .22);
        --vu-aviso: #ffb454;
        --vu-aviso-forte: #f59e0b;
        --vu-bom: #a3d95b;
        --vu-bom-forte: #84c225;
        --vu-sucesso: #6ee7a1;
        --vu-sucesso-forte: #2fbf71;
        --vu-sucesso-fundo: #0f2a1c;
        --vu-sucesso-borda: #1f5a3a;

        /* os véus, a cortina e os fundos compostos */
        --vu-veu: rgba(18, 11, 31, .86);
        --vu-veu-suave: rgba(18, 11, 31, .94);
        --vu-veu-superficie: rgba(25, 16, 43, .96);
        --vu-cortina: rgba(4, 2, 8, .66);
        --vu-fundo-abertura:
            radial-gradient(60rem 30rem at 90% -10%, rgba(196, 44, 242, .20), transparent 60%),
            radial-gradient(48rem 28rem at -10% 0%, rgba(79, 0, 214, .30), transparent 60%),
            linear-gradient(180deg, #170d2a 0%, #120b1f 100%);
        --vu-fundo-secao: linear-gradient(180deg, #150c25 0%, #180e2b 100%);
        --vu-fundo-conta: radial-gradient(1200px 600px at 85% -10%, #2a1650 0%, transparent 60%), #120b1f;

        /* as trincas */
        --vu-foco-rgb: 222, 192, 255;
        --vu-sombra-rgb: 0, 0, 0;
        --vu-brilho-rgb: 145, 0, 242;

        /* as que no claro têm valor próprio só para ele não mudar: no escuro seguem as vizinhas */
        --vu-fundo-convite: #120b1f;
        --vu-erro-busca: #ff8fa3;
        --vu-erro-recado: #ff8fa3;
        --vu-veu-galeria: rgba(25, 16, 43, .96);

        color-scheme: dark;
    }


    /* ---------- o que só existe no escuro ---------- */

    /*
     * As folhas das páginas (home, busca, imóvel, conta) entram na página depois desta, e a do Leaflet é posta
     * no fim do <head> pelo JavaScript. Com o mesmo peso, a regra delas ganha da daqui: por isso todas as regras
     * abaixo levam o :root na frente.
     */

    /* o logotipo do topo: o nome é roxo escuro e quase some no fundo escuro. Enquanto não há o arquivo do logotipo
       para fundo escuro (o nome em branco e o símbolo nas cores da marca), ele entra todo em branco, como no rodapé */
    :root .vu-topo .navbar-brand img {
        filter: brightness(0) invert(1);
    }

    /* o rodapé fica um tom abaixo da página: a linha em cima marca onde ele começa (sombra para dentro, que não
       muda a altura dele de um tema para o outro) */
    :root .vu-rodape {
        box-shadow: inset 0 1px 0 var(--vu-linha);
    }

    /* as páginas de erro usam o cinza do Bootstrap, que no fundo escuro fica abaixo do contraste de leitura */
    :root .text-muted {
        color: var(--vu-apoio) !important;
    }


    /* ---------- os mapas (Leaflet com as peças claras do OpenStreetMap) ---------- */

    /* só as peças escurecem: os pinos, os círculos e o balão ficam em outras camadas. O filtro vai na camada inteira
       e não em cada peça (.leaflet-tile tem filter: inherit; no contêiner das peças ele seria aplicado duas vezes) */
    :root .leaflet-tile-pane {
        filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.7);
    }

    /* o fundo do mapa enquanto as peças chegam */
    :root .leaflet-container {
        background: var(--vu-superficie);
    }

    /* os botões de aproximar e afastar */
    :root .leaflet-bar a {
        border-bottom-color: var(--vu-linha);
        background-color: var(--vu-superficie-alta);
        color: var(--vu-tinta);
    }

    :root .leaflet-bar a:hover,
    :root .leaflet-bar a:focus {
        background-color: var(--vu-lilas);
    }

    :root .leaflet-bar a.leaflet-disabled {
        background-color: var(--vu-superficie);
        color: var(--vu-exemplo);
    }

    :root .leaflet-touch .leaflet-bar {
        border-color: var(--vu-borda-campo);
    }

    /* o crédito do OpenStreetMap, que tem de continuar legível */
    :root .leaflet-container .leaflet-control-attribution {
        background: var(--vu-veu-superficie);
        color: var(--vu-texto);
    }

    :root .leaflet-container .leaflet-control-attribution a {
        color: var(--vu-roxo);
    }

    /* o balão */
    :root .leaflet-popup-content-wrapper,
    :root .leaflet-popup-tip {
        background: var(--vu-superficie-alta);
        color: var(--vu-texto);
    }

    :root .leaflet-container a.leaflet-popup-close-button {
        color: var(--vu-apoio);
    }

    :root .leaflet-container a.leaflet-popup-close-button:hover,
    :root .leaflet-container a.leaflet-popup-close-button:focus {
        color: var(--vu-tinta);
    }

    /* o círculo da região do imóvel não precisa de regra aqui: ele já usa as variáveis (.vu-imovel-regiao, no
       imovel.css) */

}