/* Tokens de design do editor v4 — cores, sombras (tema escuro/claro).
   Extraído de app.css (Fase 0 do plano docs/todo/2026-08-09-plano-adequacao-tailwind-v4.md).
   Carregado por <link> via mvp3d_links_css_app() (antes de app.css), com ?v= —
   não voltar a @import no app.css: o browser não herda o cache-buster. */

/* Paleta em tokens — nenhuma cor de interface literal fora daqui.

   O escuro é o tema de omissão de propósito: isto é um configurador de cores,
   e chrome escuro deixa a cor da peça ser julgada sem competir com a
   interface (é o que Figma/Blender/Photoshop fazem). O claro fica acessível
   em :root[data-tema="claro"] — este projeto já mudou de ideias uma vez sobre
   o tema, e assim a próxima mudança custa estas linhas e não as 105 que
   estavam espalhadas pelo ficheiro.

   EXCEÇÃO DELIBERADA: --palco-bg fica CLARO nos dois temas. O editor 2D
   desenha as peças sem fundo próprio (aparecem "soltas" sobre a página) e o
   contorno delas é escuro — num palco escuro, uma peça escura desaparecia,
   que é exatamente o bug que o contorno existe para evitar, ao contrário.
   Escurecer o palco é uma decisão à parte e leva o contorno atrás
   (construirContornos em js/estado.js) e o fundo da cena 3D (cena3d.js). */
:root {
    /* A LISTA aberta de um <select> é desenhada pelo sistema, não por nós: com
       o chrome escuro mas sem isto, o browser abria-a com fundo claro e usava
       a nossa cor de texto (clara) lá dentro — texto branco em fundo branco,
       ilegível. Também acerta scrollbars e campos nativos de uma assentada. */
    color-scheme: dark;

    --accent: #6c5ce7;
    --accent-hover: #7d6ff0;
    --accent-fraco: rgba(108, 92, 231, .28);
    --accent-fraco-2: rgba(108, 92, 231, .18);
    --sobre-accent: #ffffff;
    /* O --accent como TEXTO sobre fundos escuros/fracos só dá 3,0:1 — abaixo
       dos 4,5:1 exigidos. Este tom (accent + ~24% de branco) dá 4,6:1 e serve
       só para texto/ícone; o --accent sólido continua a ser fundo de botão,
       que é outro par de contraste. */
    --accent-texto: #8f83ed;

    --bg: #0e0f14;
    --bg-elevado: #171922;
    --bg-sutil: #202331;
    --bg-sutil-2: #262a39;
    --texto: #eef0f5;
    --texto-fraco: rgba(238, 240, 245, .55);
    --texto-fraco-2: #99a1b3;
    /* Alias usado em utilities pós-migração (perfil, realista, menus). */
    --texto-suave: var(--texto-fraco);
    --borda: rgba(255, 255, 255, .12);
    --borda-forte: rgba(255, 255, 255, .3);
    --borda-campo: rgba(255, 255, 255, .18);
    --fundo-fraco: rgba(255, 255, 255, .06);
    --fundo-fraco-2: rgba(255, 255, 255, .12);
    --fundo-sobreposto: rgba(0, 0, 0, .75);
    --icone-inativo: rgba(255, 255, 255, .2);
    --xadrez: rgba(255, 255, 255, .07);
    /* halo das miniaturas das peças: separa a peça do cartão quando as duas
       têm tons parecidos — no tema claro era uma peça branca sobre cartão
       branco, no escuro é uma gola preta sobre cartão preto (o mesmo
       problema ao contrário, por isso o halo inverte com o tema) */
    --halo-amostra: rgba(255, 255, 255, .5);

    /* par invertido: botões que no tema claro eram escuros para saltar à
       vista têm de ser claros no tema escuro, pela mesma razão */
    --bg-contraste: #eef0f5;
    --texto-contraste: #16191d;
    --borda-contraste: rgba(0, 0, 0, .14);
    --borda-contraste-forte: rgba(0, 0, 0, .38);

    --perigo: #ff6b6b;
    --perigo-claro: #ff8a80;
    --perigo-forte: #c62828;
    --perigo-fraco: rgba(255, 107, 107, .12);

    --scrim: rgba(0, 0, 0, .6);
    --overlay-fundo: rgba(14, 15, 20, .96);
    /* Borda-viva do chat da IA. A primeira e a última paragem TÊM de ser
       iguais — a animação percorre exatamente um mosaico e sem isso via-se o
       salto a cada volta. */
    --ia-borda-viva: linear-gradient(115deg,
        rgba(108, 92, 231, .95),
        rgba(255, 255, 255, .16) 25%,
        rgba(155, 140, 245, .75) 50%,
        rgba(255, 255, 255, .16) 75%,
        rgba(108, 92, 231, .95));
    --sombra: 0 6px 24px rgba(0, 0, 0, .55);
    --sombra-suave: 0 3px 10px rgba(0, 0, 0, .4);
    --sombra-modal: 0 12px 48px rgba(0, 0, 0, .6);
    --sombra-menu: 0 12px 36px rgba(0, 0, 0, .5);

    --palco-bg: #ecedf1;

    /* Empilhamento — escala única para o v4 (2026-08-09). Sem ela, cada peça
       escolhia um número à mão (havia z-index de 0 a 60 no app.css e treze
       valores de z-[…] soltos no PHP) e o Flowbite entrava por baixo: o modal
       dele traz backdrop em z-40 e a caixa em z-50, ambos abaixo dos nossos 60.
       O chamado #1871dd8 («X dos modais .caixa-ia inacessível») foi um empate
       destes. Estes tokens são o único sítio onde os números se decidem;
       o ui.js passa-os ao Flowbite em vez de aceitar os defaults dele. */
    --z-palco: 1;
    --z-painel: 30;
    --z-overlay: 44;
    --z-modal-fundo: 58;
    --z-modal: 60;
}

