/* 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.
 */

:root {
  color-scheme: light;
  --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;
    --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;
  --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;
  --borda: #d4d4d8; --fundo-suave: #f4f4f5; --texto-fraco: #52525b;
  --atencao: #b45309; --atencao-fundo: #fffbeb;
  --falha: #b91c1c; --falha-fundo: #fef2f2;
  --manual: #6d28d9; --ok: #1a4d2e;
}