/* =====================================================================
   tokens.css — a paleta do dashboard, num sitio so.

   ESTE E O UNICO SITIO ONDE A PALETA SE DEFINE. O home.css (pagina
   inicial) e o style.css (joao, margarida, status, entrada) dependem
   dele: nenhum dos dois define variaveis nenhumas.

   TEM DE SER CARREGADO ANTES de qualquer um dos dois, em todas as
   paginas:
       <link rel="stylesheet" href="tokens.css" />
       <link rel="stylesheet" href="home.css" />     (so o index.html)
       <link rel="stylesheet" href="style.css" />    (as outras quatro)

   Se um dia se acrescentar uma cor, acrescenta-se aqui e nos DOIS temas.
   Antes havia duas copias da paleta (uma em cada folha) e mudar uma sem
   mudar a outra dava uma divergencia visual que nao rebentava nada e
   passava despercebida. Deixou de ser possivel.

   Paleta: pedra palida com um sussurro de verde, tinta petroleo, latao
   fosco. O latao e para detalhe -- data, sobrancelha, rotulos em
   maiusculas, numeros de relevancia -- e nao para decoracao.
   ===================================================================== */

/* --- Tema claro (defeito) -------------------------------------------- */
:root {
  --pedra:        #F6F7F5;
  --superficie:   #FFFFFF;
  --superficie-2: #EEF1EE;
  --tinta:        #141A19;
  --tinta-media:  #4A544F;
  /* Contraste: o #7C857F antigo dava 3,54:1 sobre a --pedra, 3,81:1 sobre a
     --superficie e 3,34:1 sobre a --superficie-2 -- abaixo dos 4,5:1 que o
     WCAG AA exige para texto normal, e a --tinta-fraca veste texto de
     tamanho normal (datas, metas, notas, cabecalhos de tabela). O #666F69
     da 4,83 / 5,19 / 4,56 nos mesmos tres fundos. So o tema claro muda: no
     escuro o valor proprio (#828D87) ja passa AA em todos eles (4,57 a
     5,42) e escurece-lo aqui partia-o. */
  --tinta-fraca:  #666F69;
  --regua:        #E2E6E1;
  --realce-borda: #CBD3CC;
  --petroleo:     #0F3D3A;
  --latao:        #8A6B33;
  --latao-luz:    #EFE7D8;
  --positivo:     #2F7D5B;
  --negativo:     #B0483A;

  --sombra-1: 0 1px 2px rgba(20,26,25,.04), 0 2px 8px rgba(20,26,25,.035);
  --sombra-2: 0 2px 4px rgba(20,26,25,.04), 0 12px 32px -8px rgba(20,26,25,.09);
}

/* --- Tema escuro ----------------------------------------------------- */
html[data-tema="dark"] {
  --pedra:        #0D1413;
  --superficie:   #131C1A;
  --superficie-2: #1B2523;
  --tinta:        #E8EAE5;
  --tinta-media:  #AFB8B2;
  --tinta-fraca:  #828D87;
  --regua:        #24322F;
  --realce-borda: #33443F;
  --petroleo:     #7FBFAF;
  --latao:        #C9A46A;
  --latao-luz:    #23241C;
  --positivo:     #5FB88A;
  --negativo:     #D4796A;

  --sombra-1: none;
  --sombra-2: 0 12px 32px -12px rgba(0,0,0,.6);
}

/* --- Raios, ritmo do texto longo e tipos ------------------------------ */
/* Sem versao escura de proposito: nao mudam com o tema. Nao sao cores --
   sao medidas e pilhas de tipos -- por isso vivem num bloco unico, e nao
   um por tema. Duplica-las no bloco escuro daria exactamente o mesmo com
   o dobro das linhas para manter sincronizadas.

   As tres --texto-longo-* sao o ritmo vertical do markdown da visao de
   mercado. Estavam escritas a mao nas duas folhas, com valores
   diferentes: o home.css tinha 19/42/16 e o style.css tinha 8/18/14, o
   que dava menos de metade da separacao nas paginas de pessoa. Ficam com
   os valores do home.css, e agora ha um sitio so onde mexer. */
:root {
  --raio:      16px;
  --raio-peq:  10px;

  --texto-longo-p:       19px;   /* separacao entre paragrafos */
  --texto-longo-h-cima:  42px;   /* ar por cima de um h3/h4 */
  --texto-longo-h-baixo: 16px;   /* ar por baixo de um h3/h4 */

  --serif: "Newsreader", ui-serif, "New York", Charter, Georgia, serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* =====================================================================
   Nomes antigos.

   O style.css tem mais de mil linhas escritas com os nomes antigos e nao
   valia a pena reescrever todas as ocorrencias. Ficam como referencias
   aos nomes novos.

   Definidos UMA SO VEZ, e nao um por tema, e isso e de proposito: o
   :root e o proprio <html>, que e tambem onde o bloco escuro redefine as
   cores. Como as custom properties se resolvem no momento do uso, o
   var(--pedra) daqui ja apanha o valor escuro quando o data-tema esta em
   dark. Repetir o bloco no tema escuro daria exactamente o mesmo, com o
   dobro das linhas para manter sincronizadas.
   ===================================================================== */
:root {
  --fundo:       var(--pedra);
  --borda:       var(--regua);
  --texto:       var(--tinta);
  --texto-fraco: var(--tinta-fraca);
  --acento:      var(--petroleo);
  --foco:        var(--latao);
  --sombra:      var(--sombra-1);
}
/* Sem alias para --superficie, --superficie-2, --positivo, --negativo,
   --raio e --realce-borda: mantiveram o nome e ja estao definidos acima. */