/* ============================================================================
   falsotacho — tokens. A única fonte de cor do site.            ft-cores.css
   ----------------------------------------------------------------------------
   Vive à parte porque não é só das receitas: o artigo do polvo tem CSS próprio
   e layout próprio, mas a paleta tem de ser a mesma. Duplicar hexadecimais foi
   como o site se desalinhou da primeira vez.

   Carrega-se antes de tudo o resto. O ft-recipe.css importa-o sozinho.
   ========================================================================== */

:root{
  --paper:#FBFBF9;
  --paper-2:#FFFFFF;
  --ink:#141417;
  --ink-2:#33333A;
  --mid:#6C6C74;
  --faint:#9B9BA2;
  --line:#E5E4DF;
  --line-2:#F0EFEA;

  --black:#111114;
  --black-soft:#1C1C20;
  --on-black:#F3F2EE;
  --on-black-mid:#A6A6AD;
  --on-black-line:#33333A;

  /* ── Cores secundárias: três famílias Japandi ───────────────────────────
     O preto e o branco fazem o trabalho. Estas entram em poucos sítios e
     sempre com a mesma função: o filete do passo, a caixa do porquê, o
     alerta, e os dados. Pigmentos naturais, pouca saturação — se uma cor
     salta à vista, está errada.

     Escolhe-se uma por artigo, conforme o tema, com data-tema no <body>.     */

  /* CARNE — carne, fogo, fritura, curado. Terracota fosca, barro seco. */
  --carne:#B0694A;       --carne-ink:#8A4A30;
  --carne-soft:#F5EDE7;  --carne-wash:#FAF5F1;
  --carne-line:#E7D7CB;  --carne-text:#5C5049;

  /* OLIVA — vegetal, ervas, fermentação. Com a madeira por companhia. */
  --oliva:#7C8659;       --oliva-ink:#545C38;
  --oliva-soft:#EFF1E8;  --oliva-wash:#F6F8F1;
  --oliva-line:#DEE2D2;  --oliva-text:#4F5346;
  --madeira:#7A5C42;

  /* ÁGUA — líquidos, frio, mar, congelação. Azul lavado, quase cinzento. */
  --agua:#6F8D99;        --agua-ink:#3F5B66;
  --agua-soft:#E9F0F2;   --agua-wash:#F4F8F9;
  --agua-line:#D4E1E5;   --agua-text:#46545A;

  /* O acento do artigo. Por omissão, carne. */
  --acento:var(--carne);            --acento-ink:var(--carne-ink);
  --acento-soft:var(--carne-soft);  --acento-wash:var(--carne-wash);
  --acento-line:var(--carne-line);  --acento-text:var(--carne-text);

  /* ERRO — o único sítio onde a cor não é escolha, é aviso. Vermelho-terra,
     para caber na paleta sem deixar de se ler como problema. */
  /* ── ESTETICA "FAIRWINE" ────────────────────────────────────────────────
     Papel quente e tinta acastanhada, para as paginas editoriais de vinho e
     de cliente. Nao substitui o papel do site: convive com ele, escolhida
     pela folha de estilos que a pagina carrega.                              */
  --q-paper:#F4F1E9;
  --q-paper-2:#FBFAF5;
  --q-paper-3:#ECE8DD;
  --q-ink:#322E29;
  --q-ink-soft:#6E675D;
  --q-ink-faint:#7B766C;
  --q-line:#E6E1D6;
  --q-line-soft:#EFEBE1;
  --q-sombra-sm:0 1px 2px rgba(50,46,41,.04), 0 4px 14px rgba(50,46,41,.04);
  --q-sombra-md:0 6px 18px rgba(50,46,41,.06), 0 18px 50px rgba(50,46,41,.07);
  --q-r-sm:8px;  --q-r-md:14px;  --q-r-lg:22px;

  /* ── CLIENTE ────────────────────────────────────────────────────────────
     Excecao deliberada, como os pitches de vinho: uma pagina feita PARA um
     cliente usa a marca dele em pecas contadas. Nao entra no resto do site.
     Valores lidos do logotipo; confirmar contra o manual de marca deles.     */
  --auchan:#E30613;
  --auchan-ink:#B00410;        /* texto sobre claro, contraste seguro */
  --auchan-soft:#FCEBEC;
  --auchan-wash:#FEF6F6;
  --auchan-line:#F5CFD2;
  --auchan-verde:#3AAA35;
  --auchan-verde-ink:#2B7F28;
  --auchan-text:#5C4A4B;       /* corpo dentro das caixas do cliente */
  --auchan-fundo:#660309;      /* o vermelho levado ao escuro, para o heroi */
  --auchan-fundo-2:#440206;
  --auchan-fundo-3:#290103;

  --erro:#A6553F;          /* sobre fundo claro */
  --erro-claro:#D9A69A;    /* sobre fundo escuro */

  /* Dados — só em gráficos e discos, nunca como decoração.
     São as três famílias mais a madeira, que já se distinguem entre si. */
  --d-1:var(--carne);
  --d-2:var(--oliva);
  --d-3:var(--agua);
  --d-4:var(--madeira);

  --ease:cubic-bezier(.22,.61,.36,1);

  /* racios de foto — ver assets/FOTOS.md. Mexer aqui muda o site todo. */
  --ar-capa:4/5;    /* capa da entrada — vertical, com o título e as notas gravados */
  --ar-kv:4/5;
  --ar-passo:1/1;
  --ar-par:4/5;
  --ar-quadrado:1/1;
}


[data-tema="oliva"]{
  --acento-2:var(--madeira);
  --acento:var(--oliva);            --acento-ink:var(--oliva-ink);
  --acento-soft:var(--oliva-soft);  --acento-wash:var(--oliva-wash);
  --acento-line:var(--oliva-line);  --acento-text:var(--oliva-text);
}
/* Tema de cliente. Uma pagina feita PARA alguem usa a marca dessa pessoa em
   TODAS as pecas, e nao so nas que eu me lembrei de pintar: sem isto a pagina
   fica com duas paletas a bulha, a do cliente e a do site. */
[data-tema="auchan"]{
  --acento:var(--auchan);           --acento-ink:var(--auchan-ink);
  --acento-soft:var(--auchan-soft); --acento-wash:var(--auchan-wash);
  --acento-line:var(--auchan-line); --acento-text:var(--auchan-text);
  --acento-2:var(--auchan-verde);   /* a segunda cor da marca */
  --acento-2-ink:var(--auchan-verde-ink);
  --acento-fundo:var(--auchan-fundo);
  --acento-fundo-2:var(--auchan-fundo-2);
  --acento-fundo-3:var(--auchan-fundo-3);
}
[data-tema="agua"]{
  --acento:var(--agua);             --acento-ink:var(--agua-ink);
  --acento-soft:var(--agua-soft);   --acento-wash:var(--agua-wash);
  --acento-line:var(--agua-line);   --acento-text:var(--agua-text);
}