/*
 * A base da marca: tokens, tipos de letra e as poucas peças que se repetem
 * (etiqueta, assinatura, botão, campo). A loja e o painel tiram tudo daqui.
 *
 * Paleta de origem: preto #141210 · cinza escuro #2B2724 · terra #7A5A3C
 * · areia #B8A48C · creme #EDE6DB
 */

@font-face{
  font-family:"Syncopate";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/Syncopate-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat";font-style:normal;font-weight:200 700;font-display:swap;
  src:url("fonts/Montserrat-Variable.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Cormorant";font-style:italic;font-weight:300 600;font-display:swap;
  src:url("fonts/CormorantGaramond-Italic-Variable.woff2") format("woff2-variations");
}

:root{
  --preto:#141210;
  --carvao:#2B2724;
  --terra:#7A5A3C;
  --areia:#B8A48C;
  --creme:#EDE6DB;

  /* largura máxima do conteúdo: em ecrãs grandes a loja fica ao centro.
     --margem é a margem lateral do texto; --recuo a das grelhas de fotos,
     que em ecrãs pequenos vão de ponta a ponta */
  --largura:1440px;
  --margem:max(clamp(16px,4vw,40px), calc((100% - var(--largura)) / 2));
  --recuo:max(0px, calc((100% - var(--largura)) / 2));

  --papel:#EDE6DB;
  --tinta:#141210;
  --tinta-suave:#3A342E;
  --linha:rgba(184,164,140,.55);
  --linha-escura:rgba(237,230,219,.18);

  /* a areia e a terra são cores de linha e de fundo. Para letra pequena
     não chegam: areia sobre creme dá 1,9 de contraste, terra sobre preto
     dá 3. Estes dois são os mesmos tons, puxados até se lerem (≥ 4,5). */
  --areia-texto:#78634A;   /* sobre creme */
  --terra-texto:#B7906C;   /* sobre preto e carvão */

  /* só no painel */
  --carvao-claro:#332E2A;
  --areia-discreta:#A49685;

  --nome:"Syncopate",Impact,sans-serif;
  --texto:"Montserrat",system-ui,-apple-system,sans-serif;
  --alma:"Cormorant","Times New Roman",serif;

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

/* ---- as vozes ---- */
.ui-etiqueta{
  font-family:var(--texto);font-weight:400;
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--terra);margin:0;
}
.ui-alma{
  font-family:var(--alma);font-style:italic;font-weight:300;
  font-size:clamp(22px,2.6vw,36px);line-height:1.32;margin:0;
}
.ui-filete{width:56px;height:1px;border:0;margin:0;background:var(--areia)}

/* ---- botão ---- */
.ui-botao{
  display:inline-block;
  -webkit-appearance:none;appearance:none;background:none;border-radius:0;
  border:1px solid var(--linha);
  font-family:var(--texto);font-weight:400;cursor:pointer;text-align:center;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--tinta);padding:15px 32px;text-decoration:none;
  transition:background .5s var(--curva),color .5s var(--curva),border-color .5s var(--curva);
}
.ui-botao:hover{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.ui-botao--cheio{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.ui-botao--cheio:hover{background:none;color:var(--tinta)}

/* ---- campo: um filete, nunca uma caixa ---- */
.ui-campo{display:grid;gap:9px}
.ui-campo label{
  font-family:var(--texto);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--terra);
}
.ui-campo textarea,
.ui-campo input[type="text"]{
  width:100%;
  font-family:var(--texto);font-weight:300;
  /* 16px de propósito: abaixo disso o Safari do iPhone amplia a página a
     cada toque no campo */
  font-size:16px;line-height:1.7;color:var(--tinta);
  background:none;border:0;border-bottom:1px solid var(--linha);
  border-radius:0;padding:12px 2px;resize:vertical;
  transition:border-color .5s var(--curva);
}
.ui-campo textarea:focus,
.ui-campo input[type="text"]:focus{outline:0;border-bottom-color:var(--terra)}
.ui-campo ::placeholder{color:var(--areia-texto);opacity:.85}

/* o nome em texto, quando a loja ainda não tem logótipo */
.marca-texto{font-family:var(--nome);letter-spacing:.2em;line-height:1;white-space:nowrap}

/* o isco existe para os robôs, e mais ninguém o pode ver */
.ui-isco{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}