/* ============================================================
   Fonte — Archivo variável, servida do próprio repositório

   Por que Archivo: o wordmark CRIVÊ é um grotesco claro e largo, e o
   eixo de largura desta família encosta nele. Um grotesco preciso lê
   como curadora com critério; a serifa didone de alto contraste, que é
   o reflexo automático para beleza, leria como revista de moda — que
   não é o posicionamento.

   Uma família só, em vários pesos e larguras, em vez de um par tímido.
   O itálico real carrega a ênfase que antes era Georgia.

   Servida localmente de propósito: mantém a regra de zero dependências
   externas, funciona offline e não vaza visita para CDN de terceiro.
   Dois arquivos variáveis (~192 KB) cobrem peso 100–900 e largura
   62–125 nos dois estilos — menos que três pesos estáticos.

   Licença OFL. Baixada do Google Fonts, subconjunto latino.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* Fallback com métricas casadas para o texto não pular quando a fonte
   chega. Os números saem das métricas reais do Archivo (unitsPerEm 1000,
   x-height 526, ascent 878, descent 210) comparadas às da Arial. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 101.4%;
  ascent-override: 86.6%;
  descent-override: 20.7%;
  line-gap-override: 0%;
}

:root {
  /* ---- Cores — extraídas do logo original ---- */
  --cr-brown: #4A342A;
  --cr-brown-deep: #2E201A;
  --cr-cream: #F0DDB8;
  --cr-gold: #C9A227;

  /* Champanhe: 35% do dourado sobre o creme. Existe para a faixa de
     chamada final, onde o dourado cheio gritava. Mantém o calor da marca
     sem virar amarelo de aviso, e o texto marrom sobre ele dá 7.07:1. */
  --cr-champanhe: #E2C885;

  /* Variações derivadas, para não espalhar rgba() pelo código */
  /* Dentro do card o fundo é mais claro que o da página (creme 10% sobre
     marrom = #5B4538), e o creme-70 cai para 4.19:1 ali. Este degrau existe
     para o texto secundário do card passar em AA. */
  --cr-cream-80: rgba(240, 221, 184, 0.8);
  --cr-cream-70: rgba(240, 221, 184, 0.7);
  --cr-cream-50: rgba(240, 221, 184, 0.5);
  --cr-cream-20: rgba(240, 221, 184, 0.2);
  --cr-cream-10: rgba(240, 221, 184, 0.1);
  --cr-gold-40: rgba(201, 162, 39, 0.4);

  /* ---- Tipografia ---- */
  --fonte-sans: 'Archivo', 'Archivo Fallback', Arial, sans-serif;

  /* Serifa só para a ênfase dourada do display. Escolha do dono da marca,
     ciente de que serifa itálica em display é o traço do lane
     editorial-revista. Fonte de sistema: não custa download. */
  --fonte-serif: Georgia, 'Times New Roman', serif;

  /* Escala modular de razão 1.25. Cinco degraus fixos para texto, três
     fluidos para display. Nada de tamanho avulso fora daqui. */
  --t-micro: 0.75rem;    /* 12px — rótulos, aviso legal */
  --t-sm: 0.875rem;      /* 14px — apoio, metadados */
  --t-base: 1rem;        /* 16px — corpo; nunca abaixo disto */
  --t-lg: 1.25rem;       /* 20px — subtítulo, texto de destaque */
  --t-xl: 1.5625rem;     /* 25px — subtítulo grande */

  /* Fluidos: o teto fica em 5rem (80px). Acima disso a página grita.
     A razão teto/piso fica abaixo de 2× para o zoom não quebrar. */
  --t-2xl: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem);   /* 28 → 44px */
  --t-3xl: clamp(2.25rem, 1.55rem + 2.8vw, 3rem);      /* 36 → 48px */
  /* Teto de 4.75rem (76px). Sobe dos 68px anteriores porque a palavra
     enfatizada agora é serifada e ocupa menos largura que o grotesco
     expandido — cabe mais tipo na mesma coluna. Fica abaixo do teto de
     6rem, e a razão teto/piso segue em 1.7x. */
  /* O piso é 2.25rem (36px), não 2.75rem: a 44px o trecho "ofertas de
     beleza" não cabe nos 327px úteis de um celular de 375px e o título
     quebrava em quatro linhas, com "ofertas" órfã. A 36px cabe em três. */
  /* Teto de 3.75rem (60px), não 72px: a manchete agora tem duas frases e
     quase o dobro de caracteres. No tamanho anterior ela ocupava cinco
     linhas e empurrava o botão para fora da primeira dobra. */
  --t-hero: clamp(1.875rem, 1.0rem + 3.85vw, 3.75rem); /* 30 → 60px */

  /* Pesos. O padrão da variável é 600, então todo peso é declarado. */
  --peso-leve: 300;      /* display */
  --peso-normal: 400;    /* corpo */
  --peso-medio: 500;     /* ênfase, rótulos */
  --peso-forte: 600;     /* preços, botões */

  /* Larguras. O display vai expandido para ecoar o wordmark. */
  --largura-display: 116%;
  --largura-normal: 100%;

  /* Entrelinha. Texto claro sobre fundo escuro pede mais respiro:
     o corpo fica em 1.6, não em 1.5. */
  --lh-display: 1.06;
  --lh-titulo: 1.18;
  --lh-apertado: 1.35;
  --lh-corpo: 1.6;

  /* Tracking. Quatro valores, cada um com um papel — não oito avulsos.
     O corpo leva um toque positivo pela mesma razão da entrelinha. */
  --ls-display: 0.005em;
  --ls-corpo: 0.01em;
  --ls-rotulo: 0.16em;
  --ls-wordmark: 0.22em;

  /* ---- Espaçamento ---- */
  --esp-xs: 8px;
  --esp-sm: 16px;
  --esp-md: 24px;
  --esp-lg: 48px;
  --esp-xl: 96px;

  /* ---- Forma e movimento ---- */
  --raio: 12px;
  --raio-pill: 999px;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.5s;

  /* ---- Layout ---- */
  --largura-max: 1200px;
}