/* ============================================================
   TOKENS DE DESIGN — Sassaki Agronegócios
   Fonte: redesign aprovado (preview-pagina-inicial.html, 12/Jun/2026)
   Prefixo --sk- para não colidir com variáveis do tema/plugins.
   Edite os valores AQUI — tudo que consome os tokens se atualiza.
   ============================================================ */

:root {
  /* ---------- Paleta bruta (cores da marca) ---------- */
  --sk-verde:        #1f5135;  /* verde-sálvia/floresta — cor primária */
  --sk-verde-claro:  #3a7d54;  /* verde secundário/hover */
  --sk-verde-escuro: #15241a;  /* verde profundo p/ contraste */
  --sk-terra:        #a9742f;  /* terra/dourado — acento quente */
  --sk-terra-escuro: #8a6420;
  --sk-alerta:       #b5421f;  /* terracota — alerta/erro */
  --sk-areia:        #f6f3ec;  /* areia — fundo claro */
  --sk-branco:       #fffdf9;  /* branco-osso */
  --sk-tinta:        #1c211e;  /* tinta — texto principal */
  --sk-cinza:        #5d655f;  /* cinza-esverdeado — texto secundário */
  --sk-linha:        #e3ddd0;  /* linhas/bordas suaves */

  /* ---------- Tokens semânticos (use estes nos componentes) ---------- */
  --sk-cor-primaria:        var(--sk-verde);
  --sk-cor-primaria-hover:  var(--sk-verde-claro);
  --sk-cor-acento:          var(--sk-terra);
  --sk-cor-perigo:          var(--sk-alerta);
  --sk-cor-fundo:           var(--sk-branco);
  --sk-cor-fundo-suave:     var(--sk-areia);
  --sk-cor-texto:           var(--sk-tinta);
  --sk-cor-texto-suave:     var(--sk-cinza);
  --sk-cor-borda:           var(--sk-linha);

  /* ---------- Tipografia ---------- */
  --sk-fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sk-fonte-corpo:  'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --sk-peso-titulo:  600;
  --sk-peso-corpo:   400;
  --sk-peso-forte:   600;

  /* escala tipográfica (clamp = fluido entre mobile e desktop) */
  --sk-fs-xs:   .78rem;
  --sk-fs-sm:   .88rem;
  --sk-fs-base: 1rem;
  --sk-fs-lg:   1.18rem;
  --sk-fs-xl:   clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  --sk-fs-2xl:  clamp(1.9rem, 1.3rem + 2.6vw, 3rem);

  /* ---------- Espaçamento (escala de 4px) ---------- */
  --sk-esp-1: 4px;
  --sk-esp-2: 8px;
  --sk-esp-3: 12px;
  --sk-esp-4: 16px;
  --sk-esp-5: 24px;
  --sk-esp-6: 32px;
  --sk-esp-7: 48px;
  --sk-esp-8: 64px;

  /* ---------- Raio, sombra, contêiner ---------- */
  --sk-raio-sm:  10px;
  --sk-raio:     16px;
  --sk-raio-lg:  24px;
  --sk-sombra:   0 8px 30px rgba(28, 33, 30, .08);
  --sk-sombra-sm:0 2px 10px rgba(28, 33, 30, .06);
  --sk-largura-conteudo: 1100px;

  /* ---------- Transições ---------- */
  --sk-trans: .2s ease;
}

/* ============================================================
   Utilitários opcionais que consomem os tokens.
   Use nas inserções para herdar a identidade automaticamente.
   (Escopo .sk- para não afetar o resto do site.)
   ============================================================ */

.sk-scope { font-family: var(--sk-fonte-corpo); color: var(--sk-cor-texto); }
.sk-scope h1, .sk-scope h2, .sk-scope h3 { font-family: var(--sk-fonte-titulo); font-weight: var(--sk-peso-titulo); color: var(--sk-cor-primaria); }

.sk-btn {
  display: inline-flex; align-items: center; gap: var(--sk-esp-2);
  background: var(--sk-cor-primaria); color: #fff; text-decoration: none;
  font-family: var(--sk-fonte-corpo); font-weight: var(--sk-peso-forte);
  padding: var(--sk-esp-3) var(--sk-esp-5); border-radius: var(--sk-raio-sm);
  border: none; cursor: pointer; transition: background var(--sk-trans);
}
.sk-btn:hover { background: var(--sk-cor-primaria-hover); }

.sk-card {
  background: var(--sk-cor-fundo); border: 1px solid var(--sk-cor-borda);
  border-radius: var(--sk-raio); box-shadow: var(--sk-sombra-sm);
  padding: var(--sk-esp-5);
}