/* A paleta da casa. UM lugar, para os tres modulos.
 *
 * Antes isto vivia dentro de `_estilo.html`, que so o Jinja enxerga -- e por
 * isso a tela do Metas, que e React servido de `/metas/`, nao tinha como usar
 * as mesmas cores. Agora e arquivo servido em `/estatico/`, e quem quiser a
 * paleta so precisa de um <link>.
 *
 * `color-scheme` acompanha cada tema porque os controles NATIVOS -- select,
 * input date, barra de rolagem -- nao leem variavel CSS. Sem ele o dropdown
 * abre branco no tema escuro.
 *
 * A ordem importa: o tema do sistema manda por padrao, e a escolha do usuario
 * (`data-tema`) sobrepoe. Por isso os blocos `[data-tema]` vem DEPOIS do
 * `@media`, e nao antes.
 */

/* A marca RW4 Capital. `--azul-rw4` e o azul do logo e NAO muda com o tema:
 * e o fundo do menu e do login nos dois temas. `--marca` e a cor de acao
 * (botao, link ativo) e `--marca-texto` a mesma cor usada como texto: no tema
 * escuro as duas clareiam, senao somem no fundo preto. A fonte dos titulos e
 * a mesma familia do logo (serifada de alto contraste); nao ha arquivo de
 * fonte, vale a que a maquina tiver. */
:root {
  --azul-rw4: #1f355e;
  --fonte-titulo: "Bodoni MT", "Didot", "Playfair Display", Georgia, "Times New Roman", serif;
}

:root {
  color-scheme: light;
  --marca: #1f355e; --marca-texto: #1f355e;
  --borda: #d4d4d8; --fundo-suave: #f4f4f5; --texto-fraco: #52525b;
  --atencao: #b45309; --atencao-fundo: #fffbeb;
  --falha: #b91c1c; --falha-fundo: #fef2f2;
  --manual: #6d28d9; --ok: #1a4d2e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --marca: #3b5a93; --marca-texto: #a9bde3;
    --borda: #3f3f46; --fundo-suave: #18181b; --texto-fraco: #a1a1aa;
    --atencao-fundo: #27200d; --falha-fundo: #2a1416;
    --ok: #2f7a4d; --falha: #ef4444; --atencao: #d97706;
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --marca: #3b5a93; --marca-texto: #a9bde3;
  --borda: #3f3f46; --fundo-suave: #18181b; --texto-fraco: #a1a1aa;
  --atencao-fundo: #27200d; --falha-fundo: #2a1416;
  --ok: #2f7a4d; --falha: #ef4444; --atencao: #d97706;
}

:root[data-tema="claro"] {
  color-scheme: light;
  --marca: #1f355e; --marca-texto: #1f355e;
  --borda: #d4d4d8; --fundo-suave: #f4f4f5; --texto-fraco: #52525b;
  --atencao: #b45309; --atencao-fundo: #fffbeb;
  --falha: #b91c1c; --falha-fundo: #fef2f2;
  --manual: #6d28d9; --ok: #1a4d2e;
}