/* ============================================================
   Panificadora da Vila II
   tokens.css - variaveis da identidade visual

   Paleta e tipografia herdadas do site anterior, para manter a
   mesma cara: Montserrat nos titulos, Lato no texto, marrom e
   terracota.

   Fonte unica de verdade de cor, tipografia e espacamento.
   Nao escreva valor de cor em nenhum outro arquivo.
   Referencia: docs/02_MANUAL_DA_MARCA.md
   ============================================================ */

/* ------------------------------------------------------------
   FONTES AUTO-HOSPEDADAS
   O mesmo par que o cardapio do site anterior mostrava na tela:
   Montserrat nos titulos e nos nomes de produto, Lato no texto.
   Arquivos locais, nada carregado de fora do dominio.
   ------------------------------------------------------------ */

@font-face{
	font-family:"Montserrat";
	src:url("fontes/montserrat-400.woff2") format("woff2");
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Montserrat";
	src:url("fontes/montserrat-600.woff2") format("woff2");
	font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Montserrat";
	src:url("fontes/montserrat-700.woff2") format("woff2");
	font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Montserrat";
	src:url("fontes/montserrat-600-italic.woff2") format("woff2");
	font-weight:600; font-style:italic; font-display:swap;
}
@font-face{
	font-family:"Montserrat";
	src:url("fontes/montserrat-700-italic.woff2") format("woff2");
	font-weight:700; font-style:italic; font-display:swap;
}

@font-face{
	font-family:"Lato";
	src:url("fontes/lato-400.woff2") format("woff2");
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Lato";
	src:url("fontes/lato-700.woff2") format("woff2");
	font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"Lato";
	src:url("fontes/lato-400-italic.woff2") format("woff2");
	font-weight:400; font-style:italic; font-display:swap;
}

:root{

	/* ---------- cores primarias ---------- */
	--cor-marca:        #8B5E3C;	/* marrom forno, o marrom dos titulos */
	--cor-marca-escura: #6F472D;	/* marrom casca */
	--cor-fundo:        #FFFFFF;	/* fundo padrao, igual ao site anterior */
	--cor-faixa:        #F7F2ED;	/* faixa alternada, creme muito claro */
	--cor-superficie:   #FFFFFF;

	/* ---------- acento herdado do tema anterior ---------- */
	--cor-acento:       #C36F42;	/* terracota, elemento grafico e texto grande */
	--cor-acento-forte: #AF5E33;	/* mesma familia, escura o bastante para texto branco */

	/* ---------- cores de apoio ---------- */
	--cor-texto:        #5A4433;	/* texto corrido */
	--cor-texto-suave:  #6B5544;	/* descricao, legenda */
	--cor-borda:        #E0D8D0;	/* bege claro do tema anterior */
	--cor-bege:         #C0B0A0;	/* bege medio do tema anterior */
	--cor-escura:       #3A2A20;	/* fundo de rodape */

	/* ---------- cores funcionais ---------- */
	--cor-sucesso:      #3E5C3A;
	--cor-alerta:       #B4761A;
	--cor-erro:         #A32A20;
	--cor-whatsapp:     #25D366;

	/* ---------- cores da marca irma ---------- */
	--cor-massas-vermelho: #D10A0F;
	--cor-massas-verde:    #003E15;

	/* ---------- tipografia ----------
	   Forum: a mesma serifada dos titulos do site anterior.
	   Jost: geometrica leve, no lugar de Avenir Light e DIN Next Light,
	   que sao licenciadas e nao podem ser servidas aqui. */
	--fonte-titulo: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
	--fonte-texto:  "Lato", "Segoe UI", Roboto, Arial, Helvetica, sans-serif;

	/* peso dos titulos e dos nomes de produto, o mesmo do cardapio anterior */
	--peso-titulo: 700;
	--peso-nome:   700;

	/* escala herdada do tema anterior, com entrelinha 1.4 nos titulos */
	--txt-display: 43px;
	--txt-t1:      36px;
	--txt-t2:      30px;
	--txt-t3:      21px;
	--txt-t4:      18px;
	--txt-grande:  18px;
	--txt-corpo:   16px;
	--txt-peq:     14px;
	--txt-legenda: 13px;
	--txt-micro:   12px;

	--altura-titulo: 1.25;
	--altura-texto:  1.6;

	/* ---------- espacamento, escala de 8 ---------- */
	--esp-1:   4px;
	--esp-2:   8px;
	--esp-3:  16px;
	--esp-4:  24px;
	--esp-5:  32px;
	--esp-6:  48px;
	--esp-7:  64px;
	--esp-8:  88px;

	/* ---------- forma ---------- */
	--raio:         4px;
	--raio-imagem:  6px;
	--raio-redondo: 999px;
	--sombra:       0 1px 3px rgba(90,68,51,0.10);
	--sombra-alta:  0 8px 24px rgba(90,68,51,0.14);

	/* ---------- medidas ---------- */
	--largura-conteudo: 1120px;
	--largura-texto:     680px;
	--altura-toque:       48px;
	--altura-cabecalho:   76px;
}

/* tablet */
@media (max-width: 899px){
	:root{
		--txt-display: 34px;
		--txt-t1:      29px;
		--txt-t2:      25px;
		--txt-t3:      20px;
		--esp-8:      64px;
	}
}

/* celular. O corpo nunca desce de 16px. */
@media (max-width: 599px){
	:root{
		--txt-display: 28px;
		--txt-t1:      25px;
		--txt-t2:      22px;
		--txt-t3:      19px;
		--txt-t4:      17px;
		--esp-7:      48px;
		--esp-8:      56px;
	}
}