/* ACM Sistema — base: reset, tokens e tipografia (docs/06-frontend.md)

   Dois temas, claro e escuro, escolhidos pela pessoa e salvos em
   `usuarios.tema` (migration 073). O claro é o padrão e mora em `:root`; o
   escuro só redefine os tokens em `:root[data-tema="escuro"]`. Componente
   nenhum sabe qual tema está ativo — ele lê o token, e pronto. */

:root {
    color-scheme: light;

    --marinho: #0B1B33;
    --azul: #0047B3;
    --azul-hover: #0059DB;
    --azul-suave: #E8EFFB;
    --cinza: #D6D9DE;
    --cinza-claro: #EDEFF2;
    --fundo: #F4F6F8;
    --superficie: #FFFFFF;
    --texto: #1B2430;
    --texto-suave: #5A6672;
    --sucesso: #0F7A3D;
    --alerta: #B26A00;
    --erro: #B3261E;

    /* Azul como FUNDO com texto branco (botão primário, página atual). No
       claro é o mesmo azul dos links; no escuro os dois se separam, porque o
       link precisa clarear para ler sobre fundo escuro e o botão precisa
       continuar escuro o bastante para o branco ler em cima dele. */
    --acao: var(--azul);
    --acao-hover: var(--azul-hover);

    /* Fundo e borda dos avisos e badges — eram hex soltos em componentes.css,
       e hex solto é o que não vira escuro junto com o resto. */
    --sucesso-fundo: #E7F4ED;
    --sucesso-borda: #A9D9BF;
    --erro-fundo: #FBEAE9;
    --erro-borda: #E9B4B0;
    --erro-forte: #8F1E18;
    --alerta-fundo: #FDF3E3;
    --alerta-borda: #EBD3A6;
    --alerta-texto: #6B4A00;
    --atencao-fundo: #FFF8E6;
    --info-fundo: #E8F0FA;
    --info-borda: #B4CDEA;
    --info-texto: #1B4A7E;
    --veu: rgba(11, 27, 51, .4);

    --raio: 6px;
    --sombra: 0 1px 3px rgba(11, 27, 51, .12);
    --sombra-alta: 0 4px 16px rgba(11, 27, 51, .14);
    --espaco: 16px;
    --sidebar: 240px;
    --sidebar-fechada: 64px;
    --topo: 56px;
}

/* Tema escuro. O atributo vem do servidor na tag <html>, então a página já
   nasce escura — sem piscada. Fundo é azul-marinho bem fechado, não preto:
   é a mesma família do marinho da marca, e preto puro atrás de texto claro
   cansa mais do que ajuda.

   Só em `screen`: papel é sempre claro, e quem imprime com o escuro ligado
   não pode receber fundo escuro no PDF. */
@media screen {
:root[data-tema="escuro"] {
    color-scheme: dark;

    --marinho: #DCE4F0;
    --azul: #6AA3FF;
    --azul-hover: #8DB8FF;
    --azul-suave: #1A2A45;
    --cinza: #2E3A4B;
    --cinza-claro: #232D3B;
    --fundo: #0F151E;
    --superficie: #182130;
    --texto: #E4E9F0;
    --texto-suave: #9CA8B8;
    --sucesso: #4CC57F;
    --alerta: #E4A73A;
    --erro: #F07A72;

    --acao: #2F6FE0;
    --acao-hover: #3F80F0;

    --sucesso-fundo: #12301F;
    --sucesso-borda: #1F5A38;
    --erro-fundo: #3A1B19;
    --erro-borda: #6B2E2A;
    --erro-forte: #C94A41;
    --alerta-fundo: #3A2A0E;
    --alerta-borda: #6B4E1C;
    --alerta-texto: #F0C46B;
    --atencao-fundo: #33280E;
    --info-fundo: #16263D;
    --info-borda: #2B4A78;
    --info-texto: #9CC2FF;
    --veu: rgba(0, 0, 0, .6);

    --sombra: 0 1px 3px rgba(0, 0, 0, .5);
    --sombra-alta: 0 4px 16px rgba(0, 0, 0, .55);
}
}

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset {
    margin: 0;
    padding: 0;
}

ul, ol { list-style: none; }

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    background: var(--fundo);
    color: var(--texto);
    font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

/* `display: block` acima vence o `display: none` que o atributo `hidden`
   aplica pela folha do navegador — e aí `<img hidden>` continuava aparecendo,
   como imagem quebrada. Vale para qualquer elemento com display forçado. */
[hidden] { display: none !important; }
svg { fill: currentColor; }

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-hover); text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { color: var(--marinho); line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

fieldset { border: 0; }
legend { padding: 0; }

:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Acessibilidade: primeiro Tab da página pula o menu */
.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 8px 16px;
    background: var(--acao);
    color: #fff;
}
.pular-para-conteudo:focus { left: 8px; top: 8px; }

.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.texto-suave { color: var(--texto-suave); }
.texto-direita { text-align: right; }
.texto-centro { text-align: center; }
.sem-quebra { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}