/*
 * Cores da LIV. Fonte unica para todas as paginas publicas.
 *
 * Antes isto estava duplicado: um `:root` no `legal.css` e outro dentro do
 * `onboarding.html`, os dois com um azul generico que nao era de lado nenhum.
 *
 * A paleta da marca:
 *   FCCF52  ouro claro      B28622  ouro escuro     1C0D00  preto quente
 *   405014  verde azeitona  504F24  azeitona escura 6F6D3D  azeitona suave
 *   0B2932  petroleo        33464C  ardosia         041013  preto frio
 *
 * Os tons muito claros (fundos e linhas do tema claro) nao existem na paleta
 * — foram derivados dela, e esta dito em cada um de onde vieram. Tudo o resto
 * e paleta pura.
 */

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  /* Derivado do 1C0D00: a mesma temperatura, quase branco. */
  --card: #f7f5f0;
  /* Derivado do 33464C, clareado ate dar uma linha discreta. */
  --line: #e3e0d8;
  --fg: #1c0d00;
  /* Ardosia da paleta. Lida contra branco com folga, e e fria o suficiente
     para se distinguir do preto quente do texto principal. */
  --muted: #33464c;

  /* Ouro escuro para texto e links: o ouro claro sobre branco nao se le. */
  --accent: #b28622;

  /* O botao e igual nos dois temas, e e o unico sitio onde o ouro claro
     aparece cheio. Com o preto quente por cima da folgadamente. */
  --botao: #fccf52;
  --botao-fg: #1c0d00;

  /* O verde da paleta serve de "correu bem" sem precisar de um verde novo. */
  --ok: #405014;
  /* A paleta nao tem vermelho. Um erro tem de parecer um erro, por isso este
     e o unico tom de fora — e esta aqui sozinho, de proposito. */
  --erro: #b3261e;

  /* Avisos: familia do ouro. */
  --warn: #6b5112;
  --warn-bg: #fdf6e3;
  --warn-line: #e7ce8a;

  /*
   * Tipografia, lida do liventures.io: titulos em Unna (serifada), texto em
   * Mulish. As duas pilhas sao copiadas tal e qual as que o site declara,
   * incluindo os seus proprios fallbacks.
   *
   * POR FAZER: os ficheiros .woff2 nao estao aqui, por isso quem abre estas
   * paginas ve os fallbacks — Georgia nos titulos, a sans do sistema no
   * texto. A serifada nos titulos ja e a assinatura mais visivel da marca, e
   * sobrevive ao fallback. Para ficar igual ao site faltam duas familias
   * alojadas localmente em /fontes, como o site faz (ele nao vai ao Google
   * buscar nada, e estas paginas tambem nao devem ir: uma delas e a politica
   * de privacidade de um subcontratante de dados de saude).
   */
  --fonte-titulo: Unna, Georgia, serif;
  --fonte-texto: Mulish, -apple-system, system-ui, 'Segoe UI', sans-serif;

  /* O petroleo da paleta, que e o que o site usa nos titulos — e nao o preto
     quente do texto corrido. */
  --titulo-fg: #0b2932;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #041013;
    --card: #0b2932;
    /* Entre o petroleo e a ardosia: separa sem desenhar uma risca. */
    --line: #22404a;
    --fg: #eceff0;
    /* Ardosia clareada, para se ler sobre o preto frio. */
    --muted: #8fa0a6;

    --accent: #fccf52;

    --botao: #fccf52;
    --botao-fg: #1c0d00;

    /* Azeitona clareada: o 405014 sobre fundo escuro nao se distingue. */
    --ok: #9db85a;
    --erro: #ff8a80;

    --warn: #fccf52;
    --warn-bg: #2a2008;
    --warn-line: #5a4712;

    /* Sobre o preto frio o petroleo desaparece. No site, os titulos sobre
       fundo escuro sao claros — e o mesmo aqui. */
    --titulo-fg: #eceff0;
  }
}

/*
 * As paginas legais usam estes tres nomes para a caixa de aviso. Ficam como
 * sinonimos em vez de uma paleta a parte, que foi como se perderam de vista.
 */
:root {
  --todo-fg: var(--warn);
  --todo-bg: var(--warn-bg);
  --todo-line: var(--warn-line);
}