/* Atlas, tokens do cliente
 *
 * Sobrescreve os placeholder do kit. As cores foram amostradas das fotos das
 * obras da propria Atlas: o travertino do piso, o forro de madeira da cozinha,
 * a madeira escura da fachada. Nenhuma foi escolhida por nome.
 *
 * Declarado em voz alta, porque a lista de vetos pede: a Atlas usa serifada de
 * alto contraste com acento cobre, que e o default numero um. Ela ganha o
 * direito por tres motivos: a paleta saiu do material real, o canvas e CLARO
 * (nao o quase-preto do default), e o site tem um elemento assinatura proprio,
 * a prancha, que nenhum outro site do setor tem.
 */

:root{
  /* ---------------------------------------------------------- cor */
  --canvas:#F2EDE6;          /* osso, o travertino do piso */
  --canvas-2:#E7E0D6;        /* a segunda superficie */
  --panel:#241F1C;           /* carvao, a madeira escura da fachada */
  --panel-2:#1C1917;
  --linha:rgba(36,31,28,.14);
  --linha-forte:#8A7E73;     /* borda interativa, passa 3:1 no osso */
  --texto:#3A332E;
  --texto-2:#5A5047;
  --texto-forte:#241F1C;
  --acento:#A7622F;          /* o forro de madeira da cozinha */
  --acento-hover:#8E5227;
  /* o acento quando ele e TEXTO pequeno, nao superficie: no osso o tom
   * de catalogo da 4,07:1 e o minimo a 12px e 4,5, entao vale o escuro.
   * No carvao o papel se inverte, logo isto tem par dentro de .esc. */
  --acento-texto:#8E5227;
  --sobre-acento:#FFF8F0;   /* o texto que vai EM CIMA do acento */
  /* A cor do portal do hero. E o acento cobre da Atlas puxado para o
   * vermelho: viva como o Herik pediu, e ainda da casa. Medida contra
   * o osso da o contraste 4,65, e a frase que vive sobre ela e texto
   * grande, que so precisa de 3. Carvao dava 14 e parecia morto; o
   * problema nunca foi contraste, foi temperatura. */
  --portal:#B8441C;
  --acento-sussurro:rgba(167,98,47,.14);

  /* no escuro os papeis se invertem */
  --canvas-esc:#241F1C;
  --texto-esc:#D9CDBF;
  --texto-esc-2:#B3A595;
  --texto-esc-forte:#F2EDE6;
  --acento-esc:#C98760;

  /* ---------------------------------------------------- tipografia */
  --f-display:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  --f-corpo:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  /* ------------------------------------------------- a prancha */
  --prancha-fio:rgba(36,31,28,.1);
  --prancha-cota:rgba(167,98,47,.5);
  --rail:clamp(26px,3.6vw,74px);      /* a faixa de cotas da esquerda */
  --m:clamp(20px,5vw,96px);
  --folga:clamp(72px,13vh,190px);
}

/* o escuro nao e um tema: e uma superficie. Qualquer secao pode virar. */
.esc{
  --canvas:var(--canvas-esc);
  --canvas-2:#1C1917;
  --texto:var(--texto-esc);
  --texto-2:var(--texto-esc-2);
  --texto-forte:var(--texto-esc-forte);
  --acento:var(--acento-esc);
  --acento-texto:var(--acento-esc);
  --linha:rgba(242,237,230,.14);
  --linha-forte:#7A6E64;
  --prancha-fio:rgba(242,237,230,.09);
  --prancha-cota:rgba(201,135,96,.5);
  background:var(--canvas);
  color:var(--texto);
}