/* =========================================================
   CriAromas — Design System do site (v1, 21/08/2026)
   Fonte da verdade visual. Nenhuma página cria cor, fonte
   ou espaçamento fora daqui (Adendo §35).
   Herdado da direção de arte do feed (12–17/08), com linha
   própria para web: mesmo DNA, outro ritmo.
   ========================================================= */

/* ---------- Fontes (locais, prontas pra FTP) ---------- */
@font-face{font-family:'Fraunces';src:url('../assets/fonts/fraunces-roman.woff2') format('woff2');font-weight:100 900;font-display:swap;}
@font-face{font-family:'Fraunces Italic';src:url('../assets/fonts/fraunces-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap;}
@font-face{font-family:'Epilogue';src:url('../assets/fonts/epilogue-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;}
@font-face{font-family:'Work Sans';src:url('../assets/fonts/worksans-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;}

:root{
  /* ---------- Cor: base 60 / marca 30 / acento 10 ---------- */
  --color-background:#f7f1e8;      /* creme — fundo padrão do site */
  --color-surface:#efe6d7;         /* areia — cartões, seções alternadas */
  --color-surface-deep:#e9ddc9;    /* areia funda — hover de cartão, bordas de foto */
  --color-text:#372a20;            /* tinta — texto padrão */
  --color-text-soft:#4e3e30;       /* tinta suave — corpo longo */
  --color-text-muted:#7a736b;      /* cinza pedra — legendas, fonte citada, rodapé */
  --color-brand:#6b7a4a;           /* oliva — acento de sistema: itálicos, selos, links, CTAs */
  --color-brand-deep:#57633c;      /* oliva escuro — hover de CTA */
  --color-accent:#8c6640;          /* bronze — detalhe raro (filetes, numerais); nunca em massa */
  --color-cream-on-dark:#eadfcb;   /* creme itálico — texto sobre foto/oliva */
  --color-ink-on-dark:#e6e0cf;     /* corpo sobre oliva */
  --color-border:rgba(55,42,32,.14);
  --color-veil:rgba(36,26,18,.45); /* véu de topo sobre foto (nunca véu inteiro) */

  /* ---------- Tipografia ---------- */
  --font-display:'Fraunces',serif;             /* títulos; peso 420, tracking -.015em */
  --font-display-italic:'Fraunces Italic',serif;/* a palavra que carrega emoção */
  --font-body:'Work Sans',sans-serif;          /* corpo de texto */
  --font-interface:'Epilogue',sans-serif;      /* nav, botões, eyebrows, rodapé */

  /* Escala tipográfica (fluida: celular → desktop) */
  --text-hero:clamp(2.6rem,6.5vw,5.2rem);      /* H1 de hero */
  --text-display:clamp(2rem,4.5vw,3.4rem);     /* H2 de seção */
  --text-title:clamp(1.35rem,2.4vw,1.8rem);    /* H3 / cards */
  --text-lead:clamp(1.05rem,1.6vw,1.3rem);     /* parágrafo de abertura */
  --text-body:1.0625rem;                       /* corpo */
  --text-small:.875rem;                        /* legendas */
  --text-eyebrow:.8125rem;                     /* olho de seção: caps, tracking largo */

  --leading-tight:1.08;   /* títulos */
  --leading-body:1.65;    /* corpo */
  --tracking-display:-.015em;
  --tracking-eyebrow:.26em;

  /* ---------- Espaço (o vazio é o luxo) ---------- */
  --space-xs:.5rem;
  --space-sm:1rem;
  --space-md:2rem;
  --space-lg:4rem;
  --space-xl:7rem;      /* respiro entre seções — não apertar */
  --space-section:clamp(4rem,10vw,8.5rem);
  --measure:62ch;       /* largura máxima de leitura */
  --container:1200px;

  /* ---------- Forma ---------- */
  --radius-sm:6px;                /* o dono comparou os dois formatos no ar em */
  --radius-md:14px;               /* 24/08/2026 e escolheu o arredondado com serifa */
  --radius-pill:999px;

  /* ---------- Movimento (contenção editorial) ---------- */
  --transition-fast:.18s ease;
  --transition-normal:.45s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset mínimo + base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--color-background);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:420;
  letter-spacing:var(--tracking-display);
  line-height:var(--leading-tight);
  text-wrap:balance;
}
h1 em,h2 em,h3 em{
  font-family:var(--font-display-italic);
  font-style:italic;font-weight:380;
  color:var(--color-brand);
}

/* ---------- REGRA DE CONTRASTE ----------
   O oliva #6b7a4a é escuro demais para texto pequeno colorido:
   qualquer texto abaixo de 24px sobre fundo oliva tem que ser BRANCO puro
   (4,66:1, passa em AA). Creme, areia e bege sobre oliva reprovam.
   Sobre creme/areia, o texto secundário é #5c534a, não o cinza pedra.
   ---------------------------------------- */

/* Seleção de texto: o azul padrão do navegador destoa de tudo e, sobre a
   faixa oliva, parece defeito. Aqui ela usa a cor da marca. */
::selection{background:var(--color-brand);color:#fff}
::-moz-selection{background:var(--color-brand);color:#fff}

/* ---------- Componentes básicos ---------- */
.eyebrow{
  font-family:var(--font-interface);
  font-size:var(--text-eyebrow);
  font-weight:600;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--color-brand);
}
.btn{
  display:inline-block;
  font-family:var(--font-interface);
  font-weight:600;font-size:.9375rem;letter-spacing:.04em;
  padding:.95em 2.1em;border-radius:var(--radius-pill);
  text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);
  cursor:pointer;border:1.5px solid transparent;
}
/* Um botao so no site inteiro: oliva chapado, letra vazada.
   No hover nao muda a cor, so a letra: engrossa e abre o espacamento.
   As classes antigas continuam valendo para nao quebrar as paginas. */
.btn-primary,.btn-ghost,.btn-on-photo{
  background:var(--color-brand);color:#fff;border-color:var(--color-brand);
  transition:letter-spacing var(--transition-fast),font-weight var(--transition-fast),
             background var(--transition-fast),color var(--transition-fast);
}
.btn-primary:hover,.btn-ghost:hover,.btn-on-photo:hover{
  background:var(--color-brand);color:#fff;font-weight:700;letter-spacing:.07em;
}
.btn-on-photo:hover{background:rgba(255,255,255,.14)}

.container{max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}