/* ==========================================================================
   MARCA — cores oficiais da marca (Casa Nacional: verde floresta + dourado,
   com vermelho da logo como apoio).

   Extraídas da logo:  dourado #e0ac44 / #f8d273  ·  verde #0a2717 / #186717
                       vermelho #880b05

   Este arquivo substitui css/marca.css do site (mesmo formato do JBet).
   Nenhum outro CSS/página deve ser tocado — tema.css e todo o resto do
   site consomem exclusivamente as variáveis abaixo.

   Carregado ANTES de css/tema.css em toda página (Principal.Master e as
   páginas de acesso, que carregam o CSS sozinhas).
   ========================================================================== */

:root,
:root[data-tema="escuro"] {
    --jb-fundo:          #06130b;
    --jb-fundo-brilho:   radial-gradient(ellipse at 82% 4%,  rgba(224, 172, 68, .08) 0, transparent 42%),
                         radial-gradient(ellipse at 6%  38%, rgba(24, 103, 23, .10) 0, transparent 38%),
                         linear-gradient(160deg, #081a0f 0%, #0a2013 45%, #06130b 100%);
    --jb-superficie:     #0d2016;
    --jb-superficie-2:   #12291d;
    --jb-superficie-3:   #183425;
    --jb-borda:          rgba(240, 222, 170, .10);
    --jb-borda-forte:    rgba(240, 222, 170, .19);
    --jb-texto:          #f4efe2;
    --jb-texto-suave:    #a9b5a8;
    --jb-texto-fraco:    #738173;

    --jb-ouro:           #e0ac44;
    --jb-ouro-claro:     #f8d273;
    --jb-ouro-escuro:    #b98524;
    --jb-ouro-texto:     #e8b84f; /* dourado usado como cor de texto */
    --jb-ouro-tenue:     rgba(224, 172, 68, .14);
    --jb-ouro-borda:     rgba(224, 172, 68, .36);
    --jb-sobre-ouro:     #1c1304; /* texto por cima do dourado */

    --jb-ok:             #38cf7a;
    --jb-ok-tenue:       rgba(56, 207, 122, .15);
    --jb-erro:           #ff6b5e;
    --jb-erro-tenue:     rgba(255, 107, 94, .15);
    --jb-alerta:         #ff9f43;
    --jb-alerta-tenue:   rgba(255, 159, 67, .15);

    /* As sombras abaixo usam o dourado em rgba() fixo (não derivam de
       --jb-ouro automaticamente) — se trocar o dourado, ajuste também
       --jb-sombra-ouro e os rgba() dos gradientes acima pra combinar. */
    --jb-sombra:         0 16px 40px rgba(0, 0, 0, .55);
    --jb-sombra-suave:   0 6px 18px rgba(0, 0, 0, .38);
    --jb-sombra-ouro:    0 10px 26px rgba(224, 172, 68, .18);

    --jb-raio:           16px;
    --jb-raio-p:         11px;
    --jb-raio-g:         22px;

    --jb-topo-fundo:     linear-gradient(135deg, #071a0f, #0f2b1b 55%, #06130b);

    color-scheme: dark;
}

:root[data-tema="claro"] {
    --jb-fundo:          #f5f1e6;
    --jb-fundo-brilho:   radial-gradient(ellipse at 82% 4%,  rgba(224, 172, 68, .16) 0, transparent 40%),
                         radial-gradient(ellipse at 6%  38%, rgba(24, 103, 23, .05) 0, transparent 38%),
                         linear-gradient(160deg, #f8f5ec 0%, #f1ecdd 55%, #f6f2e7 100%);
    --jb-superficie:     #fffdf8;
    --jb-superficie-2:   #f7f2e4;
    --jb-superficie-3:   #eee6d2;
    --jb-borda:          #e3dac0;
    --jb-borda-forte:    #cbbf9c;
    --jb-texto:          #1a2119;
    --jb-texto-suave:    #5c6657;
    --jb-texto-fraco:    #858c7d;

    --jb-ouro:           #d9a233;
    --jb-ouro-claro:     #f0c968;
    --jb-ouro-escuro:    #a8751a;
    --jb-ouro-texto:     #7a5410; /* escurecido para ter contraste sobre claro */
    --jb-ouro-tenue:     rgba(217, 162, 51, .16);
    --jb-ouro-borda:     rgba(168, 117, 26, .42);
    --jb-sobre-ouro:     #1c1304;

    --jb-ok:             #1a7f45;
    --jb-ok-tenue:       rgba(26, 127, 69, .12);
    --jb-erro:           #b3261e;
    --jb-erro-tenue:     rgba(179, 38, 30, .10);
    --jb-alerta:         #a35a00;
    --jb-alerta-tenue:   rgba(163, 90, 0, .12);

    --jb-sombra:         0 14px 34px rgba(30, 28, 18, .13);
    --jb-sombra-suave:   0 5px 14px rgba(30, 28, 18, .09);
    --jb-sombra-ouro:    0 10px 24px rgba(168, 117, 26, .24);

    --jb-topo-fundo:     linear-gradient(135deg, #071a0f, #0f2b1b 55%, #06130b);

    color-scheme: light;
}