/* Fundacao: cores (com os temas), fontes, reset e utilitarios. Vem primeiro.

   COR DE DESTAQUE
   Tudo o que e vermelho no site sai de tres variaveis em RGB separado por
   espaco, usadas como rgb(var(--acento) / .5). Os temas so trocam essas tres
   (mais o --acento-claro dos destaques de texto). O fogo das particulas do
   hero continua laranja em todos: e fogo, nao cor da marca. */

:root{
  --acento:200 16 46;        /* vermelho principal: botoes, linhas, hover */
  --acento-escuro:126 13 13; /* fundo dos pinceis, sombra */
  --acento-vivo:212 42 34;   /* brilho, molduras acesas */
  --acento-claro:224 85 64;  /* palavras em destaque nos textos */

  --breu:#0E0B08;
  --pedra:#2C2721;
  --ocre:#8A6742;
  --brasa:#C9A671;
  --luz:#E8D3A8;
  --osso:#F2EDE4;
  --osso-2:#E8DDCB;
  --carvao:#0a0705;
  --ferro:#cdbaa0;
  --void:#05060A; --plate:#111218; --iron:#23252C;
  --ash:#D8D4C7; --dust:#8B8678;
  --ember:#E08536;
  --pad-top:env(safe-area-inset-top,0px);
  --pad-bot:env(safe-area-inset-bottom,0px);
  --display:"Saira Condensed",sans-serif;
  --texto:"Saira",sans-serif;
  --nav:"Archivo","Arial Black",sans-serif;
  --serifa:"Cinzel","Trajan Pro",Georgia,serif;
  --livro:"EB Garamond",Georgia,"Times New Roman",serif;
  --fx:.5;          /* enquadramento horizontal da cena (0 = esquerda, 1 = direita) */
  --fy:.5;
}
[data-tema="ambar"]{--acento:196 128 34;--acento-escuro:104 60 10;--acento-vivo:226 160 60;--acento-claro:238 186 104}
[data-tema="roxo"] {--acento:128 48 196;--acento-escuro:60 16 108;--acento-vivo:160 84 232;--acento-claro:192 146 250}
[data-tema="azul"] {--acento:34 108 210;--acento-escuro:12 44 110;--acento-vivo:70 150 242;--acento-claro:132 186 250}
[data-tema="verde"]{--acento:34 160 84;--acento-escuro:10 76 38;--acento-vivo:66 204 116;--acento-claro:138 228 168}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:var(--pad-top);-webkit-text-size-adjust:100%}
body{background:var(--breu);color:var(--osso);font-family:var(--texto);font-weight:300;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brasa);outline-offset:4px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}