/* Tudo o que se clica tem cursor de clique (pedido 2026-08-01: havia muita
   coisa clicável com cursor de texto/seta). Regra de BASE — as 67 declarações
   avulsas continuam válidas; isto apanha o que escapou e o que vier. O
   disabled volta ao default, que é a pista certa de "não dá". */
button, select, summary, a[href], [role="button"],
input[type="color"], input[type="checkbox"], input[type="radio"], input[type="range"],
label[for] {
    cursor: pointer;
}
button:disabled { cursor: default; }

:root[data-tema="claro"] {
    /* Sem isto herda-se o color-scheme: dark do :root de cima — o scrollbar
       nativo do textarea (e outros campos) saía escuro mesmo no tema claro. */
    color-scheme: light;

    --accent-hover: #5b4bd6;
    --accent-fraco: rgba(108, 92, 231, .12);
    --accent-fraco-2: rgba(108, 92, 231, .08);
    --accent-texto: #5b4bd6;

    --bg: #f6f7f9;
    --bg-elevado: #ffffff;
    --bg-sutil: #f2f1fc;
    --bg-sutil-2: #f2f4f7;
    --texto: #16191d;
    --texto-fraco: rgba(22, 25, 29, .5);
    --texto-fraco-2: #8a9199;
    --texto-suave: var(--texto-fraco);
    --borda: rgba(0, 0, 0, .1);
    --borda-forte: rgba(0, 0, 0, .22);
    --borda-campo: rgba(0, 0, 0, .18);
    --fundo-fraco: rgba(0, 0, 0, .05);
    --fundo-fraco-2: rgba(0, 0, 0, .1);
    --fundo-sobreposto: rgba(20, 26, 34, .75);
    --icone-inativo: rgba(0, 0, 0, .15);
    --xadrez: rgba(0, 0, 0, .06);
    --halo-amostra: rgba(0, 0, 0, .35);

    --bg-contraste: #232b37;
    --texto-contraste: #e8ecf1;
    --borda-contraste: rgba(255, 255, 255, .12);
    --borda-contraste-forte: rgba(255, 255, 255, .35);

    --perigo: #b3261e;
    --perigo-fraco: rgba(179, 38, 30, .08);

    --scrim: rgba(22, 25, 29, .45);
    /* No claro os realces brancos da borda-viva desapareciam sobre o cartão
       branco — o contraste passa a ser roxo forte × roxo esbatido. */
    --ia-borda-viva: linear-gradient(115deg,
        rgba(108, 92, 231, .85),
        rgba(108, 92, 231, .12) 25%,
        rgba(155, 140, 245, .6) 50%,
        rgba(108, 92, 231, .12) 75%,
        rgba(108, 92, 231, .85));
    --overlay-fundo: rgba(255, 255, 255, .96);
    --sombra: 0 6px 24px rgba(22, 25, 29, .1);
    --sombra-suave: 0 3px 10px rgba(0, 0, 0, .06);
    --sombra-modal: 0 12px 48px rgba(0, 0, 0, .25);
    --sombra-menu: 0 12px 36px rgba(0, 0, 0, .18);
}