/* Varanda da Nara · design tokens (fonte única para app, páginas e PDFs)
   Importar com <link rel="stylesheet" href="/marca/tokens.css"> ou copiar o bloco :root.
   Regra: nada de roxo, nada de preto místico. Luz de fim de tarde em Olinda. */

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

:root {
  /* Paleta */
  --creme: #F6EEDF;        /* fundo principal */
  --creme-2: #EFE3CC;      /* superfícies, cards */
  --papel: #FBF7EF;        /* cards claros */
  --tinta: #2B211B;        /* texto (marrom-café, nunca preto puro) */
  --tinta-2: #5C4A3E;      /* texto secundário */
  --terracota: #B5523B;    /* cor da marca, CTAs */
  --terracota-escura: #8E3B28;
  --mostarda: #D9A23F;     /* destaques, estrelas, selos */
  --mostarda-clara: #F1D79A;
  --folha: #5E7A4A;        /* sucesso, natureza */
  --folha-clara: #DCE5CF;
  --anil: #2F4A7A;         /* noite, céu, links, roda do mapa */
  --anil-escuro: #1F3157;  /* seções de "céu" (no lugar do preto) */
  --anil-claro: #DDE3EE;
  --linha: rgba(43,33,27,.14);

  /* Tipografia */
  --f-titulo: "Fraunces", Georgia, "Times New Roman", serif; /* usar opsz alto, itálico para ênfase */
  --f-texto: "DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --t-hero: clamp(2.4rem, 6vw, 4.6rem);
  --t-h2: clamp(1.8rem, 4vw, 2.8rem);
  --t-h3: 1.35rem;
  --t-corpo: 1.0625rem;  /* 17px */
  --t-mini: .8125rem;

  /* Forma */
  --raio: 18px;
  --raio-pill: 999px;
  --arco: 50% 50% 0 0 / 38% 38% 0 0; /* topo em arco, janela de Olinda: usar em fotos */
  --sombra: 0 1px 0 rgba(43,33,27,.05), 0 14px 40px -18px rgba(91,52,30,.35);
  --sombra-cta: 0 10px 24px -10px rgba(142,59,40,.65);
  --largura: 1120px;
  --largura-texto: 680px;
}

/* Base sugerida (opcional) */
.vn-base { background: var(--creme); color: var(--tinta); font: 400 var(--t-corpo)/1.65 var(--f-texto); -webkit-font-smoothing: antialiased; }
.vn-base h1, .vn-base h2, .vn-base h3 { font-family: var(--f-titulo); font-weight: 500; letter-spacing: -.015em; line-height: 1.08; font-variation-settings: "opsz" 144, "SOFT" 50; }
.vn-base em { font-style: italic; color: var(--terracota); }
.vn-eyebrow { font: 600 .78rem/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--terracota); }
.vn-btn { display: inline-flex; align-items: center; gap: .6em; padding: 1rem 1.6rem; border-radius: var(--raio-pill); background: var(--terracota); color: #fff; font: 700 1.02rem/1 var(--f-texto); text-decoration: none; border: 0; box-shadow: var(--sombra-cta); cursor: pointer; transition: transform .15s, background .15s; }
.vn-btn:hover { background: var(--terracota-escura); transform: translateY(-1px); }
.vn-btn--ghost { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.vn-card { background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra); border: 1px solid var(--linha); }
.vn-foto-arco { border-radius: var(--arco); object-fit: cover; }
/* Grão de papel: aplicar em seções grandes */
.vn-grao { position: relative; isolation: isolate; }
.vn-grao::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }