/* =====================================================================
   VEGETAL 15 — tokens
   Régua: comércio de saúde. Sóbrio, legível, confiável.
   Público 55+ decidindo uma compra de valor médio. Nada de brincadeira.
   ===================================================================== */

:root {
  /* ---- Preto e dourado-oliva do rótulo, em escala ---- */
  --azul-900: #17150f;
  --azul-800: #2b2513;
  --azul-700: #765f12;
  --azul-600: #9b7d18;
  --azul-500: #b8951f;
  --azul-100: #eadfab;
  --azul-050: #fbf8ea;

  /* ---- Ação e sinal ---- */
  --verde: #4f7717;
  --verde-claro: #638f20;
  --verde-fundo: #f0f6e6;
  --vermelho: #c62828;
  --vermelho-fundo: #fdeceb;
  --ouro: #b8951f;

  /* ---- Neutros ---- */
  --tinta: #211f18;
  --texto: #565144;
  --texto-fraco: #7c7667;
  --linha: #ebe5d0;
  --linha-forte: #d9cfaa;
  --fundo-alt: #fbfaf5;
  --branco: #ffffff;

  /* ---- Papéis ---- */
  --fundo: var(--branco);
  --marca: var(--azul-700);

  /* ---- Tipografia
         Corpo em 17px: o comprador tem 60 anos e lê no celular. ---- */
  --f-titulo: "Segoe UI", Arial, sans-serif;
  --f-texto: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --t-hero: clamp(2rem, 4.2vw, 3.25rem);
  --t-h2: clamp(1.5rem, 2.9vw, 2.125rem);
  --t-h3: 1.1875rem;
  --t-corpo: 1.0625rem;
  --t-peq: 0.9375rem;
  --t-micro: 0.8125rem;
  --linha-texto: 1.7;

  /* ---- Espaço ----
     A largura era 1140px. Num monitor de 1512 isso deixava 186px mortos de
     cada lado e espremia os quatro cartões de kit em 250px — largura em que
     O texto auxiliar do checkout quebrava em duas linhas e a duração do kit ficava
     em três. O aperto não era de tipografia, era de continente.

     1320px devolve ~45px a cada cartão sem esticar nenhuma linha de texto: os
     parágrafos têm `max-width` próprio em ch, então quem cresce são os grids,
     que é onde faltava. O respiro vertical entre seções subiu junto — metade
     da sensação de sufoco vinha da distância entre uma seção e a próxima, não
     da largura. */
  --gutter: clamp(1rem, 4vw, 3rem);
  --secao-y: clamp(3.5rem, 6.5vw, 7rem);
  --largura: 1320px;
  --largura-estreita: 860px;

  /* ---- Forma ---- */
  --r: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* ---- Elevação: luz vinda de cima, como objeto sobre mesa ---- */
  --sombra-1: 0 1px 2px rgba(33, 29, 16, .06), 0 2px 6px rgba(33, 29, 16, .05);
  --sombra-2: 0 2px 4px rgba(33, 29, 16, .06), 0 10px 26px rgba(33, 29, 16, .10);
  --sombra-3: 0 4px 8px rgba(33, 29, 16, .08), 0 20px 48px rgba(33, 29, 16, .15);
  --sombra-produto: 0 40px 60px -30px rgba(33, 29, 16, .48);
}