/* Pele Cattéia (packages/tokens): Vinho e Sol mandam, Creme só como papel, Carvão no texto. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --vinho: #5e1b22;
  --sol: #e9b13b;
  --creme: #f1e8d8;
  --papel-claro: #fbf5ea;
  --carvao: #2b1d18;
  --carvao-apoio: #665247;
  --linha: #d0c5b7;
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --margem: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--creme);
  color: var(--carvao);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; display: flex; flex-direction: column; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--margem); }

/* Vinho: o nome, a assinatura e o que é. */
.hero {
  background: var(--vinho);
  color: var(--creme);
  padding: 72px 0 64px;
  flex: 1;
}
.hero h1 {
  font: 500 clamp(72px, 19vw, 184px)/0.95 var(--serif);
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
}
.hero .assinatura {
  font: italic 400 clamp(26px, 6vw, 40px)/1.15 var(--serif);
  color: var(--sol);
  margin-top: 16px;
}
.hero .sobre {
  max-width: 34em;
  margin-top: 40px;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.55;
}

/* Sol: quando chega e como falar com a gente. */
.lojas {
  background: var(--sol);
  color: var(--carvao);
  padding: 40px 0;
}
.lojas .wrap { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: baseline; justify-content: space-between; }
.lojas h2 { font: 500 clamp(26px, 5vw, 40px)/1.1 var(--serif); letter-spacing: -0.02em; }
.lojas p { font-size: 17px; }
.lojas a { font-weight: 500; }

/* Creme: o papel do rodapé. */
.rodape { padding: 32px 0 40px; font-size: 15px; color: var(--carvao-apoio); }
.rodape .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.rodape nav { display: flex; gap: 24px; }
.rodape nav a { color: var(--carvao); }

/* Páginas de texto (Termos e Privacidade). */
.doc-topo { background: var(--vinho); color: var(--creme); padding: 24px 0; }
.doc-topo a { font: 500 28px/1 var(--serif); text-decoration: none; letter-spacing: -0.02em; }
.doc { padding: 48px 0 56px; display: block; }
.doc .wrap { max-width: 720px; }
.doc h1 { font: 500 clamp(30px, 6vw, 44px)/1.1 var(--serif); letter-spacing: -0.02em; color: var(--vinho); }
.doc .rascunho {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--papel-claro);
  border: 1px solid var(--linha);
  border-radius: 12px;
  font-size: 15px;
}
.doc h2 { font: 500 22px/1.25 var(--serif); color: var(--vinho); margin-top: 40px; }
.doc p, .doc li { margin-top: 12px; }
.doc ul { padding-left: 20px; }
.doc .atualizado { margin-top: 12px; font-size: 15px; color: var(--carvao-apoio); }

@media (min-width: 768px) {
  :root { --margem: 40px; }
  .hero { padding: 120px 0 104px; }
  .lojas { padding: 48px 0; }
}